diff --git a/docs/en/Getting-Started-Angular-Template.md b/docs/en/Getting-Started-Angular-Template.md
index bdc5658e55..9a4fddcf2a 100644
--- a/docs/en/Getting-Started-Angular-Template.md
+++ b/docs/en/Getting-Started-Angular-Template.md
@@ -123,4 +123,4 @@ The startup template includes the **identity management** and **tenant managemen
 
 ### What's Next?
 
-* [Application development tutorial](Tutorials/Part-1.md?UI=NG)
+* [Application development tutorial](Tutorials/Part-1)
diff --git a/docs/en/Getting-Started-AspNetCore-MVC-Template.md b/docs/en/Getting-Started-AspNetCore-MVC-Template.md
index fd8ef3a81a..311bb8b4dc 100644
--- a/docs/en/Getting-Started-AspNetCore-MVC-Template.md
+++ b/docs/en/Getting-Started-AspNetCore-MVC-Template.md
@@ -101,4 +101,4 @@ The startup template includes the **identity management** and **tenant managemen
 
 ### What's Next?
 
-* [Application development tutorial](Tutorials/Part-1.md?UI=MVC)
+* [Application development tutorial](Tutorials/Part-1.md)
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/CardsDemo/Default.cshtml b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/CardsDemo/Default.cshtml
index 1e5e491233..d40637735c 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/CardsDemo/Default.cshtml
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/CardsDemo/Default.cshtml
@@ -134,7 +134,7 @@
             </abp-blockquote>
         </abp-card-body>
     </abp-card>
-    <abp-card  class="text-center w-50">
+    <abp-card class="text-center w-50">
         <abp-card-header>Featured</abp-card-header>
         <abp-card-body>
             <abp-card-title> Special title treatment</abp-card-title>
@@ -169,6 +169,83 @@
     </abp-card>
 </abp-component-demo-section>
 
+<abp-component-demo-section title="Image overlays" view-path="@CardsDemoViewComponent.ViewPath">
+    <abp-card>
+        <img abp-card-image="Top" src="https://via.placeholder.com/1150x270.png?text=Image+cap" />
+        <div class="card-img-overlay">
+            <abp-card-title>Card Title</abp-card-title>
+            <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
+            <a abp-button="Primary" href="#"> Go somewhere</a>
+        </div>
+    </abp-card>
+</abp-component-demo-section>
+
+<abp-component-demo-section title="Border" view-path="@CardsDemoViewComponent.ViewPath">
+    <abp-card class="border-primary mb-3" style="width: 18rem;">
+        <abp-card-header>Header</abp-card-header>
+        <abp-card-body class="text-primary">
+            <abp-card-title>Primary card title</abp-card-title>
+            <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
+        </abp-card-body>
+    </abp-card>
+
+    <abp-card class="border-secondary mb-3" style="width: 18rem;">
+        <abp-card-header>Header</abp-card-header>
+        <abp-card-body class="text-secondary">
+            <abp-card-title>Secondary card title</abp-card-title>
+            <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
+        </abp-card-body>
+    </abp-card>
+
+    <abp-card class="border-success mb-3" style="width: 18rem;">
+        <abp-card-header>Header</abp-card-header>
+        <abp-card-body class="text-success">
+            <abp-card-title>Success card title</abp-card-title>
+            <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
+        </abp-card-body>
+    </abp-card>
+
+    <abp-card class="border-danger mb-3" style="width: 18rem;">
+        <abp-card-header>Header</abp-card-header>
+        <abp-card-body class="text-danger">
+            <abp-card-title>Danger card title</abp-card-title>
+            <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
+        </abp-card-body>
+    </abp-card>
+
+    <abp-card class="border-warning mb-3" style="width: 18rem;">
+        <abp-card-header>Header</abp-card-header>
+        <abp-card-body class="text-warning">
+            <abp-card-title>Warning card title</abp-card-title>
+            <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
+        </abp-card-body>
+    </abp-card>
+
+    <abp-card class="border-info mb-3" style="width: 18rem;">
+        <abp-card-header>Header</abp-card-header>
+        <abp-card-body class="text-info">
+            <abp-card-title>Info card title</abp-card-title>
+            <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
+        </abp-card-body>
+    </abp-card>
+
+    <abp-card class="border-light mb-3" style="width: 18rem;">
+        <abp-card-header>Header</abp-card-header>
+        <abp-card-body>
+            <abp-card-title>Light card title</abp-card-title>
+            <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
+        </abp-card-body>
+    </abp-card>
+
+    <abp-card class="border-dark mb-3" style="width: 18rem;">
+        <abp-card-header>Header</abp-card-header>
+        <abp-card-body class="text-dark">
+            <abp-card-title>Dark card title</abp-card-title>
+            <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
+        </abp-card-body>
+    </abp-card>
+</abp-component-demo-section>
+
 <abp-component-demo-section title="Card Styles" view-path="@CardsDemoViewComponent.ViewPath">
     <abp-card background="Primary" class="mb-3" style="max-width: 18rem;">
         <abp-card-header>Featured</abp-card-header>
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/ListGroupsDemo/Default.cshtml b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/ListGroupsDemo/Default.cshtml
index ff11769976..69dfbd24c4 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/ListGroupsDemo/Default.cshtml
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/ListGroupsDemo/Default.cshtml
@@ -18,7 +18,7 @@
     </abp-list-group>
 </abp-component-demo-section>
 
