diff --git a/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.html b/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.html
index 7762067784..a8a4bd53d9 100644
--- a/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.html
@@ -1,52 +1,37 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="confirmUserTitle">
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
-    <form class="modal-content" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
-      <div class="modal-header">
-        <h1 class="modal-title" id="confirmUserTitle">
-          {{ "confirmUser" | i18n }}
-          <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h1>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
+<form [formGroup]="confirmForm" [bitSubmit]="submit">
+  <bit-dialog dialogSize="large" [loading]="loading">
+    <span bitDialogTitle>
+      {{ "confirmUser" | i18n }}
+      <small class="tw-text-muted">{{ params.name }}</small>
+    </span>
+    <div bitDialogContent>
+      <p bitTypography="body1">
+        {{ "fingerprintEnsureIntegrityVerify" | i18n }}
+        <a
+          bitLink
+          href="https://bitwarden.com/help/fingerprint-phrase/"
+          target="_blank"
+          rel="noreferrer"
         >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <p>
-          {{ "fingerprintEnsureIntegrityVerify" | i18n }}
-          <a href="https://bitwarden.com/help/fingerprint-phrase/" target="_blank" rel="noreferrer">
-            {{ "learnMore" | i18n }}</a
-          >
-        </p>
-        <p>
-          <code>{{ fingerprint }}</code>
-        </p>
-        <div class="form-check">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="dontAskAgain"
-            name="DontAskAgain"
-            [(ngModel)]="dontAskAgain"
-          />
-          <label class="form-check-label" for="dontAskAgain">
-            {{ "dontAskFingerprintAgain" | i18n }}
-          </label>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-          <span>{{ "confirm" | i18n }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "cancel" | i18n }}
-        </button>
-      </div>
-    </form>
-  </div>
-</div>
+          {{ "learnMore" | i18n }}</a
+        >
+      </p>
+      <p bitTypography="body1">
+        <code>{{ fingerprint }}</code>
+      </p>
+
+      <bit-form-control>
+        <input type="checkbox" bitCheckbox formControlName="dontAskAgain" />
+        <bit-label> {{ "dontAskFingerprintAgain" | i18n }}</bit-label>
+      </bit-form-control>
+    </div>
+    <div bitDialogFooter>
+      <button type="submit" buttonType="primary" bitButton bitFormButton>
+        <span>{{ "confirm" | i18n }}</span>
+      </button>
+      <button bitButton bitFormButton buttonType="secondary" type="button" bitDialogClose>
+        {{ "cancel" | i18n }}
+      </button>
+    </div>
+  </bit-dialog>
+</form>
diff --git a/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.ts b/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.ts
index 711a7ba9a5..4afc60c9be 100644
--- a/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/confirm/emergency-access-confirm.component.ts
@@ -1,39 +1,52 @@
-import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
+import { Component, OnInit, Inject } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { DialogService } from "@bitwarden/components";
 
