diff --git a/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.html b/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.html
new file mode 100644
index 000000000..0f162b910
--- /dev/null
+++ b/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.html
@@ -0,0 +1,37 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Confirm Backup
+    </ion-title>
+    <ion-buttons slot="start">
+      <ion-button slot="start" (click)="cancel()">
+        <ion-icon name="close-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <!-- <ion-label class="ion-text-wrap" style="margin: 20px">{{message}}</ion-label> -->
+  <form (submit)="submit()">
+    <ion-item-group>
+      <ion-item>
+        <ion-input [type]="unmasked ? 'text' : 'password'" name="password" placeholder="password" [(ngModel)]="password" (ionChange)="$error$.next('')"></ion-input>
+        <!-- <ion-button fill="clear" [color]="unmasked ? 'danger' : 'primary'" (click)="toggleMask()">
+          <ion-icon slot="icon-only" [name]="unmasked ? 'eye-off-outline' : 'eye-outline'" size="small"></ion-icon>
+        </ion-button> -->
+      </ion-item>
+      <ion-item *ngIf="$error$ | async as e" lines="none">
+        <ion-label class="ion-text-wrap" color="danger">{{ e }}</ion-label>
+      </ion-item>
+      <ion-item-divider></ion-item-divider>
+      <ion-item>
+        <ion-label>Eject drive when backup complete?</ion-label>
+        <ion-checkbox color="primary" checked slot="end" [(ngModel)]="eject"></ion-checkbox>
+      </ion-item>
+    </ion-item-group>
+    <ion-button type="submit" [disabled]="!password" style="margin-top: 30px" expand="block" fill="outline">
+      Backup
+    </ion-button>
+  </form>
+</ion-content>
\ No newline at end of file
diff --git a/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.module.ts b/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.module.ts
new file mode 100644
index 000000000..a58887404
--- /dev/null
+++ b/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { AppBackupConfirmationComponent } from './app-backup-confirmation.component'
+import { IonicModule } from '@ionic/angular'
+import { RouterModule } from '@angular/router'
+import { SharingModule } from 'src/app/modules/sharing.module'
+
+@NgModule({
+  declarations: [
+    AppBackupConfirmationComponent,
+  ],
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule.forChild([]),
+    SharingModule,
+  ],
+  exports: [AppBackupConfirmationComponent],
+})
+export class AppBackupConfirmationComponentModule { }
diff --git a/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.scss b/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.scss
new file mode 100644
index 000000000..c500626a7
--- /dev/null
+++ b/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.scss
@@ -0,0 +1,10 @@
+.error-message {
+  --background: var(--ion-color-danger);
+  margin: 12px;
+  border-radius: 3px;
+  font-weight: bold;
+}
+
+.legacy-error-message {
+  margin: 5px;
+}
\ No newline at end of file
diff --git a/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.ts b/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.ts
new file mode 100644
index 000000000..c33aee68c
--- /dev/null
+++ b/ui/src/app/components/app-backup-confirmation/app-backup-confirmation.component.ts
@@ -0,0 +1,43 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { IonicSafeString, ModalController } from '@ionic/angular'
+import { BehaviorSubject } from 'rxjs'
+import { AppInstalledFull } from 'src/app/models/app-types'
+import { DiskPartition } from 'src/app/models/server-model'
+
+@Component({
+  selector: 'app-backup-confirmation',
+  templateUrl: './app-backup-confirmation.component.html',
+  styleUrls: ['./app-backup-confirmation.component.scss'],
+})
+export class AppBackupConfirmationComponent implements OnInit {
+  unmasked = false
+  password: string
+  $error$: BehaviorSubject<string> = new BehaviorSubject('')
+  eject = true
+  message: string
+
+  @Input() app: AppInstalledFull
+  @Input() partition: DiskPartition
+
+  constructor (private readonly modalCtrl: ModalController) { }
+  ngOnInit () {
+    this.message = `Enter your master password to create an encrypted backup of ${this.app.title} to "${this.partition.label || this.partition.logicalname}".`
+  }
+
+  toggleMask () {
+    this.unmasked = !this.unmasked
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss({ cancel: true })
+  }
+
+  submit () {
+    if (!this.password || this.password.length < 12) {
+      this.$error$.next('Password must be at least 12 characters in length.')
+      return
+    }
+    const { password, eject } = this
+    this.modalCtrl.dismiss({ password, eject })
+  }
+}
diff --git a/ui/src/app/modals/app-backup/app-backup.module.ts b/ui/src/app/modals/app-backup/app-backup.module.ts
index 079f043c1..5e7a76a53 100644
--- a/ui/src/app/modals/app-backup/app-backup.module.ts
+++ b/ui/src/app/modals/app-backup/app-backup.module.ts
@@ -2,12 +2,14 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
 import { AppBackupPage } from './app-backup.page'
