diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
index 70e342698c..2d249da3d8 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
@@ -10,18 +10,17 @@
 
     <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>
 
-    <button
+    <abp-button
       *ngIf="!hasLoggedIn"
+      [loading]="loading"
       (click)="login()"
-      [disabled]="isLog"
-      class="px-4 btn btn-primary ml-1"
+      [disabled]="loading"
+      class="px-4 ml-1"
       role="button"
+      iconClass="fa fa-sign-in"
     >
-      <div class="d-flex">
-        <div><i class="fa fa-sign-in"></i> {{ 'AbpAccount::Login' | abpLocalization }}</div>
-        <div [abpLoading]="isLog" class="" style="margin-bottom: 13px; margin-left: 7px"></div>
-      </div>
-    </button>
+      {{ 'AbpAccount::Login' | abpLocalization }}
+    </abp-button>
   </div>
   <div class="my-3 text-center">
     <h3>Let's improve your application!</h3>
diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
index 42956fb55c..e9a12a2644 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.ts
@@ -1,33 +1,21 @@
-import { AuthService } from '@abp/ng.core';
+import { AuthService, RouterEvents } from '@abp/ng.core';
 import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+import { Event, NavigationCancel, NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { map } from 'rxjs';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
 })
 export class HomeComponent {
-  //for disabled button and abp loading spinner
-  isLog: boolean = false;
+  loading: boolean = false;
   get hasLoggedIn(): boolean {
     return this.authService.isAuthenticated;
   }
 
-  constructor(private authService: AuthService, private router: Router) {
-    // this.router.events.subscribe(event => {
-    //   if (event instanceof NavigationStart) {
-    //     console.log(event);
-    //   }
-    // });
-  }
-
+  constructor(private authService: AuthService) {}
   login() {
-    //when clicked button spinner and disabled will be active
-    this.isLog = true;
-    setTimeout(a => {
-      this.authService.navigateToLogin();
-      //all functions is over here
-      this.isLog = false;
-    }, 1000);
+    this.loading = true;
+    this.authService.navigateToLogin();
   }
 }