-<abp-component-demo-section title="Links and buttons" view-path="@ListGroupsDemoViewComponent.ViewPath">
+<abp-component-demo-section title="Links" view-path="@ListGroupsDemoViewComponent.ViewPath">
     <abp-list-group>
         <abp-list-group-item href="#" active="true">Cras justo odio</abp-list-group-item>
         <abp-list-group-item href="#">Dapibus ac facilisis in</abp-list-group-item>
@@ -27,12 +27,12 @@
     </abp-list-group>
 </abp-component-demo-section>
 
-<abp-component-demo-section title="Links and buttons 2" view-path="@ListGroupsDemoViewComponent.ViewPath">
+<abp-component-demo-section title="Buttons" view-path="@ListGroupsDemoViewComponent.ViewPath">
     <abp-list-group>
-        <abp-list-group-item href="#" active="true">Cras justo odio</abp-list-group-item>
-        <abp-list-group-item href="#">Dapibus ac facilisis in</abp-list-group-item>
-        <abp-list-group-item href="#">Morbi leo risus</abp-list-group-item>
-        <abp-list-group-item href="#" disabled="true">Vestibulum at eros</abp-list-group-item>
+        <abp-list-group-item tag-type="Button" active="true">Cras justo odio</abp-list-group-item>
+        <abp-list-group-item tag-type="Button">Dapibus ac facilisis in</abp-list-group-item>
+        <abp-list-group-item tag-type="Button">Morbi leo risus</abp-list-group-item>
+        <abp-list-group-item tag-type="Button" disabled="true">Vestibulum at eros</abp-list-group-item>
     </abp-list-group>
 </abp-component-demo-section>
 
@@ -59,7 +59,7 @@
     </abp-list-group>
 </abp-component-demo-section>
 
