diff --git a/ui/src/app/pages/apps-routes/app-list/app-list.page.html b/ui/src/app/pages/apps-routes/app-list/app-list.page.html
index d70ab3607..0199ce5da 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list.page.html
+++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.html
@@ -43,7 +43,7 @@
   
               <ion-card-header>
                 <status *ngIf="[PackageState.Installed, PackageState.Removing] | includes : pkg.value.entry.state" [disconnected]="connectionFailure" [rendering]="pkg.value.statusRendering" size="calc(8px + .4vw)" weight="bold"></status>
-                <p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : pkg.value.entry.state" class="main-status"><ion-text color="primary">{{ pkg.value.entry.state | titlecase }}...{{ (pkg.value.entry['install-progress'] | installState).totalProgress }}%</ion-text></p>
+                <p *ngIf="!!pkg.value.installProgress" class="main-status"><ion-text color="primary">{{ pkg.value.entry.state | titlecase }}...{{ pkg.value.installProgress.totalProgress }}%</ion-text></p>
                 <ion-card-title>{{ pkg.value.entry.manifest.title }}</ion-card-title>
               </ion-card-header>
             </ion-card>
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list.page.ts b/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
index 528fff7d3..6836f5756 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
+++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
@@ -7,6 +7,7 @@ import { Subscription } from 'rxjs'
 import { PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
 import { filter } from 'rxjs/operators'
 import { isEmptyObject } from 'src/app/util/misc.util'
+import { PackageLoadingService, ProgressData } from 'src/app/services/package-loading.service'
 
 @Component({
   selector: 'app-list',
@@ -24,6 +25,7 @@ export class AppListPage {
     }
     statusRendering: PkgStatusRendering | null
     sub: Subscription | null
+    installProgress: ProgressData
   }} = { }
   PackageState = PackageState
   loading = true
@@ -31,6 +33,7 @@ export class AppListPage {
   constructor (
     private readonly config: ConfigService,
     private readonly connectionService: ConnectionService,
+    private readonly installPackageService: PackageLoadingService,
     public readonly patch: PatchDbService,
   ) { }
 
@@ -70,6 +73,7 @@ export class AppListPage {
             },
             statusRendering: renderPkgStatus(pkgs[id].state, pkgs[id].installed?.status),
             sub: null,
+            installProgress: this.installPackageService.transform(pkgs[id]['install-progress']),
           }
           // subscribe to pkg
           this.pkgs[id].sub = this.patch.watch$('package-data', id).subscribe(pkg => {
@@ -94,7 +98,7 @@ export class AppListPage {
                 break
             }
             this.pkgs[id].entry = pkg
-            this.pkgs[id].entry['install-progress'] = { ...this.pkgs[id].entry['install-progress'] }
+            this.pkgs[id].installProgress = !isEmptyObject(pkg['install-progress']) ? this.installPackageService.transform(pkg['install-progress']) : undefined
             this.pkgs[id].bulb = {
               class: bulbClass,
               img,
diff --git a/ui/src/app/pages/apps-routes/app-show/app-show.page.html b/ui/src/app/pages/apps-routes/app-show/app-show.page.html
index 8dc94a51c..7ff76d58b 100644
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.html
+++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.html
@@ -136,22 +136,22 @@
 
     <!-- ** installing or updating ** -->
     <div *ngIf="[PackageState.Installing, PackageState.Updating] | includes : pkg.state" style="padding: 16px;">
-      <p>Downloading: {{ (pkg['install-progress'] | installState).downloadProgress }}%</p>
+      <p>Downloading: {{ installProgress.downloadProgress }}%</p>
       <ion-progress-bar 
         [color]="pkg['install-progress']['download-complete'] ? 'success' : 'secondary'" 
-        [value]="(pkg['install-progress'] | installState).downloadProgress / 100"
+        [value]="installProgress.downloadProgress / 100"
       ></ion-progress-bar>
 
-      <p>Validating: {{ (pkg['install-progress'] | installState).validateProgress }}%</p>
+      <p>Validating: {{ installProgress.validateProgress }}%</p>
       <ion-progress-bar
         [color]="pkg['install-progress']['validation-complete'] ? 'success' : 'secondary'" 
-        [value]="(pkg['install-progress'] | installState).validateProgress / 100"
+        [value]="installProgress.validateProgress / 100"
       ></ion-progress-bar>
 
-      <p>Installing: {{ (pkg['install-progress'] | installState).unpackProgress }}%</p>
+      <p>Installing: {{ installProgress.unpackProgress }}%</p>
       <ion-progress-bar 
         [color]="pkg['install-progress']['unpack-complete'] ? 'success' : 'secondary'" 
-        [value]="(pkg['install-progress'] | installState).unpackProgress / 100"
+        [value]="installProgress.unpackProgress / 100"
       ></ion-progress-bar>
     </div>
   </ion-content>
diff --git a/ui/src/app/pages/apps-routes/app-show/app-show.page.ts b/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
index 6a97b11e9..82317653b 100644
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
+++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
@@ -14,6 +14,7 @@ import { ConnectionFailure, ConnectionService } from 'src/app/services/connectio
 import { ErrorToastService } from 'src/app/services/error-toast.service'
 import { AppConfigPage } from 'src/app/modals/app-config/app-config.page'
 import { PackageLoadingService } from 'src/app/services/package-loading.service'
+import { ProgressData } from 'src/app/pipes/install-state.pipe'
 
 @Component({
   selector: 'app-show',
@@ -34,6 +35,7 @@ export class AppShowPage {
   PackageMainStatus = PackageMainStatus
   connectionFailure: boolean
   loading = true
+  installProgress: ProgressData
 
   @ViewChild(IonContent) content: IonContent
   subs: Subscription[] = []
@@ -60,9 +62,9 @@ export class AppShowPage {
       this.patch.watch$('package-data', this.pkgId)
       .subscribe(pkg => {
         this.pkg = pkg
-        this.pkg['install-progress'] = { ...this.pkg['install-progress'] }
+        this.installProgress = this.packageLoadingService.transform(this.pkg['install-progress'])
         this.rendering = renderPkgStatus(pkg.state, pkg.installed?.status)
-        this.mainStatus = { ...pkg.installed.status.main }
+        this.mainStatus = { ...pkg.installed?.status.main }
       }),
       // 2
       this.connectionService.watchFailure$()
diff --git a/ui/src/app/services/package-loading.service.ts b/ui/src/app/services/package-loading.service.ts
index 918251a51..9456c9063 100644
--- a/ui/src/app/services/package-loading.service.ts
+++ b/ui/src/app/services/package-loading.service.ts
@@ -9,7 +9,6 @@ export class PackageLoadingService {
   constructor () { }
 
   transform (loadData: InstallProgress): ProgressData {
-    console.log('LOAD DATA', loadData)
     let { downloaded, validated, unpacked, size, 'download-complete': downloadComplete, 'validation-complete': validationComplete, 'unpack-complete': unpackComplete } = loadData
     downloaded = downloadComplete ? size : downloaded
     validated = validationComplete ? size : validated