+import { AppBackupConfirmationComponentModule } from 'src/app/components/app-backup-confirmation/app-backup-confirmation.component.module'
 
 @NgModule({
   declarations: [AppBackupPage],
   imports: [
     CommonModule,
     IonicModule,
+    AppBackupConfirmationComponentModule,
   ],
   entryComponents: [AppBackupPage],
   exports: [AppBackupPage],
diff --git a/ui/src/app/modals/app-backup/app-backup.page.ts b/ui/src/app/modals/app-backup/app-backup.page.ts
index 476f5ee08..0825310a6 100644
--- a/ui/src/app/modals/app-backup/app-backup.page.ts
+++ b/ui/src/app/modals/app-backup/app-backup.page.ts
@@ -6,6 +6,7 @@ import { ApiService } from 'src/app/services/api/api.service'
 import { DiskInfo, DiskPartition } from 'src/app/models/server-model'
 import { pauseFor } from 'src/app/util/misc.util'
 import { concatMap } from 'rxjs/operators'
+import { AppBackupConfirmationComponent } from 'src/app/components/app-backup-confirmation/app-backup-confirmation.component'
 
 @Component({
   selector: 'app-backup',
@@ -84,43 +85,58 @@ export class AppBackupPage {
   }
 
   private async presentAlertCreateEncrypted (disk: DiskInfo, partition: DiskPartition): Promise<void> {
-    const alert = await this.alertCtrl.create({
-      backdropDismiss: false,
-      header: `Ready to Backup`,
-      message: `Enter your master password to create an encrypted backup of ${this.app.title} to "${partition.label || partition.logicalname}".`,
-      inputs: [
-        {
-          name: 'password',
-          label: 'Password',
-          type: 'password',
-          placeholder: 'Master Password',
-        },
-        {
-          name: 'eject',
-          label: 'Eject drive when finished',
-          placeholder: 'Eject drive when finished',
-          type: 'checkbox',
-        },
-      ],
-      buttons: [
-        {
-          text: 'Cancel',
-          role: 'cancel',
-        },
-        {
-          text: 'Create Backup',
-          handler: async (data) => {
-            if (!data.password || data.password.length < 12) {
-              alert.message = new IonicSafeString(alert.message + '<br /><br /><ion-text color="danger">Password must be at least 12 characters in length.</ion-text>')
-              return false
-            } else {
-              return this.create(disk, partition, data.password, data.eject)
-            }
-          },
-        },
-      ],
+    const m = await this.modalCtrl.create({
+      componentProps: {
+        app: this.app,
+        partition,
+      },
+      component: AppBackupConfirmationComponent,
     })
-    await alert.present()
+
+    m.onWillDismiss().then(res => {
+      const data = res.data
+      if (data.cancel) return
+      return this.create(disk, partition, data.password, data.eject)
+    })
+
+    return await m.present()
+    // const alert = await this.alertCtrl.create({
+    //   backdropDismiss: false,
+    //   header: `Ready to Backup`,
+    //   message: `Enter your master password to create an encrypted backup of ${this.app.title} to "${partition.label || partition.logicalname}".`,
+    //   inputs: [
+    //     {
+    //       name: 'password',
+    //       label: 'Password',
+    //       type: 'password',
+    //       placeholder: 'Master Password',
+    //     },
+    //     {
+    //       name: 'eject',
+    //       label: 'Eject drive when finished',
+    //       placeholder: 'Eject drive when',
+    //       type: 'checkbox',
+    //     },
+    //   ],
+    //   buttons: [
+    //     {
+    //       text: 'Cancel',
+    //       role: 'cancel',
+    //     },
+    //     {
+    //       text: 'Create Backup',
+    //       handler: async (data) => {
+    //         if (!data.password || data.password.length < 12) {
+    //           alert.message = new IonicSafeString(alert.message + '<br /><br /><ion-text color="danger">Password must be at least 12 characters in length.</ion-text>')
+    //           return false
+    //         } else {
+    //           return this.create(disk, partition, data.password, data.eject)
+    //         }
+    //       },
+    //     },
+    //   ],
+    // })
+    // await alert.present()
   }
 
   private async presentAlertWarn (partition: DiskPartition): Promise<void> {