diff --git a/apps/web/src/app/key-management/data-recovery/data-recovery.component.html b/apps/web/src/app/key-management/data-recovery/data-recovery.component.html
new file mode 100644
index 00000000000..f357e516115
--- /dev/null
+++ b/apps/web/src/app/key-management/data-recovery/data-recovery.component.html
@@ -0,0 +1,75 @@
+
+
+ {{ "dataRecoveryDescription" | i18n }}
+
+
+ @if (!diagnosticsCompleted() && !recoveryCompleted()) {
+
+ }
+
+
+ @for (step of steps(); track $index) {
+ @if (
+ ($index === 0 && hasStarted()) ||
+ ($index > 0 &&
+ (steps()[$index - 1].status === StepStatus.Completed ||
+ steps()[$index - 1].status === StepStatus.Failed))
+ ) {
+
+
+ @if (step.status === StepStatus.Failed) {
+
+ } @else if (step.status === StepStatus.Completed) {
+
+ } @else if (step.status === StepStatus.InProgress) {
+
+ } @else {
+
+ }
+
+
+
+ {{ step.title }}
+
+
+
+ }
+ }
+
+
+ @if (diagnosticsCompleted()) {
+
+ @if (hasIssues() && !recoveryCompleted()) {
+
+ }
+
+
+ }
+
diff --git a/apps/web/src/app/key-management/data-recovery/data-recovery.component.spec.ts b/apps/web/src/app/key-management/data-recovery/data-recovery.component.spec.ts
new file mode 100644
index 00000000000..1976a8dfe27
--- /dev/null
+++ b/apps/web/src/app/key-management/data-recovery/data-recovery.component.spec.ts
@@ -0,0 +1,348 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { mock, MockProxy } from "jest-mock-extended";
+
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { CryptoFunctionService } from "@bitwarden/common/key-management/crypto/abstractions/crypto-function.service";
+import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { FakeAccountService, mockAccountServiceWith } from "@bitwarden/common/spec";
+import { UserId } from "@bitwarden/common/types/guid";
+import { CipherEncryptionService } from "@bitwarden/common/vault/abstractions/cipher-encryption.service";
+import { FolderApiServiceAbstraction } from "@bitwarden/common/vault/abstractions/folder/folder-api.service.abstraction";
+import { DialogService } from "@bitwarden/components";
+import { KeyService, UserAsymmetricKeysRegenerationService } from "@bitwarden/key-management";
+import { LogService } from "@bitwarden/logging";
+
+import { DataRecoveryComponent, StepStatus } from "./data-recovery.component";
+import { RecoveryStep, RecoveryWorkingData } from "./steps";
+
+// Mock SdkLoadService
+jest.mock("@bitwarden/common/platform/abstractions/sdk/sdk-load.service", () => ({
+ SdkLoadService: {
+ Ready: Promise.resolve(),
+ },
+}));
+
+describe("DataRecoveryComponent", () => {
+ let component: DataRecoveryComponent;
+ let fixture: ComponentFixture