-<abp-component-demo-section title="Contextual classes 2" view-path="@ListGroupsDemoViewComponent.ViewPath">
+<abp-component-demo-section title="Contextual classes with link" view-path="@ListGroupsDemoViewComponent.ViewPath">
     <abp-list-group>
         <abp-list-group-item href="#">Cras justo odio</abp-list-group-item>
         <abp-list-group-item href="#" type="Primary">A simple Primary list group item</abp-list-group-item>
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/NavbarsDemo/Default.cshtml b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/NavbarsDemo/Default.cshtml
new file mode 100644
index 0000000000..f0c5113054
--- /dev/null
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/NavbarsDemo/Default.cshtml
@@ -0,0 +1,71 @@
+@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.NavbarsDemo
+
+<abp-component-demo-section title="Example" view-path="@NavbarsDemoViewComponent.ViewPath">
+    <abp-nav-bar size="Lg" navbar-style="Dark_Dark">
+        <a abp-navbar-brand href="#">Navbar</a>
+        <abp-navbar-toggle>
+            <abp-navbar-nav>
+                <abp-nav-item active="true">
+                    <a abp-nav-link href="#">Home <span class="sr-only">(current)</span></a>
+                </abp-nav-item>
+                <abp-nav-item>
+                    <a abp-nav-link href="#">Link</a>
+                </abp-nav-item>
+                <abp-nav-item dropdown="true">
+                    <abp-dropdown>
+                        <abp-dropdown-button nav-link="true" text="Dropdown" />
+                        <abp-dropdown-menu>
+                            <abp-dropdown-header>Dropdown header</abp-dropdown-header>
+                            <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item>
+                            <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item>
+                            <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                            <abp-dropdown-divider />
+                            <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
+                        </abp-dropdown-menu>
+                    </abp-dropdown>
+                </abp-nav-item>
+                <abp-nav-item>
+                    <a abp-nav-link disabled="true" href="#">Disabled</a>
+                </abp-nav-item>
+            </abp-navbar-nav>
+            <span abp-navbar-text>
+                Sample Text
+            </span>
+        </abp-navbar-toggle>
+    </abp-nav-bar>
+</abp-component-demo-section>
+
+<abp-component-demo-section title="Example" view-path="@NavbarsDemoViewComponent.ViewPath">
+    <abp-nav-bar size="Lg" navbar-style="Dark_Primary">
+        <a abp-navbar-brand href="#">Navbar</a>
+        <abp-navbar-toggle>
+            <abp-navbar-nav>
+                <abp-nav-item active="true">
+                    <a abp-nav-link href="#">Home <span class="sr-only">(current)</span></a>
+                </abp-nav-item>
+                <abp-nav-item>
+                    <a abp-nav-link href="#">Link</a>
+                </abp-nav-item>
+                <abp-nav-item dropdown="true">
+                    <abp-dropdown>
+                        <abp-dropdown-button nav-link="true" text="Dropdown" />
+                        <abp-dropdown-menu>
+                            <abp-dropdown-header>Dropdown header</abp-dropdown-header>
+                            <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item>
+                            <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item>
+                            <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                            <abp-dropdown-divider />
+                            <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
+                        </abp-dropdown-menu>
+                    </abp-dropdown>
+                </abp-nav-item>
+                <abp-nav-item>
+                    <a abp-nav-link disabled="true" href="#">Disabled</a>
+                </abp-nav-item>
+            </abp-navbar-nav>
+            <span abp-navbar-text>
+                Sample Text
+            </span>
+        </abp-navbar-toggle>
+    </abp-nav-bar>
+</abp-component-demo-section>
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/NavbarsDemo/NavbarsDemoViewComponent.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/NavbarsDemo/NavbarsDemoViewComponent.cs
new file mode 100644
index 0000000000..e282f1b923
--- /dev/null
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/NavbarsDemo/NavbarsDemoViewComponent.cs
@@ -0,0 +1,16 @@
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.NavbarsDemo
+{
+    [Widget]
+    public class NavbarsDemoViewComponent : AbpViewComponent
+    {
+        public const string ViewPath = "/Views/Components/Themes/Shared/Demos/NavbarsDemo/Default.cshtml";
+
+        public IViewComponentResult Invoke()
+        {
+            return View(ViewPath);
+        }
+    }
+}
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/NavsDemo/Default.cshtml b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/NavsDemo/Default.cshtml
index 033fefa45b..1423aea2b6 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/NavsDemo/Default.cshtml
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/NavsDemo/Default.cshtml
@@ -8,6 +8,16 @@
         <abp-nav-item>
             <a abp-nav-link href="#">Longer nav link</a>
         </abp-nav-item>
+        <abp-nav-item class="dropdown">
+            <abp-dropdown>
+                <abp-dropdown-button class="text-primary" text="Dropdown button" />
+                <abp-dropdown-menu>
+                    <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                    <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                    <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                </abp-dropdown-menu>
+            </abp-dropdown>
+        </abp-nav-item>
         <abp-nav-item>
             <a abp-nav-link href="#">link</a>
         </abp-nav-item>