+export enum EmergencyAccessConfirmDialogResult {
+  Confirmed = "confirmed",
+}
+type EmergencyAccessConfirmDialogData = {
+  /** display name of the account requesting emergency access */
+  name: string;
+  /** identifies the account requesting emergency access */
+  userId: string;
+  /** traces a unique emergency request  */
+  emergencyAccessId: string;
+};
 @Component({
   selector: "emergency-access-confirm",
   templateUrl: "emergency-access-confirm.component.html",
 })
 export class EmergencyAccessConfirmComponent implements OnInit {
-  @Input() name: string;
-  @Input() userId: string;
-  @Input() emergencyAccessId: string;
-  @Input() formPromise: Promise<any>;
-  @Output() onConfirmed = new EventEmitter();
-
-  dontAskAgain = false;
   loading = true;
   fingerprint: string;
+  confirmForm = this.formBuilder.group({
+    dontAskAgain: [false],
+  });
 
   constructor(
+    @Inject(DIALOG_DATA) protected params: EmergencyAccessConfirmDialogData,
+    private formBuilder: FormBuilder,
     private apiService: ApiService,
     private cryptoService: CryptoService,
     private stateService: StateService,
     private logService: LogService,
+    private dialogRef: DialogRef<EmergencyAccessConfirmDialogResult>,
   ) {}
 
   async ngOnInit() {
     try {
-      const publicKeyResponse = await this.apiService.getUserPublicKey(this.userId);
+      const publicKeyResponse = await this.apiService.getUserPublicKey(this.params.userId);
       if (publicKeyResponse != null) {
         const publicKey = Utils.fromB64ToArray(publicKeyResponse.publicKey);
-        const fingerprint = await this.cryptoService.getFingerprint(this.userId, publicKey);
+        const fingerprint = await this.cryptoService.getFingerprint(this.params.userId, publicKey);
         if (fingerprint != null) {
           this.fingerprint = fingerprint.join("-");
         }
@@ -44,19 +57,33 @@ export class EmergencyAccessConfirmComponent implements OnInit {
     this.loading = false;
   }
 
-  async submit() {
+  submit = async () => {
     if (this.loading) {
       return;
     }
 
-    if (this.dontAskAgain) {
+    if (this.confirmForm.get("dontAskAgain").value) {
       await this.stateService.setAutoConfirmFingerprints(true);
     }
 
     try {
-      this.onConfirmed.emit();
+      this.dialogRef.close(EmergencyAccessConfirmDialogResult.Confirmed);
     } catch (e) {
       this.logService.error(e);
     }
+  };
+  /**
+   * Strongly typed helper to open a EmergencyAccessConfirmComponent
+   * @param dialogService Instance of the dialog service that will be used to open the dialog
+   * @param config Configuration for the dialog
+   */
+  static open(
+    dialogService: DialogService,
+    config: DialogConfig<EmergencyAccessConfirmDialogData>,
+  ) {
+    return dialogService.open<EmergencyAccessConfirmDialogResult>(
+      EmergencyAccessConfirmComponent,
+      config,
+    );
   }
 }
diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html
index 43961d6a13..1e61585e42 100644
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html
@@ -1,142 +1,68 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
-  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
-    <form
-      class="modal-content"
-      #form
-      (ngSubmit)="submit()"
-      [appApiAction]="formPromise"
-      ngNativeValidate
-    >
-      <div class="modal-header">
-        <h1 class="modal-title" id="userAddEditTitle">
-          <app-premium-badge *ngIf="readOnly"></app-premium-badge>
-          {{ title }}
-          <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h1>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body" *ngIf="loading">
-        <i
-          class="bwi bwi-spinner bwi-spin text-muted"
-          title="{{ 'loading' | i18n }}"
-          aria-hidden="true"
-        ></i>
-        <span class="sr-only">{{ "loading" | i18n }}</span>
-      </div>
-      <div class="modal-body" *ngIf="!loading">
-        <ng-container *ngIf="!editMode">
-          <p>{{ "inviteEmergencyContactDesc" | i18n }}</p>
-          <div class="form-group mb-4">
-            <label for="email">{{ "email" | i18n }}</label>
-            <input
-              id="email"
-              class="form-control"
-              type="text"
-              name="Email"
-              [(ngModel)]="email"
-              required
-            />
-          </div>
-        </ng-container>
-        <h3>
+<form [formGroup]="addEditForm" [bitSubmit]="submit">
+  <bit-dialog dialogSize="large" [loading]="loading">
+    <span bitDialogTitle>
+      <app-premium-badge *ngIf="readOnly"></app-premium-badge>
+      {{ title }}
+      <small class="tw-text-muted" *ngIf="params.name">{{ params.name }}</small>
+    </span>
+    <ng-container bitDialogContent>
+      <ng-container *ngIf="!editMode">
+        <p bitTypography="body1">{{ "inviteEmergencyContactDesc" | i18n }}</p>
+        <bit-form-field>
+          <bit-label>{{ "email" | i18n }}</bit-label>
+          <input bitInput formControlName="email" />
+        </bit-form-field>
+      </ng-container>
+      <bit-radio-group formControlName="emergencyAccessType" [block]="true">
+        <bit-label>
           {{ "userAccess" | i18n }}
           <a
             target="_blank"
             rel="noreferrer"
+            bitLink
+            linkType="primary"
             appA11yTitle="{{ 'learnMore' | i18n }}"
             href="https://bitwarden.com/help/emergency-access/#user-access"
           >
             <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
-        </h3>
-        <div class="form-check mt-2 form-check-block">
-          <input
-            class="form-check-input"
-            type="radio"
-            name="userType"
-            id="emergencyTypeView"
-            [value]="emergencyAccessType.View"
-            [(ngModel)]="type"
-          />
-          <label class="form-check-label" for="emergencyTypeView">
-            {{ "view" | i18n }}
-            <small>{{ "viewDesc" | i18n }}</small>
-          </label>
-        </div>
-        <div class="form-check mt-2 form-check-block">
-          <input
-            class="form-check-input"
-            type="radio"
-            name="userType"
-            id="emergencyTypeTakeover"
-            [value]="emergencyAccessType.Takeover"
-            [(ngModel)]="type"
-            [disabled]="readOnly"
-          />
-          <label class="form-check-label" for="emergencyTypeTakeover">
-            {{ "takeover" | i18n }}
-            <small>{{ "takeoverDesc" | i18n }}</small>
-          </label>
-        </div>
-        <div class="form-group col-6 mt-4">
-          <label for="waitTime">{{ "waitTime" | i18n }}</label>
-          <select
-            id="waitTime"
-            name="waitTime"
-            [(ngModel)]="waitTime"
-            class="form-control"
-            [disabled]="readOnly"
-          >
-            <option *ngFor="let o of waitTimes" [ngValue]="o.value">{{ o.name }}</option>
-          </select>
-          <small class="text-muted">{{ "waitTimeDesc" | i18n }}</small>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button
-          type="submit"
-          buttonType="primary"
-          bitButton
-          [loading]="loading || form.loading"
-          [disabled]="readOnly"
-        >
-          {{ "save" | i18n }}
-        </button>
-        <button bitButton buttonType="secondary" type="button" data-dismiss="modal">
-          {{ "cancel" | i18n }}
-        </button>
-        <div class="ml-auto">
-          <button
-            #deleteBtn
-            bitButton
-            buttonType="danger"
-            type="button"
-            (click)="delete()"
-            appA11yTitle="{{ 'delete' | i18n }}"
-            *ngIf="editMode"
-            [disabled]="$any(deleteBtn).loading"
-          >
-            <i
-              class="bwi bwi-trash bwi-lg bwi-fw"
-              [hidden]="$any(deleteBtn).loading"
-              aria-hidden="true"
-            ></i>
-            <i
-              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
-              [hidden]="!$any(deleteBtn).loading"
-              title="{{ 'loading' | i18n }}"
-              aria-hidden="true"
-            ></i>
-          </button>
-        </div>
-      </div>
-    </form>
-  </div>
-</div>
+        </bit-label>
+        <bit-radio-button id="emergencyTypeView" [value]="emergencyAccessType.View">
+          <bit-label>{{ "view" | i18n }}</bit-label>
+          <bit-hint>{{ "viewDesc" | i18n }}</bit-hint>
+        </bit-radio-button>
+
+        <bit-radio-button id="emergencyTypeTakeover" [value]="emergencyAccessType.Takeover">
+          <bit-label>{{ "takeover" | i18n }}</bit-label>
+          <bit-hint>{{ "takeoverDesc" | i18n }}</bit-hint>
+        </bit-radio-button>
+      </bit-radio-group>
+
+      <bit-form-field class="tw-w-1/2 tw-relative tw-px-2.5">
+        <bit-label>{{ "waitTime" | i18n }}</bit-label>
+        <bit-select formControlName="waitTime">
+          <bit-option *ngFor="let o of waitTimes" [value]="o.value" [label]="o.name"></bit-option>
+        </bit-select>
+        <bit-hint class="tw-text-sm">{{ "waitTimeDesc" | i18n }}</bit-hint>
+      </bit-form-field>
+    </ng-container>
+    <ng-container bitDialogFooter>
+      <button type="submit" buttonType="primary" bitButton bitFormButton [disabled]="readOnly">
+        {{ "save" | i18n }}
+      </button>
+      <button bitButton bitFormButton buttonType="secondary" type="button" bitDialogClose>
+        {{ "cancel" | i18n }}
+      </button>
+      <button
+        type="button"
+        bitFormButton
+        class="tw-ml-auto"
+        bitIconButton="bwi-trash"
+        buttonType="danger"
+        [bitAction]="delete"
+        *ngIf="editMode"
+        appA11yTitle="{{ 'delete' | i18n }}"
+      ></button>
+    </ng-container>
+  </bit-dialog>
+</form>
diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts
index 4aec390a56..d99c693e73 100644
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts
@@ -1,45 +1,59 @@
-import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
+import { Component, Inject, OnInit } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
 
 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";
+import { DialogService } from "@bitwarden/components";
 
 import { EmergencyAccessService } from "../../emergency-access";
 import { EmergencyAccessType } from "../../emergency-access/enums/emergency-access-type";
 
+export type EmergencyAccessAddEditDialogData = {
+  /** display name of the account requesting emergency access */
+  name: string;
+  /** traces a unique emergency request  */
+  emergencyAccessId: string;
+  /** A boolean indicating whether the emergency access request is in read-only mode (true for view-only, false for editing). */
+  readOnly: boolean;
+};
+
+export enum EmergencyAccessAddEditDialogResult {
+  Saved = "saved",
+  Canceled = "canceled",
+  Deleted = "deleted",
+}
 @Component({
   selector: "emergency-access-add-edit",
   templateUrl: "emergency-access-add-edit.component.html",
 })
 export class EmergencyAccessAddEditComponent implements OnInit {
-  @Input() name: string;
-  @Input() emergencyAccessId: string;
-  @Output() onSaved = new EventEmitter();
-  @Output() onDeleted = new EventEmitter();
-
   loading = true;
   readOnly = false;
   editMode = false;
   title: string;
-  email: string;
   type: EmergencyAccessType = EmergencyAccessType.View;
 
-  formPromise: Promise<any>;
-
   emergencyAccessType = EmergencyAccessType;
   waitTimes: { name: string; value: number }[];
-  waitTime: number;
 
+  addEditForm = this.formBuilder.group({
+    email: ["", [Validators.email, Validators.required]],
+    emergencyAccessType: [this.emergencyAccessType.View],
+    waitTime: [{ value: null, disabled: this.readOnly }, [Validators.required]],
+  });
   constructor(
+    @Inject(DIALOG_DATA) protected params: EmergencyAccessAddEditDialogData,
+    private formBuilder: FormBuilder,
     private emergencyAccessService: EmergencyAccessService,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
     private logService: LogService,
+    private dialogRef: DialogRef<EmergencyAccessAddEditDialogResult>,
   ) {}
-
   async ngOnInit() {
-    this.editMode = this.loading = this.emergencyAccessId != null;
-
+    this.editMode = this.loading = this.params.emergencyAccessId != null;
     this.waitTimes = [
       { name: this.i18nService.t("oneDay"), value: 1 },
       { name: this.i18nService.t("days", "2"), value: 2 },
@@ -50,46 +64,72 @@ export class EmergencyAccessAddEditComponent implements OnInit {
     ];
 
     if (this.editMode) {
-      this.editMode = true;
       this.title = this.i18nService.t("editEmergencyContact");
       try {
         const emergencyAccess = await this.emergencyAccessService.getEmergencyAccess(
-          this.emergencyAccessId,
+          this.params.emergencyAccessId,
         );
-        this.type = emergencyAccess.type;
-        this.waitTime = emergencyAccess.waitTimeDays;
+        this.addEditForm.patchValue({
+          email: emergencyAccess.email,
+          waitTime: emergencyAccess.waitTimeDays,
+          emergencyAccessType: emergencyAccess.type,
+        });
       } catch (e) {
         this.logService.error(e);
       }
     } else {
       this.title = this.i18nService.t("inviteEmergencyContact");
-      this.waitTime = this.waitTimes[2].value;
+      this.addEditForm.patchValue({ waitTime: this.waitTimes[2].value });
     }
 
     this.loading = false;
   }
 
-  async submit() {
+  submit = async () => {
+    if (this.addEditForm.invalid) {
+      this.addEditForm.markAllAsTouched();
+      return;
+    }
     try {
       if (this.editMode) {
-        await this.emergencyAccessService.update(this.emergencyAccessId, this.type, this.waitTime);
+        await this.emergencyAccessService.update(
+          this.params.emergencyAccessId,
+          this.addEditForm.value.emergencyAccessType,
+          this.addEditForm.value.waitTime,
+        );
       } else {
-        await this.emergencyAccessService.invite(this.email, this.type, this.waitTime);
+        await this.emergencyAccessService.invite(
+          this.addEditForm.value.email,
+          this.addEditForm.value.emergencyAccessType,
+          this.addEditForm.value.waitTime,
+        );
       }
-
-      await this.formPromise;
       this.platformUtilsService.showToast(
         "success",
         null,
-        this.i18nService.t(this.editMode ? "editedUserId" : "invitedUsers", this.name),
+        this.i18nService.t(this.editMode ? "editedUserId" : "invitedUsers", this.params.name),
       );
-      this.onSaved.emit();
+      this.dialogRef.close(EmergencyAccessAddEditDialogResult.Saved);
     } catch (e) {
       this.logService.error(e);
     }
-  }
+  };
 
-  async delete() {
-    this.onDeleted.emit();
-  }
+  delete = async () => {
+    this.dialogRef.close(EmergencyAccessAddEditDialogResult.Deleted);
+  };
+  /**
+   * Strongly typed helper to open a EmergencyAccessAddEditComponent
+   * @param dialogService Instance of the dialog service that will be used to open the dialog
+   * @param config Configuration for the dialog
+   */
+  static open = (
+    dialogService: DialogService,
+    config: DialogConfig<EmergencyAccessAddEditDialogData>,
+  ) => {
+    return dialogService.open<EmergencyAccessAddEditDialogResult>(
+      EmergencyAccessAddEditComponent,
+      config,
+    );
+  };
 }
diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
index 27bfc673ec..41c62db609 100644
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
@@ -1,264 +1,276 @@
 <app-header></app-header>
-
 <bit-container>
-  <p>
-    {{ "emergencyAccessDesc" | i18n }}
-    <a href="https://bitwarden.com/help/emergency-access/" target="_blank" rel="noreferrer">
-      {{ "learnMore" | i18n }}.
-    </a>
-  </p>
-
-  <p *ngIf="isOrganizationOwner">
-    <b>{{ "warning" | i18n }}:</b> {{ "emergencyAccessOwnerWarning" | i18n }}
-  </p>
-
-  <div class="page-header d-flex">
-    <h2>
-      {{ "trustedEmergencyContacts" | i18n }}
-      <app-premium-badge></app-premium-badge>
-    </h2>
-    <div class="ml-auto d-flex">
-      <button
-        class="btn btn-sm btn-outline-primary ml-3"
-        type="button"
-        (click)="invite()"
-        [disabled]="!canAccessPremium"
+  <bit-section>
+    <p bitTypography="body1">
+      <span class="tw-text-main">{{ "emergencyAccessDesc" | i18n }}</span>
+      <a
+        bitLink
+        href="https://bitwarden.com/help/emergency-access/"
+        target="_blank"
+        rel="noreferrer"
       >
-        <i aria-hidden="true" class="bwi bwi-plus bwi-fw"></i>
-        {{ "addEmergencyContact" | i18n }}
-      </button>
+        {{ "learnMore" | i18n }}.
+      </a>
+    </p>
+    <bit-callout *ngIf="isOrganizationOwner" type="warning" title="{{ 'warning' | i18n }}">{{
+      "emergencyAccessOwnerWarning" | i18n
+    }}</bit-callout>
+  </bit-section>
+  <bit-section>
+    <div class="tw-flex tw-items-center tw-gap-2 tw-mb-2">
+      <h2 bitTypography="h2" noMargin class="tw-mb-0">
+        {{ "trustedEmergencyContacts" | i18n }}
+      </h2>
+      <app-premium-badge></app-premium-badge>
+      <div class="tw-ml-auto tw-flex">
+        <button
+          type="button"
+          bitButton
+          buttonType="primary"
+          [bitAction]="invite"
+          [disabled]="!canAccessPremium"
+        >
+          <i aria-hidden="true" class="bwi bwi-plus bwi-fw"></i>
+          {{ "addEmergencyContact" | i18n }}
+        </button>
+      </div>
     </div>
-  </div>
+    <bit-table *ngIf="trustedContacts && trustedContacts.length">
+      <ng-container header>
+        <tr>
+          <th bitCell>{{ "name" | i18n }}</th>
+          <th bitCell>{{ "accessLevel" | i18n }}</th>
+          <th bitCell class="tw-text-right">{{ "options" | i18n }}</th>
+        </tr>
+      </ng-container>
+      <ng-template body>
+        <tr bitRow *ngFor="let c of trustedContacts; let i = index">
+          <td bitCell class="tw-flex tw-items-center tw-gap-4">
+            <bit-avatar
+              [text]="c | userName"
+              [id]="c.granteeId"
+              [color]="c.avatarColor"
+              size="small"
+            ></bit-avatar>
+            <span>
+              <a bitLink href="#" appStopClick (click)="edit(c)">{{ c.email }}</a>
+              <span
+                bitBadge
+                variant="secondary"
+                *ngIf="c.status === emergencyAccessStatusType.Invited"
+                >{{ "invited" | i18n }}</span
+              >
+              <span
+                bitBadge
+                variant="warning"
+                *ngIf="c.status === emergencyAccessStatusType.Accepted"
+                >{{ "accepted" | i18n }}</span
+              >
+              <span
+                bitBadge
+                variant="warning"
+                *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
+                >{{ "emergencyAccessRecoveryInitiated" | i18n }}</span
+              >
+              <span bitBadge *ngIf="c.status === emergencyAccessStatusType.RecoveryApproved">{{
+                "emergencyAccessRecoveryApproved" | i18n
+              }}</span>
 
-  <table
-    class="table table-hover table-list mb-0"
-    *ngIf="trustedContacts && trustedContacts.length"
-  >
-    <tbody>
-      <tr *ngFor="let c of trustedContacts; let i = index">
-        <td width="30">
-          <bit-avatar
-            [text]="c | userName"
-            [id]="c.granteeId"
-            [color]="c.avatarColor"
-            size="small"
-          ></bit-avatar>
-        </td>
-        <td>
-          <a href="#" appStopClick (click)="edit(c)">{{ c.email }}</a>
-          <span
-            bitBadge
-            variant="secondary"
-            *ngIf="c.status === emergencyAccessStatusType.Invited"
-            >{{ "invited" | i18n }}</span
-          >
-          <span
-            bitBadge
-            variant="warning"
-            *ngIf="c.status === emergencyAccessStatusType.Accepted"
-            >{{ "accepted" | i18n }}</span
-          >
-          <span
-            bitBadge
-            variant="warning"
-            *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
-            >{{ "emergencyAccessRecoveryInitiated" | i18n }}</span
-          >
-          <span bitBadge *ngIf="c.status === emergencyAccessStatusType.RecoveryApproved">{{
-            "emergencyAccessRecoveryApproved" | i18n
-          }}</span>
-
-          <span bitBadge *ngIf="c.type === emergencyAccessType.View">{{ "view" | i18n }}</span>
-          <span bitBadge *ngIf="c.type === emergencyAccessType.Takeover">{{
-            "takeover" | i18n
-          }}</span>
-
-          <small class="text-muted d-block" *ngIf="c.name">{{ c.name }}</small>
-        </td>
-        <td class="table-list-options">
-          <button
-            [bitMenuTriggerFor]="trustedContactOptions"
-            class="tw-border-none tw-bg-transparent tw-text-main"
-            type="button"
-            appA11yTitle="{{ 'options' | i18n }}"
-          >
-            <i class="bwi bwi-ellipsis-v bwi-lg" aria-hidden="true"></i>
-          </button>
-          <bit-menu #trustedContactOptions>
+              <small class="tw-text-muted tw-block" *ngIf="c.name">{{ c.name }}</small>
+            </span>
+          </td>
+          <td bitCell>
+            <span bitBadge *ngIf="c.type === emergencyAccessType.View">{{ "view" | i18n }}</span>
+            <span bitBadge *ngIf="c.type === emergencyAccessType.Takeover">{{
+              "takeover" | i18n
+            }}</span>
+          </td>
+          <td bitCell class="tw-text-right">
             <button
+              [bitMenuTriggerFor]="trustedContactOptions"
               type="button"
-              bitMenuItem
-              *ngIf="c.status === emergencyAccessStatusType.Invited"
-              (click)="reinvite(c)"
-            >
-              <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
-              {{ "resendInvitation" | i18n }}
-            </button>
-            <button
-              type="button"
-              bitMenuItem
-              *ngIf="c.status === emergencyAccessStatusType.Accepted"
-              (click)="confirm(c)"
-            >
-              <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
-              {{ "confirm" | i18n }}
-            </button>
-            <button
-              type="button"
-              bitMenuItem
-              *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
-              (click)="approve(c)"
-            >
-              <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
-              {{ "approve" | i18n }}
-            </button>
-            <button
-              type="button"
-              bitMenuItem
-              *ngIf="
-                c.status === emergencyAccessStatusType.RecoveryInitiated ||
-                c.status === emergencyAccessStatusType.RecoveryApproved
-              "
-              (click)="reject(c)"
-            >
-              <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
-              {{ "reject" | i18n }}
-            </button>
-            <button type="button" bitMenuItem (click)="remove(c)">
-              <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
-              {{ "remove" | i18n }}
-            </button>
-          </bit-menu>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-
-  <ng-container *ngIf="!trustedContacts || !trustedContacts.length">
-    <p *ngIf="loaded">{{ "noTrustedContacts" | i18n }}</p>
-    <ng-container *ngIf="!loaded">
-      <i
-        class="bwi bwi-spinner bwi-spin text-muted"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-      ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
+              appA11yTitle="{{ 'options' | i18n }}"
+              bitIconButton="bwi-ellipsis-v"
+              buttonType="main"
+            ></button>
+            <bit-menu #trustedContactOptions>
+              <button
+                type="button"
+                bitMenuItem
+                *ngIf="c.status === emergencyAccessStatusType.Invited"
+                (click)="reinvite(c)"
+              >
+                <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
+                {{ "resendInvitation" | i18n }}
+              </button>
+              <button
+                type="button"
+                bitMenuItem
+                *ngIf="c.status === emergencyAccessStatusType.Accepted"
+                (click)="confirm(c)"
+              >
+                <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
+                {{ "confirm" | i18n }}
+              </button>
+              <button
+                type="button"
+                bitMenuItem
+                *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
+                (click)="approve(c)"
+              >
+                <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
+                {{ "approve" | i18n }}
+              </button>
+              <button
+                type="button"
+                bitMenuItem
+                *ngIf="
+                  c.status === emergencyAccessStatusType.RecoveryInitiated ||
+                  c.status === emergencyAccessStatusType.RecoveryApproved
+                "
+                (click)="reject(c)"
+              >
+                <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
+                {{ "reject" | i18n }}
+              </button>
+              <button type="button" bitMenuItem (click)="remove(c)">
+                <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
+                {{ "remove" | i18n }}
+              </button>
+            </bit-menu>
+          </td>
+        </tr>
+      </ng-template>
+    </bit-table>
+    <ng-container *ngIf="!trustedContacts || !trustedContacts.length">
+      <p bitTypography="body1" class="tw-mt-2" *ngIf="loaded">{{ "noTrustedContacts" | i18n }}</p>
+      <ng-container *ngIf="!loaded">
+        <i
+          class="bwi bwi-spinner bwi-spin text-muted"
+          title="{{ 'loading' | i18n }}"
+          aria-hidden="true"
+        ></i>
+        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+      </ng-container>
     </ng-container>
-  </ng-container>
+  </bit-section>
 
-  <div class="page-header spaced-header">
-    <h2>{{ "designatedEmergencyContacts" | i18n }}</h2>
-  </div>
+  <bit-section>
+    <h2 bitTypography="h2">{{ "designatedEmergencyContacts" | i18n }}</h2>
 
-  <table
-    class="table table-hover table-list mb-0"
-    *ngIf="grantedContacts && grantedContacts.length"
-  >
-    <tbody>
-      <tr *ngFor="let c of grantedContacts; let i = index">
-        <td width="30">
-          <bit-avatar
-            [text]="c | userName"
-            [id]="c.grantorId"
-            [color]="c.avatarColor"
-            size="small"
-          ></bit-avatar>
-        </td>
-        <td>
-          <span>{{ c.email }}</span>
-          <span bitBadge *ngIf="c.status === emergencyAccessStatusType.Invited">{{
-            "invited" | i18n
-          }}</span>
-          <span
-            bitBadge
-            variant="warning"
-            *ngIf="c.status === emergencyAccessStatusType.Accepted"
-            >{{ "accepted" | i18n }}</span
-          >
-          <span
-            bitBadge
-            variant="warning"
-            *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
-            >{{ "emergencyAccessRecoveryInitiated" | i18n }}</span
-          >
-          <span
-            bitBadge
-            variant="success"
-            *ngIf="c.status === emergencyAccessStatusType.RecoveryApproved"
-            >{{ "emergencyAccessRecoveryApproved" | i18n }}</span
-          >
+    <bit-table *ngIf="grantedContacts && grantedContacts.length">
+      <ng-container header>
+        <tr>
+          <th bitCell>{{ "name" | i18n }}</th>
+          <th bitCell>{{ "accessLevel" | i18n }}</th>
+          <th bitCell class="tw-text-right">{{ "options" | i18n }}</th>
+        </tr>
+      </ng-container>
+      <ng-template body>
+        <tr bitRow *ngFor="let c of grantedContacts; let i = index">
+          <td bitCell class="tw-flex tw-items-center tw-gap-4">
+            <bit-avatar
+              [text]="c | userName"
+              [id]="c.grantorId"
+              [color]="c.avatarColor"
+              size="small"
+            ></bit-avatar>
+            <span>
+              <span>{{ c.email }}</span>
+              <span bitBadge *ngIf="c.status === emergencyAccessStatusType.Invited">{{
+                "invited" | i18n
+              }}</span>
+              <span
+                bitBadge
+                variant="warning"
+                *ngIf="c.status === emergencyAccessStatusType.Accepted"
+                >{{ "accepted" | i18n }}</span
+              >
+              <span
+                bitBadge
+                variant="warning"
+                *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
+                >{{ "emergencyAccessRecoveryInitiated" | i18n }}</span
+              >
+              <span
+                bitBadge
+                variant="success"
+                *ngIf="c.status === emergencyAccessStatusType.RecoveryApproved"
+                >{{ "emergencyAccessRecoveryApproved" | i18n }}</span
+              >
 
-          <span bitBadge *ngIf="c.type === emergencyAccessType.View">{{ "view" | i18n }}</span>
-          <span bitBadge *ngIf="c.type === emergencyAccessType.Takeover">{{
-            "takeover" | i18n
-          }}</span>
-
-          <small class="text-muted d-block" *ngIf="c.name">{{ c.name }}</small>
-        </td>
-        <td class="table-list-options">
-          <button
-            [bitMenuTriggerFor]="grantedContactOptions"
-            class="tw-border-none tw-bg-transparent tw-text-main"
-            type="button"
-            appA11yTitle="{{ 'options' | i18n }}"
-          >
-            <i class="bwi bwi-ellipsis-v bwi-lg" aria-hidden="true"></i>
-          </button>
-          <bit-menu #grantedContactOptions>
+              <small class="tw-text-muted tw-block" *ngIf="c.name">{{ c.name }}</small>
+            </span>
+          </td>
+          <td bitCell>
+            <span bitBadge *ngIf="c.type === emergencyAccessType.View">{{ "view" | i18n }}</span>
+            <span bitBadge *ngIf="c.type === emergencyAccessType.Takeover">{{
+              "takeover" | i18n
+            }}</span>
+          </td>
+          <td bitCell class="tw-text-right">
             <button
+              [bitMenuTriggerFor]="grantedContactOptions"
               type="button"
-              bitMenuItem
-              *ngIf="c.status === emergencyAccessStatusType.Confirmed"
-              (click)="requestAccess(c)"
-            >
-              <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
-              {{ "requestAccess" | i18n }}
-            </button>
-            <button
-              type="button"
-              bitMenuItem
-              *ngIf="
-                c.status === emergencyAccessStatusType.RecoveryApproved &&
-                c.type === emergencyAccessType.Takeover
-              "
-              (click)="takeover(c)"
-            >
-              <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
-              {{ "takeover" | i18n }}
-            </button>
-            <button
-              type="button"
-              bitMenuItem
-              *ngIf="
-                c.status === emergencyAccessStatusType.RecoveryApproved &&
-                c.type === emergencyAccessType.View
-              "
-              [routerLink]="c.id"
-            >
-              <i class="bwi bwi-fw bwi-eye" aria-hidden="true"></i>
-              {{ "view" | i18n }}
-            </button>
-            <button type="button" bitMenuItem (click)="remove(c)">
-              <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
-              {{ "remove" | i18n }}
-            </button>
-          </bit-menu>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-
-  <ng-container *ngIf="!grantedContacts || !grantedContacts.length">
-    <p *ngIf="loaded">{{ "noGrantedAccess" | i18n }}</p>
-    <ng-container *ngIf="!loaded">
-      <i
-        class="bwi bwi-spinner bwi-spin text-muted"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-      ></i>
-      <span class="sr-only">{{ "loading" | i18n }}</span>
+              appA11yTitle="{{ 'options' | i18n }}"
+              bitIconButton="bwi-ellipsis-v"
+              buttonType="main"
+            ></button>
+            <bit-menu #grantedContactOptions>
+              <button
+                type="button"
+                bitMenuItem
+                *ngIf="c.status === emergencyAccessStatusType.Confirmed"
+                (click)="requestAccess(c)"
+              >
+                <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
+                {{ "requestAccess" | i18n }}
+              </button>
+              <button
+                type="button"
+                bitMenuItem
+                *ngIf="
+                  c.status === emergencyAccessStatusType.RecoveryApproved &&
+                  c.type === emergencyAccessType.Takeover
+                "
+                (click)="takeover(c)"
+              >
+                <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
+                {{ "takeover" | i18n }}
+              </button>
+              <button
+                type="button"
+                bitMenuItem
+                *ngIf="
+                  c.status === emergencyAccessStatusType.RecoveryApproved &&
+                  c.type === emergencyAccessType.View
+                "
+                [routerLink]="c.id"
+              >
+                <i class="bwi bwi-fw bwi-eye" aria-hidden="true"></i>
+                {{ "view" | i18n }}
+              </button>
+              <button type="button" bitMenuItem (click)="remove(c)">
+                <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
+                {{ "remove" | i18n }}
+              </button>
+            </bit-menu>
+          </td>
+        </tr>
+      </ng-template>
+    </bit-table>
+    <ng-container *ngIf="!grantedContacts || !grantedContacts.length">
+      <p bitTypography="body1" *ngIf="loaded">{{ "noGrantedAccess" | i18n }}</p>
+      <ng-container *ngIf="!loaded">
+        <i
+          class="bwi bwi-spinner bwi-spin text-muted"
+          title="{{ 'loading' | i18n }}"
+          aria-hidden="true"
+        ></i>
+        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+      </ng-container>
     </ng-container>
-  </ng-container>
+  </bit-section>
 </bit-container>
 
 <ng-template #addEdit></ng-template>
diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts
index 084a80a582..7293860bea 100644
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
+import { lastValueFrom } from "rxjs";
 
 import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
-import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
@@ -18,9 +18,18 @@ import {
   GrantorEmergencyAccess,
 } from "../../emergency-access/models/emergency-access";
 
-import { EmergencyAccessConfirmComponent } from "./confirm/emergency-access-confirm.component";
-import { EmergencyAccessAddEditComponent } from "./emergency-access-add-edit.component";
-import { EmergencyAccessTakeoverComponent } from "./takeover/emergency-access-takeover.component";
+import {
+  EmergencyAccessConfirmComponent,
+  EmergencyAccessConfirmDialogResult,
+} from "./confirm/emergency-access-confirm.component";
+import {
+  EmergencyAccessAddEditComponent,
+  EmergencyAccessAddEditDialogResult,
+} from "./emergency-access-add-edit.component";
+import {
+  EmergencyAccessTakeoverComponent,
+  EmergencyAccessTakeoverResultType,
+} from "./takeover/emergency-access-takeover.component";
 
 @Component({
   selector: "emergency-access",
@@ -46,7 +55,6 @@ export class EmergencyAccessComponent implements OnInit {
   constructor(
     private emergencyAccessService: EmergencyAccessService,
     private i18nService: I18nService,
-    private modalService: ModalService,
     private platformUtilsService: PlatformUtilsService,
     private messagingService: MessagingService,
     private userNamePipe: UserNamePipe,
@@ -78,37 +86,26 @@ export class EmergencyAccessComponent implements OnInit {
     }
   }
 
-  async edit(details: GranteeEmergencyAccess) {
-    const [modal] = await this.modalService.openViewRef(
-      EmergencyAccessAddEditComponent,
-      this.addEditModalRef,
-      (comp) => {
-        comp.name = this.userNamePipe.transform(details);
-        comp.emergencyAccessId = details?.id;
-        comp.readOnly = !this.canAccessPremium;
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-        comp.onSaved.subscribe(() => {
-          modal.close();
-          // 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.load();
-        });
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-        comp.onDeleted.subscribe(() => {
-          modal.close();
-          // 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.remove(details);
-        });
+  edit = async (details: GranteeEmergencyAccess) => {
+    const dialogRef = EmergencyAccessAddEditComponent.open(this.dialogService, {
+      data: {
+        name: this.userNamePipe.transform(details),
+        emergencyAccessId: details?.id,
+        readOnly: !this.canAccessPremium,
       },
-    );
-  }
+    });
 
-  invite() {
-    // 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.edit(null);
-  }
+    const result = await lastValueFrom(dialogRef.closed);
+    if (result === EmergencyAccessAddEditDialogResult.Saved) {
+      await this.load();
+    } else if (result === EmergencyAccessAddEditDialogResult.Deleted) {
+      await this.remove(details);
+    }
+  };
+
+  invite = async () => {
+    await this.edit(null);
+  };
 
   async reinvite(contact: GranteeEmergencyAccess) {
     if (this.actionPromise != null) {
@@ -135,29 +132,23 @@ export class EmergencyAccessComponent implements OnInit {
 
     const autoConfirm = await this.stateService.getAutoConfirmFingerPrints();
     if (autoConfirm == null || !autoConfirm) {
-      const [modal] = await this.modalService.openViewRef(
-        EmergencyAccessConfirmComponent,
-        this.confirmModalRef,
-        (comp) => {
-          comp.name = this.userNamePipe.transform(contact);
-          comp.emergencyAccessId = contact.id;
-          comp.userId = contact?.granteeId;
-          // eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
-          comp.onConfirmed.subscribe(async () => {
-            modal.close();
-
-            comp.formPromise = this.emergencyAccessService.confirm(contact.id, contact.granteeId);
-            await comp.formPromise;
-
-            updateUser();
-            this.platformUtilsService.showToast(
-              "success",
-              null,
-              this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(contact)),
-            );
-          });
+      const dialogRef = EmergencyAccessConfirmComponent.open(this.dialogService, {
+        data: {
+          name: this.userNamePipe.transform(contact),
+          emergencyAccessId: contact.id,
+          userId: contact?.granteeId,
         },
-      );
+      });
+      const result = await lastValueFrom(dialogRef.closed);
+      if (result === EmergencyAccessConfirmDialogResult.Confirmed) {
+        await this.emergencyAccessService.confirm(contact.id, contact.granteeId);
+        updateUser();
+        this.platformUtilsService.showToast(
+          "success",
+          null,
+          this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(contact)),
+        );
+      }
       return;
     }
 
@@ -267,27 +258,23 @@ export class EmergencyAccessComponent implements OnInit {
     );
   }
 
-  async takeover(details: GrantorEmergencyAccess) {
-    const [modal] = await this.modalService.openViewRef(
-      EmergencyAccessTakeoverComponent,
-      this.takeoverModalRef,
-      (comp) => {
-        comp.name = this.userNamePipe.transform(details);
-        comp.email = details.email;
-        comp.emergencyAccessId = details != null ? details.id : null;
-
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-        comp.onDone.subscribe(() => {
-          modal.close();
-          this.platformUtilsService.showToast(
-            "success",
-            null,
-            this.i18nService.t("passwordResetFor", this.userNamePipe.transform(details)),
-          );
-        });
+  takeover = async (details: GrantorEmergencyAccess) => {
+    const dialogRef = EmergencyAccessTakeoverComponent.open(this.dialogService, {
+      data: {
+        name: this.userNamePipe.transform(details),
+        email: details.email,
+        emergencyAccessId: details.id ?? null,
       },
-    );
-  }
+    });
+    const result = await lastValueFrom(dialogRef.closed);
+    if (result === EmergencyAccessTakeoverResultType.Done) {
+      this.platformUtilsService.showToast(
+        "success",
+        null,
+        this.i18nService.t("passwordResetFor", this.userNamePipe.transform(details)),
+      );
+    }
+  };
 
   private removeGrantee(details: GranteeEmergencyAccess) {
     const index = this.trustedContacts.indexOf(details);
diff --git a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html
index 99aa194c5d..5c72efbd61 100644
--- a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html
@@ -1,79 +1,54 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="userAddEditTitle">
-  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
-    <form
-      class="modal-content"
-      #form
-      (ngSubmit)="submit()"
-      [appApiAction]="formPromise"
-      ngNativeValidate
-    >
-      <div class="modal-header">
-        <h1 class="modal-title" id="userAddEditTitle">
-          {{ "takeover" | i18n }}
-          <small class="text-muted" *ngIf="name">{{ name }}</small>
-        </h1>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <app-callout type="warning">{{ "loggedOutWarning" | i18n }}</app-callout>
-        <auth-password-callout [policy]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
-        </auth-password-callout>
-        <div class="row">
-          <div class="col-6">
-            <div class="form-group">
-              <label for="masterPassword">{{ "newMasterPass" | i18n }}</label>
-              <input
-                id="masterPassword"
-                type="password"
-                name="NewMasterPasswordHash"
-                class="form-control mb-1"
-                [(ngModel)]="masterPassword"
-                required
-                appInputVerbatim
-                autocomplete="new-password"
-              />
-              <app-password-strength
-                [password]="masterPassword"
-                [email]="email"
-                [showText]="true"
-                (passwordStrengthResult)="getStrengthResult($event)"
-              >
-              </app-password-strength>
-            </div>
-          </div>
-          <div class="col-6">
-            <div class="form-group">
-              <label for="masterPasswordRetype">{{ "confirmNewMasterPass" | i18n }}</label>
-              <input
-                id="masterPasswordRetype"
-                type="password"
-                name="MasterPasswordRetype"
-                class="form-control"
-                [(ngModel)]="masterPasswordRetype"
-                required
-                appInputVerbatim
-                autocomplete="new-password"
-              />
-            </div>
-          </div>
+<form [formGroup]="takeoverForm" [bitSubmit]="submit">
+  <bit-dialog dialogSize="large">
+    <span bitDialogTitle>
+      {{ "takeover" | i18n }}
+      <small class="tw-text-muted" *ngIf="params.name">{{ params.name }}</small>
+    </span>
+    <div bitDialogContent>
+      <app-callout type="warning">{{ "loggedOutWarning" | i18n }}</app-callout>
+      <auth-password-callout [policy]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
+      </auth-password-callout>
+      <div class="tw-w-full tw-flex tw-gap-4">
+        <div class="tw-relative tw-flex-1">
+          <bit-form-field disableMargin class="tw-mb-2">
+            <bit-label>{{ "newMasterPass" | i18n }}</bit-label>
+            <input
+              bitInput
+              type="password"
+              autocomplete="new-password"
+              formControlName="masterPassword"
+            />
+            <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
+          </bit-form-field>
+          <app-password-strength
+            [password]="takeoverForm.value.masterPassword"
+            [email]="email"
+            [showText]="true"
+            (passwordStrengthResult)="getStrengthResult($event)"
+          >
+          </app-password-strength>
+        </div>
+        <div class="tw-relative tw-flex-1">
+          <bit-form-field disableMargin class="tw-mb-2">
+            <bit-label>{{ "confirmNewMasterPass" | i18n }}</bit-label>
+            <input
+              bitInput
+              type="password"
+              autocomplete="new-password"
+              formControlName="masterPasswordRetype"
+            />
+            <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
+          </bit-form-field>
         </div>
       </div>
-      <div class="modal-footer">
-        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-          <span>{{ "save" | i18n }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "cancel" | i18n }}
-        </button>
-      </div>
-    </form>
-  </div>
-</div>
+    </div>
+    <div bitDialogFooter>
+      <button type="submit" bitButton bitFormButton buttonType="primary">
+        {{ "save" | i18n }}
+      </button>
+      <button bitButton bitFormButton type="button" buttonType="secondary" bitDialogClose>
+        {{ "cancel" | i18n }}
+      </button>
+    </div>
+  </bit-dialog>
+</form>
diff --git a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.ts b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.ts
index 657421e3c0..575c6f4a23 100644
--- a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.ts
@@ -1,4 +1,6 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angular/core";
+import { DialogConfig, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
+import { Component, OnDestroy, OnInit, Inject, Input } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
 import { takeUntil } from "rxjs";
 
 import { ChangePasswordComponent } from "@bitwarden/angular/auth/components/change-password.component";
@@ -15,6 +17,17 @@ import { DialogService } from "@bitwarden/components";
 
 import { EmergencyAccessService } from "../../../emergency-access";
 
+export enum EmergencyAccessTakeoverResultType {
+  Done = "done",
+}
+type EmergencyAccessTakeoverDialogData = {
+  /** display name of the account requesting emergency access takeover */
+  name: string;
+  /** email of the account requesting emergency access takeover */
+  email: string;
+  /** traces a unique emergency request  */
+  emergencyAccessId: string;
+};
 @Component({
   selector: "emergency-access-takeover",
   templateUrl: "emergency-access-takeover.component.html",
@@ -24,16 +37,16 @@ export class EmergencyAccessTakeoverComponent
   extends ChangePasswordComponent
   implements OnInit, OnDestroy
 {
-  @Output() onDone = new EventEmitter();
-  @Input() emergencyAccessId: string;
-  @Input() name: string;
-  @Input() email: string;
   @Input() kdf: KdfType;
   @Input() kdfIterations: number;
-
-  formPromise: Promise<any>;
+  takeoverForm = this.formBuilder.group({
+    masterPassword: ["", [Validators.required]],
+    masterPasswordRetype: ["", [Validators.required]],
+  });
 
   constructor(
+    @Inject(DIALOG_DATA) protected params: EmergencyAccessTakeoverDialogData,
+    private formBuilder: FormBuilder,
     i18nService: I18nService,
     cryptoService: CryptoService,
     messagingService: MessagingService,
@@ -44,6 +57,7 @@ export class EmergencyAccessTakeoverComponent
     private emergencyAccessService: EmergencyAccessService,
     private logService: LogService,
     dialogService: DialogService,
+    private dialogRef: DialogRef<EmergencyAccessTakeoverResultType>,
   ) {
     super(
       i18nService,
@@ -58,7 +72,9 @@ export class EmergencyAccessTakeoverComponent
   }
 
   async ngOnInit() {
-    const policies = await this.emergencyAccessService.getGrantorPolicies(this.emergencyAccessId);
+    const policies = await this.emergencyAccessService.getGrantorPolicies(
+      this.params.emergencyAccessId,
+    );
     this.policyService
       .masterPasswordPolicyOptions$(policies)
       .pipe(takeUntil(this.destroy$))
@@ -70,18 +86,23 @@ export class EmergencyAccessTakeoverComponent
     super.ngOnDestroy();
   }
 
-  async submit() {
+  submit = async () => {
+    if (this.takeoverForm.invalid) {
+      this.takeoverForm.markAllAsTouched();
+      return;
+    }
+    this.masterPassword = this.takeoverForm.get("masterPassword").value;
+    this.masterPasswordRetype = this.takeoverForm.get("masterPasswordRetype").value;
     if (!(await this.strongPassword())) {
       return;
     }
 
     try {
       await this.emergencyAccessService.takeover(
-        this.emergencyAccessId,
+        this.params.emergencyAccessId,
         this.masterPassword,
-        this.email,
+        this.params.email,
       );
-      this.onDone.emit();
     } catch (e) {
       this.logService.error(e);
       this.platformUtilsService.showToast(
@@ -90,5 +111,20 @@ export class EmergencyAccessTakeoverComponent
         this.i18nService.t("unexpectedError"),
       );
     }
-  }
+    this.dialogRef.close(EmergencyAccessTakeoverResultType.Done);
+  };
+  /**
+   * Strongly typed helper to open a EmergencyAccessTakeoverComponent
+   * @param dialogService Instance of the dialog service that will be used to open the dialog
+   * @param config Configuration for the dialog
+   */
+  static open = (
+    dialogService: DialogService,
+    config: DialogConfig<EmergencyAccessTakeoverDialogData>,
+  ) => {
+    return dialogService.open<EmergencyAccessTakeoverResultType>(
+      EmergencyAccessTakeoverComponent,
+      config,
+    );
+  };
 }
diff --git a/apps/web/src/app/auth/settings/emergency-access/view/emergency-access-view.component.html b/apps/web/src/app/auth/settings/emergency-access/view/emergency-access-view.component.html
index 1b74204bde..a936e3a427 100644
--- a/apps/web/src/app/auth/settings/emergency-access/view/emergency-access-view.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/view/emergency-access-view.component.html
@@ -1,71 +1,76 @@
-<div class="page-header">
-  <h1>{{ "vault" | i18n }}</h1>
-</div>
-<div class="mt-4">
+<h1 bitTypography="h1">{{ "vault" | i18n }}</h1>
+
+<div class="tw-mt-6">
   <ng-container *ngIf="ciphers.length">
-    <table class="table table-hover table-list table-ciphers">
-      <tbody>
-        <tr *ngFor="let c of ciphers">
-          <td class="table-list-icon">
-            <app-vault-icon [cipher]="c"></app-vault-icon>
+    <bit-table>
+      <ng-template body>
+        <tr bitRow *ngFor="let currentCipher of ciphers">
+          <td bitCell>
+            <app-vault-icon [cipher]="currentCipher"></app-vault-icon>
           </td>
-          <td class="reduced-lh wrap">
-            <a href="#" appStopClick (click)="selectCipher(c)" title="{{ 'editItem' | i18n }}">{{
-              c.name
-            }}</a>
-            <ng-container *ngIf="c.organizationId">
+          <td bitCell class="tw-w-full">
+            <a
+              bitLink
+              href="#"
+              appStopClick
+              (click)="selectCipher(currentCipher)"
+              title="{{ 'editItem' | i18n }}"
+              >{{ currentCipher.name }}</a
+            >
+            <ng-container *ngIf="currentCipher.organizationId">
               <i
                 class="bwi bwi-collection"
                 appStopProp
                 title="{{ 'shared' | i18n }}"
                 aria-hidden="true"
               ></i>
-              <span class="sr-only">{{ "shared" | i18n }}</span>
+              <span class="tw-sr-only">{{ "shared" | i18n }}</span>
             </ng-container>
-            <ng-container *ngIf="c.hasAttachments">
+            <ng-container *ngIf="currentCipher.hasAttachments">
               <i
                 class="bwi bwi-paperclip"
                 appStopProp
                 title="{{ 'attachments' | i18n }}"
                 aria-hidden="true"
               ></i>
-              <span class="sr-only">{{ "attachments" | i18n }}</span>
+              <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
             </ng-container>
             <br />
-            <small>{{ c.subTitle }}</small>
+            <small class="tw-text-xs">{{ currentCipher.subTitle }}</small>
           </td>
-          <td class="table-list-options">
-            <div class="dropdown" appListDropdown *ngIf="c.hasAttachments">
+          <td bitCell>
+            <div *ngIf="currentCipher.hasAttachments">
               <button
-                class="btn btn-outline-secondary dropdown-toggle"
+                [bitMenuTriggerFor]="optionsMenu"
                 type="button"
-                id="dropdownMenuButton"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="false"
+                buttonType="main"
+                bitIconButton="bwi-ellipsis-v"
                 appA11yTitle="{{ 'options' | i18n }}"
-              >
-                <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
-              </button>
-              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-                <a class="dropdown-item" href="#" appStopClick (click)="viewAttachments(c)">
+              ></button>
+              <bit-menu #optionsMenu>
+                <button
+                  type="button"
+                  bitMenuItem
+                  appStopClick
+                  (click)="viewAttachments(currentCipher)"
+                >
                   <i class="bwi bwi-fw bwi-paperclip" aria-hidden="true"></i>
                   {{ "attachments" | i18n }}
-                </a>
-              </div>
+                </button>
+              </bit-menu>
             </div>
           </td>
         </tr>
-      </tbody>
-    </table>
+      </ng-template>
+    </bit-table>
   </ng-container>
   <ng-container *ngIf="!loaded">
     <i
-      class="bwi bwi-spinner bwi-spin text-muted"
+      class="bwi bwi-spinner bwi-spin tw-text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
-    <span class="sr-only">{{ "loading" | i18n }}</span>
+    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </ng-container>
 </div>
 <ng-template #cipherAddEdit></ng-template>
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 2d362bc084..f26aa3327d 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -578,6 +578,9 @@
   "access": {
     "message": "Access"
   },
+  "accessLevel": {
+    "message": "Access level"
+  },
   "loggedOut": {
     "message": "Logged out"
   },