diff --git a/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html b/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html
index 61f3a7de3a..0a60d9e241 100644
--- a/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html
@@ -13,7 +13,7 @@
     ><span> * </span
     ><input type="password" id="confirm-new-password" class="form-control" formControlName="repeatNewPassword" />
   </div>
-  <abp-button iconClass="fa fa-check" buttonClass="btn btn-primary color-white" (click)="onSubmit()">{{
+  <abp-button iconClass="fa fa-check" buttonClass="btn btn-primary color-white" buttonType="submit">{{
     'AbpIdentity::Save' | abpLocalization
   }}</abp-button>
 </form>
diff --git a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html
index d125b77dcc..bd1f55d57d 100644
--- a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html
@@ -21,13 +21,13 @@
       </ul>
     </div>
     <div class="col-9">
-      <div class="tab-content" *ngIf="selectedTab === 0">
-        <div class="tab-pane fade show active" role="tabpanel">
+      <div class="tab-content" *ngIf="selectedTab === 0" [@fadeIn]>
+        <div class="tab-pane active" role="tabpanel">
           <abp-change-password-form></abp-change-password-form>
         </div>
       </div>
-      <div class="tab-content" *ngIf="selectedTab === 1">
-        <div class="tab-pane fade show active" role="tabpanel">
+      <div class="tab-content" *ngIf="selectedTab === 1" [@fadeIn]>
+        <div class="tab-pane active" role="tabpanel">
           <abp-personal-settings-form></abp-personal-settings-form>
         </div>
       </div>
diff --git a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
index d24c541923..d19a1dcd6a 100644
--- a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.ts
@@ -1,13 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { fadeIn } from '@abp/ng.theme.shared';
+import { transition, trigger, useAnimation } from '@angular/animations';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'abp-manage-profile',
   templateUrl: './manage-profile.component.html',
+  animations: [trigger('fadeIn', [transition(':enter', useAnimation(fadeIn))])],
 })
-export class ManageProfileComponent implements OnInit {
+export class ManageProfileComponent {
   selectedTab = 0;
-
-  constructor() {}
-
-  ngOnInit(): void {}
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts
index 5a7009be17..816afbaaa4 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts
@@ -1,4 +1,5 @@
+export * from './bounce.animations';
 export * from './collapse.animations';
 export * from './fade.animations';
+export * from './modal.animations';
 export * from './slide.animations';
-export * from './bounce.animations';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.animations.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/modal.animations.ts
similarity index 70%
rename from npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.animations.ts
rename to npm/ng-packs/packages/theme-shared/src/lib/animations/modal.animations.ts
index 22513b0c6f..da979f331b 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.animations.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/modal.animations.ts
@@ -1,7 +1,7 @@
 import { transition, trigger, useAnimation } from '@angular/animations';
-import { fadeIn, fadeInDown, fadeOut } from '../../animations/fade.animations';
+import { fadeIn, fadeInDown, fadeOut } from './fade.animations';
 
-export const backdropAnimation = trigger('backdrop', [
+export const fadeAnimation = trigger('fade', [
   transition(':enter', useAnimation(fadeIn)),
   transition(':leave', useAnimation(fadeOut)),
 ]);
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
index 96a43f4eff..ecd2fea59e 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="visible">
   <div class="modal show {{ modalClass }}" tabindex="-1" role="dialog">
-    <div class="modal-backdrop" [@backdrop]="isModalOpen" (click)="close()"></div>
+    <div class="modal-backdrop" [@fade]="isModalOpen" (click)="close()"></div>
     <div
       id="abp-modal-dialog"
       class="modal-dialog modal-{{ size }}"
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
index 0b79b43948..718de17394 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
@@ -16,14 +16,14 @@ import { debounceTime, filter, takeUntil } from 'rxjs/operators';
 import { Toaster } from '../../models/toaster';
 import { ConfirmationService } from '../../services/confirmation.service';
 import { ButtonComponent } from '../button/button.component';
-import { backdropAnimation, dialogAnimation } from './modal.animations';
+import { fadeAnimation, dialogAnimation } from '../../animations/modal.animations';
 
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 
 @Component({
   selector: 'abp-modal',
   templateUrl: './modal.component.html',
-  animations: [backdropAnimation, dialogAnimation],
+  animations: [fadeAnimation, dialogAnimation],
 })
 export class ModalComponent implements OnDestroy {
   @Input()
diff --git a/templates/app/angular/package.json b/templates/app/angular/package.json
index d02834f881..5317e03a83 100644
--- a/templates/app/angular/package.json
+++ b/templates/app/angular/package.json
@@ -13,11 +13,11 @@
   },
   "private": true,
   "dependencies": {
-    "@abp/ng.account": "^0.9.1",
-    "@abp/ng.identity": "^0.9.1",
-    "@abp/ng.setting-management": "^0.9.1",
-    "@abp/ng.tenant-management": "^0.9.1",
-    "@abp/ng.theme.basic": "^0.9.1",
+    "@abp/ng.account": "^1.0.1",
+    "@abp/ng.identity": "^1.0.1",
+    "@abp/ng.setting-management": "^1.0.1",
+    "@abp/ng.tenant-management": "^1.0.1",
+    "@abp/ng.theme.basic": "^1.0.1",
     "@angular/animations": "~8.2.11",
     "@angular/common": "~8.2.11",
     "@angular/compiler": "~8.2.11",