@@ -17,37 +27,104 @@
     </abp-nav>
 </abp-component-demo-section>
 
-<abp-component-demo-section title="Base nav 2" view-path="@NavsDemoViewComponent.ViewPath">
-    <abp-nav-bar size="Lg" navbar-style="Dark_Warning">
-        <a abp-navbar-brand href="#">Navbar</a>
-        <abp-navbar-toggle>
-            <abp-navbar-nav>
-                <abp-nav-item active="true">
-                    <a abp-nav-link href="#">Home <span class="sr-only">(current)</span></a>
-                </abp-nav-item>
-                <abp-nav-item>
-                    <a abp-nav-link href="#">Link</a>
-                </abp-nav-item>
-                <abp-nav-item dropdown="true">
-                    <abp-dropdown>
-                        <abp-dropdown-button nav-link="true" text="Dropdown" />
-                        <abp-dropdown-menu>
-                            <abp-dropdown-header>Dropdown header</abp-dropdown-header>
-                            <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item>
-                            <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item>
-                            <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
-                            <abp-dropdown-divider />
-                            <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
-                        </abp-dropdown-menu>
-                    </abp-dropdown>
-                </abp-nav-item>
-                <abp-nav-item>
-                    <a abp-nav-link disabled="true" href="#">Disabled</a>
-                </abp-nav-item>
-            </abp-navbar-nav>
-            <span abp-navbar-text>
-                Sample Text
-            </span>
-        </abp-navbar-toggle>
-    </abp-nav-bar>
+<abp-component-demo-section title="Alignment" view-path="@NavsDemoViewComponent.ViewPath">
+    <abp-nav nav-style="Pill" align="Start">
+        <abp-nav-item>
+            <a abp-nav-link active="true" href="#">Active</a>
+        </abp-nav-item>
+        <abp-nav-item>
+            <a abp-nav-link href="#">Longer nav link</a>
+        </abp-nav-item>
+        <abp-nav-item class="dropdown">
+            <abp-dropdown>
+                <abp-dropdown-button class="text-primary" text="Dropdown button" />
+                <abp-dropdown-menu>
+                    <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                    <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                    <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                </abp-dropdown-menu>
+            </abp-dropdown>
+        </abp-nav-item>
+        <abp-nav-item>
+            <a abp-nav-link href="#">link</a>
+        </abp-nav-item>
+        <abp-nav-item>
+            <a abp-nav-link disabled="true" href="#">disabled</a>
+        </abp-nav-item>
+    </abp-nav>
+    <abp-nav nav-style="Pill" align="Center">
+        <abp-nav-item>
+            <a abp-nav-link active="true" href="#">Active</a>
+        </abp-nav-item>
+        <abp-nav-item>
+            <a abp-nav-link href="#">Longer nav link</a>
+        </abp-nav-item>
+        <abp-nav-item class="dropdown">
+            <abp-dropdown>
+                <abp-dropdown-button class="text-primary" text="Dropdown button" />
+                <abp-dropdown-menu>
+                    <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                    <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                    <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                </abp-dropdown-menu>
+            </abp-dropdown>
+        </abp-nav-item>
+        <abp-nav-item>
+            <a abp-nav-link href="#">link</a>
+        </abp-nav-item>
+        <abp-nav-item>
+            <a abp-nav-link disabled="true" href="#">disabled</a>
+        </abp-nav-item>
+    </abp-nav>
+    <abp-nav nav-style="Pill" align="End">
+        <abp-nav-item>
+            <a abp-nav-link active="true" href="#">Active</a>
+        </abp-nav-item>
+        <abp-nav-item>
+            <a abp-nav-link href="#">Longer nav link</a>
+        </abp-nav-item>
+        <abp-nav-item class="dropdown">
+            <abp-dropdown>
+                <abp-dropdown-button class="text-primary" text="Dropdown button" />
+                <abp-dropdown-menu>
+                    <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                    <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                    <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                </abp-dropdown-menu>
+            </abp-dropdown>
+        </abp-nav-item>
+        <abp-nav-item>
+            <a abp-nav-link href="#">link</a>
+        </abp-nav-item>
+        <abp-nav-item>
+            <a abp-nav-link disabled="true" href="#">disabled</a>
+        </abp-nav-item>
+    </abp-nav>
 </abp-component-demo-section>
