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 3c2a8ecfeb..c43b6fc923 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
@@ -5,7 +5,7 @@ import { AfterContentInit, ChangeDetectorRef, Directive, ElementRef, HostBinding
 })
 export class EllipsisDirective implements AfterContentInit {
   @Input('abpEllipsis')
-  witdh: string;
+  width: string;
 
   @HostBinding('title')
   @Input()
@@ -21,7 +21,7 @@ export class EllipsisDirective implements AfterContentInit {
 
   @HostBinding('style.max-width')
   get maxWidth() {
-    return this.enabled ? this.witdh || '160px' : undefined;
+    return this.enabled ? this.width || '170px' : undefined;
   }
 
   constructor(private cdRef: ChangeDetectorRef, private elRef: ElementRef) {}
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 86326b5984..62fc5f8e4a 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
@@ -26,7 +26,7 @@
               <li *ngFor="let group of groups$ | async; trackBy: trackByFn" class="nav-item">
                 <a
                   class="nav-link pointer"
-                  [class.active]="selectedGroup.name === group.name"
+                  [class.active]="selectedGroup?.name === group?.name"
                   (click)="onChangeGroup(group)"
                   >{{ group?.displayName }}</a
                 >
@@ -65,7 +65,7 @@
                   [value]="getChecked(permission.name)"
                   [attr.id]="permission.name"
                   class="custom-control-input"
-                  [disabled]="permission.isGranted && permission.grantedProviders.length > 0"
+                  [disabled]="isGrantedByRole(permission.grantedProviders)"
                 />
                 <label
                   class="custom-control-label"
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 7843958ae3..ed1ee61cd9 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
@@ -94,8 +94,15 @@ export class PermissionManagementComponent implements OnInit, OnChanges {
     return (this.permissions.find(per => per.name === name) || { isGranted: false }).isGranted;
   }
 
+  isGrantedByRole(grantedProviders: PermissionManagement.GrantedProvider[]): boolean {
+    if (grantedProviders.length) {
+      return grantedProviders.findIndex(p => p.providerName === 'Role') === -1 ? false : true;
+    }
+    return false;
+  }
+
   onClickCheckbox(clickedPermission: PermissionManagement.Permission, value) {
-    if (clickedPermission.isGranted && clickedPermission.grantedProviders.length > 0) return;
+    if (clickedPermission.isGranted && this.isGrantedByRole(clickedPermission.grantedProviders)) return;
 
     setTimeout(() => {
       this.permissions = this.permissions.map(per => {
@@ -150,7 +157,7 @@ export class PermissionManagementComponent implements OnInit, OnChanges {
   onClickSelectThisTab() {
     this.selectedGroupPermissions$.pipe(take(1)).subscribe(permissions => {
       permissions.forEach(permission => {
-        if (permission.isGranted && permission.grantedProviders.length > 0) return;
+        if (permission.isGranted && this.isGrantedByRole(permission.grantedProviders)) return;
 
         const index = this.permissions.findIndex(per => per.name === permission.name);
 
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
index d62ebad938..509e54897e 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/application-layout/application-layout.component.html
@@ -64,7 +64,7 @@
       >
         <div ngbDropdownToggle [class.dropdown-toggle]="false" class="pointer">
           <a
-            abpEllipsis="200px"
+            abpEllipsis="210px"
             [abpEllipsisEnabled]="isDropdownChildDynamic"
             role="button"
             class="btn d-block text-left py-2 px-2 dropdown-toggle"
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts
index 3e0bd78510..dce489a331 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/layout/layout.component.ts
@@ -9,7 +9,7 @@ import { Store } from '@ngxs/store';
   animations: [slideFromBottom],
 })
 export class LayoutComponent {
-  isCollapsed: boolean = false;
+  isCollapsed: boolean = true;
 
   get appInfo(): Config.Application {
     return this.store.selectSnapshot(ConfigState.getApplicationInfo);
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 3f18017abd..78e68cc7f8 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: 200px;
+  min-width: 215px;
 }
 
 .modal {