diff --git a/apps/web/src/app/auth/verify-recover-delete.component.html b/apps/web/src/app/auth/verify-recover-delete.component.html
index 975858ac5e5..02581b21418 100644
--- a/apps/web/src/app/auth/verify-recover-delete.component.html
+++ b/apps/web/src/app/auth/verify-recover-delete.component.html
@@ -1,34 +1,16 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-  <div class="row justify-content-md-center mt-5">
-    <div class="col-5">
-      <p class="lead text-center mb-4">{{ "deleteAccount" | i18n }}</p>
-      <div class="card">
-        <div class="card-body">
-          <app-callout type="warning">{{ "deleteAccountWarning" | i18n }}</app-callout>
-          <p class="text-center">
-            <strong>{{ email }}</strong>
-          </p>
-          <p>{{ "deleteRecoverConfirmDesc" | i18n }}</p>
-          <hr />
-          <div class="d-flex">
-            <button
-              type="submit"
-              class="btn btn-danger btn-block btn-submit"
-              [disabled]="form.loading"
-            >
-              <span>{{ "deleteAccount" | i18n }}</span>
-              <i
-                class="bwi bwi-spinner bwi-spin"
-                title="{{ 'loading' | i18n }}"
-                aria-hidden="true"
-              ></i>
-            </button>
-            <a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
-              {{ "cancel" | i18n }}
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
+<form [bitSubmit]="submit" [formGroup]="formGroup">
+  <app-callout type="warning">{{ "deleteAccountWarning" | i18n }}</app-callout>
+  <p bitTypography="body1" class="tw-text-center">
+    <strong>{{ email }}</strong>
+  </p>
+  <p bitTypography="body1">{{ "deleteRecoverConfirmDesc" | i18n }}</p>
+  <hr />
+  <div class="tw-flex tw-gap-2">
+    <button type="submit" bitButton bitFormButton buttonType="danger" [block]="true">
+      {{ "deleteAccount" | i18n }}
+    </button>
+    <a bitButton buttonType="secondary" routerLink="/login" [block]="true">
+      {{ "cancel" | i18n }}
+    </a>
   </div>
 </form>
diff --git a/apps/web/src/app/auth/verify-recover-delete.component.ts b/apps/web/src/app/auth/verify-recover-delete.component.ts
index 92f2c50efa8..b3d380fcbda 100644
--- a/apps/web/src/app/auth/verify-recover-delete.component.ts
+++ b/apps/web/src/app/auth/verify-recover-delete.component.ts
@@ -1,11 +1,11 @@
 import { Component, OnInit } from "@angular/core";
+import { FormGroup } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { VerifyDeleteRecoverRequest } from "@bitwarden/common/models/request/verify-delete-recover.request";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
 @Component({
@@ -15,10 +15,10 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 // eslint-disable-next-line rxjs-angular/prefer-takeuntil
 export class VerifyRecoverDeleteComponent implements OnInit {
   email: string;
-  formPromise: Promise<any>;
 
   private userId: string;
   private token: string;
+  protected formGroup = new FormGroup({});
 
   constructor(
     private router: Router,
@@ -26,7 +26,6 @@ export class VerifyRecoverDeleteComponent implements OnInit {
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private route: ActivatedRoute,
-    private logService: LogService,
   ) {}
 
   ngOnInit() {
@@ -37,28 +36,19 @@ export class VerifyRecoverDeleteComponent implements OnInit {
         this.token = qParams.token;
         this.email = qParams.email;
       } else {
-        // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        this.router.navigate(["/"]);
+        await this.router.navigate(["/"]);
       }
     });
   }
 
-  async submit() {
-    try {
-      const request = new VerifyDeleteRecoverRequest(this.userId, this.token);
-      this.formPromise = this.apiService.postAccountRecoverDeleteToken(request);
-      await this.formPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        this.i18nService.t("accountDeleted"),
-        this.i18nService.t("accountDeletedDesc"),
-      );
-      // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      this.router.navigate(["/"]);
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
+  submit = async () => {
+    const request = new VerifyDeleteRecoverRequest(this.userId, this.token);
+    await this.apiService.postAccountRecoverDeleteToken(request);
+    this.platformUtilsService.showToast(
+      "success",
+      this.i18nService.t("accountDeleted"),
+      this.i18nService.t("accountDeletedDesc"),
+    );
+    await this.router.navigate(["/"]);
+  };
 }
diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts
index 0c038b76a34..7a57f7a1ce6 100644
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -136,12 +136,6 @@ const routes: Routes = [
         data: { titleId: "acceptFamilySponsorship", doNotSaveUrl: false } satisfies DataProperties,
       },
       { path: "recover", pathMatch: "full", redirectTo: "recover-2fa" },
-      {
-        path: "verify-recover-delete",
-        component: VerifyRecoverDeleteComponent,
-        canActivate: [UnauthGuard],
-        data: { titleId: "deleteAccount" } satisfies DataProperties,
-      },
       {
         path: "verify-recover-delete-org",
         component: VerifyRecoverDeleteOrgComponent,
@@ -330,6 +324,20 @@ const routes: Routes = [
           },
         ],
       },
+      {
+        path: "verify-recover-delete",
+        canActivate: [unauthGuardFn()],
+        children: [
+          {
+            path: "",
+            component: VerifyRecoverDeleteComponent,
+            data: {
+              pageTitle: "deleteAccount",
+              titleId: "deleteAccount",
+            } satisfies DataProperties & AnonLayoutWrapperData,
+          },
+        ],
+      },
       {
         path: "remove-password",
         component: RemovePasswordComponent,