+
+<abp-component-demo-section title="Vertical" view-path="@NavsDemoViewComponent.ViewPath">
+    <abp-nav nav-style="PillVertical" align="Start">
+        <abp-nav-item>
+            <a abp-nav-link active="true" href="#">Active</a>
+        </abp-nav-item>
+        <abp-nav-item>
+            <a abp-nav-link href="#">Longer nav link</a>
+        </abp-nav-item>
+        <abp-nav-item class="dropdown">
+            <abp-dropdown>
+                <abp-dropdown-button class="text-primary" text="Dropdown button" />
+                <abp-dropdown-menu>
+                    <abp-dropdown-item href="#">Action</abp-dropdown-item>
+                    <abp-dropdown-item href="#">Another action</abp-dropdown-item>
+                    <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+                </abp-dropdown-menu>
+            </abp-dropdown>
+        </abp-nav-item>
+        <abp-nav-item>
+            <a abp-nav-link href="#">link</a>
+        </abp-nav-item>
+        <abp-nav-item>
+            <a abp-nav-link disabled="true" href="#">disabled</a>
+        </abp-nav-item>
+    </abp-nav>
+</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/Demos/PopoversDemo/Default.cshtml b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/PopoversDemo/Default.cshtml
index 8e171cb640..1efee90533 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/PopoversDemo/Default.cshtml
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/Demos/PopoversDemo/Default.cshtml
@@ -1,16 +1,16 @@
 @using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.PopoversDemo
 
 <abp-component-demo-section title="Example" view-path="@PopoversDemoViewComponent.ViewPath">
-    <abp-button abp-popover="Hi, i'm popover content!">
+    <abp-button button-type="Outline_Secondary" abp-popover="Hi, i'm popover content!">
         Popover Default
     </abp-button>
-    <abp-button abp-popover-top="Hi, i'm popover content!" title="Popover Title">
+    <abp-button button-type="Outline_Secondary" abp-popover-top="Hi, i'm popover content!" title="Popover Title">
         Popover With Title
     </abp-button>
-    <abp-button abp-popover-right="Hi, i'm popover content!" title="Popover Title" dismissible="true">
+    <abp-button button-type="Outline_Secondary" abp-popover-right="Hi, i'm popover content!" title="Popover Title" dismissible="true">
         Dismissible Popover
     </abp-button>
-    <abp-button abp-popover-left="Hi, i'm popover content!" title="Popover Title" disabled="true">
+    <abp-button button-type="Outline_Danger" abp-popover-left="Hi, i'm popover content!" title="Popover Title" disabled="true">
         Disabled Popover
     </abp-button>
 </abp-component-demo-section>
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
index ed14ca2f16..20f0332c8b 100644
--- 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
@@ -1,4 +1,5 @@
 using System.Collections.Generic;
+using System.Linq;
 using System.Threading.Tasks;
 using Volo.Abp.UI.Navigation;
 
@@ -38,6 +39,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo
                 new ApplicationMenuItem("BasicThemeDemo.Components.ListGroups", "List Groups", url: "/Components/ListGroups"),
                 new ApplicationMenuItem("BasicThemeDemo.Components.Modals", "Modals", url: "/Components/Modals"),
                 new ApplicationMenuItem("BasicThemeDemo.Components.Navs", "Navs", url: "/Components/Navs"),
+                new ApplicationMenuItem("BasicThemeDemo.Components.Navbars", "Navbars", url: "/Components/Navbars"),
                 new ApplicationMenuItem("BasicThemeDemo.Components.Paginator", "Paginator", url: "/Components/Paginator"),
                 new ApplicationMenuItem("BasicThemeDemo.Components.Popovers", "Popovers", url: "/Components/Popovers"),
                 new ApplicationMenuItem("BasicThemeDemo.Components.ProgressBars", "Progress Bars", url: "/Components/ProgressBars"),
