diff --git a/ui/src/app/edge/settings/app/index.component.ts b/ui/src/app/edge/settings/app/index.component.ts
index 328e4f384f5..7540ea72633 100644
--- a/ui/src/app/edge/settings/app/index.component.ts
+++ b/ui/src/app/edge/settings/app/index.component.ts
@@ -1,10 +1,10 @@
 // @ts-strict-ignore
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, NavigationExtras, Router } from '@angular/router';
 import { IonPopover, ModalController } from '@ionic/angular';
 import { TranslateService } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { filter, switchMap, takeUntil } from 'rxjs/operators';
 import { ComponentJsonApiRequest } from 'src/app/shared/jsonrpc/request/componentJsonApiRequest';
 import { Role } from 'src/app/shared/type/role';
 import { Environment, environment } from 'src/environments';
@@ -76,6 +76,17 @@ export class IndexComponent implements OnInit, OnDestroy {
 
   public ngOnInit() {
     this.init();
+    this.router.events.pipe(
+      filter(event => event instanceof NavigationEnd),
+      switchMap(() => this.route.url),
+      takeUntil(this.stopOnDestroy),
+    ).subscribe(() => {
+      const navigationExtras = this.router.getCurrentNavigation()?.extras as NavigationExtras;
+      const appInstanceChange = navigationExtras?.state?.appInstanceChange;
+      if (appInstanceChange != null && appInstanceChange) {
+        this.init();
+      }
+    });
   }
 
   public ngOnDestroy(): void {
diff --git a/ui/src/app/edge/settings/app/install.component.ts b/ui/src/app/edge/settings/app/install.component.ts
index 18468365653..49d5591524b 100644
--- a/ui/src/app/edge/settings/app/install.component.ts
+++ b/ui/src/app/edge/settings/app/install.component.ts
@@ -180,7 +180,8 @@ export class InstallAppComponent implements OnInit, OnDestroy {
         }
 
         this.form.markAsPristine();
-        this.router.navigate(['device/' + (this.edge.id) + '/settings/app/']);
+        const navigationExtras = { state: { appInstanceChange: true } };
+        this.router.navigate(['device/' + (this.edge.id) + '/settings/app/'], navigationExtras);
       })
         .catch(InstallAppComponent.errorToast(this.service, error => this.translate.instant('Edge.Config.App.failInstall', { error: error })))
         .finally(() => {
diff --git a/ui/src/app/edge/settings/app/update.component.ts b/ui/src/app/edge/settings/app/update.component.ts
index 361070f1e21..a5cb88b67ea 100644
--- a/ui/src/app/edge/settings/app/update.component.ts
+++ b/ui/src/app/edge/settings/app/update.component.ts
@@ -138,7 +138,8 @@ export class UpdateAppComponent implements OnInit {
       })).then(response => {
         this.instances.splice(this.instances.indexOf(instance), 1);
         this.service.toast(this.translate.instant('Edge.Config.App.successDelete'), 'success');
-        this.router.navigate(['device/' + (this.edge.id) + '/settings/app/']);
+        const navigationExtras = { state: { appInstanceChange: true } };
+        this.router.navigate(['device/' + (this.edge.id) + '/settings/app/'], navigationExtras);
       })
       .catch(InstallAppComponent.errorToast(this.service, error => this.translate.instant('Edge.Config.App.failDelete', { error: error })))
       .finally(() => {