diff --git a/docs/en/Tutorials/AspNetCore-Mvc/Part-I.md b/docs/en/Tutorials/AspNetCore-Mvc/Part-I.md
index f8bcf90aa0..d113442af9 100644
--- a/docs/en/Tutorials/AspNetCore-Mvc/Part-I.md
+++ b/docs/en/Tutorials/AspNetCore-Mvc/Part-I.md
@@ -455,7 +455,7 @@ $(function () {
 
 The final UI is shown below:
 
-![bookstore-book-list](images/bookstore-book-list.png)
+![bookstore-book-list](images/bookstore-book-list-2.png)
 
 ### Next Part
 
diff --git a/docs/en/Tutorials/AspNetCore-Mvc/Part-II.md b/docs/en/Tutorials/AspNetCore-Mvc/Part-II.md
index cab941a9e9..1e3ec1f539 100644
--- a/docs/en/Tutorials/AspNetCore-Mvc/Part-II.md
+++ b/docs/en/Tutorials/AspNetCore-Mvc/Part-II.md
@@ -16,7 +16,7 @@ You can access to the **source code** of the application from [the GitHub reposi
 
 In this section, you will learn how to create a new modal dialog form to create a new book. The result dialog will be like that:
 
-![bookstore-create-dialog](images/bookstore-create-dialog.png)
+![bookstore-create-dialog](images/bookstore-create-dialog-2.png)
 
 #### Create the Modal Form
 
diff --git a/docs/en/Tutorials/AspNetCore-Mvc/images/bookstore-book-list-2.png b/docs/en/Tutorials/AspNetCore-Mvc/images/bookstore-book-list-2.png
new file mode 100644
index 0000000000..a7d49a661b
Binary files /dev/null and b/docs/en/Tutorials/AspNetCore-Mvc/images/bookstore-book-list-2.png differ
diff --git a/docs/en/Tutorials/AspNetCore-Mvc/images/bookstore-create-dialog-2.png b/docs/en/Tutorials/AspNetCore-Mvc/images/bookstore-create-dialog-2.png
new file mode 100644
index 0000000000..3d5f1e8582
Binary files /dev/null and b/docs/en/Tutorials/AspNetCore-Mvc/images/bookstore-create-dialog-2.png differ
diff --git a/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.js b/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.js
index 2972ccfffb..b8bef0b7d1 100644
--- a/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.js
+++ b/modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.js
@@ -170,9 +170,9 @@
                 var $checkBox = $(this);
                 var $tab = $('#' + $checkBox.attr('data-tab-id'));
                 if ($checkBox.is(':checked')) {
-                    $tab.find('input[type="checkbox"]').prop('checked', true);
+                    $tab.find('input[type="checkbox"]').not(':disabled').prop('checked', true);
                 } else {
-                    $tab.find('input[type="checkbox"]').prop('checked', false);
+                    $tab.find('input[type="checkbox"]').not(':disabled').prop('checked', false);
                 }
                 $($checkBox).prop('indeterminate', false);
                 setSelectAllInAllTabs();
@@ -181,9 +181,9 @@
             $('input[name="SelectAllInAllTabs"]').change(function () {
                 var $checkBox = $(this);
                 if ($checkBox.is(':checked')) {
-                    $('.tab-pane input[type="checkbox"]').prop('checked', true);
+                    $('.tab-pane input[type="checkbox"]').not(':disabled').prop('checked', true);
                 } else {
-                    $('.tab-pane input[type="checkbox"]').prop('checked', false);
+                    $('.tab-pane input[type="checkbox"]').not(':disabled').prop('checked', false);
                 }
                 $($checkBox).prop('indeterminate', false);
             });
diff --git a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
index 0504da38b4..30852429f5 100644
--- a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
+++ b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts
@@ -54,7 +54,7 @@ function findLayout(segments: UrlSegment[], routes: ABP.FullRoute[]): eLayoutTyp
       layout = route.layout;
     }
 
-    if (route.children && route.children.length) {
+    if (route.children && route.children.length && segments.length > 1) {
       const child = route.children.find(c => c.path === segments[1].path);
 
       if (child.layout) {
diff --git a/npm/ng-packs/packages/core/src/lib/directives/ellipsis.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/ellipsis.directive.ts
index 844f1d9a87..3c2a8ecfeb 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/ellipsis.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/ellipsis.directive.ts
@@ -21,7 +21,7 @@ export class EllipsisDirective implements AfterContentInit {
 
   @HostBinding('style.max-width')
   get maxWidth() {
-    return this.enabled ? this.witdh || '180px' : undefined;
+    return this.enabled ? this.witdh || '160px' : undefined;
   }
 
   constructor(private cdRef: ChangeDetectorRef, private elRef: ElementRef) {}
diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
index 546a768006..c6d1c70631 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
@@ -77,7 +77,7 @@
       <div class="form-group">
         <label for="role-name">{{ 'AbpIdentity::RoleName' | abpLocalization }}</label
         ><span> * </span>
-        <input type="text" id="role-name" class="form-control" formControlName="name" autofocus />
+        <input autofocus type="text" id="role-name" class="form-control" formControlName="name" />
       </div>
 
       <div class="custom-checkbox custom-control mb-2">
diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
index 06594d8091..2b6d72f4ff 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
@@ -1,10 +1,10 @@
 import { ABP } from '@abp/ng.core';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
 import { Component, TemplateRef, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
-import { debounceTime, finalize, pluck } from 'rxjs/operators';
+import { finalize, pluck } from 'rxjs/operators';
 import {
   IdentityAddRole,
   IdentityDeleteRole,
@@ -54,7 +54,10 @@ export class RolesComponent {
 
   createForm() {
     this.form = this.fb.group({
-      name: [this.selected.name || '', [Validators.required, Validators.maxLength(256)]],
+      name: new FormControl({ value: this.selected.name || '', disabled: this.selected.isStatic }, [
+        Validators.required,
+        Validators.maxLength(256),
+      ]),
       isDefault: [this.selected.isDefault || false],
       isPublic: [this.selected.isPublic || false],
     });
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
index 03f5dcb605..df4b6a2eb5 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
@@ -88,7 +88,7 @@
         <ngb-tabset>
           <ngb-tab [title]="'AbpIdentity::UserInformations' | abpLocalization">
             <ng-template ngbTabContent>
-              <div class="mt-2">
+              <div class="mt-2 fade-in-top">
                 <div class="form-group">
                   <label for="user-name">{{ 'AbpIdentity::UserName' | abpLocalization }}</label
                   ><span> * </span>
@@ -105,7 +105,7 @@
                   <input type="text" id="surname" class="form-control" formControlName="surname" />
                 </div>
 
-                <div class="form-group">
+                <div *ngIf="!selected.userName" class="form-group">
                   <label for="password">{{ 'AbpIdentity::Password' | abpLocalization }}</label
                   ><span> * </span>
                   <input
@@ -156,7 +156,7 @@
           </ngb-tab>
           <ngb-tab [title]="'AbpIdentity::Roles' | abpLocalization">
             <ng-template ngbTabContent>
-              <div class="mt-2">
+              <div class="mt-2 fade-in-top">
                 <div
                   *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
                   class="custom-checkbox custom-control mb-2"
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
index 337bf94abe..ed63c8acb5 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
@@ -1,10 +1,10 @@
 import { ABP } from '@abp/ng.core';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
 import { Component, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
-import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
-import { combineLatest, Observable } from 'rxjs';
-import { filter, finalize, map, pluck, take } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { finalize, pluck, switchMap, take } from 'rxjs/operators';
 import snq from 'snq';
 import {
   IdentityAddUser,
@@ -65,9 +65,7 @@ export class UsersComponent {
 
   buildForm() {
     this.roles = this.store.selectSnapshot(IdentityState.getRoles);
-
     this.form = this.fb.group({
-      password: ['', [Validators.required, Validators.maxLength(32)]],
       userName: [this.selected.userName || '', [Validators.required, Validators.maxLength(256)]],
       email: [this.selected.email || '', [Validators.required, Validators.email, Validators.maxLength(256)]],
       name: [this.selected.name || '', [Validators.maxLength(64)]],
@@ -83,6 +81,9 @@ export class UsersComponent {
         ),
       ),
     });
+    if (!this.selected.userName) {
+      this.form.addControl('password', new FormControl('', [Validators.required, Validators.maxLength(32)]));
+    }
   }
 
   openModal() {
@@ -97,10 +98,10 @@ export class UsersComponent {
   }
 
   onEdit(id: string) {
-    combineLatest([this.store.dispatch(new IdentityGetUserById(id)), this.store.dispatch(new IdentityGetUserRoles(id))])
+    this.store
+      .dispatch(new IdentityGetUserById(id))
       .pipe(
-        filter(([res1, res2]) => res1 && res2),
-        map(([state, _]) => state),
+        switchMap(() => this.store.dispatch(new IdentityGetUserRoles(id))),
         pluck('IdentityState'),
         take(1),
       )
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
index 6ad9bfb201..bc93f0df19 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
@@ -65,12 +65,16 @@
                   [value]="getChecked(permission.name)"
                   [attr.id]="permission.name"
                   class="custom-control-input"
+                  [disabled]="permission.isGranted && permission.grantedProviders.length > 0"
                 />
                 <label
                   class="custom-control-label"
                   [attr.for]="permission.name"
                   (click)="onClickCheckbox(permission, permissionCheckbox.value)"
-                  >{{ permission.displayName }}</label
+                  >{{ permission.displayName }}
+                  <span *ngFor="let provider of permission.grantedProviders" class="badge badge-light"
+                    >{{ provider.providerName }}: {{ provider.providerKey }}</span
+                  ></label
                 >
               </div>
             </perfect-scrollbar>
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index ed2139ecb7..a6e4ace105 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
@@ -96,6 +96,8 @@ export class PermissionManagementComponent implements OnInit, OnChanges {
   }
 
   onClickCheckbox(clickedPermission: PermissionManagement.Permission, value) {
+    if (clickedPermission.isGranted && clickedPermission.grantedProviders.length > 0) return;
+
     setTimeout(() => {
       this.permissions = this.permissions.map(per => {
         if (clickedPermission.name === per.name) {
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/layout-account/layout-account.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.html
similarity index 100%
rename from npm/ng-packs/packages/theme-basic/src/lib/components/layout-account/layout-account.component.html
rename to npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.html
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/layout-account/layout-account.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts
similarity index 73%
rename from npm/ng-packs/packages/theme-basic/src/lib/components/layout-account/layout-account.component.ts
rename to npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts
index 32f358b869..e3e4d2db07 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/layout-account/layout-account.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/account-layout/account-layout.component.ts
@@ -3,9 +3,9 @@ import { eLayoutType } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-layout-account',
-  templateUrl: './layout-account.component.html',
+  templateUrl: './account-layout.component.html',
 })
-export class LayoutAccountComponent {
+export class AccountLayoutComponent {
   // required for dynamic component
   static type = eLayoutType.account;
 
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/layout-application/layout-application.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
similarity index 95%
rename from npm/ng-packs/packages/theme-basic/src/lib/components/layout-application/layout-application.component.html
rename to npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
index b1d5283246..d62ebad938 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/layout-application/layout-application.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
@@ -95,7 +95,7 @@
 
 <ng-template #language>
   <li class="nav-item dropdown pointer" ngbDropdown>
-    <a ngbDropdownToggle class="nav-link dropdown-toggle pointer" data-toggle="dropdown">
+    <a ngbDropdownToggle class="nav-link dropdown-toggle text-white pointer" data-toggle="dropdown">
       {{ defaultLanguage$ | async }}
     </a>
     <div ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
@@ -111,7 +111,7 @@
 
 <ng-template #currentUser>
   <li *ngIf="(currentUser$ | async)?.isAuthenticated" class="nav-item dropdown pointer" ngbDropdown>
-    <a ngbDropdownToggle class="nav-link dropdown-toggle pointer" data-toggle="dropdown">
+    <a ngbDropdownToggle class="nav-link dropdown-toggle text-white pointer" data-toggle="dropdown">
       {{ (currentUser$ | async)?.userName }}
     </a>
     <div ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/layout-application/layout-application.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts
similarity index 97%
rename from npm/ng-packs/packages/theme-basic/src/lib/components/layout-application/layout-application.component.ts
rename to npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts
index 9a948602e0..0295c61d24 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/layout-application/layout-application.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.ts
@@ -32,9 +32,9 @@ import { LayoutState } from '../../states';
 
 @Component({
   selector: 'abp-layout-application',
-  templateUrl: './layout-application.component.html',
+  templateUrl: './application-layout.component.html',
 })
-export class LayoutApplicationComponent implements AfterViewInit, OnDestroy {
+export class ApplicationLayoutComponent implements AfterViewInit, OnDestroy {
   // required for dynamic component
   static type = eLayoutType.application;
 
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/layout-empty/layout-empty.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts
similarity index 88%
rename from npm/ng-packs/packages/theme-basic/src/lib/components/layout-empty/layout-empty.component.ts
rename to npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts
index 3c2186dd4a..77e6f2a8e4 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/layout-empty/layout-empty.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts
@@ -8,7 +8,7 @@ import { eLayoutType } from '@abp/ng.core';
     <router-outlet></router-outlet>
   `,
 })
-export class LayoutEmptyComponent {
+export class EmptyLayoutComponent {
   // required for dynamic component
   static type = eLayoutType.empty;
 }
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/index.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/index.ts
index 39d04d163d..ca8f7982bc 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/index.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/index.ts
@@ -1,3 +1,3 @@
-export * from './layout-account/layout-account.component';
-export * from './layout-application/layout-application.component';
-export * from './layout-empty/layout-empty.component';
+export * from './account-layout/account-layout.component';
+export * from './application-layout/application-layout.component';
+export * from './empty-layout/empty-layout.component';
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts b/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts
index 4175cdbd13..a978a5c3da 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/theme-basic.module.ts
@@ -2,9 +2,9 @@ import { CoreModule } from '@abp/ng.core';
 import { NgModule } from '@angular/core';
 import { NgbCollapseModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { ChangePasswordComponent } from './components/change-password/change-password.component';
-import { LayoutAccountComponent } from './components/layout-account/layout-account.component';
-import { LayoutApplicationComponent } from './components/layout-application/layout-application.component';
-import { LayoutEmptyComponent } from './components/layout-empty/layout-empty.component';
+import { AccountLayoutComponent } from './components/account-layout/account-layout.component';
+import { ApplicationLayoutComponent } from './components/application-layout/application-layout.component';
+import { EmptyLayoutComponent } from './components/empty-layout/empty-layout.component';
 import { LayoutComponent } from './components/layout/layout.component';
 import { ProfileComponent } from './components/profile/profile.component';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
@@ -13,7 +13,7 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { NgxsModule } from '@ngxs/store';
 import { LayoutState } from './states/layout.state';
 
-export const LAYOUTS = [LayoutApplicationComponent, LayoutAccountComponent, LayoutEmptyComponent];
+export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent];
 
 @NgModule({
   declarations: [...LAYOUTS, LayoutComponent, ChangePasswordComponent, ProfileComponent],
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
index ca6f516d58..d6dc34e853 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
@@ -61,7 +61,9 @@ export class ButtonComponent implements OnInit {
           }),
         )
         .subscribe(() => {
-          this.loading = !this.loading;
+          setTimeout(() => {
+            this.loading = !this.loading;
+          }, 0);
         });
     }
   }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts b/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
index 2ccca53006..3f18017abd 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
@@ -25,7 +25,7 @@ export default `
 }
 
 .navbar .dropdown-menu {
-  min-width: 220px;
+  min-width: 200px;
 }
 
 .modal {
diff --git a/templates/app/angular/src/app/home/home-routing.module.ts b/templates/app/angular/src/app/home/home-routing.module.ts
index 70f7e5de7a..367affb583 100644
--- a/templates/app/angular/src/app/home/home-routing.module.ts
+++ b/templates/app/angular/src/app/home/home-routing.module.ts
@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './home.component';
-import { LayoutApplicationComponent } from '@abp/ng.theme.basic';
+import { ApplicationLayoutComponent } from '@abp/ng.theme.basic';
 
 const routes: Routes = [
   {
     path: '',
-    component: LayoutApplicationComponent,
+    component: ApplicationLayoutComponent,
     children: [{ path: '', component: HomeComponent }],
   },
 ];