@@ -45,8 +47,10 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo
                 new ApplicationMenuItem("BasicThemeDemo.Components.Tabs", "Tabs", url: "/Components/Tabs"),
                 new ApplicationMenuItem("BasicThemeDemo.Components.Tooltips", "Tooltips", url: "/Components/Tooltips")
             };
-
-            items.ForEach(x => menuItem.AddItem(x));
+            
+            items.OrderBy(x => x.Name)
+                 .ToList()
+                 .ForEach(x => menuItem.AddItem(x));
 
             context.Menu.AddItem(menuItem);
         }
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Alerts/Index.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Alerts/Index.cshtml
index d02be8912e..245cc0cacd 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Alerts/Index.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Alerts/Index.cshtml
@@ -1,7 +1,6 @@
 @page
 @using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.AlertsDemo
 @model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Alerts.IndexModel
-
 <h2>Alerts</h2>
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/alerts/" target="_blank"> Bootstrap Alert</a>.</p>
 
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Badges/Index.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Badges/Index.cshtml
index 21e8be5bcf..31a03ec2a9 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Badges/Index.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Badges/Index.cshtml
@@ -1,7 +1,6 @@
 @page
 @using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.BadgesDemo
 @model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Badges.IndexModel
-
 <h2>Badges</h2>
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/badge/" target="_blank"> Bootstrap Badge</a>.</p>
 
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Buttons/Index.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Buttons/Index.cshtml
index 32b2c376b2..317a6d2510 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Buttons/Index.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Buttons/Index.cshtml
@@ -2,5 +2,6 @@
 @using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ButtonsDemo
 @model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Buttons.IndexModel
 <h1>Buttons</h1>
+<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/buttons/" target="_blank"> Bootstrap Buttons</a>.</p>
 
 @await Component.InvokeAsync(typeof(ButtonsDemoViewComponent))
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Navbars/Index.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Navbars/Index.cshtml
new file mode 100644
index 0000000000..52c8ccb41f
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Navbars/Index.cshtml
@@ -0,0 +1,7 @@
+@page
+@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.NavbarsDemo
+@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Modals.IndexModel
+<h2>Navbars</h2>
+<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/navbar/" target="_blank"> Bootstrap Navbar</a>.</p>
+
+@await Component.InvokeAsync(typeof(NavbarsDemoViewComponent))
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Navbars/Index.cshtml.cs b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Navbars/Index.cshtml.cs
new file mode 100644
index 0000000000..c2814e6686
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Navbars/Index.cshtml.cs
@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo
+{
+    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/Pages/Components/Navs/Index.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Navs/Index.cshtml
index 3bda329ce3..a22f1cd47d 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Navs/Index.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Navs/Index.cshtml
@@ -2,6 +2,6 @@
 @using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.NavsDemo
 @model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Navs.IndexModel
 <h2>Navs</h2>
-<p><p>Based on <a href="https://getbootstrap.com/docs/4.1/components/navs/" target="_blank"> Bootstrap Navs</a>.</p>
+<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/navs/" target="_blank"> Bootstrap Navs</a>.</p>
 
 @await Component.InvokeAsync(typeof(NavsDemoViewComponent))
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Tables/Index.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Tables/Index.cshtml
index f45ccb2f47..a2048c7384 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Tables/Index.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/Pages/Components/Tables/Index.cshtml
@@ -2,6 +2,6 @@
 @using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.TablesDemo
 @model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Tables.IndexModel
 <h2>Tables</h2>
-<p><p>Based on <a href="https://getbootstrap.com/docs/4.1/content/Tables/" target="_blank"> Bootstrap Tables</a>.</p>
+<p>Based on <a href="https://getbootstrap.com/docs/4.1/content/Tables/" target="_blank"> Bootstrap Tables</a>.</p>
 
 @await Component.InvokeAsync(typeof(TablesDemoViewComponent))
\ No newline at end of file