From 3b0f27f2e9a9937bf6db55e41fea8297c6d02f83 Mon Sep 17 00:00:00 2001
From: Bitwarden DevOps
 <106330231+bitwarden-devops-bot@users.noreply.github.com>
Date: Tue, 27 Aug 2024 12:42:45 -0400
Subject: [PATCH 01/18] Bumped client version(s) (#10750)

---
 apps/desktop/package.json          | 2 +-
 apps/desktop/src/package-lock.json | 4 ++--
 apps/desktop/src/package.json      | 2 +-
 package-lock.json                  | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 1ca7de0e135..994aba73292 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@bitwarden/desktop",
   "description": "A secure and free password manager for all of your devices.",
-  "version": "2024.8.2",
+  "version": "2024.8.3",
   "keywords": [
     "bitwarden",
     "password",
diff --git a/apps/desktop/src/package-lock.json b/apps/desktop/src/package-lock.json
index e7496714416..ab46091790b 100644
--- a/apps/desktop/src/package-lock.json
+++ b/apps/desktop/src/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@bitwarden/desktop",
-  "version": "2024.8.2",
+  "version": "2024.8.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bitwarden/desktop",
-      "version": "2024.8.2",
+      "version": "2024.8.3",
       "license": "GPL-3.0",
       "dependencies": {
         "@bitwarden/desktop-napi": "file:../desktop_native",
diff --git a/apps/desktop/src/package.json b/apps/desktop/src/package.json
index 577683e0a86..df1f7f70d41 100644
--- a/apps/desktop/src/package.json
+++ b/apps/desktop/src/package.json
@@ -2,7 +2,7 @@
   "name": "@bitwarden/desktop",
   "productName": "Bitwarden",
   "description": "A secure and free password manager for all of your devices.",
-  "version": "2024.8.2",
+  "version": "2024.8.3",
   "author": "Bitwarden Inc. <hello@bitwarden.com> (https://bitwarden.com)",
   "homepage": "https://bitwarden.com",
   "license": "GPL-3.0",
diff --git a/package-lock.json b/package-lock.json
index 941839c6f41..68873cc8314 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -232,7 +232,7 @@
     },
     "apps/desktop": {
       "name": "@bitwarden/desktop",
-      "version": "2024.8.2",
+      "version": "2024.8.3",
       "hasInstallScript": true,
       "license": "GPL-3.0"
     },

From 3fc1b5731cb7c43d70a870a3d5147c923a008478 Mon Sep 17 00:00:00 2001
From: Justin Baur <19896123+justindbaur@users.noreply.github.com>
Date: Tue, 27 Aug 2024 12:59:30 -0400
Subject: [PATCH 02/18] Correct `dist:safari` Build (#10748)

---
 apps/browser/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/browser/package.json b/apps/browser/package.json
index db743b509bf..433ddecd2ac 100644
--- a/apps/browser/package.json
+++ b/apps/browser/package.json
@@ -20,8 +20,8 @@
     "dist:chrome:beta": "cross-env MANIFEST_VERSION=3 npm run build:prod:beta && cross-env MANIFEST_VERSION=3 BETA_BUILD=1 gulp dist:chrome",
     "dist:firefox": "npm run build:prod && gulp dist:firefox",
     "dist:opera": "npm run build:prod && gulp dist:opera",
-    "dist:safari": "cross-env MANIFEST_VERSION=3 BROWSER=safari npm run build:prod && cross-env MANIFEST_VERSION=3 gulp dist:safari",
-    "dist:safari:mv3": "npm run build:prod && gulp dist:safari",
+    "dist:safari": "cross-env BROWSER=safari npm run build:prod && gulp dist:safari",
+    "dist:safari:mv3": "cross-env MANIFEST_VERSION=3 BROWSER=safari run build:prod && cross-env MANIFEST_VERSION=3 BROWSER=safari gulp dist:safari",
     "dist:safari:mas": "npm run build:prod && gulp dist:safari:mas",
     "dist:safari:masdev": "npm run build:prod && gulp dist:safari:masdev",
     "dist:safari:dmg": "npm run build:prod && gulp dist:safari:dmg",

From 11eba8d77902c8b115da541cc09a0472cf74aca3 Mon Sep 17 00:00:00 2001
From: Justin Baur <19896123+justindbaur@users.noreply.github.com>
Date: Tue, 27 Aug 2024 13:11:42 -0400
Subject: [PATCH 03/18] Add Null Check On `diskAccount` (#10550)

---
 libs/common/src/platform/services/state.service.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/libs/common/src/platform/services/state.service.ts b/libs/common/src/platform/services/state.service.ts
index 70d2211a884..d46a5189a48 100644
--- a/libs/common/src/platform/services/state.service.ts
+++ b/libs/common/src/platform/services/state.service.ts
@@ -117,6 +117,13 @@ export class StateService<
         state.accounts = {};
       }
       state.accounts[userId] = this.createAccount();
+
+      if (diskAccount == null) {
+        // Return early because we can't set the diskAccount.profile
+        // if diskAccount itself is null
+        return state;
+      }
+
       state.accounts[userId].profile = diskAccount.profile;
       return state;
     });

From a7da5bb40f42312a839d034a3a9621c411f2b848 Mon Sep 17 00:00:00 2001
From: Justin Baur <19896123+justindbaur@users.noreply.github.com>
Date: Tue, 27 Aug 2024 13:12:21 -0400
Subject: [PATCH 04/18] Remove Some Unneccesary Async From Init Methods
 (#10485)

---
 .../src/autofill/background/notification.background.spec.ts | 4 ++--
 .../src/autofill/background/notification.background.ts      | 2 +-
 apps/browser/src/background/commands.background.ts          | 2 +-
 apps/browser/src/background/idle.background.ts              | 2 +-
 apps/browser/src/background/main.background.ts              | 6 +++---
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/browser/src/autofill/background/notification.background.spec.ts b/apps/browser/src/autofill/background/notification.background.spec.ts
index 2c9232d8b5c..f3ebe5b1cc9 100644
--- a/apps/browser/src/autofill/background/notification.background.spec.ts
+++ b/apps/browser/src/autofill/background/notification.background.spec.ts
@@ -137,8 +137,8 @@ describe("NotificationBackground", () => {
   });
 
   describe("notification bar extension message handlers", () => {
-    beforeEach(async () => {
-      await notificationBackground.init();
+    beforeEach(() => {
+      notificationBackground.init();
     });
 
     it("ignores messages whose command does not match the expected handlers", () => {
diff --git a/apps/browser/src/autofill/background/notification.background.ts b/apps/browser/src/autofill/background/notification.background.ts
index 25f45bd0659..9aac9b099a2 100644
--- a/apps/browser/src/autofill/background/notification.background.ts
+++ b/apps/browser/src/autofill/background/notification.background.ts
@@ -94,7 +94,7 @@ export default class NotificationBackground {
     private accountService: AccountService,
   ) {}
 
-  async init() {
+  init() {
     if (chrome.runtime == null) {
       return;
     }
diff --git a/apps/browser/src/background/commands.background.ts b/apps/browser/src/background/commands.background.ts
index b88f6127bc4..b87f5d0fcfb 100644
--- a/apps/browser/src/background/commands.background.ts
+++ b/apps/browser/src/background/commands.background.ts
@@ -26,7 +26,7 @@ export default class CommandsBackground {
     this.isVivaldi = this.platformUtilsService.isVivaldi();
   }
 
-  async init() {
+  init() {
     BrowserApi.messageListener("commands.background", (msg: any) => {
       if (msg.command === "unlockCompleted" && msg.data.target === "commands.background") {
         this.processCommand(
diff --git a/apps/browser/src/background/idle.background.ts b/apps/browser/src/background/idle.background.ts
index c0cd3a86aae..a5d50e8508f 100644
--- a/apps/browser/src/background/idle.background.ts
+++ b/apps/browser/src/background/idle.background.ts
@@ -23,7 +23,7 @@ export default class IdleBackground {
     this.idle = chrome.idle || (browser != null ? browser.idle : null);
   }
 
-  async init() {
+  init() {
     if (!this.idle) {
       return;
     }
diff --git a/apps/browser/src/background/main.background.ts b/apps/browser/src/background/main.background.ts
index 3944f2d8afc..432d6566dda 100644
--- a/apps/browser/src/background/main.background.ts
+++ b/apps/browser/src/background/main.background.ts
@@ -1238,11 +1238,11 @@ export default class MainBackground {
     await this.vaultTimeoutService.init(true);
     this.fido2Background.init();
     await this.runtimeBackground.init();
-    await this.notificationBackground.init();
+    this.notificationBackground.init();
     this.filelessImporterBackground.init();
-    await this.commandsBackground.init();
+    this.commandsBackground.init();
     this.contextMenusBackground?.init();
-    await this.idleBackground.init();
+    this.idleBackground.init();
     this.webRequestBackground?.startListening();
     this.syncServiceListener?.listener$().subscribe();
     await this.autoSubmitLoginBackground.init();

From e255d84121b27dee5afcb45cff44d1d1d74c39e6 Mon Sep 17 00:00:00 2001
From: Jordan Aasen <166539328+jaasen-livefront@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:18:02 -0700
Subject: [PATCH 05/18] [PM-4473] use anon layout for send access component
 (#10699)

* use anon layout for send access component

* fix width on explainer.

* don't show creator ID until send is decrypted in send access
---
 apps/web/src/app/oss-routing.module.ts        |  24 +++-
 .../src/app/tools/send/access.component.html  | 127 +++++++-----------
 .../src/app/tools/send/access.component.ts    |  11 ++
 .../send/send-access-explainer.component.html |  18 +++
 .../send/send-access-explainer.component.ts   |  17 +++
 apps/web/src/locales/en/messages.json         |   4 +
 6 files changed, 116 insertions(+), 85 deletions(-)
 create mode 100644 apps/web/src/app/tools/send/send-access-explainer.component.html
 create mode 100644 apps/web/src/app/tools/send/send-access-explainer.component.ts

diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts
index 32dcb695a8f..de0e8a2da93 100644
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -68,6 +68,7 @@ import { PreferencesComponent } from "./settings/preferences.component";
 import { GeneratorComponent } from "./tools/generator.component";
 import { ReportsModule } from "./tools/reports";
 import { AccessComponent } from "./tools/send/access.component";
+import { SendAccessExplainerComponent } from "./tools/send/send-access-explainer.component";
 import { SendComponent } from "./tools/send/send.component";
 import { VaultModule } from "./vault/individual-vault/vault.module";
 
@@ -145,11 +146,6 @@ const routes: Routes = [
         canActivate: [unauthGuardFn()],
         data: { titleId: "deleteAccount" } satisfies DataProperties,
       },
-      {
-        path: "send/:sendId/:key",
-        component: AccessComponent,
-        data: { titleId: "Bitwarden Send" } satisfies DataProperties,
-      },
       {
         path: "update-temp-password",
         component: UpdateTempPasswordComponent,
@@ -210,6 +206,24 @@ const routes: Routes = [
           },
         ],
       },
+      {
+        path: "send/:sendId/:key",
+        data: {
+          pageTitle: "viewSend",
+          showReadonlyHostname: true,
+        } satisfies DataProperties & AnonLayoutWrapperData,
+        children: [
+          {
+            path: "",
+            component: AccessComponent,
+          },
+          {
+            path: "",
+            outlet: "secondary",
+            component: SendAccessExplainerComponent,
+          },
+        ],
+      },
       {
         path: "set-password-jit",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification)],
diff --git a/apps/web/src/app/tools/send/access.component.html b/apps/web/src/app/tools/send/access.component.html
index d1a6f4d42d2..2a7514ed854 100644
--- a/apps/web/src/app/tools/send/access.component.html
+++ b/apps/web/src/app/tools/send/access.component.html
@@ -1,85 +1,52 @@
 <form [formGroup]="formGroup" [bitSubmit]="load">
-  <div
-    class="tw-mx-auto tw-mt-5 tw-flex tw-max-w-xl tw-flex-col tw-items-center tw-justify-center tw-p-8"
-  >
-    <img class="logo logo-themed" alt="Bitwarden" />
-    <div class="tw-mt-5 tw-w-full">
-      <h2 bitTypography="h2" class="tw-mb-4 tw-text-center">View Send</h2>
-    </div>
-    <div class="tw-w-full tw-text-center" *ngIf="creatorIdentifier != null">
-      <p>{{ "sendAccessCreatorIdentifier" | i18n: creatorIdentifier }}</p>
-    </div>
-    <bit-callout *ngIf="hideEmail" type="warning" title="{{ 'warning' | i18n }}">
-      {{ "viewSendHiddenEmailWarning" | i18n }}
-      <a bitLink href="https://bitwarden.com/help/receive-send/" target="_blank" rel="noreferrer">{{
-        "learnMore" | i18n
-      }}</a
-      >.
-    </bit-callout>
-    <div
-      class="tw-mt-3 tw-w-10/12 tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-6"
-    >
-      <ng-container *ngIf="!loading; else spinner">
-        <app-send-access-password
-          (setPasswordEvent)="setPassword($event)"
-          *ngIf="passwordRequired && !error"
-        ></app-send-access-password>
-        <bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="unavailable">
-          <ng-container slot="description">{{ "sendAccessUnavailable" | i18n }}</ng-container>
-        </bit-no-items>
-        <bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="error">
-          <ng-container slot="description">{{ "unexpectedErrorSend" | i18n }}</ng-container>
-        </bit-no-items>
-        <div *ngIf="!passwordRequired && send && !error && !unavailable">
-          <p class="tw-text-center">
-            <b>{{ send.name }}</b>
-          </p>
-          <hr />
-          <!-- Text -->
-          <ng-container *ngIf="send.type === sendType.Text">
-            <app-send-access-text [send]="send"></app-send-access-text>
-          </ng-container>
-          <!-- File -->
-          <ng-container *ngIf="send.type === sendType.File">
-            <app-send-access-file
-              [send]="send"
-              [decKey]="decKey"
-              [accessRequest]="accessRequest"
-            ></app-send-access-file>
-          </ng-container>
-          <p *ngIf="expirationDate" class="tw-text-center tw-text-muted">
-            Expires: {{ expirationDate | date: "medium" }}
-          </p>
-        </div>
+  <bit-callout *ngIf="hideEmail" type="warning" title="{{ 'warning' | i18n }}">
+    {{ "viewSendHiddenEmailWarning" | i18n }}
+    <a bitLink href="https://bitwarden.com/help/receive-send/" target="_blank" rel="noreferrer">{{
+      "learnMore" | i18n
+    }}</a
+    >.
+  </bit-callout>
+  <ng-container *ngIf="!loading; else spinner">
+    <app-send-access-password
+      (setPasswordEvent)="setPassword($event)"
+      *ngIf="passwordRequired && !error"
+    ></app-send-access-password>
+    <bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="unavailable">
+      <ng-container slot="description">{{ "sendAccessUnavailable" | i18n }}</ng-container>
+    </bit-no-items>
+    <bit-no-items [icon]="expiredSendIcon" class="tw-text-main" *ngIf="error">
+      <ng-container slot="description">{{ "unexpectedErrorSend" | i18n }}</ng-container>
+    </bit-no-items>
+    <div *ngIf="!passwordRequired && send && !error && !unavailable">
+      <p class="tw-text-center">
+        <b>{{ send.name }}</b>
+      </p>
+      <hr />
+      <!-- Text -->
+      <ng-container *ngIf="send.type === sendType.Text">
+        <app-send-access-text [send]="send"></app-send-access-text>
       </ng-container>
-      <ng-template #spinner>
-        <div class="tw-text-center">
-          <i
-            class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
-            title="{{ 'loading' | i18n }}"
-            aria-hidden="true"
-          ></i>
-          <span class="tw-sr-only">{{ "loading" | i18n }}</span>
-        </div>
-      </ng-template>
-    </div>
-    <div class="tw-mt-5 tw-w-10/12 tw-text-center tw-text-muted">
-      <p bitTypography="body2" class="tw-mb-0">
-        {{ "sendAccessTaglineProductDesc" | i18n }}
-        {{ "sendAccessTaglineLearnMore" | i18n }}
-        <a
-          bitLink
-          href="https://www.bitwarden.com/products/send?source=web-vault"
-          target="_blank"
-          rel="noreferrer"
-          >Bitwarden Send</a
-        >
-        {{ "sendAccessTaglineOr" | i18n }}
-        <a bitLink [routerLink]="registerRoute$ | async" target="_blank" rel="noreferrer">{{
-          "sendAccessTaglineSignUp" | i18n
-        }}</a>
-        {{ "sendAccessTaglineTryToday" | i18n }}
+      <!-- File -->
+      <ng-container *ngIf="send.type === sendType.File">
+        <app-send-access-file
+          [send]="send"
+          [decKey]="decKey"
+          [accessRequest]="accessRequest"
+        ></app-send-access-file>
+      </ng-container>
+      <p *ngIf="expirationDate" class="tw-text-center tw-text-muted">
+        Expires: {{ expirationDate | date: "medium" }}
       </p>
     </div>
-  </div>
+  </ng-container>
+  <ng-template #spinner>
+    <div class="tw-text-center">
+      <i
+        class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
+        title="{{ 'loading' | i18n }}"
+        aria-hidden="true"
+      ></i>
+      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+    </div>
+  </ng-template>
 </form>
diff --git a/apps/web/src/app/tools/send/access.component.ts b/apps/web/src/app/tools/send/access.component.ts
index f553542a619..07697ee8b37 100644
--- a/apps/web/src/app/tools/send/access.component.ts
+++ b/apps/web/src/app/tools/send/access.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 
+import { AnonLayoutWrapperDataService } from "@bitwarden/auth/angular";
 import { RegisterRouteService } from "@bitwarden/auth/common";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
@@ -70,6 +71,7 @@ export class AccessComponent implements OnInit {
     private i18nService: I18nService,
     private configService: ConfigService,
     private registerRouteService: RegisterRouteService,
+    private layoutWrapperDataService: AnonLayoutWrapperDataService,
     protected formBuilder: FormBuilder,
   ) {}
 
@@ -151,6 +153,15 @@ export class AccessComponent implements OnInit {
       !this.passwordRequired &&
       !this.loading &&
       !this.unavailable;
+
+    if (this.creatorIdentifier != null) {
+      this.layoutWrapperDataService.setAnonLayoutWrapperData({
+        pageSubtitle: {
+          subtitle: this.i18nService.t("sendAccessCreatorIdentifier", this.creatorIdentifier),
+          translate: false,
+        },
+      });
+    }
   };
 
   protected setPassword(password: string) {
diff --git a/apps/web/src/app/tools/send/send-access-explainer.component.html b/apps/web/src/app/tools/send/send-access-explainer.component.html
new file mode 100644
index 00000000000..e8090cb850c
--- /dev/null
+++ b/apps/web/src/app/tools/send/send-access-explainer.component.html
@@ -0,0 +1,18 @@
+<div class="tw-text-center tw-text-muted">
+  <p bitTypography="body2" class="tw-mb-0">
+    {{ "sendAccessTaglineProductDesc" | i18n }}
+    {{ "sendAccessTaglineLearnMore" | i18n }}
+    <a
+      bitLink
+      href="https://www.bitwarden.com/products/send?source=web-vault"
+      target="_blank"
+      rel="noreferrer"
+      >Bitwarden Send</a
+    >
+    {{ "sendAccessTaglineOr" | i18n }}
+    <a bitLink [routerLink]="registerRoute$ | async" target="_blank" rel="noreferrer">{{
+      "sendAccessTaglineSignUp" | i18n
+    }}</a>
+    {{ "sendAccessTaglineTryToday" | i18n }}
+  </p>
+</div>
diff --git a/apps/web/src/app/tools/send/send-access-explainer.component.ts b/apps/web/src/app/tools/send/send-access-explainer.component.ts
new file mode 100644
index 00000000000..756a1068985
--- /dev/null
+++ b/apps/web/src/app/tools/send/send-access-explainer.component.ts
@@ -0,0 +1,17 @@
+import { Component } from "@angular/core";
+
+import { RegisterRouteService } from "@bitwarden/auth/common";
+
+import { SharedModule } from "../../shared";
+
+@Component({
+  selector: "app-send-access-explainer",
+  templateUrl: "send-access-explainer.component.html",
+  standalone: true,
+  imports: [SharedModule],
+})
+export class SendAccessExplainerComponent {
+  // TODO: remove when email verification flag is removed
+  registerRoute$ = this.registerRouteService.registerRoute$();
+  constructor(private registerRouteService: RegisterRouteService) {}
+}
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 40e4789923e..29e2e398254 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -4983,6 +4983,10 @@
       }
     }
   },
+  "viewSend": {
+    "message": "View Send",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
+  },
   "viewSendHiddenEmailWarning": {
     "message": "The Bitwarden user who created this Send has chosen to hide their email address. You should ensure you trust the source of this link before using or downloading its content.",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."

From 9041a4cd4cd44a3f1741f45c357df4e4efca6002 Mon Sep 17 00:00:00 2001
From: Jordan Aasen <166539328+jaasen-livefront@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:33:58 -0700
Subject: [PATCH 06/18] [PM-6564] migrate auth toasts to CL toastService
 (#10665)

* migrate auth toasts to CL toastService

* fix component args

* fix component args

* fix specs

* fix toastService args
---
 .../src/auth/popup/environment.component.ts   |  4 +-
 apps/browser/src/auth/popup/hint.component.ts | 12 ++-
 apps/browser/src/auth/popup/home.component.ts | 12 +--
 apps/browser/src/auth/popup/lock.component.ts |  4 +-
 .../popup/login-via-auth-request.component.ts |  3 +
 .../browser/src/auth/popup/login.component.ts |  3 +
 .../src/auth/popup/register.component.ts      |  4 +-
 .../settings/account-security.component.ts    | 33 ++++----
 apps/browser/src/auth/popup/sso.component.ts  |  3 +
 .../auth/popup/two-factor-auth.component.ts   |  3 +
 .../auth/accessibility-cookie.component.ts    | 32 +++----
 .../src/auth/delete-account.component.ts      | 12 +--
 .../desktop/src/auth/environment.component.ts |  4 +-
 apps/desktop/src/auth/hint.component.ts       | 12 ++-
 apps/desktop/src/auth/lock.component.spec.ts  |  8 +-
 apps/desktop/src/auth/lock.component.ts       |  4 +-
 .../auth/login/login-approval.component.ts    | 42 +++++-----
 .../login/login-via-auth-request.component.ts |  3 +
 .../desktop/src/auth/login/login.component.ts | 13 +--
 apps/desktop/src/auth/register.component.ts   |  4 +-
 .../src/auth/set-password.component.ts        |  4 +-
 apps/desktop/src/auth/sso.component.ts        |  3 +
 apps/web/src/app/auth/hint.component.ts       | 12 ++-
 .../web/src/app/auth/login/login.component.ts |  3 +
 .../migrate-legacy-encryption.component.ts    | 14 ++--
 .../src/app/auth/recover-delete.component.ts  | 12 +--
 .../app/auth/recover-two-factor.component.ts  | 12 +--
 .../register-form/register-form.component.ts  | 14 ++--
 .../account/change-avatar-dialog.component.ts | 15 +++-
 .../account/change-email.component.ts         | 12 +--
 .../account/deauthorize-sessions.component.ts | 12 +--
 .../delete-account-dialog.component.ts        | 13 +--
 .../settings/account/profile.component.ts     |  9 +-
 .../settings/change-password.component.ts     | 50 ++++++-----
 .../emergency-access-add-edit.component.ts    | 16 ++--
 .../emergency-access.component.ts             | 83 ++++++++++---------
 .../emergency-access-takeover.component.ts    | 14 ++--
 .../change-kdf-confirmation.component.ts      | 12 +--
 .../two-factor-authenticator.component.ts     | 10 ++-
 .../settings/two-factor-base.component.ts     | 15 +++-
 .../auth/settings/two-factor-duo.component.ts |  4 +-
 .../settings/two-factor-email.component.ts    |  4 +-
 .../settings/two-factor-webauthn.component.ts |  4 +-
 .../settings/two-factor-yubikey.component.ts  |  3 +-
 .../auth/settings/verify-email.component.ts   | 25 ++++--
 .../create-credential-dialog.component.ts     | 33 ++++----
 .../delete-credential-dialog.component.ts     | 19 +++--
 .../user-verification-prompt.component.ts     | 13 ++-
 apps/web/src/app/auth/sso.component.ts        |  3 +
 .../src/app/auth/two-factor-auth.component.ts | 10 ++-
 .../app/auth/verify-email-token.component.ts  | 14 +++-
 .../auth/verify-recover-delete.component.ts   | 12 +--
 .../bit-web/src/app/auth/sso/sso.component.ts | 10 ++-
 ...base-login-decryption-options.component.ts | 12 +--
 .../components/captcha-protected.component.ts | 14 +++-
 .../components/change-password.component.ts   | 43 +++++-----
 .../auth/components/environment.component.ts  |  8 +-
 .../src/auth/components/hint.component.ts     | 28 ++++---
 .../src/auth/components/lock.component.ts     | 63 +++++++-------
 .../login-via-auth-request.component.ts       | 28 +++++--
 .../src/auth/components/login.component.ts    | 20 +++--
 .../src/auth/components/register.component.ts | 41 +++++----
 .../components/remove-password.component.ts   | 31 +++++--
 .../auth/components/set-password.component.ts | 16 +++-
 .../src/auth/components/sso.component.spec.ts | 22 +++--
 .../src/auth/components/sso.component.ts      | 22 ++---
 .../two-factor-auth-email.component.ts        | 22 ++---
 .../two-factor-auth-webauthn.component.ts     | 12 +--
 .../two-factor-auth.component.spec.ts         |  5 +-
 .../two-factor-auth.component.ts              | 24 +++---
 .../auth/components/two-factor.component.ts   | 48 ++++++-----
 .../components/update-password.component.ts   | 30 ++++---
 .../update-temp-password.component.ts         | 14 ++--
 .../user-verification-prompt.component.ts     |  8 +-
 .../user-verification-dialog.component.ts     | 24 ++++--
 75 files changed, 782 insertions(+), 457 deletions(-)

diff --git a/apps/browser/src/auth/popup/environment.component.ts b/apps/browser/src/auth/popup/environment.component.ts
index ed348e563b6..b84f03b5fd7 100644
--- a/apps/browser/src/auth/popup/environment.component.ts
+++ b/apps/browser/src/auth/popup/environment.component.ts
@@ -5,6 +5,7 @@ import { EnvironmentComponent as BaseEnvironmentComponent } from "@bitwarden/ang
 import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";
 
 import { BrowserEnvironmentService } from "../../platform/services/browser-environment.service";
 
@@ -21,8 +22,9 @@ export class EnvironmentComponent extends BaseEnvironmentComponent implements On
     i18nService: I18nService,
     private router: Router,
     modalService: ModalService,
+    toastService: ToastService,
   ) {
-    super(platformUtilsService, environmentService, i18nService, modalService);
+    super(platformUtilsService, environmentService, i18nService, modalService, toastService);
     this.showCustom = true;
   }
 
diff --git a/apps/browser/src/auth/popup/hint.component.ts b/apps/browser/src/auth/popup/hint.component.ts
index 214a43efb71..bc1f68f4c43 100644
--- a/apps/browser/src/auth/popup/hint.component.ts
+++ b/apps/browser/src/auth/popup/hint.component.ts
@@ -7,6 +7,7 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 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 { ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "app-hint",
@@ -21,8 +22,17 @@ export class HintComponent extends BaseHintComponent {
     logService: LogService,
     private route: ActivatedRoute,
     loginEmailService: LoginEmailServiceAbstraction,
+    toastService: ToastService,
   ) {
-    super(router, i18nService, apiService, platformUtilsService, logService, loginEmailService);
+    super(
+      router,
+      i18nService,
+      apiService,
+      platformUtilsService,
+      logService,
+      loginEmailService,
+      toastService,
+    );
 
     super.onSuccessfulSubmit = async () => {
       // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
diff --git a/apps/browser/src/auth/popup/home.component.ts b/apps/browser/src/auth/popup/home.component.ts
index 43f8f3dcf4c..505931ad0f1 100644
--- a/apps/browser/src/auth/popup/home.component.ts
+++ b/apps/browser/src/auth/popup/home.component.ts
@@ -7,6 +7,7 @@ import { EnvironmentSelectorComponent } from "@bitwarden/angular/auth/components
 import { LoginEmailServiceAbstraction, RegisterRouteService } from "@bitwarden/auth/common";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";
 
 import { AccountSwitcherService } from "./account-switching/services/account-switcher.service";
 
@@ -36,6 +37,7 @@ export class HomeComponent implements OnInit, OnDestroy {
     private loginEmailService: LoginEmailServiceAbstraction,
     private accountSwitcherService: AccountSwitcherService,
     private registerRouteService: RegisterRouteService,
+    private toastService: ToastService,
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -76,11 +78,11 @@ export class HomeComponent implements OnInit, OnDestroy {
     this.formGroup.markAllAsTouched();
 
     if (this.formGroup.invalid) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccured"),
-        this.i18nService.t("invalidEmail"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccured"),
+        message: this.i18nService.t("invalidEmail"),
+      });
       return;
     }
 
diff --git a/apps/browser/src/auth/popup/lock.component.ts b/apps/browser/src/auth/popup/lock.component.ts
index a6da98fe996..f5413e4bea4 100644
--- a/apps/browser/src/auth/popup/lock.component.ts
+++ b/apps/browser/src/auth/popup/lock.component.ts
@@ -27,7 +27,7 @@ import { BiometricStateService } from "@bitwarden/common/platform/biometrics/bio
 import { BiometricsService } from "@bitwarden/common/platform/biometrics/biometric.service";
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 import { BiometricErrors, BiometricErrorTypes } from "../../models/biometricErrors";
 import { BrowserRouterService } from "../../platform/popup/services/browser-router.service";
@@ -72,6 +72,7 @@ export class LockComponent extends BaseLockComponent implements OnInit {
     accountService: AccountService,
     kdfConfigService: KdfConfigService,
     syncService: SyncService,
+    toastService: ToastService,
   ) {
     super(
       masterPasswordService,
@@ -100,6 +101,7 @@ export class LockComponent extends BaseLockComponent implements OnInit {
       authService,
       kdfConfigService,
       syncService,
+      toastService,
     );
     this.successRoute = "/tabs/current";
     this.isInitialLockScreen = (window as any).previousPopupUrl == null;
diff --git a/apps/browser/src/auth/popup/login-via-auth-request.component.ts b/apps/browser/src/auth/popup/login-via-auth-request.component.ts
index f83062e6c97..53f29badee6 100644
--- a/apps/browser/src/auth/popup/login-via-auth-request.component.ts
+++ b/apps/browser/src/auth/popup/login-via-auth-request.component.ts
@@ -22,6 +22,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 @Component({
@@ -50,6 +51,7 @@ export class LoginViaAuthRequestComponent extends BaseLoginWithDeviceComponent {
     loginStrategyService: LoginStrategyServiceAbstraction,
     accountService: AccountService,
     private location: Location,
+    toastService: ToastService,
   ) {
     super(
       router,
@@ -70,6 +72,7 @@ export class LoginViaAuthRequestComponent extends BaseLoginWithDeviceComponent {
       deviceTrustService,
       authRequestService,
       loginStrategyService,
+      toastService,
     );
     super.onSuccessfulLogin = async () => {
       await syncService.fullSync(true);
diff --git a/apps/browser/src/auth/popup/login.component.ts b/apps/browser/src/auth/popup/login.component.ts
index 79a02ede85d..6e73199969a 100644
--- a/apps/browser/src/auth/popup/login.component.ts
+++ b/apps/browser/src/auth/popup/login.component.ts
@@ -22,6 +22,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { flagEnabled } from "../../platform/flags";
@@ -53,6 +54,7 @@ export class LoginComponent extends BaseLoginComponent {
     ssoLoginService: SsoLoginServiceAbstraction,
     webAuthnLoginService: WebAuthnLoginServiceAbstraction,
     registerRouteService: RegisterRouteService,
+    toastService: ToastService,
   ) {
     super(
       devicesApiService,
@@ -74,6 +76,7 @@ export class LoginComponent extends BaseLoginComponent {
       ssoLoginService,
       webAuthnLoginService,
       registerRouteService,
+      toastService,
     );
     super.onSuccessfulLogin = async () => {
       await syncService.fullSync(true);
diff --git a/apps/browser/src/auth/popup/register.component.ts b/apps/browser/src/auth/popup/register.component.ts
index 61e007ac52a..dab1e62f850 100644
--- a/apps/browser/src/auth/popup/register.component.ts
+++ b/apps/browser/src/auth/popup/register.component.ts
@@ -13,7 +13,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 @Component({
@@ -39,6 +39,7 @@ export class RegisterComponent extends BaseRegisterComponent {
     logService: LogService,
     auditService: AuditService,
     dialogService: DialogService,
+    toastService: ToastService,
   ) {
     super(
       formValidationErrorService,
@@ -55,6 +56,7 @@ export class RegisterComponent extends BaseRegisterComponent {
       logService,
       auditService,
       dialogService,
+      toastService,
     );
   }
 }
diff --git a/apps/browser/src/auth/popup/settings/account-security.component.ts b/apps/browser/src/auth/popup/settings/account-security.component.ts
index 7bced79a0a8..25401f06f38 100644
--- a/apps/browser/src/auth/popup/settings/account-security.component.ts
+++ b/apps/browser/src/auth/popup/settings/account-security.component.ts
@@ -39,7 +39,7 @@ import {
   VaultTimeoutOption,
   VaultTimeoutStringType,
 } from "@bitwarden/common/types/vault-timeout.type";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 import { BiometricErrors, BiometricErrorTypes } from "../../../models/biometricErrors";
 import { BrowserApi } from "../../../platform/browser/browser-api";
@@ -95,6 +95,7 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
     private dialogService: DialogService,
     private changeDetectorRef: ChangeDetectorRef,
     private biometricStateService: BiometricStateService,
+    private toastService: ToastService,
     private biometricsService: BiometricsService,
   ) {
     this.accountSwitcherEnabled = enableAccountSwitching();
@@ -274,11 +275,11 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
     // The minTimeoutError does not apply to browser because it supports Immediately
     // So only check for the policyError
     if (this.form.controls.vaultTimeout.hasError("policyError")) {
-      this.platformUtilsService.showToast(
-        "error",
-        null,
-        this.i18nService.t("vaultTimeoutTooLarge"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("vaultTimeoutTooLarge"),
+      });
       return;
     }
 
@@ -315,11 +316,11 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
     }
 
     if (this.form.controls.vaultTimeout.hasError("policyError")) {
-      this.platformUtilsService.showToast(
-        "error",
-        null,
-        this.i18nService.t("vaultTimeoutTooLarge"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("vaultTimeoutTooLarge"),
+      });
       return;
     }
 
@@ -417,11 +418,11 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
 
           this.form.controls.biometric.setValue(result);
           if (!result) {
-            this.platformUtilsService.showToast(
-              "error",
-              this.i18nService.t("errorEnableBiometricTitle"),
-              this.i18nService.t("errorEnableBiometricDesc"),
-            );
+            this.toastService.showToast({
+              variant: "error",
+              title: this.i18nService.t("errorEnableBiometricTitle"),
+              message: this.i18nService.t("errorEnableBiometricDesc"),
+            });
           }
         } catch (e) {
           // prevent duplicate dialog
diff --git a/apps/browser/src/auth/popup/sso.component.ts b/apps/browser/src/auth/popup/sso.component.ts
index 33284717ab5..42222c42b97 100644
--- a/apps/browser/src/auth/popup/sso.component.ts
+++ b/apps/browser/src/auth/popup/sso.component.ts
@@ -22,6 +22,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { BrowserApi } from "../../platform/browser/browser-api";
@@ -51,6 +52,7 @@ export class SsoComponent extends BaseSsoComponent {
     accountService: AccountService,
     private authService: AuthService,
     @Inject(WINDOW) private win: Window,
+    toastService: ToastService,
   ) {
     super(
       ssoLoginService,
@@ -69,6 +71,7 @@ export class SsoComponent extends BaseSsoComponent {
       configService,
       masterPasswordService,
       accountService,
+      toastService,
     );
 
     environmentService.environment$.pipe(takeUntilDestroyed()).subscribe((env) => {
diff --git a/apps/browser/src/auth/popup/two-factor-auth.component.ts b/apps/browser/src/auth/popup/two-factor-auth.component.ts
index ea0d4a48e55..27c95321100 100644
--- a/apps/browser/src/auth/popup/two-factor-auth.component.ts
+++ b/apps/browser/src/auth/popup/two-factor-auth.component.ts
@@ -32,6 +32,7 @@ import {
   LinkModule,
   TypographyModule,
   DialogService,
+  ToastService,
 } from "@bitwarden/components";
 
 import {
@@ -95,6 +96,7 @@ export class TwoFactorAuthComponent
     @Inject(WINDOW) protected win: Window,
     private syncService: SyncService,
     private messagingService: MessagingService,
+    toastService: ToastService,
   ) {
     super(
       loginStrategyService,
@@ -114,6 +116,7 @@ export class TwoFactorAuthComponent
       accountService,
       formBuilder,
       win,
+      toastService,
     );
     super.onSuccessfulLoginTdeNavigate = async () => {
       this.win.close();
diff --git a/apps/desktop/src/auth/accessibility-cookie.component.ts b/apps/desktop/src/auth/accessibility-cookie.component.ts
index fc72b1a9d77..697bbcc88ec 100644
--- a/apps/desktop/src/auth/accessibility-cookie.component.ts
+++ b/apps/desktop/src/auth/accessibility-cookie.component.ts
@@ -6,6 +6,7 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "app-accessibility-cookie",
@@ -25,6 +26,7 @@ export class AccessibilityCookieComponent {
     protected environmentService: EnvironmentService,
     protected i18nService: I18nService,
     protected ngZone: NgZone,
+    private toastService: ToastService,
   ) {}
 
   registerhCaptcha() {
@@ -42,28 +44,28 @@ export class AccessibilityCookieComponent {
   }
 
   onCookieSavedSuccess() {
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("accessibilityCookieSaved"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("accessibilityCookieSaved"),
+    });
   }
 
   onCookieSavedFailure() {
-    this.platformUtilsService.showToast(
-      "error",
-      null,
-      this.i18nService.t("noAccessibilityCookieSaved"),
-    );
+    this.toastService.showToast({
+      variant: "error",
+      title: null,
+      message: this.i18nService.t("noAccessibilityCookieSaved"),
+    });
   }
 
   async submit() {
     if (Utils.getHostname(this.accessibilityForm.value.link) !== "accounts.hcaptcha.com") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("invalidUrl"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("invalidUrl"),
+      });
       return;
     }
     this.listenForCookie = true;
diff --git a/apps/desktop/src/auth/delete-account.component.ts b/apps/desktop/src/auth/delete-account.component.ts
index a473310d386..0cb2bdd79ee 100644
--- a/apps/desktop/src/auth/delete-account.component.ts
+++ b/apps/desktop/src/auth/delete-account.component.ts
@@ -13,6 +13,7 @@ import {
   CalloutModule,
   DialogModule,
   DialogService,
+  ToastService,
 } from "@bitwarden/components";
 
 import { UserVerificationComponent } from "../app/components/user-verification.component";
@@ -41,6 +42,7 @@ export class DeleteAccountComponent {
     private platformUtilsService: PlatformUtilsService,
     private formBuilder: FormBuilder,
     private accountApiService: AccountApiService,
+    private toastService: ToastService,
   ) {}
 
   static open(dialogService: DialogService): DialogRef<DeleteAccountComponent> {
@@ -54,10 +56,10 @@ export class DeleteAccountComponent {
   submit = async () => {
     const verification = this.deleteForm.get("verification").value;
     await this.accountApiService.deleteAccount(verification);
-    this.platformUtilsService.showToast(
-      "success",
-      this.i18nService.t("accountDeleted"),
-      this.i18nService.t("accountDeletedDesc"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: this.i18nService.t("accountDeleted"),
+      message: this.i18nService.t("accountDeletedDesc"),
+    });
   };
 }
diff --git a/apps/desktop/src/auth/environment.component.ts b/apps/desktop/src/auth/environment.component.ts
index a4b137a9e51..d24e0f86abe 100644
--- a/apps/desktop/src/auth/environment.component.ts
+++ b/apps/desktop/src/auth/environment.component.ts
@@ -5,6 +5,7 @@ import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "app-environment",
@@ -16,7 +17,8 @@ export class EnvironmentComponent extends BaseEnvironmentComponent {
     environmentService: EnvironmentService,
     i18nService: I18nService,
     modalService: ModalService,
+    toastService: ToastService,
   ) {
-    super(platformUtilsService, environmentService, i18nService, modalService);
+    super(platformUtilsService, environmentService, i18nService, modalService, toastService);
   }
 }
diff --git a/apps/desktop/src/auth/hint.component.ts b/apps/desktop/src/auth/hint.component.ts
index cee1f189817..34457029257 100644
--- a/apps/desktop/src/auth/hint.component.ts
+++ b/apps/desktop/src/auth/hint.component.ts
@@ -7,6 +7,7 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 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 { ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "app-hint",
@@ -20,7 +21,16 @@ export class HintComponent extends BaseHintComponent {
     apiService: ApiService,
     logService: LogService,
     loginEmailService: LoginEmailServiceAbstraction,
+    toastService: ToastService,
   ) {
-    super(router, i18nService, apiService, platformUtilsService, logService, loginEmailService);
+    super(
+      router,
+      i18nService,
+      apiService,
+      platformUtilsService,
+      logService,
+      loginEmailService,
+      toastService,
+    );
   }
 }
diff --git a/apps/desktop/src/auth/lock.component.spec.ts b/apps/desktop/src/auth/lock.component.spec.ts
index c5b5b7acf00..d81f2a486f6 100644
--- a/apps/desktop/src/auth/lock.component.spec.ts
+++ b/apps/desktop/src/auth/lock.component.spec.ts
@@ -34,7 +34,7 @@ import { FakeAccountService, mockAccountServiceWith } from "@bitwarden/common/sp
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { UserId } from "@bitwarden/common/types/guid";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 import { BiometricsService } from "src/platform/main/biometric";
 
@@ -62,6 +62,7 @@ describe("LockComponent", () => {
   let platformUtilsServiceMock: MockProxy<PlatformUtilsService>;
   let activatedRouteMock: MockProxy<ActivatedRoute>;
   let mockMasterPasswordService: FakeMasterPasswordService;
+  let mockToastService: MockProxy<ToastService>;
 
   const mockUserId = Utils.newGuid() as UserId;
   const accountService: FakeAccountService = mockAccountServiceWith(mockUserId);
@@ -72,6 +73,7 @@ describe("LockComponent", () => {
     messagingServiceMock = mock<MessagingService>();
     broadcasterServiceMock = mock<BroadcasterService>();
     platformUtilsServiceMock = mock<PlatformUtilsService>();
+    mockToastService = mock<ToastService>();
 
     activatedRouteMock = mock<ActivatedRoute>();
     activatedRouteMock.queryParams = mock<ActivatedRoute["queryParams"]>();
@@ -187,6 +189,10 @@ describe("LockComponent", () => {
           provide: SyncService,
           useValue: mock<SyncService>(),
         },
+        {
+          provide: ToastService,
+          useValue: mockToastService,
+        },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
diff --git a/apps/desktop/src/auth/lock.component.ts b/apps/desktop/src/auth/lock.component.ts
index 55cc79e0a68..350512b0f31 100644
--- a/apps/desktop/src/auth/lock.component.ts
+++ b/apps/desktop/src/auth/lock.component.ts
@@ -28,7 +28,7 @@ import { BiometricStateService } from "@bitwarden/common/platform/biometrics/bio
 import { BiometricsService } from "@bitwarden/common/platform/biometrics/biometric.service";
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 const BroadcasterSubscriptionId = "LockComponent";
 
@@ -72,6 +72,7 @@ export class LockComponent extends BaseLockComponent implements OnInit, OnDestro
     authService: AuthService,
     kdfConfigService: KdfConfigService,
     syncService: SyncService,
+    toastService: ToastService,
   ) {
     super(
       masterPasswordService,
@@ -100,6 +101,7 @@ export class LockComponent extends BaseLockComponent implements OnInit, OnDestro
       authService,
       kdfConfigService,
       syncService,
+      toastService,
     );
   }
 
diff --git a/apps/desktop/src/auth/login/login-approval.component.ts b/apps/desktop/src/auth/login/login-approval.component.ts
index 296efb50e4a..39876f2945f 100644
--- a/apps/desktop/src/auth/login/login-approval.component.ts
+++ b/apps/desktop/src/auth/login/login-approval.component.ts
@@ -18,6 +18,7 @@ import {
   ButtonModule,
   DialogModule,
   DialogService,
+  ToastService,
 } from "@bitwarden/components";
 
 const RequestTimeOut = 60000 * 15; //15 Minutes
@@ -54,6 +55,7 @@ export class LoginApprovalComponent implements OnInit, OnDestroy {
     protected appIdService: AppIdService,
     protected cryptoService: CryptoService,
     private dialogRef: DialogRef,
+    private toastService: ToastService,
   ) {
     this.notificationId = params.notificationId;
   }
@@ -117,11 +119,11 @@ export class LoginApprovalComponent implements OnInit, OnDestroy {
   private async retrieveAuthRequestAndRespond(approve: boolean) {
     this.authRequestResponse = await this.apiService.getAuthRequest(this.notificationId);
     if (this.authRequestResponse.requestApproved || this.authRequestResponse.responseDate != null) {
-      this.platformUtilsService.showToast(
-        "info",
-        null,
-        this.i18nService.t("thisRequestIsNoLongerValid"),
-      );
+      this.toastService.showToast({
+        variant: "info",
+        title: null,
+        message: this.i18nService.t("thisRequestIsNoLongerValid"),
+      });
     } else {
       const loginResponse = await this.authRequestService.approveOrDenyAuthRequest(
         approve,
@@ -133,21 +135,21 @@ export class LoginApprovalComponent implements OnInit, OnDestroy {
 
   showResultToast(loginResponse: AuthRequestResponse) {
     if (loginResponse.requestApproved) {
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t(
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t(
           "logInConfirmedForEmailOnDevice",
           this.email,
           loginResponse.requestDeviceType,
         ),
-      );
+      });
     } else {
-      this.platformUtilsService.showToast(
-        "info",
-        null,
-        this.i18nService.t("youDeniedALogInAttemptFromAnotherDevice"),
-      );
+      this.toastService.showToast({
+        variant: "info",
+        title: null,
+        message: this.i18nService.t("youDeniedALogInAttemptFromAnotherDevice"),
+      });
     }
   }
 
@@ -186,11 +188,11 @@ export class LoginApprovalComponent implements OnInit, OnDestroy {
     } else {
       clearInterval(this.interval);
       this.dialogRef.close();
-      this.platformUtilsService.showToast(
-        "info",
-        null,
-        this.i18nService.t("loginRequestHasAlreadyExpired"),
-      );
+      this.toastService.showToast({
+        variant: "info",
+        title: null,
+        message: this.i18nService.t("loginRequestHasAlreadyExpired"),
+      });
     }
   }
 }
diff --git a/apps/desktop/src/auth/login/login-via-auth-request.component.ts b/apps/desktop/src/auth/login/login-via-auth-request.component.ts
index 7a8dfcbcda7..c0a6a51b907 100644
--- a/apps/desktop/src/auth/login/login-via-auth-request.component.ts
+++ b/apps/desktop/src/auth/login/login-via-auth-request.component.ts
@@ -23,6 +23,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { EnvironmentComponent } from "../environment.component";
@@ -58,6 +59,7 @@ export class LoginViaAuthRequestComponent extends BaseLoginWithDeviceComponent {
     loginStrategyService: LoginStrategyServiceAbstraction,
     accountService: AccountService,
     private location: Location,
+    toastService: ToastService,
   ) {
     super(
       router,
@@ -78,6 +80,7 @@ export class LoginViaAuthRequestComponent extends BaseLoginWithDeviceComponent {
       deviceTrustService,
       authRequestService,
       loginStrategyService,
+      toastService,
     );
 
     super.onSuccessfulLogin = () => {
diff --git a/apps/desktop/src/auth/login/login.component.ts b/apps/desktop/src/auth/login/login.component.ts
index 68b25b8b7e9..2b5910baa96 100644
--- a/apps/desktop/src/auth/login/login.component.ts
+++ b/apps/desktop/src/auth/login/login.component.ts
@@ -25,6 +25,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { EnvironmentComponent } from "../environment.component";
@@ -74,6 +75,7 @@ export class LoginComponent extends BaseLoginComponent implements OnInit, OnDest
     ssoLoginService: SsoLoginServiceAbstraction,
     webAuthnLoginService: WebAuthnLoginServiceAbstraction,
     registerRouteService: RegisterRouteService,
+    toastService: ToastService,
   ) {
     super(
       devicesApiService,
@@ -95,6 +97,7 @@ export class LoginComponent extends BaseLoginComponent implements OnInit, OnDest
       ssoLoginService,
       webAuthnLoginService,
       registerRouteService,
+      toastService,
     );
     super.onSuccessfulLogin = () => {
       return syncService.fullSync(true);
@@ -162,11 +165,11 @@ export class LoginComponent extends BaseLoginComponent implements OnInit, OnDest
   async continue() {
     await super.validateEmail();
     if (!this.formGroup.controls.email.valid) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccured"),
-        this.i18nService.t("invalidEmail"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccured"),
+        message: this.i18nService.t("invalidEmail"),
+      });
       return;
     }
     this.focusInput();
diff --git a/apps/desktop/src/auth/register.component.ts b/apps/desktop/src/auth/register.component.ts
index be44c276485..e7c2cfd32b3 100644
--- a/apps/desktop/src/auth/register.component.ts
+++ b/apps/desktop/src/auth/register.component.ts
@@ -14,7 +14,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 const BroadcasterSubscriptionId = "RegisterComponent";
@@ -41,6 +41,7 @@ export class RegisterComponent extends BaseRegisterComponent implements OnInit,
     logService: LogService,
     auditService: AuditService,
     dialogService: DialogService,
+    toastService: ToastService,
   ) {
     super(
       formValidationErrorService,
@@ -57,6 +58,7 @@ export class RegisterComponent extends BaseRegisterComponent implements OnInit,
       logService,
       auditService,
       dialogService,
+      toastService,
     );
   }
 
diff --git a/apps/desktop/src/auth/set-password.component.ts b/apps/desktop/src/auth/set-password.component.ts
index f14434b277b..28f1f69a598 100644
--- a/apps/desktop/src/auth/set-password.component.ts
+++ b/apps/desktop/src/auth/set-password.component.ts
@@ -22,7 +22,7 @@ import { StateService } from "@bitwarden/common/platform/abstractions/state.serv
 import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { MasterKey, UserKey } from "@bitwarden/common/types/key";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 const BroadcasterSubscriptionId = "SetPasswordComponent";
@@ -56,6 +56,7 @@ export class SetPasswordComponent extends BaseSetPasswordComponent implements On
     dialogService: DialogService,
     kdfConfigService: KdfConfigService,
     encryptService: EncryptService,
+    toastService: ToastService,
   ) {
     super(
       accountService,
@@ -79,6 +80,7 @@ export class SetPasswordComponent extends BaseSetPasswordComponent implements On
       dialogService,
       kdfConfigService,
       encryptService,
+      toastService,
     );
   }
 
diff --git a/apps/desktop/src/auth/sso.component.ts b/apps/desktop/src/auth/sso.component.ts
index 234ebc85cee..6821a548945 100644
--- a/apps/desktop/src/auth/sso.component.ts
+++ b/apps/desktop/src/auth/sso.component.ts
@@ -18,6 +18,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 @Component({
@@ -43,6 +44,7 @@ export class SsoComponent extends BaseSsoComponent {
     configService: ConfigService,
     masterPasswordService: InternalMasterPasswordServiceAbstraction,
     accountService: AccountService,
+    toastService: ToastService,
   ) {
     super(
       ssoLoginService,
@@ -61,6 +63,7 @@ export class SsoComponent extends BaseSsoComponent {
       configService,
       masterPasswordService,
       accountService,
+      toastService,
     );
     super.onSuccessfulLogin = async () => {
       // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
diff --git a/apps/web/src/app/auth/hint.component.ts b/apps/web/src/app/auth/hint.component.ts
index 944b386e277..42744546234 100644
--- a/apps/web/src/app/auth/hint.component.ts
+++ b/apps/web/src/app/auth/hint.component.ts
@@ -8,6 +8,7 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 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 { ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "app-hint",
@@ -30,8 +31,17 @@ export class HintComponent extends BaseHintComponent implements OnInit {
     logService: LogService,
     loginEmailService: LoginEmailServiceAbstraction,
     private formBuilder: FormBuilder,
+    protected toastService: ToastService,
   ) {
-    super(router, i18nService, apiService, platformUtilsService, logService, loginEmailService);
+    super(
+      router,
+      i18nService,
+      apiService,
+      platformUtilsService,
+      logService,
+      loginEmailService,
+      toastService,
+    );
   }
 
   ngOnInit(): void {
diff --git a/apps/web/src/app/auth/login/login.component.ts b/apps/web/src/app/auth/login/login.component.ts
index 145d7666273..1422a7c1239 100644
--- a/apps/web/src/app/auth/login/login.component.ts
+++ b/apps/web/src/app/auth/login/login.component.ts
@@ -29,6 +29,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { UserId } from "@bitwarden/common/types/guid";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { flagEnabled } from "../../../utils/flags";
@@ -71,6 +72,7 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
     ssoLoginService: SsoLoginServiceAbstraction,
     webAuthnLoginService: WebAuthnLoginServiceAbstraction,
     registerRouteService: RegisterRouteService,
+    toastService: ToastService,
   ) {
     super(
       devicesApiService,
@@ -92,6 +94,7 @@ export class LoginComponent extends BaseLoginComponent implements OnInit {
       ssoLoginService,
       webAuthnLoginService,
       registerRouteService,
+      toastService,
     );
     this.onSuccessfulLoginNavigate = this.goAfterLogIn;
     this.showPasswordless = flagEnabled("showPasswordless");
diff --git a/apps/web/src/app/auth/migrate-encryption/migrate-legacy-encryption.component.ts b/apps/web/src/app/auth/migrate-encryption/migrate-legacy-encryption.component.ts
index 6695039307e..68eaae618fd 100644
--- a/apps/web/src/app/auth/migrate-encryption/migrate-legacy-encryption.component.ts
+++ b/apps/web/src/app/auth/migrate-encryption/migrate-legacy-encryption.component.ts
@@ -9,6 +9,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
+import { ToastService } from "@bitwarden/components";
 
 import { SharedModule } from "../../shared";
 import { UserKeyRotationModule } from "../key-rotation/user-key-rotation.module";
@@ -35,6 +36,7 @@ export class MigrateFromLegacyEncryptionComponent {
     private messagingService: MessagingService,
     private logService: LogService,
     private syncService: SyncService,
+    private toastService: ToastService,
   ) {}
 
   submit = async () => {
@@ -59,12 +61,12 @@ export class MigrateFromLegacyEncryptionComponent {
 
       await this.keyRotationService.rotateUserKeyAndEncryptedData(masterPassword, activeUser);
 
-      this.platformUtilsService.showToast(
-        "success",
-        this.i18nService.t("keyUpdated"),
-        this.i18nService.t("logBackInOthersToo"),
-        { timeout: 15000 },
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: this.i18nService.t("keyUpdated"),
+        message: this.i18nService.t("logBackInOthersToo"),
+        timeout: 15000,
+      });
       this.messagingService.send("logout");
     } catch (e) {
       this.logService.error(e);
diff --git a/apps/web/src/app/auth/recover-delete.component.ts b/apps/web/src/app/auth/recover-delete.component.ts
index 96afd910598..04c3eb1df25 100644
--- a/apps/web/src/app/auth/recover-delete.component.ts
+++ b/apps/web/src/app/auth/recover-delete.component.ts
@@ -6,6 +6,7 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { DeleteRecoverRequest } from "@bitwarden/common/models/request/delete-recover.request";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "app-recover-delete",
@@ -25,6 +26,7 @@ export class RecoverDeleteComponent {
     private apiService: ApiService,
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
+    private toastService: ToastService,
   ) {}
 
   submit = async () => {
@@ -35,11 +37,11 @@ export class RecoverDeleteComponent {
     const request = new DeleteRecoverRequest();
     request.email = this.email.value.trim().toLowerCase();
     await this.apiService.postAccountRecoverDelete(request);
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("deleteRecoverEmailSent"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("deleteRecoverEmailSent"),
+    });
 
     await this.router.navigate(["/"]);
   };
diff --git a/apps/web/src/app/auth/recover-two-factor.component.ts b/apps/web/src/app/auth/recover-two-factor.component.ts
index 28296aa89d5..0774a9c777a 100644
--- a/apps/web/src/app/auth/recover-two-factor.component.ts
+++ b/apps/web/src/app/auth/recover-two-factor.component.ts
@@ -8,6 +8,7 @@ import { TwoFactorRecoveryRequest } from "@bitwarden/common/auth/models/request/
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "app-recover-two-factor",
@@ -27,6 +28,7 @@ export class RecoverTwoFactorComponent {
     private i18nService: I18nService,
     private cryptoService: CryptoService,
     private loginStrategyService: LoginStrategyServiceAbstraction,
+    private toastService: ToastService,
   ) {}
 
   get email(): string {
@@ -53,11 +55,11 @@ export class RecoverTwoFactorComponent {
     const key = await this.loginStrategyService.makePreloginKey(this.masterPassword, request.email);
     request.masterPasswordHash = await this.cryptoService.hashMasterKey(this.masterPassword, key);
     await this.apiService.postTwoFactorRecover(request);
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("twoStepRecoverDisabled"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("twoStepRecoverDisabled"),
+    });
     await this.router.navigate(["/"]);
   };
 }
diff --git a/apps/web/src/app/auth/register-form/register-form.component.ts b/apps/web/src/app/auth/register-form/register-form.component.ts
index 693cdb4d6c0..bf4a3e8203f 100644
--- a/apps/web/src/app/auth/register-form/register-form.component.ts
+++ b/apps/web/src/app/auth/register-form/register-form.component.ts
@@ -17,7 +17,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { AcceptOrganizationInviteService } from "../organization-invite/accept-organization.service";
@@ -52,6 +52,7 @@ export class RegisterFormComponent extends BaseRegisterComponent implements OnIn
     auditService: AuditService,
     dialogService: DialogService,
     acceptOrgInviteService: AcceptOrganizationInviteService,
+    toastService: ToastService,
   ) {
     super(
       formValidationErrorService,
@@ -68,6 +69,7 @@ export class RegisterFormComponent extends BaseRegisterComponent implements OnIn
       logService,
       auditService,
       dialogService,
+      toastService,
     );
     super.modifyRegisterRequest = async (request: RegisterRequest) => {
       // Org invites are deep linked. Non-existent accounts are redirected to the register page.
@@ -104,11 +106,11 @@ export class RegisterFormComponent extends BaseRegisterComponent implements OnIn
         this.enforcedPolicyOptions,
       )
     ) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPasswordPolicyRequirementsNotMet"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPasswordPolicyRequirementsNotMet"),
+      });
       return;
     }
 
diff --git a/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts
index b555faf9a12..e20245bfa00 100644
--- a/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts
@@ -15,7 +15,7 @@ import { ProfileResponse } from "@bitwarden/common/models/response/profile.respo
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 type ChangeAvatarDialogData = {
   profile: ProfileResponse;
@@ -55,6 +55,7 @@ export class ChangeAvatarDialogComponent implements OnInit, OnDestroy {
     private platformUtilsService: PlatformUtilsService,
     private avatarService: AvatarService,
     private dialogRef: DialogRef,
+    private toastService: ToastService,
   ) {
     this.profile = data.profile;
   }
@@ -93,9 +94,17 @@ export class ChangeAvatarDialogComponent implements OnInit, OnDestroy {
     if (Utils.validateHexColor(this.currentSelection) || this.currentSelection == null) {
       await this.avatarService.setAvatarColor(this.currentSelection);
       this.dialogRef.close();
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("avatarUpdated"));
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("avatarUpdated"),
+      });
     } else {
-      this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred"));
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("errorOccurred"),
+      });
     }
   };
 
diff --git a/apps/web/src/app/auth/settings/account/change-email.component.ts b/apps/web/src/app/auth/settings/account/change-email.component.ts
index e5a3c72337b..ac493357765 100644
--- a/apps/web/src/app/auth/settings/account/change-email.component.ts
+++ b/apps/web/src/app/auth/settings/account/change-email.component.ts
@@ -12,6 +12,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
+import { ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "app-change-email",
@@ -39,6 +40,7 @@ export class ChangeEmailComponent implements OnInit {
     private stateService: StateService,
     private formBuilder: FormBuilder,
     private kdfConfigService: KdfConfigService,
+    private toastService: ToastService,
   ) {}
 
   async ngOnInit() {
@@ -100,11 +102,11 @@ export class ChangeEmailComponent implements OnInit {
       try {
         await this.apiService.postEmail(request);
         this.reset();
-        this.platformUtilsService.showToast(
-          "success",
-          this.i18nService.t("emailChanged"),
-          this.i18nService.t("logBackIn"),
-        );
+        this.toastService.showToast({
+          variant: "success",
+          title: this.i18nService.t("emailChanged"),
+          message: this.i18nService.t("logBackIn"),
+        });
         this.messagingService.send("logout");
       } catch (e) {
         this.logService.error(e);
diff --git a/apps/web/src/app/auth/settings/account/deauthorize-sessions.component.ts b/apps/web/src/app/auth/settings/account/deauthorize-sessions.component.ts
index 9b9ba7eb795..dcaf38ee29e 100644
--- a/apps/web/src/app/auth/settings/account/deauthorize-sessions.component.ts
+++ b/apps/web/src/app/auth/settings/account/deauthorize-sessions.component.ts
@@ -7,6 +7,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "app-deauthorize-sessions",
@@ -23,6 +24,7 @@ export class DeauthorizeSessionsComponent {
     private userVerificationService: UserVerificationService,
     private messagingService: MessagingService,
     private logService: LogService,
+    private toastService: ToastService,
   ) {}
 
   async submit() {
@@ -31,11 +33,11 @@ export class DeauthorizeSessionsComponent {
         .buildRequest(this.masterPassword)
         .then((request) => this.apiService.postSecurityStamp(request));
       await this.formPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        this.i18nService.t("sessionsDeauthorized"),
-        this.i18nService.t("logBackIn"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: this.i18nService.t("sessionsDeauthorized"),
+        message: this.i18nService.t("logBackIn"),
+      });
       this.messagingService.send("logout");
     } catch (e) {
       this.logService.error(e);
diff --git a/apps/web/src/app/auth/settings/account/delete-account-dialog.component.ts b/apps/web/src/app/auth/settings/account/delete-account-dialog.component.ts
index b3dd8fbe616..c7c67416e18 100644
--- a/apps/web/src/app/auth/settings/account/delete-account-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/account/delete-account-dialog.component.ts
@@ -7,7 +7,7 @@ import { Verification } from "@bitwarden/common/auth/types/verification";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 @Component({
   templateUrl: "delete-account-dialog.component.html",
@@ -24,6 +24,7 @@ export class DeleteAccountDialogComponent {
     private formBuilder: FormBuilder,
     private accountApiService: AccountApiService,
     private dialogRef: DialogRef,
+    private toastService: ToastService,
   ) {}
 
   submit = async () => {
@@ -31,11 +32,11 @@ export class DeleteAccountDialogComponent {
       const verification = this.deleteForm.get("verification").value;
       await this.accountApiService.deleteAccount(verification);
       this.dialogRef.close();
-      this.platformUtilsService.showToast(
-        "success",
-        this.i18nService.t("accountDeleted"),
-        this.i18nService.t("accountDeletedDesc"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: this.i18nService.t("accountDeleted"),
+        message: this.i18nService.t("accountDeletedDesc"),
+      });
     } catch (e) {
       if (e instanceof ErrorResponse && e.statusCode === 400) {
         this.invalidSecret = true;
diff --git a/apps/web/src/app/auth/settings/account/profile.component.ts b/apps/web/src/app/auth/settings/account/profile.component.ts
index a960adfe5de..8b659e579da 100644
--- a/apps/web/src/app/auth/settings/account/profile.component.ts
+++ b/apps/web/src/app/auth/settings/account/profile.component.ts
@@ -8,7 +8,7 @@ import { ProfileResponse } from "@bitwarden/common/models/response/profile.respo
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 import { ChangeAvatarDialogComponent } from "./change-avatar-dialog.component";
 
@@ -33,6 +33,7 @@ export class ProfileComponent implements OnInit, OnDestroy {
     private platformUtilsService: PlatformUtilsService,
     private stateService: StateService,
     private dialogService: DialogService,
+    private toastService: ToastService,
   ) {}
 
   async ngOnInit() {
@@ -64,6 +65,10 @@ export class ProfileComponent implements OnInit, OnDestroy {
   submit = async () => {
     const request = new UpdateProfileRequest(this.formGroup.get("name").value);
     await this.apiService.putProfile(request);
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("accountUpdated"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("accountUpdated"),
+    });
   };
 }
diff --git a/apps/web/src/app/auth/settings/change-password.component.ts b/apps/web/src/app/auth/settings/change-password.component.ts
index 5279c05032a..2cc7c101d0b 100644
--- a/apps/web/src/app/auth/settings/change-password.component.ts
+++ b/apps/web/src/app/auth/settings/change-password.component.ts
@@ -22,7 +22,7 @@ import { UserId } from "@bitwarden/common/types/guid";
 import { MasterKey, UserKey } from "@bitwarden/common/types/key";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { UserKeyRotationService } from "../key-rotation/user-key-rotation.service";
@@ -60,6 +60,7 @@ export class ChangePasswordComponent
     kdfConfigService: KdfConfigService,
     masterPasswordService: InternalMasterPasswordServiceAbstraction,
     accountService: AccountService,
+    toastService: ToastService,
   ) {
     super(
       i18nService,
@@ -73,6 +74,7 @@ export class ChangePasswordComponent
       kdfConfigService,
       masterPasswordService,
       accountService,
+      toastService,
     );
   }
 
@@ -141,11 +143,11 @@ export class ChangePasswordComponent
       this.masterPasswordHint != null &&
       this.masterPasswordHint.toLowerCase() === this.masterPassword.toLowerCase()
     ) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("hintEqualsPassword"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("hintEqualsPassword"),
+      });
       return;
     }
 
@@ -159,11 +161,11 @@ export class ChangePasswordComponent
 
   async setupSubmitActions() {
     if (this.currentMasterPassword == null || this.currentMasterPassword === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPasswordRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPasswordRequired"),
+      });
       return false;
     }
 
@@ -194,11 +196,11 @@ export class ChangePasswordComponent
 
     const userKey = await this.masterPasswordService.decryptUserKeyWithMasterKey(masterKey);
     if (userKey == null) {
-      this.platformUtilsService.showToast(
-        "error",
-        null,
-        this.i18nService.t("invalidMasterPassword"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("invalidMasterPassword"),
+      });
       return;
     }
 
@@ -225,14 +227,18 @@ export class ChangePasswordComponent
 
       await this.formPromise;
 
-      this.platformUtilsService.showToast(
-        "success",
-        this.i18nService.t("masterPasswordChanged"),
-        this.i18nService.t("logBackIn"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: this.i18nService.t("masterPasswordChanged"),
+        message: this.i18nService.t("logBackIn"),
+      });
       this.messagingService.send("logout");
     } catch {
-      this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred"));
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("errorOccurred"),
+      });
     }
   }
 
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 d99c693e73e..fa5e80c81f5 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
@@ -5,7 +5,7 @@ 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 { DialogService, ToastService } from "@bitwarden/components";
 
 import { EmergencyAccessService } from "../../emergency-access";
 import { EmergencyAccessType } from "../../emergency-access/enums/emergency-access-type";
@@ -51,6 +51,7 @@ export class EmergencyAccessAddEditComponent implements OnInit {
     private platformUtilsService: PlatformUtilsService,
     private logService: LogService,
     private dialogRef: DialogRef<EmergencyAccessAddEditDialogResult>,
+    private toastService: ToastService,
   ) {}
   async ngOnInit() {
     this.editMode = this.loading = this.params.emergencyAccessId != null;
@@ -104,11 +105,14 @@ export class EmergencyAccessAddEditComponent implements OnInit {
           this.addEditForm.value.waitTime,
         );
       }
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t(this.editMode ? "editedUserId" : "invitedUsers", this.params.name),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t(
+          this.editMode ? "editedUserId" : "invitedUsers",
+          this.params.name,
+        ),
+      });
       this.dialogRef.close(EmergencyAccessAddEditDialogResult.Saved);
     } catch (e) {
       this.logService.error(e);
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 05e65405fb7..d8cedd5bd43 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
@@ -10,7 +10,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 import { EmergencyAccessService } from "../../emergency-access";
 import { EmergencyAccessStatusType } from "../../emergency-access/enums/emergency-access-status-type";
@@ -66,6 +66,7 @@ export class EmergencyAccessComponent implements OnInit {
     protected dialogService: DialogService,
     billingAccountProfileStateService: BillingAccountProfileStateService,
     protected organizationManagementPreferencesService: OrganizationManagementPreferencesService,
+    private toastService: ToastService,
   ) {
     this.canAccessPremium$ = billingAccountProfileStateService.hasPremiumFromAnySource$;
   }
@@ -121,11 +122,11 @@ export class EmergencyAccessComponent implements OnInit {
     }
     this.actionPromise = this.emergencyAccessService.reinvite(contact.id);
     await this.actionPromise;
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("hasBeenReinvited", contact.email),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("hasBeenReinvited", contact.email),
+    });
     this.actionPromise = null;
   }
 
@@ -153,11 +154,11 @@ export class EmergencyAccessComponent implements OnInit {
       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)),
-        );
+        this.toastService.showToast({
+          variant: "success",
+          title: null,
+          message: this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(contact)),
+        });
       }
       return;
     }
@@ -166,11 +167,11 @@ export class EmergencyAccessComponent implements OnInit {
     await this.actionPromise;
     updateUser();
 
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(contact)),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("hasBeenConfirmed", this.userNamePipe.transform(contact)),
+    });
     this.actionPromise = null;
   }
 
@@ -187,11 +188,11 @@ export class EmergencyAccessComponent implements OnInit {
 
     try {
       await this.emergencyAccessService.delete(details.id);
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("removedUserId", this.userNamePipe.transform(details)),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("removedUserId", this.userNamePipe.transform(details)),
+      });
 
       if (details instanceof GranteeEmergencyAccess) {
         this.removeGrantee(details);
@@ -221,11 +222,11 @@ export class EmergencyAccessComponent implements OnInit {
     await this.emergencyAccessService.requestAccess(details.id);
 
     details.status = EmergencyAccessStatusType.RecoveryInitiated;
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("requestSent", this.userNamePipe.transform(details)),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("requestSent", this.userNamePipe.transform(details)),
+    });
   }
 
   async approve(details: GranteeEmergencyAccess) {
@@ -250,22 +251,22 @@ export class EmergencyAccessComponent implements OnInit {
     await this.emergencyAccessService.approve(details.id);
     details.status = EmergencyAccessStatusType.RecoveryApproved;
 
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("emergencyApproved", this.userNamePipe.transform(details)),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("emergencyApproved", this.userNamePipe.transform(details)),
+    });
   }
 
   async reject(details: GranteeEmergencyAccess) {
     await this.emergencyAccessService.reject(details.id);
     details.status = EmergencyAccessStatusType.Confirmed;
 
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("emergencyRejected", this.userNamePipe.transform(details)),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("emergencyRejected", this.userNamePipe.transform(details)),
+    });
   }
 
   takeover = async (details: GrantorEmergencyAccess) => {
@@ -278,11 +279,11 @@ export class EmergencyAccessComponent implements OnInit {
     });
     const result = await lastValueFrom(dialogRef.closed);
     if (result === EmergencyAccessTakeoverResultType.Done) {
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("passwordResetFor", this.userNamePipe.transform(details)),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("passwordResetFor", this.userNamePipe.transform(details)),
+      });
     }
   };
 
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 a3d856aa697..26995c7ce09 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
@@ -15,7 +15,7 @@ import { MessagingService } from "@bitwarden/common/platform/abstractions/messag
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { KdfType } from "@bitwarden/common/platform/enums";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { EmergencyAccessService } from "../../../emergency-access";
@@ -64,6 +64,7 @@ export class EmergencyAccessTakeoverComponent
     kdfConfigService: KdfConfigService,
     masterPasswordService: InternalMasterPasswordServiceAbstraction,
     accountService: AccountService,
+    protected toastService: ToastService,
   ) {
     super(
       i18nService,
@@ -77,6 +78,7 @@ export class EmergencyAccessTakeoverComponent
       kdfConfigService,
       masterPasswordService,
       accountService,
+      toastService,
     );
   }
 
@@ -114,11 +116,11 @@ export class EmergencyAccessTakeoverComponent
       );
     } catch (e) {
       this.logService.error(e);
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("unexpectedError"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("unexpectedError"),
+      });
     }
     this.dialogRef.close(EmergencyAccessTakeoverResultType.Done);
   };
diff --git a/apps/web/src/app/auth/settings/security/change-kdf/change-kdf-confirmation.component.ts b/apps/web/src/app/auth/settings/security/change-kdf/change-kdf-confirmation.component.ts
index 0c754e262e1..295037ce6b5 100644
--- a/apps/web/src/app/auth/settings/security/change-kdf/change-kdf-confirmation.component.ts
+++ b/apps/web/src/app/auth/settings/security/change-kdf/change-kdf-confirmation.component.ts
@@ -12,6 +12,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { KdfType } from "@bitwarden/common/platform/enums";
+import { ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "app-change-kdf-confirmation",
@@ -35,6 +36,7 @@ export class ChangeKdfConfirmationComponent {
     private messagingService: MessagingService,
     @Inject(DIALOG_DATA) params: { kdf: KdfType; kdfConfig: KdfConfig },
     private accountService: AccountService,
+    private toastService: ToastService,
   ) {
     this.kdfConfig = params.kdfConfig;
     this.masterPassword = null;
@@ -46,11 +48,11 @@ export class ChangeKdfConfirmationComponent {
     }
     this.loading = true;
     await this.makeKeyAndSaveAsync();
-    this.platformUtilsService.showToast(
-      "success",
-      this.i18nService.t("encKeySettingsChanged"),
-      this.i18nService.t("logBackIn"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: this.i18nService.t("encKeySettingsChanged"),
+      message: this.i18nService.t("logBackIn"),
+    });
     this.messagingService.send("logout");
     this.loading = false;
   };
diff --git a/apps/web/src/app/auth/settings/two-factor-authenticator.component.ts b/apps/web/src/app/auth/settings/two-factor-authenticator.component.ts
index b4bef9f74e3..fdd595b7fcd 100644
--- a/apps/web/src/app/auth/settings/two-factor-authenticator.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-authenticator.component.ts
@@ -17,7 +17,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 import { TwoFactorBaseComponent } from "./two-factor-base.component";
 
@@ -68,6 +68,7 @@ export class TwoFactorAuthenticatorComponent
     private accountService: AccountService,
     dialogService: DialogService,
     private configService: ConfigService,
+    protected toastService: ToastService,
   ) {
     super(
       apiService,
@@ -76,6 +77,7 @@ export class TwoFactorAuthenticatorComponent
       logService,
       userVerificationService,
       dialogService,
+      toastService,
     );
     this.qrScript = window.document.createElement("script");
     this.qrScript.src = "scripts/qrious.min.js";
@@ -148,7 +150,11 @@ export class TwoFactorAuthenticatorComponent
     request.userVerificationToken = this.userVerificationToken;
     await this.apiService.deleteTwoFactorAuthenticator(request);
     this.enabled = false;
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("twoStepDisabled"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("twoStepDisabled"),
+    });
     this.onUpdated.emit(false);
   }
 
diff --git a/apps/web/src/app/auth/settings/two-factor-base.component.ts b/apps/web/src/app/auth/settings/two-factor-base.component.ts
index ac8906641dd..2a6af1df98c 100644
--- a/apps/web/src/app/auth/settings/two-factor-base.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-base.component.ts
@@ -10,7 +10,7 @@ import { AuthResponseBase } from "@bitwarden/common/auth/types/auth-response";
 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 { DialogService, ToastService } from "@bitwarden/components";
 
 @Directive()
 export abstract class TwoFactorBaseComponent {
@@ -33,6 +33,7 @@ export abstract class TwoFactorBaseComponent {
     protected logService: LogService,
     protected userVerificationService: UserVerificationService,
     protected dialogService: DialogService,
+    protected toastService: ToastService,
   ) {}
 
   protected auth(authResponse: AuthResponseBase) {
@@ -76,7 +77,11 @@ export abstract class TwoFactorBaseComponent {
       }
       await promise;
       this.enabled = false;
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("twoStepDisabled"));
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("twoStepDisabled"),
+      });
       this.onUpdated.emit(false);
     } catch (e) {
       this.logService.error(e);
@@ -102,7 +107,11 @@ export abstract class TwoFactorBaseComponent {
       await this.apiService.putTwoFactorDisable(request);
     }
     this.enabled = false;
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("twoStepDisabled"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("twoStepDisabled"),
+    });
     this.onUpdated.emit(false);
   }
 
diff --git a/apps/web/src/app/auth/settings/two-factor-duo.component.ts b/apps/web/src/app/auth/settings/two-factor-duo.component.ts
index a211aa4c9ba..1a5b5917108 100644
--- a/apps/web/src/app/auth/settings/two-factor-duo.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-duo.component.ts
@@ -11,7 +11,7 @@ import { AuthResponse } from "@bitwarden/common/auth/types/auth-response";
 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 { DialogService, ToastService } from "@bitwarden/components";
 
 import { TwoFactorBaseComponent } from "./two-factor-base.component";
 
@@ -40,6 +40,7 @@ export class TwoFactorDuoComponent extends TwoFactorBaseComponent implements OnI
     dialogService: DialogService,
     private formBuilder: FormBuilder,
     private dialogRef: DialogRef,
+    protected toastService: ToastService,
   ) {
     super(
       apiService,
@@ -48,6 +49,7 @@ export class TwoFactorDuoComponent extends TwoFactorBaseComponent implements OnI
       logService,
       userVerificationService,
       dialogService,
+      toastService,
     );
   }
 
diff --git a/apps/web/src/app/auth/settings/two-factor-email.component.ts b/apps/web/src/app/auth/settings/two-factor-email.component.ts
index 96b4bfb38d5..524b00d114f 100644
--- a/apps/web/src/app/auth/settings/two-factor-email.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-email.component.ts
@@ -14,7 +14,7 @@ import { AuthResponse } from "@bitwarden/common/auth/types/auth-response";
 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 { DialogService, ToastService } from "@bitwarden/components";
 
 import { TwoFactorBaseComponent } from "./two-factor-base.component";
 
@@ -45,6 +45,7 @@ export class TwoFactorEmailComponent extends TwoFactorBaseComponent implements O
     dialogService: DialogService,
     private formBuilder: FormBuilder,
     private dialogRef: DialogRef,
+    protected toastService: ToastService,
   ) {
     super(
       apiService,
@@ -53,6 +54,7 @@ export class TwoFactorEmailComponent extends TwoFactorBaseComponent implements O
       logService,
       userVerificationService,
       dialogService,
+      toastService,
     );
   }
   get token() {
diff --git a/apps/web/src/app/auth/settings/two-factor-webauthn.component.ts b/apps/web/src/app/auth/settings/two-factor-webauthn.component.ts
index 5e8ea37e930..9aeafaf2c65 100644
--- a/apps/web/src/app/auth/settings/two-factor-webauthn.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-webauthn.component.ts
@@ -16,7 +16,7 @@ import { AuthResponse } from "@bitwarden/common/auth/types/auth-response";
 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 { DialogService, ToastService } from "@bitwarden/components";
 
 import { TwoFactorBaseComponent } from "./two-factor-base.component";
 
@@ -61,6 +61,7 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
     logService: LogService,
     userVerificationService: UserVerificationService,
     dialogService: DialogService,
+    toastService: ToastService,
   ) {
     super(
       apiService,
@@ -69,6 +70,7 @@ export class TwoFactorWebAuthnComponent extends TwoFactorBaseComponent {
       logService,
       userVerificationService,
       dialogService,
+      toastService,
     );
     this.auth(data);
   }
diff --git a/apps/web/src/app/auth/settings/two-factor-yubikey.component.ts b/apps/web/src/app/auth/settings/two-factor-yubikey.component.ts
index 83718360cab..3b601084c35 100644
--- a/apps/web/src/app/auth/settings/two-factor-yubikey.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor-yubikey.component.ts
@@ -55,7 +55,7 @@ export class TwoFactorYubiKeyComponent extends TwoFactorBaseComponent implements
     userVerificationService: UserVerificationService,
     dialogService: DialogService,
     private formBuilder: FormBuilder,
-    private toastService: ToastService,
+    protected toastService: ToastService,
   ) {
     super(
       apiService,
@@ -64,6 +64,7 @@ export class TwoFactorYubiKeyComponent extends TwoFactorBaseComponent implements
       logService,
       userVerificationService,
       dialogService,
+      toastService,
     );
   }
 
diff --git a/apps/web/src/app/auth/settings/verify-email.component.ts b/apps/web/src/app/auth/settings/verify-email.component.ts
index e8809cd8931..6fa7a49bc08 100644
--- a/apps/web/src/app/auth/settings/verify-email.component.ts
+++ b/apps/web/src/app/auth/settings/verify-email.component.ts
@@ -6,7 +6,13 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { AsyncActionsModule, BannerModule, ButtonModule, LinkModule } from "@bitwarden/components";
+import {
+  AsyncActionsModule,
+  BannerModule,
+  ButtonModule,
+  LinkModule,
+  ToastService,
+} from "@bitwarden/components";
 
 @Component({
   standalone: true,
@@ -25,22 +31,27 @@ export class VerifyEmailComponent {
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
     private tokenService: TokenService,
+    private toastService: ToastService,
   ) {}
 
   async verifyEmail(): Promise<void> {
     await this.apiService.refreshIdentityToken();
     if (await this.tokenService.getEmailVerified()) {
       this.onVerified.emit(true);
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("emailVerified"));
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("emailVerified"),
+      });
       return;
     }
 
     await this.apiService.postAccountVerifyEmail();
-    this.platformUtilsService.showToast(
-      "success",
-      null,
-      this.i18nService.t("checkInboxForVerification"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("checkInboxForVerification"),
+    });
   }
 
   send = async () => {
diff --git a/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.ts b/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.ts
index fd72cbbb711..c0ed678d0a7 100644
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.ts
@@ -9,7 +9,7 @@ import { ErrorResponse } from "@bitwarden/common/models/response/error.response"
 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 { DialogService, ToastService } from "@bitwarden/components";
 
 import { WebauthnLoginAdminService } from "../../../core";
 import { CredentialCreateOptionsView } from "../../../core/views/credential-create-options.view";
@@ -60,6 +60,7 @@ export class CreateCredentialDialogComponent implements OnInit {
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private logService: LogService,
+    private toastService: ToastService,
   ) {}
 
   ngOnInit(): void {
@@ -102,11 +103,11 @@ export class CreateCredentialDialogComponent implements OnInit {
         this.invalidSecret = true;
       } else {
         this.logService?.error(error);
-        this.platformUtilsService.showToast(
-          "error",
-          this.i18nService.t("unexpectedError"),
-          error.message,
-        );
+        this.toastService.showToast({
+          variant: "error",
+          title: this.i18nService.t("unexpectedError"),
+          message: error.message,
+        });
       }
       return;
     }
@@ -162,17 +163,17 @@ export class CreateCredentialDialogComponent implements OnInit {
     );
 
     if (await firstValueFrom(this.hasPasskeys$)) {
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("passkeySaved", name),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("passkeySaved", name),
+      });
     } else {
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("loginWithPasskeyEnabled"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("loginWithPasskeyEnabled"),
+      });
     }
 
     this.dialogRef.close(CreateCredentialDialogResult.Success);
diff --git a/apps/web/src/app/auth/settings/webauthn-login-settings/delete-credential-dialog/delete-credential-dialog.component.ts b/apps/web/src/app/auth/settings/webauthn-login-settings/delete-credential-dialog/delete-credential-dialog.component.ts
index 4fec10d2695..ce86874ce46 100644
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/delete-credential-dialog/delete-credential-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/delete-credential-dialog/delete-credential-dialog.component.ts
@@ -8,7 +8,7 @@ import { ErrorResponse } from "@bitwarden/common/models/response/error.response"
 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 { DialogService, ToastService } from "@bitwarden/components";
 
 import { WebauthnLoginAdminService } from "../../../core";
 import { WebauthnLoginCredentialView } from "../../../core/views/webauthn-login-credential.view";
@@ -38,6 +38,7 @@ export class DeleteCredentialDialogComponent implements OnInit, OnDestroy {
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private logService: LogService,
+    private toastService: ToastService,
   ) {}
 
   ngOnInit(): void {
@@ -55,17 +56,21 @@ export class DeleteCredentialDialogComponent implements OnInit, OnDestroy {
     this.dialogRef.disableClose = true;
     try {
       await this.webauthnService.deleteCredential(this.credential.id, this.formGroup.value.secret);
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("passkeyRemoved"));
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("passkeyRemoved"),
+      });
     } catch (error) {
       if (error instanceof ErrorResponse && error.statusCode === 400) {
         this.invalidSecret = true;
       } else {
         this.logService?.error(error);
-        this.platformUtilsService.showToast(
-          "error",
-          this.i18nService.t("unexpectedError"),
-          error.message,
-        );
+        this.toastService.showToast({
+          variant: "error",
+          title: this.i18nService.t("unexpectedError"),
+          message: error.message,
+        });
       }
       return false;
     } finally {
diff --git a/apps/web/src/app/auth/shared/components/user-verification/user-verification-prompt.component.ts b/apps/web/src/app/auth/shared/components/user-verification/user-verification-prompt.component.ts
index cd4ac2db356..7947d53c992 100644
--- a/apps/web/src/app/auth/shared/components/user-verification/user-verification-prompt.component.ts
+++ b/apps/web/src/app/auth/shared/components/user-verification/user-verification-prompt.component.ts
@@ -9,7 +9,7 @@ import {
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 /**
  * @deprecated Jan 24, 2024: Use new libs/auth UserVerificationDialogComponent instead.
@@ -25,8 +25,17 @@ export class UserVerificationPromptComponent extends BaseUserVerificationPrompt
     formBuilder: FormBuilder,
     platformUtilsService: PlatformUtilsService,
     i18nService: I18nService,
+    toastService: ToastService,
   ) {
-    super(null, data, userVerificationService, formBuilder, platformUtilsService, i18nService);
+    super(
+      null,
+      data,
+      userVerificationService,
+      formBuilder,
+      platformUtilsService,
+      i18nService,
+      toastService,
+    );
   }
 
   override close(success: boolean) {
diff --git a/apps/web/src/app/auth/sso.component.ts b/apps/web/src/app/auth/sso.component.ts
index 93a00054eb3..f55152fed3b 100644
--- a/apps/web/src/app/auth/sso.component.ts
+++ b/apps/web/src/app/auth/sso.component.ts
@@ -25,6 +25,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 @Component({
@@ -60,6 +61,7 @@ export class SsoComponent extends BaseSsoComponent implements OnInit {
     configService: ConfigService,
     masterPasswordService: InternalMasterPasswordServiceAbstraction,
     accountService: AccountService,
+    toastService: ToastService,
   ) {
     super(
       ssoLoginService,
@@ -78,6 +80,7 @@ export class SsoComponent extends BaseSsoComponent implements OnInit {
       configService,
       masterPasswordService,
       accountService,
+      toastService,
     );
     this.redirectUri = window.location.origin + "/sso-connector.html";
     this.clientId = "web";
diff --git a/apps/web/src/app/auth/two-factor-auth.component.ts b/apps/web/src/app/auth/two-factor-auth.component.ts
index fbdddecce98..18660b2ca63 100644
--- a/apps/web/src/app/auth/two-factor-auth.component.ts
+++ b/apps/web/src/app/auth/two-factor-auth.component.ts
@@ -17,7 +17,13 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
 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 { LinkModule, TypographyModule, CheckboxModule, DialogService } from "@bitwarden/components";
+import {
+  LinkModule,
+  TypographyModule,
+  CheckboxModule,
+  DialogService,
+  ToastService,
+} from "@bitwarden/components";
 
 import { TwoFactorAuthAuthenticatorComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-authenticator.component";
 import { TwoFactorAuthEmailComponent } from "../../../../../libs/angular/src/auth/components/two-factor-auth/two-factor-auth-email.component";
@@ -81,6 +87,7 @@ export class TwoFactorAuthComponent extends BaseTwoFactorAuthComponent {
     accountService: AccountService,
     formBuilder: FormBuilder,
     @Inject(WINDOW) protected win: Window,
+    toastService: ToastService,
   ) {
     super(
       loginStrategyService,
@@ -100,6 +107,7 @@ export class TwoFactorAuthComponent extends BaseTwoFactorAuthComponent {
       accountService,
       formBuilder,
       win,
+      toastService,
     );
     this.onSuccessfulLoginNavigate = this.goAfterLogIn;
   }
diff --git a/apps/web/src/app/auth/verify-email-token.component.ts b/apps/web/src/app/auth/verify-email-token.component.ts
index 67ea7c9785a..d47e2c885ec 100644
--- a/apps/web/src/app/auth/verify-email-token.component.ts
+++ b/apps/web/src/app/auth/verify-email-token.component.ts
@@ -8,6 +8,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
+import { ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "app-verify-email-token",
@@ -23,6 +24,7 @@ export class VerifyEmailTokenComponent implements OnInit {
     private apiService: ApiService,
     private logService: LogService,
     private stateService: StateService,
+    private toastService: ToastService,
   ) {}
 
   ngOnInit() {
@@ -36,7 +38,11 @@ export class VerifyEmailTokenComponent implements OnInit {
           if (await this.stateService.getIsAuthenticated()) {
             await this.apiService.refreshIdentityToken();
           }
-          this.platformUtilsService.showToast("success", null, this.i18nService.t("emailVerified"));
+          this.toastService.showToast({
+            variant: "success",
+            title: null,
+            message: this.i18nService.t("emailVerified"),
+          });
           // 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(["/"]);
@@ -45,7 +51,11 @@ export class VerifyEmailTokenComponent implements OnInit {
           this.logService.error(e);
         }
       }
-      this.platformUtilsService.showToast("error", null, this.i18nService.t("emailVerifiedFailed"));
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("emailVerifiedFailed"),
+      });
       // 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(["/"]);
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 b3d380fcbda..179913d7e32 100644
--- a/apps/web/src/app/auth/verify-recover-delete.component.ts
+++ b/apps/web/src/app/auth/verify-recover-delete.component.ts
@@ -7,6 +7,7 @@ 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 { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";
 
 @Component({
   selector: "app-verify-recover-delete",
@@ -26,6 +27,7 @@ export class VerifyRecoverDeleteComponent implements OnInit {
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private route: ActivatedRoute,
+    private toastService: ToastService,
   ) {}
 
   ngOnInit() {
@@ -44,11 +46,11 @@ export class VerifyRecoverDeleteComponent implements OnInit {
   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"),
-    );
+    this.toastService.showToast({
+      variant: "success",
+      title: this.i18nService.t("accountDeleted"),
+      message: this.i18nService.t("accountDeletedDesc"),
+    });
     await this.router.navigate(["/"]);
   };
 }
diff --git a/bitwarden_license/bit-web/src/app/auth/sso/sso.component.ts b/bitwarden_license/bit-web/src/app/auth/sso/sso.component.ts
index 4074c20d9df..e37da8c7840 100644
--- a/bitwarden_license/bit-web/src/app/auth/sso/sso.component.ts
+++ b/bitwarden_license/bit-web/src/app/auth/sso/sso.component.ts
@@ -26,9 +26,11 @@ import { SsoConfigApi } from "@bitwarden/common/auth/models/api/sso-config.api";
 import { OrganizationSsoRequest } from "@bitwarden/common/auth/models/request/organization-sso.request";
 import { OrganizationSsoResponse } from "@bitwarden/common/auth/models/response/organization-sso.response";
 import { SsoConfigView } from "@bitwarden/common/auth/models/view/sso-config.view";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { ToastService } from "@bitwarden/components";
 
 import { ssoTypeValidator } from "./sso-type.validator";
 
@@ -189,6 +191,8 @@ export class SsoComponent implements OnInit, OnDestroy {
     private i18nService: I18nService,
     private organizationService: OrganizationService,
     private organizationApiService: OrganizationApiServiceAbstraction,
+    private configService: ConfigService,
+    private toastService: ToastService,
   ) {}
 
   async ngOnInit() {
@@ -282,7 +286,11 @@ export class SsoComponent implements OnInit, OnDestroy {
     const response = await this.organizationApiService.updateSso(this.organizationId, request);
     this.populateForm(response);
 
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("ssoSettingsSaved"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("ssoSettingsSaved"),
+    });
   };
 
   async validateKeyConnectorUrl() {
diff --git a/libs/angular/src/auth/components/base-login-decryption-options.component.ts b/libs/angular/src/auth/components/base-login-decryption-options.component.ts
index 0cc416a74bd..80088bf7f91 100644
--- a/libs/angular/src/auth/components/base-login-decryption-options.component.ts
+++ b/libs/angular/src/auth/components/base-login-decryption-options.component.ts
@@ -39,6 +39,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { UserId } from "@bitwarden/common/types/guid";
+import { ToastService } from "@bitwarden/components";
 
 enum State {
   NewUser,
@@ -104,6 +105,7 @@ export class BaseLoginDecryptionOptionsComponent implements OnInit, OnDestroy {
     protected passwordResetEnrollmentService: PasswordResetEnrollmentServiceAbstraction,
     protected ssoLoginService: SsoLoginServiceAbstraction,
     protected accountService: AccountService,
+    protected toastService: ToastService,
   ) {}
 
   async ngOnInit() {
@@ -275,11 +277,11 @@ export class BaseLoginDecryptionOptionsComponent implements OnInit, OnDestroy {
       const keysRequest = new KeysRequest(publicKey, privateKey.encryptedString);
       await this.apiService.postAccountKeys(keysRequest);
 
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("accountSuccessfullyCreated"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("accountSuccessfullyCreated"),
+      });
 
       await this.passwordResetEnrollmentService.enroll(this.data.organizationId);
 
diff --git a/libs/angular/src/auth/components/captcha-protected.component.ts b/libs/angular/src/auth/components/captcha-protected.component.ts
index 0f549d24988..7186f6c3c48 100644
--- a/libs/angular/src/auth/components/captcha-protected.component.ts
+++ b/libs/angular/src/auth/components/captcha-protected.component.ts
@@ -6,6 +6,7 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { ToastService } from "@bitwarden/components";
 
 @Directive()
 export abstract class CaptchaProtectedComponent {
@@ -17,6 +18,7 @@ export abstract class CaptchaProtectedComponent {
     protected environmentService: EnvironmentService,
     protected i18nService: I18nService,
     protected platformUtilsService: PlatformUtilsService,
+    protected toastService: ToastService,
   ) {}
 
   async setupCaptcha() {
@@ -31,10 +33,18 @@ export abstract class CaptchaProtectedComponent {
         this.captchaToken = token;
       },
       (error: string) => {
-        this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), error);
+        this.toastService.showToast({
+          variant: "error",
+          title: this.i18nService.t("errorOccurred"),
+          message: error,
+        });
       },
       (info: string) => {
-        this.platformUtilsService.showToast("info", this.i18nService.t("info"), info);
+        this.toastService.showToast({
+          variant: "info",
+          title: this.i18nService.t("info"),
+          message: info,
+        });
       },
     );
   }
diff --git a/libs/angular/src/auth/components/change-password.component.ts b/libs/angular/src/auth/components/change-password.component.ts
index d6c0ec92710..45ddf9095fe 100644
--- a/libs/angular/src/auth/components/change-password.component.ts
+++ b/libs/angular/src/auth/components/change-password.component.ts
@@ -15,7 +15,7 @@ import { StateService } from "@bitwarden/common/platform/abstractions/state.serv
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { UserKey, MasterKey } from "@bitwarden/common/types/key";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { PasswordColorText } from "../../tools/password-strength/password-strength.component";
@@ -49,6 +49,7 @@ export class ChangePasswordComponent implements OnInit, OnDestroy {
     protected kdfConfigService: KdfConfigService,
     protected masterPasswordService: InternalMasterPasswordServiceAbstraction,
     protected accountService: AccountService,
+    protected toastService: ToastService,
   ) {}
 
   async ngOnInit() {
@@ -127,27 +128,27 @@ export class ChangePasswordComponent implements OnInit, OnDestroy {
 
   async strongPassword(): Promise<boolean> {
     if (this.masterPassword == null || this.masterPassword === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPasswordRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPasswordRequired"),
+      });
       return false;
     }
     if (this.masterPassword.length < this.minimumLength) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPasswordMinimumlength", this.minimumLength),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPasswordMinimumlength", this.minimumLength),
+      });
       return false;
     }
     if (this.masterPassword !== this.masterPasswordRetype) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPassDoesntMatch"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPassDoesntMatch"),
+      });
       return false;
     }
 
@@ -161,11 +162,11 @@ export class ChangePasswordComponent implements OnInit, OnDestroy {
         this.enforcedPolicyOptions,
       )
     ) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPasswordPolicyRequirementsNotMet"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPasswordPolicyRequirementsNotMet"),
+      });
       return false;
     }
 
diff --git a/libs/angular/src/auth/components/environment.component.ts b/libs/angular/src/auth/components/environment.component.ts
index a58d5e5082e..25f10553308 100644
--- a/libs/angular/src/auth/components/environment.component.ts
+++ b/libs/angular/src/auth/components/environment.component.ts
@@ -7,6 +7,7 @@ import {
 } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";
 
 import { ModalService } from "../../services/modal.service";
 
@@ -27,6 +28,7 @@ export class EnvironmentComponent {
     protected environmentService: EnvironmentService,
     protected i18nService: I18nService,
     private modalService: ModalService,
+    private toastService: ToastService,
   ) {
     this.environmentService.environment$.pipe(takeUntilDestroyed()).subscribe((env) => {
       if (env.getRegion() !== Region.SelfHosted) {
@@ -59,7 +61,11 @@ export class EnvironmentComponent {
       notifications: this.notificationsUrl,
     });
 
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("environmentSaved"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("environmentSaved"),
+    });
     this.saved();
   }
 
diff --git a/libs/angular/src/auth/components/hint.component.ts b/libs/angular/src/auth/components/hint.component.ts
index 484604b6a5a..7a152efbb9f 100644
--- a/libs/angular/src/auth/components/hint.component.ts
+++ b/libs/angular/src/auth/components/hint.component.ts
@@ -7,6 +7,7 @@ import { PasswordHintRequest } from "@bitwarden/common/auth/models/request/passw
 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 { ToastService } from "@bitwarden/components";
 
 @Directive()
 export class HintComponent implements OnInit {
@@ -23,6 +24,7 @@ export class HintComponent implements OnInit {
     protected platformUtilsService: PlatformUtilsService,
     private logService: LogService,
     private loginEmailService: LoginEmailServiceAbstraction,
+    protected toastService: ToastService,
   ) {}
 
   ngOnInit(): void {
@@ -31,26 +33,30 @@ export class HintComponent implements OnInit {
 
   async submit() {
     if (this.email == null || this.email === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("emailRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("emailRequired"),
+      });
       return;
     }
     if (this.email.indexOf("@") === -1) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("invalidEmail"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("invalidEmail"),
+      });
       return;
     }
 
     try {
       this.formPromise = this.apiService.postPasswordHint(new PasswordHintRequest(this.email));
       await this.formPromise;
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("masterPassSent"));
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("masterPassSent"),
+      });
       if (this.onSuccessfulSubmit != null) {
         this.onSuccessfulSubmit();
       } else if (this.router != null) {
diff --git a/libs/angular/src/auth/components/lock.component.ts b/libs/angular/src/auth/components/lock.component.ts
index 400dcfd8891..484e1c63469 100644
--- a/libs/angular/src/auth/components/lock.component.ts
+++ b/libs/angular/src/auth/components/lock.component.ts
@@ -36,7 +36,7 @@ import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/pass
 import { UserId } from "@bitwarden/common/types/guid";
 import { UserKey } from "@bitwarden/common/types/key";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 @Directive()
 export class LockComponent implements OnInit, OnDestroy {
@@ -90,6 +90,7 @@ export class LockComponent implements OnInit, OnDestroy {
     protected authService: AuthService,
     protected kdfConfigService: KdfConfigService,
     protected syncService: SyncService,
+    protected toastService: ToastService,
   ) {}
 
   async ngOnInit() {
@@ -167,11 +168,11 @@ export class LockComponent implements OnInit, OnDestroy {
 
   private async handlePinRequiredUnlock() {
     if (this.pin == null || this.pin === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("pinRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("pinRequired"),
+      });
       return;
     }
 
@@ -195,36 +196,36 @@ export class LockComponent implements OnInit, OnDestroy {
 
       // Log user out if they have entered an invalid PIN too many times
       if (this.invalidPinAttempts >= MAX_INVALID_PIN_ENTRY_ATTEMPTS) {
-        this.platformUtilsService.showToast(
-          "error",
-          null,
-          this.i18nService.t("tooManyInvalidPinEntryAttemptsLoggingOut"),
-        );
+        this.toastService.showToast({
+          variant: "error",
+          title: null,
+          message: this.i18nService.t("tooManyInvalidPinEntryAttemptsLoggingOut"),
+        });
         this.messagingService.send("logout");
         return;
       }
 
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("invalidPin"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("invalidPin"),
+      });
     } catch {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("unexpectedError"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("unexpectedError"),
+      });
     }
   }
 
   private async handleMasterPasswordRequiredUnlock() {
     if (this.masterPassword == null || this.masterPassword === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPasswordRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPasswordRequired"),
+      });
       return;
     }
     await this.doUnlockWithMasterPassword();
@@ -258,11 +259,11 @@ export class LockComponent implements OnInit, OnDestroy {
     }
 
     if (!passwordValid) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("invalidMasterPassword"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("invalidMasterPassword"),
+      });
       return;
     }
 
diff --git a/libs/angular/src/auth/components/login-via-auth-request.component.ts b/libs/angular/src/auth/components/login-via-auth-request.component.ts
index f6356314f5b..452b5ceee1e 100644
--- a/libs/angular/src/auth/components/login-via-auth-request.component.ts
+++ b/libs/angular/src/auth/components/login-via-auth-request.component.ts
@@ -32,6 +32,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { UserId } from "@bitwarden/common/types/guid";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { CaptchaProtectedComponent } from "./captcha-protected.component";
@@ -88,8 +89,9 @@ export class LoginViaAuthRequestComponent
     private deviceTrustService: DeviceTrustServiceAbstraction,
     private authRequestService: AuthRequestServiceAbstraction,
     private loginStrategyService: LoginStrategyServiceAbstraction,
+    protected toastService: ToastService,
   ) {
-    super(environmentService, i18nService, platformUtilsService);
+    super(environmentService, i18nService, platformUtilsService, toastService);
 
     // TODO: I don't know why this is necessary.
     // Why would the existence of the email depend on the navigation?
@@ -105,7 +107,11 @@ export class LoginViaAuthRequestComponent
       .subscribe((id) => {
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this.verifyAndHandleApprovedAuthReq(id).catch((e: Error) => {
-          this.platformUtilsService.showToast("error", this.i18nService.t("error"), e.message);
+          this.toastService.showToast({
+            variant: "error",
+            title: this.i18nService.t("error"),
+            message: e.message,
+          });
           this.logService.error("Failed to use approved auth request: " + e.message);
         });
       });
@@ -135,7 +141,11 @@ export class LoginViaAuthRequestComponent
       const userId = (await firstValueFrom(this.accountService.activeAccount$)).id;
 
       if (!this.email) {
-        this.platformUtilsService.showToast("error", null, this.i18nService.t("userEmailMissing"));
+        this.toastService.showToast({
+          variant: "error",
+          title: null,
+          message: this.i18nService.t("userEmailMissing"),
+        });
         // 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(["/login-initiated"]);
@@ -158,7 +168,11 @@ export class LoginViaAuthRequestComponent
       this.email = this.loginEmailService.getEmail();
 
       if (!this.email) {
-        this.platformUtilsService.showToast("error", null, this.i18nService.t("userEmailMissing"));
+        this.toastService.showToast({
+          variant: "error",
+          title: null,
+          message: this.i18nService.t("userEmailMissing"),
+        });
         // 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(["/login"]);
@@ -402,7 +416,11 @@ export class LoginViaAuthRequestComponent
     // TODO: this should eventually be enforced via deleting this on the server once it is used
     await this.authRequestService.clearAdminAuthRequest(userId);
 
-    this.platformUtilsService.showToast("success", null, this.i18nService.t("loginApproved"));
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("loginApproved"),
+    });
 
     // Now that we have a decrypted user key in memory, we can check if we
     // need to establish trust on the current device
diff --git a/libs/angular/src/auth/components/login.component.ts b/libs/angular/src/auth/components/login.component.ts
index 40880b514aa..501d753a976 100644
--- a/libs/angular/src/auth/components/login.component.ts
+++ b/libs/angular/src/auth/components/login.component.ts
@@ -24,6 +24,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { UserId } from "@bitwarden/common/types/guid";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import {
@@ -92,8 +93,9 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
     protected ssoLoginService: SsoLoginServiceAbstraction,
     protected webAuthnLoginService: WebAuthnLoginServiceAbstraction,
     protected registerRouteService: RegisterRouteService,
+    protected toastService: ToastService,
   ) {
-    super(environmentService, i18nService, platformUtilsService);
+    super(environmentService, i18nService, platformUtilsService, toastService);
   }
 
   async ngOnInit() {
@@ -135,7 +137,11 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
     //desktop, browser; This should be removed once all clients use reactive forms
     if (this.formGroup.invalid && showToast) {
       const errorText = this.getErrorToastMessage();
-      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), errorText);
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: errorText,
+      });
       return;
     }
 
@@ -327,11 +333,11 @@ export class LoginComponent extends CaptchaProtectedComponent implements OnInit,
       return false;
     }
 
-    this.platformUtilsService.showToast(
-      "error",
-      this.i18nService.t("errorOccured"),
-      this.i18nService.t("encryptionKeyMigrationRequired"),
-    );
+    this.toastService.showToast({
+      variant: "error",
+      title: this.i18nService.t("errorOccured"),
+      message: this.i18nService.t("encryptionKeyMigrationRequired"),
+    });
     return true;
   }
 
diff --git a/libs/angular/src/auth/components/register.component.ts b/libs/angular/src/auth/components/register.component.ts
index 366290a79ad..60adcba4d9e 100644
--- a/libs/angular/src/auth/components/register.component.ts
+++ b/libs/angular/src/auth/components/register.component.ts
@@ -17,7 +17,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import {
@@ -97,8 +97,9 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
     protected logService: LogService,
     protected auditService: AuditService,
     protected dialogService: DialogService,
+    protected toastService: ToastService,
   ) {
-    super(environmentService, i18nService, platformUtilsService);
+    super(environmentService, i18nService, platformUtilsService, toastService);
     this.showTerms = !platformUtilsService.isSelfHost();
     this.characterMinimumMessage = this.i18nService.t("characterMinimum", this.minimumLength);
   }
@@ -129,11 +130,11 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
       }
       if (this.isInTrialFlow) {
         if (!this.accountCreated) {
-          this.platformUtilsService.showToast(
-            "success",
-            null,
-            this.i18nService.t("trialAccountCreated"),
-          );
+          this.toastService.showToast({
+            variant: "success",
+            title: null,
+            message: this.i18nService.t("trialAccountCreated"),
+          });
         }
         const loginResponse = await this.logIn(email, masterPassword, this.captchaBypassToken);
         if (loginResponse.captchaRequired) {
@@ -141,11 +142,11 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
         }
         this.createdAccount.emit(this.formGroup.value.email);
       } else {
-        this.platformUtilsService.showToast(
-          "success",
-          null,
-          this.i18nService.t("newAccountCreated"),
-        );
+        this.toastService.showToast({
+          variant: "success",
+          title: null,
+          message: this.i18nService.t("newAccountCreated"),
+        });
         // 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([this.successRoute], { queryParams: { email: email } });
@@ -210,11 +211,11 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
     this.showErrorSummary = true;
 
     if (this.formGroup.get("acceptPolicies").hasError("required")) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("acceptPoliciesRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("acceptPoliciesRequired"),
+      });
       return { isValid: false };
     }
 
@@ -226,7 +227,11 @@ export class RegisterComponent extends CaptchaProtectedComponent implements OnIn
     //desktop, browser
     if (this.formGroup.invalid && showToast) {
       const errorText = this.getErrorToastMessage();
-      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), errorText);
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: errorText,
+      });
       return { isValid: false };
     }
 
diff --git a/libs/angular/src/auth/components/remove-password.component.ts b/libs/angular/src/auth/components/remove-password.component.ts
index ad5027734c8..4b8e9cc52f0 100644
--- a/libs/angular/src/auth/components/remove-password.component.ts
+++ b/libs/angular/src/auth/components/remove-password.component.ts
@@ -9,7 +9,7 @@ import { KeyConnectorService } from "@bitwarden/common/auth/abstractions/key-con
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 @Directive()
 export class RemovePasswordComponent implements OnInit {
@@ -30,6 +30,7 @@ export class RemovePasswordComponent implements OnInit {
     private keyConnectorService: KeyConnectorService,
     private organizationApiService: OrganizationApiServiceAbstraction,
     private dialogService: DialogService,
+    private toastService: ToastService,
   ) {}
 
   async ngOnInit() {
@@ -47,17 +48,21 @@ export class RemovePasswordComponent implements OnInit {
 
     try {
       await this.actionPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("removedMasterPassword"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("removedMasterPassword"),
+      });
       await this.keyConnectorService.removeConvertAccountRequired();
       // 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.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), e.message);
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: e.message,
+      });
     }
   };
 
@@ -76,13 +81,21 @@ export class RemovePasswordComponent implements OnInit {
       this.leaving = true;
       this.actionPromise = this.organizationApiService.leave(this.organization.id);
       await this.actionPromise;
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("leftOrganization"));
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("leftOrganization"),
+      });
       await this.keyConnectorService.removeConvertAccountRequired();
       // 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.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), e);
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: e,
+      });
     }
   };
 }
diff --git a/libs/angular/src/auth/components/set-password.component.ts b/libs/angular/src/auth/components/set-password.component.ts
index f94a31e8d20..e9662c71076 100644
--- a/libs/angular/src/auth/components/set-password.component.ts
+++ b/libs/angular/src/auth/components/set-password.component.ts
@@ -32,7 +32,7 @@ import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { UserId } from "@bitwarden/common/types/guid";
 import { MasterKey, UserKey } from "@bitwarden/common/types/key";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { ChangePasswordComponent as BaseChangePasswordComponent } from "./change-password.component";
@@ -74,6 +74,7 @@ export class SetPasswordComponent extends BaseChangePasswordComponent implements
     dialogService: DialogService,
     kdfConfigService: KdfConfigService,
     private encryptService: EncryptService,
+    protected toastService: ToastService,
   ) {
     super(
       i18nService,
@@ -87,6 +88,7 @@ export class SetPasswordComponent extends BaseChangePasswordComponent implements
       kdfConfigService,
       masterPasswordService,
       accountService,
+      toastService,
     );
   }
 
@@ -137,7 +139,11 @@ export class SetPasswordComponent extends BaseChangePasswordComponent implements
       )
       .subscribe({
         error: () => {
-          this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred"));
+          this.toastService.showToast({
+            variant: "error",
+            title: null,
+            message: this.i18nService.t("errorOccurred"),
+          });
         },
       });
   }
@@ -237,7 +243,11 @@ export class SetPasswordComponent extends BaseChangePasswordComponent implements
         this.router.navigate([this.successRoute]);
       }
     } catch {
-      this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred"));
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("errorOccurred"),
+      });
     }
   }
 
diff --git a/libs/angular/src/auth/components/sso.component.spec.ts b/libs/angular/src/auth/components/sso.component.spec.ts
index 8584abeeb85..af92c7dd1d4 100644
--- a/libs/angular/src/auth/components/sso.component.spec.ts
+++ b/libs/angular/src/auth/components/sso.component.spec.ts
@@ -28,6 +28,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { FakeAccountService, mockAccountServiceWith } from "@bitwarden/common/spec";
 import { UserId } from "@bitwarden/common/types/guid";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { SsoComponent } from "./sso.component";
@@ -65,7 +66,7 @@ describe("SsoComponent", () => {
 
   let mockSsoLoginService: MockProxy<SsoLoginServiceAbstraction>;
   let mockStateService: MockProxy<StateService>;
-  let mockPlatformUtilsService: MockProxy<PlatformUtilsService>;
+  let mockToastService: MockProxy<ToastService>;
   let mockApiService: MockProxy<ApiService>;
   let mockCryptoFunctionService: MockProxy<CryptoFunctionService>;
   let mockEnvironmentService: MockProxy<EnvironmentService>;
@@ -75,6 +76,7 @@ describe("SsoComponent", () => {
   let mockConfigService: MockProxy<ConfigService>;
   let mockMasterPasswordService: FakeMasterPasswordService;
   let mockAccountService: FakeAccountService;
+  let mockPlatformUtilsService: MockProxy<PlatformUtilsService>;
 
   // Mock authService.logIn params
   let code: string;
@@ -117,7 +119,7 @@ describe("SsoComponent", () => {
 
     mockSsoLoginService = mock();
     mockStateService = mock();
-    mockPlatformUtilsService = mock();
+    mockToastService = mock();
     mockApiService = mock();
     mockCryptoFunctionService = mock();
     mockEnvironmentService = mock();
@@ -127,6 +129,7 @@ describe("SsoComponent", () => {
     mockConfigService = mock();
     mockAccountService = mockAccountServiceWith(userId);
     mockMasterPasswordService = new FakeMasterPasswordService();
+    mockPlatformUtilsService = mock();
 
     // Mock loginStrategyService.logIn params
     code = "code";
@@ -196,7 +199,7 @@ describe("SsoComponent", () => {
         { provide: I18nService, useValue: mockI18nService },
         { provide: ActivatedRoute, useValue: mockActivatedRoute },
         { provide: StateService, useValue: mockStateService },
-        { provide: PlatformUtilsService, useValue: mockPlatformUtilsService },
+        { provide: ToastService, useValue: mockToastService },
 
         { provide: ApiService, useValue: mockApiService },
         { provide: CryptoFunctionService, useValue: mockCryptoFunctionService },
@@ -214,6 +217,7 @@ describe("SsoComponent", () => {
         { provide: ConfigService, useValue: mockConfigService },
         { provide: InternalMasterPasswordServiceAbstraction, useValue: mockMasterPasswordService },
         { provide: AccountService, useValue: mockAccountService },
+        { provide: PlatformUtilsService, useValue: mockPlatformUtilsService },
       ],
     });
 
@@ -594,12 +598,12 @@ describe("SsoComponent", () => {
       expect(mockLogService.error).toHaveBeenCalledTimes(1);
       expect(mockLogService.error).toHaveBeenCalledWith(error);
 
-      expect(mockPlatformUtilsService.showToast).toHaveBeenCalledTimes(1);
-      expect(mockPlatformUtilsService.showToast).toHaveBeenCalledWith(
-        "error",
-        null,
-        "ssoKeyConnectorError",
-      );
+      expect(mockToastService.showToast).toHaveBeenCalledTimes(1);
+      expect(mockToastService.showToast).toHaveBeenCalledWith({
+        variant: "error",
+        title: null,
+        message: "ssoKeyConnectorError",
+      });
 
       expect(mockRouter.navigate).not.toHaveBeenCalled();
     });
diff --git a/libs/angular/src/auth/components/sso.component.ts b/libs/angular/src/auth/components/sso.component.ts
index cc105222c26..ac64ae02462 100644
--- a/libs/angular/src/auth/components/sso.component.ts
+++ b/libs/angular/src/auth/components/sso.component.ts
@@ -26,6 +26,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 @Directive()
@@ -71,6 +72,7 @@ export class SsoComponent implements OnInit {
     protected configService: ConfigService,
     protected masterPasswordService: InternalMasterPasswordServiceAbstraction,
     protected accountService: AccountService,
+    protected toastService: ToastService,
   ) {}
 
   async ngOnInit() {
@@ -111,11 +113,11 @@ export class SsoComponent implements OnInit {
 
   async submit(returnUri?: string, includeUserIdentifier?: boolean) {
     if (this.identifier == null || this.identifier === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("ssoValidationFailed"),
-        this.i18nService.t("ssoIdentifierRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("ssoValidationFailed"),
+        message: this.i18nService.t("ssoIdentifierRequired"),
+      });
       return;
     }
 
@@ -382,11 +384,11 @@ export class SsoComponent implements OnInit {
 
     // TODO: Key Connector Service should pass this error message to the logout callback instead of displaying here
     if (e.message === "Key Connector error") {
-      this.platformUtilsService.showToast(
-        "error",
-        null,
-        this.i18nService.t("ssoKeyConnectorError"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: null,
+        message: this.i18nService.t("ssoKeyConnectorError"),
+      });
     }
   }
 
diff --git a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-email.component.ts b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-email.component.ts
index 5a1231daac6..72d7e6a76c8 100644
--- a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-email.component.ts
+++ b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-email.component.ts
@@ -20,6 +20,7 @@ import {
   TypographyModule,
   FormFieldModule,
   AsyncActionsModule,
+  ToastService,
 } from "@bitwarden/components";
 
 @Component({
@@ -55,6 +56,7 @@ export class TwoFactorAuthEmailComponent implements OnInit {
     protected logService: LogService,
     protected apiService: ApiService,
     protected appIdService: AppIdService,
+    private toastService: ToastService,
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -74,11 +76,11 @@ export class TwoFactorAuthEmailComponent implements OnInit {
     }
 
     if ((await this.loginStrategyService.getEmail()) == null) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("sessionTimeout"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("sessionTimeout"),
+      });
       return;
     }
 
@@ -94,11 +96,11 @@ export class TwoFactorAuthEmailComponent implements OnInit {
       this.emailPromise = this.apiService.postTwoFactorEmail(request);
       await this.emailPromise;
       if (doToast) {
-        this.platformUtilsService.showToast(
-          "success",
-          null,
-          this.i18nService.t("verificationCodeEmailSent", this.twoFactorEmail),
-        );
+        this.toastService.showToast({
+          variant: "success",
+          title: null,
+          message: this.i18nService.t("verificationCodeEmailSent", this.twoFactorEmail),
+        });
       }
     } catch (e) {
       this.logService.error(e);
diff --git a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-webauthn.component.ts b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-webauthn.component.ts
index 7f0554c1f0f..7e9f6486911 100644
--- a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-webauthn.component.ts
+++ b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth-webauthn.component.ts
@@ -21,6 +21,7 @@ import {
   TypographyModule,
   FormFieldModule,
   AsyncActionsModule,
+  ToastService,
 } from "@bitwarden/components";
 
 @Component({
@@ -56,6 +57,7 @@ export class TwoFactorAuthWebAuthnComponent implements OnInit, OnDestroy {
     protected environmentService: EnvironmentService,
     protected twoFactorService: TwoFactorService,
     protected route: ActivatedRoute,
+    private toastService: ToastService,
   ) {
     this.webAuthnSupported = this.platformUtilsService.supportsWebAuthn(win);
 
@@ -85,11 +87,11 @@ export class TwoFactorAuthWebAuthnComponent implements OnInit, OnDestroy {
           this.token.emit(token);
         },
         (error: string) => {
-          this.platformUtilsService.showToast(
-            "error",
-            this.i18nService.t("errorOccurred"),
-            this.i18nService.t("webauthnCancelOrTimeout"),
-          );
+          this.toastService.showToast({
+            variant: "error",
+            title: this.i18nService.t("errorOccurred"),
+            message: this.i18nService.t("webauthnCancelOrTimeout"),
+          });
         },
         (info: string) => {
           if (info === "ready") {
diff --git a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.spec.ts b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.spec.ts
index 489ca5c1781..755813a677a 100644
--- a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.spec.ts
+++ b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.spec.ts
@@ -35,7 +35,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { FakeAccountService, mockAccountServiceWith } from "@bitwarden/common/spec";
 import { UserId } from "@bitwarden/common/types/guid";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 
 import { TwoFactorAuthComponent } from "./two-factor-auth.component";
 
@@ -76,6 +76,7 @@ describe("TwoFactorComponent", () => {
   let mockMasterPasswordService: FakeMasterPasswordService;
   let mockAccountService: FakeAccountService;
   let mockDialogService: MockProxy<DialogService>;
+  let mockToastService: MockProxy<ToastService>;
 
   let mockUserDecryptionOpts: {
     noMasterPassword: UserDecryptionOptions;
@@ -113,6 +114,7 @@ describe("TwoFactorComponent", () => {
     mockAccountService = mockAccountServiceWith(userId);
     mockMasterPasswordService = new FakeMasterPasswordService();
     mockDialogService = mock<DialogService>();
+    mockToastService = mock<ToastService>();
 
     mockUserDecryptionOpts = {
       noMasterPassword: new UserDecryptionOptions({
@@ -193,6 +195,7 @@ describe("TwoFactorComponent", () => {
         { provide: InternalMasterPasswordServiceAbstraction, useValue: mockMasterPasswordService },
         { provide: AccountService, useValue: mockAccountService },
         { provide: DialogService, useValue: mockDialogService },
+        { provide: ToastService, useValue: mockToastService },
       ],
     });
 
diff --git a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.ts b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.ts
index 21aaf119c43..58edeed93e9 100644
--- a/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.ts
+++ b/libs/angular/src/auth/components/two-factor-auth/two-factor-auth.component.ts
@@ -34,6 +34,7 @@ import {
   ButtonModule,
   DialogService,
   FormFieldModule,
+  ToastService,
 } from "@bitwarden/components";
 
 import { CaptchaProtectedComponent } from "../captcha-protected.component";
@@ -142,8 +143,9 @@ export class TwoFactorAuthComponent extends CaptchaProtectedComponent implements
     private accountService: AccountService,
     private formBuilder: FormBuilder,
     @Inject(WINDOW) protected win: Window,
+    protected toastService: ToastService,
   ) {
-    super(environmentService, i18nService, platformUtilsService);
+    super(environmentService, i18nService, platformUtilsService, toastService);
   }
 
   async ngOnInit() {
@@ -184,11 +186,11 @@ export class TwoFactorAuthComponent extends CaptchaProtectedComponent implements
     await this.setupCaptcha();
 
     if (this.token == null || this.token === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("verificationCodeRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("verificationCodeRequired"),
+      });
       return;
     }
 
@@ -202,11 +204,11 @@ export class TwoFactorAuthComponent extends CaptchaProtectedComponent implements
       await this.handleLoginResponse(authResult);
     } catch {
       this.logService.error("Error submitting two factor token");
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("invalidVerificationCode"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("invalidVerificationCode"),
+      });
     }
   }
 
diff --git a/libs/angular/src/auth/components/two-factor.component.ts b/libs/angular/src/auth/components/two-factor.component.ts
index 8c849db6c63..eaff9d665fd 100644
--- a/libs/angular/src/auth/components/two-factor.component.ts
+++ b/libs/angular/src/auth/components/two-factor.component.ts
@@ -97,7 +97,7 @@ export class TwoFactorComponent extends CaptchaProtectedComponent implements OnI
     protected accountService: AccountService,
     protected toastService: ToastService,
   ) {
-    super(environmentService, i18nService, platformUtilsService);
+    super(environmentService, i18nService, platformUtilsService, toastService);
     this.webAuthnSupported = this.platformUtilsService.supportsWebAuthn(win);
   }
 
@@ -135,7 +135,11 @@ export class TwoFactorComponent extends CaptchaProtectedComponent implements OnI
           this.submit();
         },
         (error: string) => {
-          this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), error);
+          this.toastService.showToast({
+            variant: "error",
+            title: this.i18nService.t("errorOccurred"),
+            message: error,
+          });
         },
         (info: string) => {
           if (info === "ready") {
@@ -201,11 +205,11 @@ export class TwoFactorComponent extends CaptchaProtectedComponent implements OnI
     await this.setupCaptcha();
 
     if (this.token == null || this.token === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("verificationCodeRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("verificationCodeRequired"),
+      });
       return;
     }
 
@@ -243,11 +247,11 @@ export class TwoFactorComponent extends CaptchaProtectedComponent implements OnI
       return false;
     }
 
-    this.platformUtilsService.showToast(
-      "error",
-      this.i18nService.t("errorOccured"),
-      this.i18nService.t("encryptionKeyMigrationRequired"),
-    );
+    this.toastService.showToast({
+      variant: "error",
+      title: this.i18nService.t("errorOccured"),
+      message: this.i18nService.t("encryptionKeyMigrationRequired"),
+    });
     return true;
   }
 
@@ -414,11 +418,11 @@ export class TwoFactorComponent extends CaptchaProtectedComponent implements OnI
     }
 
     if ((await this.loginStrategyService.getEmail()) == null) {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("sessionTimeout"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("sessionTimeout"),
+      });
       return;
     }
 
@@ -434,11 +438,11 @@ export class TwoFactorComponent extends CaptchaProtectedComponent implements OnI
       this.emailPromise = this.apiService.postTwoFactorEmail(request);
       await this.emailPromise;
       if (doToast) {
-        this.platformUtilsService.showToast(
-          "success",
-          null,
-          this.i18nService.t("verificationCodeEmailSent", this.twoFactorEmail),
-        );
+        this.toastService.showToast({
+          variant: "success",
+          title: null,
+          message: this.i18nService.t("verificationCodeEmailSent", this.twoFactorEmail),
+        });
       }
     } catch (e) {
       this.logService.error(e);
diff --git a/libs/angular/src/auth/components/update-password.component.ts b/libs/angular/src/auth/components/update-password.component.ts
index 661e50e887a..98dd4aeb49a 100644
--- a/libs/angular/src/auth/components/update-password.component.ts
+++ b/libs/angular/src/auth/components/update-password.component.ts
@@ -19,7 +19,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { MasterKey, UserKey } from "@bitwarden/common/types/key";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { ChangePasswordComponent as BaseChangePasswordComponent } from "./change-password.component";
@@ -50,6 +50,7 @@ export class UpdatePasswordComponent extends BaseChangePasswordComponent {
     kdfConfigService: KdfConfigService,
     masterPasswordService: InternalMasterPasswordServiceAbstraction,
     accountService: AccountService,
+    toastService: ToastService,
   ) {
     super(
       i18nService,
@@ -63,6 +64,7 @@ export class UpdatePasswordComponent extends BaseChangePasswordComponent {
       kdfConfigService,
       masterPasswordService,
       accountService,
+      toastService,
     );
   }
 
@@ -77,11 +79,11 @@ export class UpdatePasswordComponent extends BaseChangePasswordComponent {
 
   async setupSubmitActions(): Promise<boolean> {
     if (this.currentMasterPassword == null || this.currentMasterPassword === "") {
-      this.platformUtilsService.showToast(
-        "error",
-        this.i18nService.t("errorOccurred"),
-        this.i18nService.t("masterPasswordRequired"),
-      );
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: this.i18nService.t("masterPasswordRequired"),
+      });
       return false;
     }
 
@@ -92,7 +94,11 @@ export class UpdatePasswordComponent extends BaseChangePasswordComponent {
     try {
       await this.userVerificationService.verifyUser(secret);
     } catch (e) {
-      this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), e.message);
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("errorOccurred"),
+        message: e.message,
+      });
       return false;
     }
 
@@ -120,11 +126,11 @@ export class UpdatePasswordComponent extends BaseChangePasswordComponent {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this.apiService.postPassword(request);
 
-      this.platformUtilsService.showToast(
-        "success",
-        this.i18nService.t("masterPasswordChanged"),
-        this.i18nService.t("logBackIn"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: this.i18nService.t("masterPasswordChanged"),
+        message: this.i18nService.t("logBackIn"),
+      });
 
       if (this.onSuccessfulChangePassword != null) {
         // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
diff --git a/libs/angular/src/auth/components/update-temp-password.component.ts b/libs/angular/src/auth/components/update-temp-password.component.ts
index 4991e2b152f..78fb9b625b9 100644
--- a/libs/angular/src/auth/components/update-temp-password.component.ts
+++ b/libs/angular/src/auth/components/update-temp-password.component.ts
@@ -24,7 +24,7 @@ import { StateService } from "@bitwarden/common/platform/abstractions/state.serv
 import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { MasterKey, UserKey } from "@bitwarden/common/types/key";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { ChangePasswordComponent as BaseChangePasswordComponent } from "./change-password.component";
@@ -64,6 +64,7 @@ export class UpdateTempPasswordComponent extends BaseChangePasswordComponent imp
     kdfConfigService: KdfConfigService,
     accountService: AccountService,
     masterPasswordService: InternalMasterPasswordServiceAbstraction,
+    toastService: ToastService,
   ) {
     super(
       i18nService,
@@ -77,6 +78,7 @@ export class UpdateTempPasswordComponent extends BaseChangePasswordComponent imp
       kdfConfigService,
       masterPasswordService,
       accountService,
+      toastService,
     );
   }
 
@@ -176,11 +178,11 @@ export class UpdateTempPasswordComponent extends BaseChangePasswordComponent imp
       }
 
       await this.formPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("updatedMasterPassword"),
-      );
+      this.toastService.showToast({
+        variant: "success",
+        title: null,
+        message: this.i18nService.t("updatedMasterPassword"),
+      });
 
       const userId = (await firstValueFrom(this.accountService.activeAccount$))?.id;
       await this.masterPasswordService.setForceSetPasswordReason(
diff --git a/libs/angular/src/auth/components/user-verification-prompt.component.ts b/libs/angular/src/auth/components/user-verification-prompt.component.ts
index d999042722d..4b25a7cc0fe 100644
--- a/libs/angular/src/auth/components/user-verification-prompt.component.ts
+++ b/libs/angular/src/auth/components/user-verification-prompt.component.ts
@@ -5,6 +5,7 @@ import { UserVerificationService } from "@bitwarden/common/auth/abstractions/use
 import { Verification } from "@bitwarden/common/auth/types/verification";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ToastService } from "@bitwarden/components";
 
 import { ModalRef } from "../../components/modal/modal.ref";
 
@@ -37,6 +38,7 @@ export class UserVerificationPromptComponent {
     private formBuilder: FormBuilder,
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
+    private toastService: ToastService,
   ) {}
 
   get secret() {
@@ -56,7 +58,11 @@ export class UserVerificationPromptComponent {
       this.invalidSecret = false;
     } catch (e) {
       this.invalidSecret = true;
-      this.platformUtilsService.showToast("error", this.i18nService.t("error"), e.message);
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("error"),
+        message: e.message,
+      });
       return;
     }
 
diff --git a/libs/auth/src/angular/user-verification/user-verification-dialog.component.ts b/libs/auth/src/angular/user-verification/user-verification-dialog.component.ts
index f8746b5b24e..0c3e6ab71e8 100644
--- a/libs/auth/src/angular/user-verification/user-verification-dialog.component.ts
+++ b/libs/auth/src/angular/user-verification/user-verification-dialog.component.ts
@@ -15,6 +15,7 @@ import {
   CalloutModule,
   DialogModule,
   DialogService,
+  ToastService,
 } from "@bitwarden/components";
 
 import { ActiveClientVerificationOption } from "./active-client-verification-option.enum";
@@ -58,6 +59,7 @@ export class UserVerificationDialogComponent {
     private userVerificationService: UserVerificationService,
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
+    private toastService: ToastService,
   ) {}
 
   /**
@@ -256,19 +258,27 @@ export class UserVerificationDialogComponent {
 
         // Only pin should ever get here, but added this check to be safe.
         if (this.activeClientVerificationOption === ActiveClientVerificationOption.Pin) {
-          this.platformUtilsService.showToast(
-            "error",
-            this.i18nService.t("error"),
-            this.i18nService.t("invalidPin"),
-          );
+          this.toastService.showToast({
+            variant: "error",
+            title: this.i18nService.t("error"),
+            message: this.i18nService.t("invalidPin"),
+          });
         } else {
-          this.platformUtilsService.showToast("error", null, this.i18nService.t("unexpectedError"));
+          this.toastService.showToast({
+            variant: "error",
+            title: null,
+            message: this.i18nService.t("unexpectedError"),
+          });
         }
       }
     } catch (e) {
       // Catch handles OTP and MP verification scenarios as those throw errors on verification failure instead of returning false like PIN and biometrics.
       this.invalidSecret = true;
-      this.platformUtilsService.showToast("error", this.i18nService.t("error"), e.message);
+      this.toastService.showToast({
+        variant: "error",
+        title: this.i18nService.t("error"),
+        message: e.message,
+      });
       return;
     }
   };

From 5b4e4d8f1a19b801634beab4e801e025a34dbc62 Mon Sep 17 00:00:00 2001
From: Cesar Gonzalez <cesar.a.gonzalezcs@gmail.com>
Date: Tue, 27 Aug 2024 13:31:44 -0500
Subject: [PATCH 07/18] [PM-10669] Fix inconsistencies with notification bar
 when saving or updating login credentials (#10617)

* [PM-10669] Notification bar appears inconsistently after login

* [PM-10669] Notification bar appears inconsistently after login

* [PM-10669] Migrating work from POC branch into feature branch

* [PM-10669] Incorporating styles for select element

* [PM-10669] Incorporating styles for select element

* [PM-10669] Fixing notification bar lifespan const

* [PM-10669] Incorporating logic that conditionally loads specific bootstrap autofill feature files

* [PM-10669] Incorporating logic to more smoothly handle transitioning between pages within the notification bar0

* [PM-10669] Incorporating logic to more smoothly handle transitioning between pages within the notification bar0

* [PM-10669] Incorporating logic to more smoothly handle transitioning between pages within the notification bar0

* [PM-10669] Incorporating a circle checkmark icon within the success message of the notification bar

* [PM-10669] Fixing an issue where the notification bar can potentially load in between loading states for a tab

* [PM-10669] Fixing an issue where the notification bar can potentially load in between loading states for a tab

* [PM-10669] Fixing an issue where the notification bar can potentially load in between loading states for a tab

* [PM-10669] Fixing an issue where the notification bar can potentially load in between loading states for a tab

* [PM-10669] Fixing how we handle keyup events on the submit button

* [PM-10669] Fixing how we handle keyup events on the submit button

* [PM-10669] Fixing jest tests within notification bar

* [PM-10669] Adding a jest tests to validate behavior within AutofillInit

* [PM-10669] Adding a jest tests to validate behavior within AutofillInit

* [PM-11170] Addressing test coverage within CollectAutofillContentService

* [PM-11170] Addressing test coverage within CollectAutofillContentService

* [PM-10669] Refactoring implementation

* [PM-10669] Adding documentation to the methods incorporated within the AutofillOverlayContentService

* [PM-10669] Incorporating jest tests for the AutofillOverlayContentService

* [PM-10669] Migrating logic associated with the DomQuerySevice away from the CollectAutofillContentService

* [PM-10669] Fixing required references to DomQueryService within the implementation

* [PM-10669] Holding off on re-incorporating the userTreeWalkerStrategyFlag

* [PM-10669] Incorporating jest tests for DomQueryService

* [PM-10669] Adding jest test to validate changes within AutofillService

* [PM-10669] Adding jest tests to validate changes within AutofillOverlayContentService

* [PM-10669] Adding documentation to the OverlayNotificationsBackground class

* [PM-10669] Adding documentation to the OverlayNotificationsBackground class

* [PM-10669] Incorporating jest tests to validate the OverlayNotificationsBackground class

* [PM-10669] Incorporating jest tests to validate the OverlayNotificationsBackground class

* [PM-10669] Incorporating jest tests to validate the OverlayNotificationsBackground class

* [PM-10669] Incorporating jest tests to validate the OverlayNotificationsBackground class

* [PM-10669] Incorporating jest tests to validate the OverlayNotificationsBackground class

* [PM-10669] Refactoring OverlayNotificationsContentService and incorporating logic that triggers a fade out of the notification bar on success of a saved password

* [PM-10669] Refactoring OverlayNotificationsContentService and incorporating logic that triggers a fade out of the notification bar on success of a saved password

* [PM-10669] Refactoring OverlayNotificationsContentService and incorporating logic that triggers a fade out of the notification bar on success of a saved password

* [PM-10669] Finalizing jest tests for OverlayNotificationsContentService

* [PM-10669] Finalizing jest tests for OverlayNotificationsContentService

* [PM-10669] Adding new copy for the password saved/updated event in the notification bar

* [PM-10669] Fixing visual presentation of sucesss message

* [PM-10669] Fixing visual presentation of sucesss message

* [PM-10418] Incorporating fallback for when we cannot capture the form button effectively

* [PM-10669] Incorporating fixes for form submission button not being captured

* [PM-10669] Incorporating a guard to ensure that an AJAX submission captures form data after the user has entered their credentials

* [PM-10669] Incorporating a field qualification rule to ensure that we capture forms that are non-viewable on load

* [PM-10669] Incorporating a document readyState listener to ensure that we populate the notification bar once the document body is loaded

* [PM-10669] Incorporating a match pattern for subdomains of a main domain when filtering out web requests

* [PM-10669] Incorporating a match pattern for subdomains of a main domain when filtering out web requests

* [PM-10669] Incorporating a redundant methodology to capture `GET` requests that trigger after a form submisson

* [PM-10669] Incorporating a redundant methodology to capture `GET` requests that trigger after a form submisson

* [PM-10669] Adding jest tests to validate changes within OverlayNotificationsBackground

* [PM-10669] Adjusting timeout for modified login credentials to ensure user can enter data on form

* [PM-10669] Refining how we handle re-capturing user credentails on before request to better handle multi-part forms

* [PM-10669] Refining how we handle re-capturing user credentails on before request to better handle multi-part forms

* [PM-10669] Adjusting jest tests to ensure code coverage

* [PM-10669] Fixing issues with Safari

* [PM-10669] Fixing an invalid qualification rule

* [PM-10669] Ensuring that we capture input changes correctly when a field is going from a hidden to non-hidden state

* [PM-10669] Fixing jest tests within overlay content service

* [PM-10669] Fixing jest tests within overlay content service

* [PM-10669] Adding a jest test to validate changes to overlay content service
---
 apps/browser/src/_locales/en/messages.json    |   8 +
 .../abstractions/notification.background.ts   |   7 +-
 .../overlay-notifications.background.ts       |  52 ++
 .../notification.background.spec.ts           |  74 +--
 .../background/notification.background.ts     |  51 +-
 .../overlay-notifications.background.spec.ts  | 548 +++++++++++++++++
 .../overlay-notifications.background.ts       | 557 ++++++++++++++++++
 .../content/auto-submit-login.spec.ts         |  14 +-
 .../src/autofill/content/auto-submit-login.ts |  12 +-
 .../autofill/content/autofill-init.spec.ts    |  23 +-
 .../src/autofill/content/autofill-init.ts     |  22 +-
 .../bootstrap-autofill-overlay-menu.ts        |  30 +
 ...ootstrap-autofill-overlay-notifications.ts |  33 ++
 .../content/bootstrap-autofill-overlay.ts     |  10 +
 .../autofill/content/bootstrap-autofill.ts    |   4 +-
 .../src/autofill/content/notification-bar.ts  |   3 +-
 .../content/autofill-init.deprecated.ts       |   3 +
 ...fill-overlay-content.service.deprecated.ts |   2 +-
 .../autofill/enums/autofill-field.enums.ts    |   1 +
 .../abstractions/notification-bar.ts          |   2 +
 .../src/autofill/notification/bar.html        |  27 +-
 .../src/autofill/notification/bar.scss        | 174 +++++-
 apps/browser/src/autofill/notification/bar.ts |  21 +-
 ...tofill-inline-menu-content.service.spec.ts |   7 +-
 .../overlay-notifications-content.service.ts  |  40 ++
 ...notifications-content.service.spec.ts.snap |  14 +
 ...rlay-notifications-content.service.spec.ts | 264 +++++++++
 .../overlay-notifications-content.service.ts  | 281 +++++++++
 .../autofill-overlay-content.service.ts       |  10 +-
 .../collect-autofill-content.service.ts       |  10 -
 .../abstractions/dom-query.service.ts         |  12 +
 ...nline-menu-field-qualifications.service.ts |   4 +
 .../autofill/services/autofill-constants.ts   |  18 +
 .../autofill-overlay-content.service.spec.ts  | 401 +++++++++++--
 .../autofill-overlay-content.service.ts       | 282 ++++++++-
 .../services/autofill.service.spec.ts         |  51 +-
 .../src/autofill/services/autofill.service.ts |  83 ++-
 .../collect-autofill-content.service.spec.ts  |  53 +-
 .../collect-autofill-content.service.ts       | 270 ++-------
 .../services/dom-query.service.spec.ts        |  82 +++
 .../autofill/services/dom-query.service.ts    | 185 ++++++
 ...e-menu-field-qualification.service.spec.ts |  15 +-
 ...inline-menu-field-qualification.service.ts |  77 ++-
 .../insert-autofill-content.service.spec.ts   |   4 +
 .../insert-autofill-content.service.ts        |  11 +-
 .../src/autofill/spec/testing-utils.ts        |   9 +
 apps/browser/src/autofill/utils/index.ts      |   2 +-
 apps/browser/src/autofill/utils/svg-icons.ts  |   3 +
 .../browser/src/background/main.background.ts |  13 +-
 .../src/popup/services/services.module.ts     |   1 +
 apps/browser/test.setup.ts                    |   4 +
 apps/browser/webpack.config.js                |   4 +
 libs/common/src/autofill/constants/index.ts   |   6 +
 libs/common/src/enums/feature-flag.enum.ts    |   2 +
 54 files changed, 3412 insertions(+), 484 deletions(-)
 create mode 100644 apps/browser/src/autofill/background/abstractions/overlay-notifications.background.ts
 create mode 100644 apps/browser/src/autofill/background/overlay-notifications.background.spec.ts
 create mode 100644 apps/browser/src/autofill/background/overlay-notifications.background.ts
 create mode 100644 apps/browser/src/autofill/content/bootstrap-autofill-overlay-menu.ts
 create mode 100644 apps/browser/src/autofill/content/bootstrap-autofill-overlay-notifications.ts
 create mode 100644 apps/browser/src/autofill/overlay/notifications/abstractions/overlay-notifications-content.service.ts
 create mode 100644 apps/browser/src/autofill/overlay/notifications/content/__snapshots__/overlay-notifications-content.service.spec.ts.snap
 create mode 100644 apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts
 create mode 100644 apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts
 create mode 100644 apps/browser/src/autofill/services/abstractions/dom-query.service.ts
 create mode 100644 apps/browser/src/autofill/services/dom-query.service.spec.ts
 create mode 100644 apps/browser/src/autofill/services/dom-query.service.ts

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index cd2cc912930..4f1696461ae 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -3645,10 +3645,18 @@
     "message": "Credentials saved successfully!",
     "description": "Notification message for when saving credentials has succeeded."
   },
+  "passwordSaved": {
+    "message": "Password saved!",
+    "description": "Notification message for when saving credentials has succeeded."
+  },
   "updateCipherAttemptSuccess": {
     "message": "Credentials updated successfully!",
     "description": "Notification message for when updating credentials has succeeded."
   },
+  "passwordUpdated": {
+    "message": "Password updated!",
+    "description": "Notification message for when updating credentials has succeeded."
+  },
   "saveCipherAttemptFailed": {
     "message": "Error saving credentials. Check console for details.",
     "description": "Notification message for when saving credentials has failed."
diff --git a/apps/browser/src/autofill/background/abstractions/notification.background.ts b/apps/browser/src/autofill/background/abstractions/notification.background.ts
index e01e2c5c02b..ed9d8e6d84b 100644
--- a/apps/browser/src/autofill/background/abstractions/notification.background.ts
+++ b/apps/browser/src/autofill/background/abstractions/notification.background.ts
@@ -9,6 +9,7 @@ interface NotificationQueueMessage {
   type: NotificationQueueMessageTypes;
   domain: string;
   tab: chrome.tabs.Tab;
+  launchTimestamp: number;
   expires: Date;
   wasVaultLocked: boolean;
 }
@@ -88,10 +89,9 @@ type NotificationBackgroundExtensionMessage = {
   tab?: chrome.tabs.Tab;
   sender?: string;
   notificationType?: string;
+  fadeOutNotification?: boolean;
 };
 
-type SaveOrUpdateCipherResult = undefined | { error: string };
-
 type BackgroundMessageParam = { message: NotificationBackgroundExtensionMessage };
 type BackgroundSenderParam = { sender: chrome.runtime.MessageSender };
 type BackgroundOnMessageHandlerParams = BackgroundMessageParam & BackgroundSenderParam;
@@ -100,7 +100,7 @@ type NotificationBackgroundExtensionMessageHandlers = {
   [key: string]: CallableFunction;
   unlockCompleted: ({ message, sender }: BackgroundOnMessageHandlerParams) => Promise<void>;
   bgGetFolderData: ({ message, sender }: BackgroundOnMessageHandlerParams) => Promise<FolderView[]>;
-  bgCloseNotificationBar: ({ sender }: BackgroundSenderParam) => Promise<void>;
+  bgCloseNotificationBar: ({ message, sender }: BackgroundOnMessageHandlerParams) => Promise<void>;
   bgAdjustNotificationBar: ({ message, sender }: BackgroundOnMessageHandlerParams) => Promise<void>;
   bgAddLogin: ({ message, sender }: BackgroundOnMessageHandlerParams) => Promise<void>;
   bgChangedPassword: ({ message, sender }: BackgroundOnMessageHandlerParams) => Promise<void>;
@@ -129,7 +129,6 @@ export {
   ChangePasswordMessageData,
   UnlockVaultMessageData,
   AddLoginMessageData,
-  SaveOrUpdateCipherResult,
   NotificationBackgroundExtensionMessage,
   NotificationBackgroundExtensionMessageHandlers,
 };
diff --git a/apps/browser/src/autofill/background/abstractions/overlay-notifications.background.ts b/apps/browser/src/autofill/background/abstractions/overlay-notifications.background.ts
new file mode 100644
index 00000000000..0ec6a9ae04a
--- /dev/null
+++ b/apps/browser/src/autofill/background/abstractions/overlay-notifications.background.ts
@@ -0,0 +1,52 @@
+import AutofillPageDetails from "../../models/autofill-page-details";
+
+export type NotificationTypeData = {
+  isVaultLocked?: boolean;
+  theme?: string;
+  removeIndividualVault?: boolean;
+  importType?: string;
+  launchTimestamp?: number;
+};
+
+export type WebsiteOriginsWithFields = Map<chrome.tabs.Tab["id"], Set<string>>;
+
+export type ActiveFormSubmissionRequests = Set<chrome.webRequest.ResourceRequest["requestId"]>;
+
+export type ModifyLoginCipherFormData = {
+  uri: string;
+  username: string;
+  password: string;
+  newPassword: string;
+};
+
+export type ModifyLoginCipherFormDataForTab = Map<
+  chrome.tabs.Tab["id"],
+  { uri: string; username: string; password: string; newPassword: string }
+>;
+
+export type OverlayNotificationsExtensionMessage = {
+  command: string;
+  uri?: string;
+  username?: string;
+  password?: string;
+  newPassword?: string;
+  details?: AutofillPageDetails;
+};
+
+type OverlayNotificationsMessageParams = { message: OverlayNotificationsExtensionMessage };
+type OverlayNotificationSenderParams = { sender: chrome.runtime.MessageSender };
+type OverlayNotificationsMessageHandlersParams = OverlayNotificationsMessageParams &
+  OverlayNotificationSenderParams;
+
+export type OverlayNotificationsExtensionMessageHandlers = {
+  [key: string]: ({ message, sender }: OverlayNotificationsMessageHandlersParams) => any;
+  formFieldSubmitted: ({ message, sender }: OverlayNotificationsMessageHandlersParams) => void;
+  collectPageDetailsResponse: ({
+    message,
+    sender,
+  }: OverlayNotificationsMessageHandlersParams) => Promise<void>;
+};
+
+export interface OverlayNotificationsBackground {
+  init(): void;
+}
diff --git a/apps/browser/src/autofill/background/notification.background.spec.ts b/apps/browser/src/autofill/background/notification.background.spec.ts
index f3ebe5b1cc9..0ede9b96091 100644
--- a/apps/browser/src/autofill/background/notification.background.spec.ts
+++ b/apps/browser/src/autofill/background/notification.background.spec.ts
@@ -1,4 +1,4 @@
-import { mock } from "jest-mock-extended";
+import { mock, MockProxy } from "jest-mock-extended";
 import { BehaviorSubject, firstValueFrom } from "rxjs";
 
 import { PolicyService } from "@bitwarden/common/admin-console/services/policy/policy.service";
@@ -48,7 +48,8 @@ describe("NotificationBackground", () => {
   let notificationBackground: NotificationBackground;
   const autofillService = mock<AutofillService>();
   const cipherService = mock<CipherService>();
-  const authService = mock<AuthService>();
+  let activeAccountStatusMock$: BehaviorSubject<AuthenticationStatus>;
+  let authService: MockProxy<AuthService>;
   const policyService = mock<PolicyService>();
   const folderService = mock<FolderService>();
   const userNotificationSettingsService = mock<UserNotificationSettingsService>();
@@ -60,6 +61,9 @@ describe("NotificationBackground", () => {
   const accountService = mock<AccountService>();
 
   beforeEach(() => {
+    activeAccountStatusMock$ = new BehaviorSubject(AuthenticationStatus.Locked);
+    authService = mock<AuthService>();
+    authService.activeAccountStatus$ = activeAccountStatusMock$;
     notificationBackground = new NotificationBackground(
       autofillService,
       cipherService,
@@ -91,6 +95,7 @@ describe("NotificationBackground", () => {
         tab: createChromeTabMock(),
         expires: new Date(),
         wasVaultLocked: false,
+        launchTimestamp: 0,
       };
       const cipherView = notificationBackground["convertAddLoginQueueMessageToCipherView"](message);
 
@@ -126,6 +131,7 @@ describe("NotificationBackground", () => {
         tab: createChromeTabMock(),
         expires: new Date(),
         wasVaultLocked: false,
+        launchTimestamp: 0,
       };
       const cipherView = notificationBackground["convertAddLoginQueueMessageToCipherView"](
         message,
@@ -222,6 +228,7 @@ describe("NotificationBackground", () => {
         expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
           sender.tab,
           "closeNotificationBar",
+          { fadeOutNotification: false },
         );
       });
     });
@@ -249,7 +256,6 @@ describe("NotificationBackground", () => {
     describe("bgAddLogin message handler", () => {
       let tab: chrome.tabs.Tab;
       let sender: chrome.runtime.MessageSender;
-      let getAuthStatusSpy: jest.SpyInstance;
       let getEnableAddedLoginPromptSpy: jest.SpyInstance;
       let getEnableChangedPasswordPromptSpy: jest.SpyInstance;
       let pushAddLoginToQueueSpy: jest.SpyInstance;
@@ -259,7 +265,6 @@ describe("NotificationBackground", () => {
       beforeEach(() => {
         tab = createChromeTabMock();
         sender = mock<chrome.runtime.MessageSender>({ tab });
-        getAuthStatusSpy = jest.spyOn(authService, "getAuthStatus");
         getEnableAddedLoginPromptSpy = jest.spyOn(
           notificationBackground as any,
           "getEnableAddedLoginPrompt",
@@ -281,12 +286,11 @@ describe("NotificationBackground", () => {
           command: "bgAddLogin",
           login: { username: "test", password: "password", url: "https://example.com" },
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.LoggedOut);
+        activeAccountStatusMock$.next(AuthenticationStatus.LoggedOut);
 
         sendMockExtensionMessage(message, sender);
         await flushPromises();
 
-        expect(getAuthStatusSpy).toHaveBeenCalled();
         expect(getEnableAddedLoginPromptSpy).not.toHaveBeenCalled();
         expect(pushAddLoginToQueueSpy).not.toHaveBeenCalled();
       });
@@ -296,12 +300,11 @@ describe("NotificationBackground", () => {
           command: "bgAddLogin",
           login: { username: "test", password: "password", url: "" },
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Locked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Locked);
 
         sendMockExtensionMessage(message, sender);
         await flushPromises();
 
-        expect(getAuthStatusSpy).toHaveBeenCalled();
         expect(getEnableAddedLoginPromptSpy).not.toHaveBeenCalled();
         expect(pushAddLoginToQueueSpy).not.toHaveBeenCalled();
       });
@@ -311,13 +314,12 @@ describe("NotificationBackground", () => {
           command: "bgAddLogin",
           login: { username: "test", password: "password", url: "https://example.com" },
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Locked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Locked);
         getEnableAddedLoginPromptSpy.mockReturnValueOnce(false);
 
         sendMockExtensionMessage(message, sender);
         await flushPromises();
 
-        expect(getAuthStatusSpy).toHaveBeenCalled();
         expect(getEnableAddedLoginPromptSpy).toHaveBeenCalled();
         expect(getAllDecryptedForUrlSpy).not.toHaveBeenCalled();
         expect(pushAddLoginToQueueSpy).not.toHaveBeenCalled();
@@ -329,14 +331,13 @@ describe("NotificationBackground", () => {
           command: "bgAddLogin",
           login: { username: "test", password: "password", url: "https://example.com" },
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Unlocked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Unlocked);
         getEnableAddedLoginPromptSpy.mockReturnValueOnce(false);
         getAllDecryptedForUrlSpy.mockResolvedValueOnce([]);
 
         sendMockExtensionMessage(message, sender);
         await flushPromises();
 
-        expect(getAuthStatusSpy).toHaveBeenCalled();
         expect(getEnableAddedLoginPromptSpy).toHaveBeenCalled();
         expect(getAllDecryptedForUrlSpy).toHaveBeenCalled();
         expect(pushAddLoginToQueueSpy).not.toHaveBeenCalled();
@@ -348,7 +349,7 @@ describe("NotificationBackground", () => {
           command: "bgAddLogin",
           login: { username: "test", password: "password", url: "https://example.com" },
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Unlocked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Unlocked);
         getEnableAddedLoginPromptSpy.mockReturnValueOnce(true);
         getEnableChangedPasswordPromptSpy.mockReturnValueOnce(false);
         getAllDecryptedForUrlSpy.mockResolvedValueOnce([
@@ -358,7 +359,6 @@ describe("NotificationBackground", () => {
         sendMockExtensionMessage(message, sender);
         await flushPromises();
 
-        expect(getAuthStatusSpy).toHaveBeenCalled();
         expect(getEnableAddedLoginPromptSpy).toHaveBeenCalled();
         expect(getAllDecryptedForUrlSpy).toHaveBeenCalled();
         expect(getEnableChangedPasswordPromptSpy).toHaveBeenCalled();
@@ -371,7 +371,7 @@ describe("NotificationBackground", () => {
           command: "bgAddLogin",
           login: { username: "test", password: "password", url: "https://example.com" },
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Unlocked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Unlocked);
         getEnableAddedLoginPromptSpy.mockReturnValueOnce(true);
         getAllDecryptedForUrlSpy.mockResolvedValueOnce([
           mock<CipherView>({ login: { username: "test", password: "password" } }),
@@ -380,7 +380,6 @@ describe("NotificationBackground", () => {
         sendMockExtensionMessage(message, sender);
         await flushPromises();
 
-        expect(getAuthStatusSpy).toHaveBeenCalled();
         expect(getEnableAddedLoginPromptSpy).toHaveBeenCalled();
         expect(getAllDecryptedForUrlSpy).toHaveBeenCalled();
         expect(pushAddLoginToQueueSpy).not.toHaveBeenCalled();
@@ -390,13 +389,12 @@ describe("NotificationBackground", () => {
       it("adds the login to the queue if the user has a locked account", async () => {
         const login = { username: "test", password: "password", url: "https://example.com" };
         const message: NotificationBackgroundExtensionMessage = { command: "bgAddLogin", login };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Locked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Locked);
         getEnableAddedLoginPromptSpy.mockReturnValueOnce(true);
 
         sendMockExtensionMessage(message, sender);
         await flushPromises();
 
-        expect(getAuthStatusSpy).toHaveBeenCalled();
         expect(pushAddLoginToQueueSpy).toHaveBeenCalledWith("example.com", login, sender.tab, true);
       });
 
@@ -407,7 +405,7 @@ describe("NotificationBackground", () => {
           url: "https://example.com",
         } as any;
         const message: NotificationBackgroundExtensionMessage = { command: "bgAddLogin", login };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Unlocked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Unlocked);
         getEnableAddedLoginPromptSpy.mockReturnValueOnce(true);
         getAllDecryptedForUrlSpy.mockResolvedValueOnce([
           mock<CipherView>({ login: { username: "anotherTestUsername", password: "password" } }),
@@ -416,14 +414,13 @@ describe("NotificationBackground", () => {
         sendMockExtensionMessage(message, sender);
         await flushPromises();
 
-        expect(getAuthStatusSpy).toHaveBeenCalled();
         expect(pushAddLoginToQueueSpy).toHaveBeenCalledWith("example.com", login, sender.tab);
       });
 
       it("adds a change password message to the queue if the user has changed an existing cipher's password", async () => {
         const login = { username: "tEsT", password: "password", url: "https://example.com" };
         const message: NotificationBackgroundExtensionMessage = { command: "bgAddLogin", login };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Unlocked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Unlocked);
         getEnableAddedLoginPromptSpy.mockResolvedValueOnce(true);
         getEnableChangedPasswordPromptSpy.mockResolvedValueOnce(true);
         getAllDecryptedForUrlSpy.mockResolvedValueOnce([
@@ -448,14 +445,12 @@ describe("NotificationBackground", () => {
     describe("bgChangedPassword message handler", () => {
       let tab: chrome.tabs.Tab;
       let sender: chrome.runtime.MessageSender;
-      let getAuthStatusSpy: jest.SpyInstance;
       let pushChangePasswordToQueueSpy: jest.SpyInstance;
       let getAllDecryptedForUrlSpy: jest.SpyInstance;
 
       beforeEach(() => {
         tab = createChromeTabMock();
         sender = mock<chrome.runtime.MessageSender>({ tab });
-        getAuthStatusSpy = jest.spyOn(authService, "getAuthStatus");
         pushChangePasswordToQueueSpy = jest.spyOn(
           notificationBackground as any,
           "pushChangePasswordToQueue",
@@ -484,12 +479,11 @@ describe("NotificationBackground", () => {
             url: "https://example.com",
           },
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Locked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Locked);
 
         sendMockExtensionMessage(message, sender);
         await flushPromises();
 
-        expect(getAuthStatusSpy).toHaveBeenCalled();
         expect(pushChangePasswordToQueueSpy).toHaveBeenCalledWith(
           null,
           "example.com",
@@ -508,7 +502,7 @@ describe("NotificationBackground", () => {
             url: "https://example.com",
           },
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Unlocked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Unlocked);
         getAllDecryptedForUrlSpy.mockResolvedValueOnce([
           mock<CipherView>({ login: { username: "test", password: "password" } }),
         ]);
@@ -516,7 +510,6 @@ describe("NotificationBackground", () => {
         sendMockExtensionMessage(message, sender);
         await flushPromises();
 
-        expect(getAuthStatusSpy).toHaveBeenCalled();
         expect(getAllDecryptedForUrlSpy).toHaveBeenCalled();
         expect(pushChangePasswordToQueueSpy).not.toHaveBeenCalled();
       });
@@ -530,7 +523,7 @@ describe("NotificationBackground", () => {
             url: "https://example.com",
           },
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Unlocked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Unlocked);
         getAllDecryptedForUrlSpy.mockResolvedValueOnce([
           mock<CipherView>({ login: { username: "test", password: "password" } }),
           mock<CipherView>({ login: { username: "test2", password: "password" } }),
@@ -539,7 +532,6 @@ describe("NotificationBackground", () => {
         sendMockExtensionMessage(message, sender);
         await flushPromises();
 
-        expect(getAuthStatusSpy).toHaveBeenCalled();
         expect(getAllDecryptedForUrlSpy).toHaveBeenCalled();
         expect(pushChangePasswordToQueueSpy).not.toHaveBeenCalled();
       });
@@ -553,7 +545,7 @@ describe("NotificationBackground", () => {
             url: "https://example.com",
           },
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Unlocked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Unlocked);
         getAllDecryptedForUrlSpy.mockResolvedValueOnce([
           mock<CipherView>({
             id: "cipher-id",
@@ -580,7 +572,7 @@ describe("NotificationBackground", () => {
             url: "https://example.com",
           },
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Unlocked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Unlocked);
         getAllDecryptedForUrlSpy.mockResolvedValueOnce([
           mock<CipherView>({ login: { username: "test", password: "password" } }),
           mock<CipherView>({ login: { username: "test2", password: "password" } }),
@@ -589,7 +581,6 @@ describe("NotificationBackground", () => {
         sendMockExtensionMessage(message, sender);
         await flushPromises();
 
-        expect(getAuthStatusSpy).toHaveBeenCalled();
         expect(getAllDecryptedForUrlSpy).toHaveBeenCalled();
         expect(pushChangePasswordToQueueSpy).not.toHaveBeenCalled();
       });
@@ -602,7 +593,7 @@ describe("NotificationBackground", () => {
             url: "https://example.com",
           },
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Unlocked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Unlocked);
         getAllDecryptedForUrlSpy.mockResolvedValueOnce([
           mock<CipherView>({
             id: "cipher-id",
@@ -658,12 +649,10 @@ describe("NotificationBackground", () => {
     });
 
     describe("bgSaveCipher message handler", () => {
-      let getAuthStatusSpy: jest.SpyInstance;
       let tabSendMessageDataSpy: jest.SpyInstance;
       let openUnlockPopoutSpy: jest.SpyInstance;
 
       beforeEach(() => {
-        getAuthStatusSpy = jest.spyOn(authService, "getAuthStatus");
         tabSendMessageDataSpy = jest.spyOn(BrowserApi, "tabSendMessageData").mockImplementation();
         openUnlockPopoutSpy = jest
           .spyOn(notificationBackground as any, "openUnlockPopout")
@@ -677,12 +666,11 @@ describe("NotificationBackground", () => {
           edit: false,
           folder: "folder-id",
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Locked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Locked);
 
         sendMockExtensionMessage(message, sender);
         await flushPromises();
 
-        expect(getAuthStatusSpy).toHaveBeenCalled();
         expect(tabSendMessageDataSpy).toHaveBeenCalledWith(
           sender.tab,
           "addToLockedVaultPendingNotifications",
@@ -716,7 +704,7 @@ describe("NotificationBackground", () => {
         let cipherEncryptSpy: jest.SpyInstance;
 
         beforeEach(() => {
-          getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Unlocked);
+          activeAccountStatusMock$.next(AuthenticationStatus.Unlocked);
           getDecryptedCipherByIdSpy = jest.spyOn(
             notificationBackground as any,
             "getDecryptedCipherById",
@@ -1214,11 +1202,9 @@ describe("NotificationBackground", () => {
     });
 
     describe("bgUnlockPopoutOpened message handler", () => {
-      let getAuthStatusSpy: jest.SpyInstance;
       let pushUnlockVaultToQueueSpy: jest.SpyInstance;
 
       beforeEach(() => {
-        getAuthStatusSpy = jest.spyOn(authService, "getAuthStatus");
         pushUnlockVaultToQueueSpy = jest.spyOn(
           notificationBackground as any,
           "pushUnlockVaultToQueue",
@@ -1236,7 +1222,6 @@ describe("NotificationBackground", () => {
         sendMockExtensionMessage(message, sender);
         await flushPromises();
 
-        expect(getAuthStatusSpy).not.toHaveBeenCalled();
         expect(pushUnlockVaultToQueueSpy).not.toHaveBeenCalled();
       });
 
@@ -1246,12 +1231,11 @@ describe("NotificationBackground", () => {
         const message: NotificationBackgroundExtensionMessage = {
           command: "bgUnlockPopoutOpened",
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.LoggedOut);
+        activeAccountStatusMock$.next(AuthenticationStatus.LoggedOut);
 
         sendMockExtensionMessage(message, sender);
         await flushPromises();
 
-        expect(getAuthStatusSpy).toHaveBeenCalled();
         expect(pushUnlockVaultToQueueSpy).not.toHaveBeenCalled();
       });
 
@@ -1261,7 +1245,7 @@ describe("NotificationBackground", () => {
         const message: NotificationBackgroundExtensionMessage = {
           command: "bgUnlockPopoutOpened",
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Locked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Locked);
         notificationBackground["notificationQueue"] = [mock<AddLoginQueueMessage>()];
 
         sendMockExtensionMessage(message, sender);
@@ -1276,7 +1260,7 @@ describe("NotificationBackground", () => {
         const message: NotificationBackgroundExtensionMessage = {
           command: "bgUnlockPopoutOpened",
         };
-        getAuthStatusSpy.mockResolvedValueOnce(AuthenticationStatus.Locked);
+        activeAccountStatusMock$.next(AuthenticationStatus.Locked);
 
         sendMockExtensionMessage(message, sender);
         await flushPromises();
diff --git a/apps/browser/src/autofill/background/notification.background.ts b/apps/browser/src/autofill/background/notification.background.ts
index 9aac9b099a2..683e3d8f581 100644
--- a/apps/browser/src/autofill/background/notification.background.ts
+++ b/apps/browser/src/autofill/background/notification.background.ts
@@ -44,6 +44,7 @@ import {
   NotificationBackgroundExtensionMessage,
   NotificationBackgroundExtensionMessageHandlers,
 } from "./abstractions/notification.background";
+import { NotificationTypeData } from "./abstractions/overlay-notifications.background";
 import { OverlayBackgroundExtensionMessage } from "./abstractions/overlay.background";
 
 export default class NotificationBackground {
@@ -58,7 +59,8 @@ export default class NotificationBackground {
   private readonly extensionMessageHandlers: NotificationBackgroundExtensionMessageHandlers = {
     unlockCompleted: ({ message, sender }) => this.handleUnlockCompleted(message, sender),
     bgGetFolderData: () => this.getFolderData(),
-    bgCloseNotificationBar: ({ sender }) => this.handleCloseNotificationBarMessage(sender),
+    bgCloseNotificationBar: ({ message, sender }) =>
+      this.handleCloseNotificationBarMessage(message, sender),
     bgAdjustNotificationBar: ({ message, sender }) =>
       this.handleAdjustNotificationBarMessage(message, sender),
     bgAddLogin: ({ message, sender }) => this.addLogin(message, sender),
@@ -132,6 +134,10 @@ export default class NotificationBackground {
     return await firstValueFrom(this.configService.serverConfig$);
   }
 
+  private async getAuthStatus() {
+    return await firstValueFrom(this.authService.activeAccountStatus$);
+  }
+
   /**
    * Checks the notification queue for any messages that need to be sent to the
    * specified tab. If no tab is specified, the current tab will be used.
@@ -186,9 +192,10 @@ export default class NotificationBackground {
   ) {
     const notificationType = notificationQueueMessage.type;
 
-    const typeData: Record<string, any> = {
+    const typeData: NotificationTypeData = {
       isVaultLocked: notificationQueueMessage.wasVaultLocked,
       theme: await firstValueFrom(this.themeStateService.selectedTheme$),
+      launchTimestamp: notificationQueueMessage.launchTimestamp,
     };
 
     switch (notificationType) {
@@ -230,11 +237,11 @@ export default class NotificationBackground {
    * @param message - The message to add to the queue
    * @param sender - The contextual sender of the message
    */
-  private async addLogin(
+  async addLogin(
     message: NotificationBackgroundExtensionMessage,
     sender: chrome.runtime.MessageSender,
   ) {
-    const authStatus = await this.authService.getAuthStatus();
+    const authStatus = await this.getAuthStatus();
     if (authStatus === AuthenticationStatus.LoggedOut) {
       return;
     }
@@ -289,6 +296,7 @@ export default class NotificationBackground {
   ) {
     // remove any old messages for this tab
     this.removeTabFromNotificationQueue(tab);
+    const launchTimestamp = new Date().getTime();
     const message: AddLoginQueueMessage = {
       type: NotificationQueueMessageType.AddLogin,
       username: loginInfo.username,
@@ -296,7 +304,8 @@ export default class NotificationBackground {
       domain: loginDomain,
       uri: loginInfo.url,
       tab: tab,
-      expires: new Date(new Date().getTime() + NOTIFICATION_BAR_LIFESPAN_MS),
+      launchTimestamp,
+      expires: new Date(launchTimestamp + NOTIFICATION_BAR_LIFESPAN_MS),
       wasVaultLocked: isVaultLocked,
     };
     this.notificationQueue.push(message);
@@ -310,7 +319,7 @@ export default class NotificationBackground {
    * @param message - The message to add to the queue
    * @param sender - The contextual sender of the message
    */
-  private async changedPassword(
+  async changedPassword(
     message: NotificationBackgroundExtensionMessage,
     sender: chrome.runtime.MessageSender,
   ) {
@@ -320,7 +329,7 @@ export default class NotificationBackground {
       return;
     }
 
-    if ((await this.authService.getAuthStatus()) < AuthenticationStatus.Unlocked) {
+    if ((await this.getAuthStatus()) < AuthenticationStatus.Unlocked) {
       await this.pushChangePasswordToQueue(
         null,
         loginDomain,
@@ -380,7 +389,7 @@ export default class NotificationBackground {
       return;
     }
 
-    const currentAuthStatus = await this.authService.getAuthStatus();
+    const currentAuthStatus = await this.getAuthStatus();
     if (currentAuthStatus !== AuthenticationStatus.Locked || this.notificationQueue.length) {
       return;
     }
@@ -399,7 +408,7 @@ export default class NotificationBackground {
    * @param importType - The type of import that is being requested
    */
   async requestFilelessImport(tab: chrome.tabs.Tab, importType: string) {
-    const currentAuthStatus = await this.authService.getAuthStatus();
+    const currentAuthStatus = await this.getAuthStatus();
     if (currentAuthStatus !== AuthenticationStatus.Unlocked || this.notificationQueue.length) {
       return;
     }
@@ -419,13 +428,15 @@ export default class NotificationBackground {
   ) {
     // remove any old messages for this tab
     this.removeTabFromNotificationQueue(tab);
+    const launchTimestamp = new Date().getTime();
     const message: AddChangePasswordQueueMessage = {
       type: NotificationQueueMessageType.ChangePassword,
       cipherId: cipherId,
       newPassword: newPassword,
       domain: loginDomain,
       tab: tab,
-      expires: new Date(new Date().getTime() + NOTIFICATION_BAR_LIFESPAN_MS),
+      launchTimestamp,
+      expires: new Date(launchTimestamp + NOTIFICATION_BAR_LIFESPAN_MS),
       wasVaultLocked: isVaultLocked,
     };
     this.notificationQueue.push(message);
@@ -434,11 +445,13 @@ export default class NotificationBackground {
 
   private async pushUnlockVaultToQueue(loginDomain: string, tab: chrome.tabs.Tab) {
     this.removeTabFromNotificationQueue(tab);
+    const launchTimestamp = new Date().getTime();
     const message: AddUnlockVaultQueueMessage = {
       type: NotificationQueueMessageType.UnlockVault,
       domain: loginDomain,
       tab: tab,
-      expires: new Date(new Date().getTime() + 0.5 * 60000), // 30 seconds
+      launchTimestamp,
+      expires: new Date(launchTimestamp + 0.5 * 60000), // 30 seconds
       wasVaultLocked: true,
     };
     await this.sendNotificationQueueMessage(tab, message);
@@ -459,11 +472,13 @@ export default class NotificationBackground {
     importType?: string,
   ) {
     this.removeTabFromNotificationQueue(tab);
+    const launchTimestamp = new Date().getTime();
     const message: AddRequestFilelessImportQueueMessage = {
       type: NotificationQueueMessageType.RequestFilelessImport,
       domain: loginDomain,
       tab,
-      expires: new Date(new Date().getTime() + 0.5 * 60000), // 30 seconds
+      launchTimestamp,
+      expires: new Date(launchTimestamp + 0.5 * 60000), // 30 seconds
       wasVaultLocked: false,
       importType,
     };
@@ -484,7 +499,7 @@ export default class NotificationBackground {
     message: NotificationBackgroundExtensionMessage,
     sender: chrome.runtime.MessageSender,
   ) {
-    if ((await this.authService.getAuthStatus()) < AuthenticationStatus.Unlocked) {
+    if ((await this.getAuthStatus()) < AuthenticationStatus.Unlocked) {
       await BrowserApi.tabSendMessageData(sender.tab, "addToLockedVaultPendingNotifications", {
         commandToRetry: {
           message: {
@@ -736,10 +751,16 @@ export default class NotificationBackground {
    * Sends a message back to the sender tab which
    * triggers closure of the notification bar.
    *
+   * @param message - The extension message
    * @param sender - The contextual sender of the message
    */
-  private async handleCloseNotificationBarMessage(sender: chrome.runtime.MessageSender) {
-    await BrowserApi.tabSendMessageData(sender.tab, "closeNotificationBar");
+  private async handleCloseNotificationBarMessage(
+    message: NotificationBackgroundExtensionMessage,
+    sender: chrome.runtime.MessageSender,
+  ) {
+    await BrowserApi.tabSendMessageData(sender.tab, "closeNotificationBar", {
+      fadeOutNotification: !!message.fadeOutNotification,
+    });
   }
 
   /**
diff --git a/apps/browser/src/autofill/background/overlay-notifications.background.spec.ts b/apps/browser/src/autofill/background/overlay-notifications.background.spec.ts
new file mode 100644
index 00000000000..d694438c00f
--- /dev/null
+++ b/apps/browser/src/autofill/background/overlay-notifications.background.spec.ts
@@ -0,0 +1,548 @@
+import { mock, MockProxy } from "jest-mock-extended";
+
+import { CLEAR_NOTIFICATION_LOGIN_DATA_DURATION } from "@bitwarden/common/autofill/constants";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { ServerConfig } from "@bitwarden/common/platform/abstractions/config/server-config";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { EnvironmentServerConfigData } from "@bitwarden/common/platform/models/data/server-config.data";
+
+import { BrowserApi } from "../../platform/browser/browser-api";
+import AutofillField from "../models/autofill-field";
+import AutofillPageDetails from "../models/autofill-page-details";
+import {
+  flushPromises,
+  sendMockExtensionMessage,
+  triggerTabOnRemovedEvent,
+  triggerTabOnUpdatedEvent,
+  triggerWebNavigationOnCompletedEvent,
+  triggerWebRequestOnBeforeRequestEvent,
+  triggerWebRequestOnCompletedEvent,
+} from "../spec/testing-utils";
+
+import NotificationBackground from "./notification.background";
+import { OverlayNotificationsBackground } from "./overlay-notifications.background";
+
+describe("OverlayNotificationsBackground", () => {
+  let logService: MockProxy<LogService>;
+  let configService: MockProxy<ConfigService>;
+  let notificationBackground: NotificationBackground;
+  let getEnableChangedPasswordPromptSpy: jest.SpyInstance;
+  let getEnableAddedLoginPromptSpy: jest.SpyInstance;
+  let overlayNotificationsBackground: OverlayNotificationsBackground;
+
+  beforeEach(async () => {
+    jest.useFakeTimers();
+    logService = mock<LogService>();
+    configService = mock<ConfigService>();
+    notificationBackground = mock<NotificationBackground>();
+    getEnableChangedPasswordPromptSpy = jest
+      .spyOn(notificationBackground, "getEnableChangedPasswordPrompt")
+      .mockResolvedValue(true);
+    getEnableAddedLoginPromptSpy = jest
+      .spyOn(notificationBackground, "getEnableAddedLoginPrompt")
+      .mockResolvedValue(true);
+    overlayNotificationsBackground = new OverlayNotificationsBackground(
+      logService,
+      configService,
+      notificationBackground,
+    );
+    configService.getFeatureFlag.mockResolvedValue(true);
+    await overlayNotificationsBackground.init();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.clearAllTimers();
+  });
+
+  describe("setting up the form submission listeners", () => {
+    let fields: MockProxy<AutofillField>[];
+    let details: MockProxy<AutofillPageDetails>;
+
+    beforeEach(() => {
+      fields = [mock<AutofillField>(), mock<AutofillField>(), mock<AutofillField>()];
+      details = mock<AutofillPageDetails>({ fields });
+    });
+
+    describe("skipping setting up the web request listeners", () => {
+      it("skips setting up listeners when the notification bar is disabled", async () => {
+        getEnableChangedPasswordPromptSpy.mockResolvedValue(false);
+        getEnableAddedLoginPromptSpy.mockResolvedValue(false);
+
+        sendMockExtensionMessage({
+          command: "collectPageDetailsResponse",
+          details,
+        });
+        await flushPromises();
+
+        expect(chrome.webRequest.onCompleted.addListener).not.toHaveBeenCalled();
+      });
+
+      describe("when the sender is from an excluded domain", () => {
+        const senderHost = "example.com";
+        const senderUrl = `https://${senderHost}`;
+
+        beforeEach(() => {
+          jest.spyOn(notificationBackground, "getExcludedDomains").mockResolvedValue({
+            [senderHost]: null,
+          });
+        });
+
+        it("skips setting up listeners when the sender is the user's vault", async () => {
+          const vault = "https://vault.bitwarden.com";
+          const sender = mock<chrome.runtime.MessageSender>({ origin: vault });
+          jest
+            .spyOn(notificationBackground, "getActiveUserServerConfig")
+            .mockResolvedValue(
+              mock<ServerConfig>({ environment: mock<EnvironmentServerConfigData>({ vault }) }),
+            );
+
+          sendMockExtensionMessage({ command: "collectPageDetailsResponse", details }, sender);
+          await flushPromises();
+
+          expect(chrome.webRequest.onCompleted.addListener).not.toHaveBeenCalled();
+        });
+
+        it("skips setting up listeners when the sender is an excluded domain", async () => {
+          const sender = mock<chrome.runtime.MessageSender>({ origin: senderUrl });
+
+          sendMockExtensionMessage({ command: "collectPageDetailsResponse", details }, sender);
+          await flushPromises();
+
+          expect(chrome.webRequest.onCompleted.addListener).not.toHaveBeenCalled();
+        });
+
+        it("skips setting up listeners when the sender contains a malformed origin", async () => {
+          const senderOrigin = "-_-!..exampwle.com";
+          const sender = mock<chrome.runtime.MessageSender>({ origin: senderOrigin });
+
+          sendMockExtensionMessage({ command: "collectPageDetailsResponse", details }, sender);
+          await flushPromises();
+
+          expect(chrome.webRequest.onCompleted.addListener).not.toHaveBeenCalled();
+        });
+      });
+
+      it("skips setting up listeners when the sender tab does not contain page details fields", async () => {
+        const sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
+        details.fields = [];
+
+        sendMockExtensionMessage({ command: "collectPageDetailsResponse", details }, sender);
+        await flushPromises();
+
+        expect(chrome.webRequest.onCompleted.addListener).not.toHaveBeenCalled();
+      });
+    });
+
+    it("sets up the web request listeners", async () => {
+      const sender = mock<chrome.runtime.MessageSender>({
+        tab: { id: 1 },
+        url: "example.com",
+      });
+
+      sendMockExtensionMessage({ command: "collectPageDetailsResponse", details }, sender);
+      await flushPromises();
+
+      expect(chrome.webRequest.onCompleted.addListener).toHaveBeenCalled();
+    });
+
+    it("skips setting up duplicate listeners when the website origin has been previously encountered with fields", async () => {
+      const sender = mock<chrome.runtime.MessageSender>({
+        tab: { id: 1 },
+        url: "example.com",
+      });
+
+      sendMockExtensionMessage({ command: "collectPageDetailsResponse", details }, sender);
+      await flushPromises();
+      sendMockExtensionMessage({ command: "collectPageDetailsResponse", details }, sender);
+      await flushPromises();
+      sendMockExtensionMessage({ command: "collectPageDetailsResponse", details }, sender);
+      await flushPromises();
+
+      expect(chrome.webRequest.onCompleted.addListener).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("storing the modified login form data", () => {
+    const sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
+
+    it("stores the modified login cipher form data", async () => {
+      sendMockExtensionMessage(
+        {
+          command: "formFieldSubmitted",
+          uri: "example.com",
+          username: "username",
+          password: "password",
+          newPassword: "newPassword",
+        },
+        sender,
+      );
+      await flushPromises();
+
+      expect(
+        overlayNotificationsBackground["modifyLoginCipherFormData"].get(sender.tab.id),
+      ).toEqual({
+        uri: "example.com",
+        username: "username",
+        password: "password",
+        newPassword: "newPassword",
+      });
+    });
+
+    it("clears the modified login cipher form data after 5 seconds", () => {
+      sendMockExtensionMessage(
+        {
+          command: "formFieldSubmitted",
+          uri: "example.com",
+          username: "username",
+          password: "password",
+          newPassword: "newPassword",
+        },
+        sender,
+      );
+
+      jest.advanceTimersByTime(CLEAR_NOTIFICATION_LOGIN_DATA_DURATION);
+
+      expect(overlayNotificationsBackground["modifyLoginCipherFormData"].size).toBe(0);
+    });
+
+    it("attempts to store the modified login cipher form data within the onBeforeRequest listener when the data is not captured through a submit button click event", async () => {
+      const pageDetails = mock<AutofillPageDetails>({ fields: [mock<AutofillField>()] });
+      const tab = mock<chrome.tabs.Tab>({ id: sender.tab.id });
+      jest.spyOn(BrowserApi, "getTab").mockResolvedValueOnce(tab);
+      const response = {
+        command: "formFieldSubmitted",
+        uri: "example.com",
+        username: "username",
+        password: "password",
+        newPassword: "newPassword",
+      };
+      jest.spyOn(BrowserApi, "tabSendMessage").mockResolvedValueOnce(response);
+      sendMockExtensionMessage(
+        { command: "collectPageDetailsResponse", details: pageDetails },
+        sender,
+      );
+      await flushPromises();
+
+      triggerWebRequestOnBeforeRequestEvent(
+        mock<chrome.webRequest.WebRequestDetails>({
+          url: "https://example.com",
+          tabId: sender.tab.id,
+          method: "POST",
+          requestId: "123345",
+        }),
+      );
+      await flushPromises();
+
+      expect(
+        overlayNotificationsBackground["modifyLoginCipherFormData"].get(sender.tab.id),
+      ).toEqual({
+        uri: "example.com",
+        username: "username",
+        password: "password",
+        newPassword: "newPassword",
+      });
+    });
+  });
+
+  describe("web request listeners", () => {
+    let sender: MockProxy<chrome.runtime.MessageSender>;
+    const pageDetails = mock<AutofillPageDetails>({ fields: [mock<AutofillField>()] });
+    let notificationChangedPasswordSpy: jest.SpyInstance;
+    let notificationAddLoginSpy: jest.SpyInstance;
+
+    beforeEach(async () => {
+      sender = mock<chrome.runtime.MessageSender>({
+        tab: { id: 1 },
+        url: "https://example.com",
+      });
+      notificationChangedPasswordSpy = jest.spyOn(notificationBackground, "changedPassword");
+      notificationAddLoginSpy = jest.spyOn(notificationBackground, "addLogin");
+
+      sendMockExtensionMessage(
+        { command: "collectPageDetailsResponse", details: pageDetails },
+        sender,
+      );
+      await flushPromises();
+    });
+
+    describe("ignored web requests", () => {
+      it("ignores requests from urls that do not start with a valid protocol", async () => {
+        sender.url = "chrome-extension://extension-id";
+
+        triggerWebRequestOnBeforeRequestEvent(
+          mock<chrome.webRequest.WebRequestDetails>({
+            url: sender.url,
+            tabId: sender.tab.id,
+            method: "POST",
+          }),
+        );
+
+        expect(overlayNotificationsBackground["activeFormSubmissionRequests"].size).toBe(0);
+      });
+
+      it("ignores requests from urls that do not have a valid tabId", async () => {
+        sender.tab = mock<chrome.tabs.Tab>({ id: -1 });
+
+        triggerWebRequestOnBeforeRequestEvent(
+          mock<chrome.webRequest.WebRequestDetails>({
+            url: sender.url,
+            tabId: sender.tab.id,
+            method: "POST",
+          }),
+        );
+
+        expect(overlayNotificationsBackground["activeFormSubmissionRequests"].size).toBe(0);
+      });
+
+      it("ignores requests from urls that do not have a valid request method", async () => {
+        triggerWebRequestOnBeforeRequestEvent(
+          mock<chrome.webRequest.WebRequestDetails>({
+            url: sender.url,
+            tabId: sender.tab.id,
+            method: "GET",
+          }),
+        );
+
+        expect(overlayNotificationsBackground["activeFormSubmissionRequests"].size).toBe(0);
+      });
+
+      it("ignores requests that are not part of an active form submission", async () => {
+        triggerWebRequestOnCompletedEvent(
+          mock<chrome.webRequest.WebRequestDetails>({
+            url: sender.url,
+            tabId: sender.tab.id,
+            method: "POST",
+            requestId: "123345",
+          }),
+        );
+
+        expect(notificationChangedPasswordSpy).not.toHaveBeenCalled();
+        expect(notificationAddLoginSpy).not.toHaveBeenCalled();
+      });
+
+      it("ignores requests for tabs that do not contain stored login data", async () => {
+        const requestId = "123345";
+        triggerWebRequestOnBeforeRequestEvent(
+          mock<chrome.webRequest.WebRequestDetails>({
+            url: sender.url,
+            tabId: sender.tab.id,
+            method: "POST",
+            requestId,
+          }),
+        );
+        await flushPromises();
+
+        triggerWebRequestOnCompletedEvent(
+          mock<chrome.webRequest.WebRequestDetails>({
+            url: sender.url,
+            tabId: sender.tab.id,
+            method: "POST",
+            requestId,
+          }),
+        );
+
+        expect(notificationChangedPasswordSpy).not.toHaveBeenCalled();
+        expect(notificationAddLoginSpy).not.toHaveBeenCalled();
+      });
+    });
+
+    describe("web requests that trigger notifications", () => {
+      const requestId = "123345";
+
+      beforeEach(async () => {
+        sendMockExtensionMessage(
+          {
+            command: "formFieldSubmitted",
+            uri: "example.com",
+            username: "username",
+            password: "password",
+            newPassword: "newPassword",
+          },
+          sender,
+        );
+        triggerWebRequestOnBeforeRequestEvent(
+          mock<chrome.webRequest.WebRequestDetails>({
+            url: sender.url,
+            tabId: sender.tab.id,
+            method: "POST",
+            requestId,
+          }),
+        );
+        await flushPromises();
+      });
+
+      it("waits for the tab's navigation to complete using the web navigation API before initializing the notification", async () => {
+        chrome.tabs.get = jest.fn().mockImplementationOnce((tabId, callback) => {
+          callback(
+            mock<chrome.tabs.Tab>({
+              status: "loading",
+              url: sender.url,
+            }),
+          );
+        });
+        triggerWebRequestOnCompletedEvent(
+          mock<chrome.webRequest.WebRequestDetails>({
+            url: sender.url,
+            tabId: sender.tab.id,
+            method: "POST",
+            requestId,
+          }),
+        );
+        await flushPromises();
+
+        chrome.tabs.get = jest.fn().mockImplementationOnce((tabId, callback) => {
+          callback(
+            mock<chrome.tabs.Tab>({
+              status: "complete",
+              url: sender.url,
+            }),
+          );
+        });
+        triggerWebNavigationOnCompletedEvent(
+          mock<chrome.webNavigation.WebNavigationFramedCallbackDetails>({
+            tabId: sender.tab.id,
+            url: sender.url,
+          }),
+        );
+        await flushPromises();
+
+        expect(notificationAddLoginSpy).toHaveBeenCalled();
+      });
+
+      it("initializes the notification immediately when the tab's navigation is complete", async () => {
+        sendMockExtensionMessage(
+          {
+            command: "formFieldSubmitted",
+            uri: "example.com",
+            username: "username",
+            password: "password",
+            newPassword: "newPassword",
+          },
+          sender,
+        );
+        await flushPromises();
+        chrome.tabs.get = jest.fn().mockImplementationOnce((tabId, callback) => {
+          callback(
+            mock<chrome.tabs.Tab>({
+              status: "complete",
+              url: sender.url,
+            }),
+          );
+        });
+
+        triggerWebRequestOnCompletedEvent(
+          mock<chrome.webRequest.WebRequestDetails>({
+            url: sender.url,
+            tabId: sender.tab.id,
+            method: "POST",
+            requestId,
+          }),
+        );
+        await flushPromises();
+
+        expect(notificationAddLoginSpy).toHaveBeenCalled();
+      });
+
+      it("triggers the notification on the beforeRequest listener when a post-submission redirection is encountered", async () => {
+        sender.tab = mock<chrome.tabs.Tab>({ id: 4 });
+        sendMockExtensionMessage(
+          {
+            command: "formFieldSubmitted",
+            uri: "example.com",
+            username: "",
+            password: "password",
+            newPassword: "newPassword",
+          },
+          sender,
+        );
+        await flushPromises();
+        chrome.tabs.get = jest.fn().mockImplementation((tabId, callback) => {
+          callback(
+            mock<chrome.tabs.Tab>({
+              status: "complete",
+              url: sender.url,
+            }),
+          );
+        });
+
+        triggerWebRequestOnBeforeRequestEvent(
+          mock<chrome.webRequest.WebRequestDetails>({
+            url: sender.url,
+            tabId: sender.tab.id,
+            method: "POST",
+            requestId,
+          }),
+        );
+        await flushPromises();
+
+        triggerWebRequestOnBeforeRequestEvent(
+          mock<chrome.webRequest.WebRequestDetails>({
+            url: "https://example.com/redirect",
+            tabId: sender.tab.id,
+            method: "GET",
+            requestId,
+          }),
+        );
+        await flushPromises();
+
+        expect(notificationChangedPasswordSpy).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("tab listeners", () => {
+    let sender: MockProxy<chrome.runtime.MessageSender>;
+    const pageDetails = mock<AutofillPageDetails>({ fields: [mock<AutofillField>()] });
+    const requestId = "123345";
+
+    beforeEach(async () => {
+      sender = mock<chrome.runtime.MessageSender>({
+        tab: { id: 1 },
+        url: "https://example.com",
+      });
+
+      sendMockExtensionMessage(
+        { command: "collectPageDetailsResponse", details: pageDetails },
+        sender,
+      );
+      await flushPromises();
+      triggerWebRequestOnBeforeRequestEvent(
+        mock<chrome.webRequest.WebRequestDetails>({
+          url: sender.url,
+          tabId: sender.tab.id,
+          method: "POST",
+          requestId,
+        }),
+      );
+      await flushPromises();
+      sendMockExtensionMessage(
+        {
+          command: "formFieldSubmitted",
+          uri: "example.com",
+          username: "username",
+          password: "password",
+          newPassword: "newPassword",
+        },
+        sender,
+      );
+      await flushPromises();
+    });
+
+    it("clears all associated data with a removed tab", () => {
+      triggerTabOnRemovedEvent(sender.tab.id, mock<chrome.tabs.TabRemoveInfo>());
+
+      expect(overlayNotificationsBackground["websiteOriginsWithFields"].size).toBe(0);
+    });
+
+    it("clears all associated data with a tab that is entering a `loading` state", () => {
+      triggerTabOnUpdatedEvent(
+        sender.tab.id,
+        mock<chrome.tabs.TabChangeInfo>({ status: "loading" }),
+        mock<chrome.tabs.Tab>({ status: "loading" }),
+      );
+
+      expect(overlayNotificationsBackground["websiteOriginsWithFields"].size).toBe(0);
+    });
+  });
+});
diff --git a/apps/browser/src/autofill/background/overlay-notifications.background.ts b/apps/browser/src/autofill/background/overlay-notifications.background.ts
new file mode 100644
index 00000000000..e252bdcc4af
--- /dev/null
+++ b/apps/browser/src/autofill/background/overlay-notifications.background.ts
@@ -0,0 +1,557 @@
+import { Subject, switchMap, timer } from "rxjs";
+
+import { CLEAR_NOTIFICATION_LOGIN_DATA_DURATION } from "@bitwarden/common/autofill/constants";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+
+import { BrowserApi } from "../../platform/browser/browser-api";
+
+import {
+  ActiveFormSubmissionRequests,
+  ModifyLoginCipherFormData,
+  ModifyLoginCipherFormDataForTab,
+  OverlayNotificationsBackground as OverlayNotificationsBackgroundInterface,
+  OverlayNotificationsExtensionMessage,
+  OverlayNotificationsExtensionMessageHandlers,
+  WebsiteOriginsWithFields,
+} from "./abstractions/overlay-notifications.background";
+import NotificationBackground from "./notification.background";
+
+export class OverlayNotificationsBackground implements OverlayNotificationsBackgroundInterface {
+  private websiteOriginsWithFields: WebsiteOriginsWithFields = new Map();
+  private activeFormSubmissionRequests: ActiveFormSubmissionRequests = new Set();
+  private modifyLoginCipherFormData: ModifyLoginCipherFormDataForTab = new Map();
+  private clearLoginCipherFormDataSubject: Subject<void> = new Subject();
+  private readonly formSubmissionRequestMethods: Set<string> = new Set(["POST", "PUT", "PATCH"]);
+  private readonly extensionMessageHandlers: OverlayNotificationsExtensionMessageHandlers = {
+    formFieldSubmitted: ({ message, sender }) => this.storeModifiedLoginFormData(message, sender),
+    collectPageDetailsResponse: ({ message, sender }) =>
+      this.handleCollectPageDetailsResponse(message, sender),
+  };
+
+  constructor(
+    private logService: LogService,
+    private configService: ConfigService,
+    private notificationBackground: NotificationBackground,
+  ) {}
+
+  /**
+   * Initialize the overlay notifications background service.
+   */
+  async init() {
+    const featureFlagActive = await this.configService.getFeatureFlag(
+      FeatureFlag.NotificationBarAddLoginImprovements,
+    );
+    if (!featureFlagActive) {
+      return;
+    }
+
+    this.setupExtensionListeners();
+    this.clearLoginCipherFormDataSubject
+      .pipe(switchMap(() => timer(CLEAR_NOTIFICATION_LOGIN_DATA_DURATION)))
+      .subscribe(() => this.modifyLoginCipherFormData.clear());
+  }
+
+  /**
+   * Handles the response from the content script with the page details. Triggers an initialization
+   * of the add login or change password notification if the conditions are met.
+   *
+   * @param message - The message from the content script
+   * @param sender - The sender of the message
+   */
+  private async handleCollectPageDetailsResponse(
+    message: OverlayNotificationsExtensionMessage,
+    sender: chrome.runtime.MessageSender,
+  ) {
+    if (await this.shouldInitAddLoginOrChangePasswordNotification(message, sender)) {
+      this.websiteOriginsWithFields.set(sender.tab.id, this.getSenderUrlMatchPatterns(sender));
+      this.setupWebRequestsListeners();
+    }
+  }
+
+  /**
+   * Determines if the add login or change password notification should be initialized. This depends
+   * on whether the user has enabled the notification, the sender is not from an excluded domain, the
+   * tab's page details contains fillable fields, and the website origin has not been previously stored.
+   *
+   * @param message - The message from the content script
+   * @param sender - The sender of the message
+   */
+  private async shouldInitAddLoginOrChangePasswordNotification(
+    message: OverlayNotificationsExtensionMessage,
+    sender: chrome.runtime.MessageSender,
+  ) {
+    return (
+      (await this.isAddLoginOrChangePasswordNotificationEnabled()) &&
+      !(await this.isSenderFromExcludedDomain(sender)) &&
+      message.details?.fields?.length > 0 &&
+      !this.websiteOriginsWithFields.has(sender.tab.id)
+    );
+  }
+
+  /**
+   * Determines if the add login or change password notification is enabled.
+   * This is based on the user's settings for the notification.
+   */
+  private async isAddLoginOrChangePasswordNotificationEnabled() {
+    return (
+      (await this.notificationBackground.getEnableChangedPasswordPrompt()) ||
+      (await this.notificationBackground.getEnableAddedLoginPrompt())
+    );
+  }
+
+  /**
+   * Returns the match patterns for the sender's URL. This is used to filter out
+   * the web requests that are not from the sender's tab.
+   *
+   * @param sender - The sender of the message
+   */
+  private getSenderUrlMatchPatterns(sender: chrome.runtime.MessageSender) {
+    return new Set([
+      ...this.generateMatchPatterns(sender.url),
+      ...this.generateMatchPatterns(sender.tab.url),
+    ]);
+  }
+
+  /**
+   * Generates the origin and subdomain match patterns for the URL.
+   *
+   * @param url - The URL of the tab
+   */
+  private generateMatchPatterns(url: string): string[] {
+    try {
+      if (!url.startsWith("http")) {
+        url = `https://${url}`;
+      }
+
+      const originMatchPattern = `${new URL(url).origin}/*`;
+
+      const parsedUrl = new URL(url);
+      const splitHost = parsedUrl.hostname.split(".");
+      const domain = splitHost.slice(-2).join(".");
+      const subDomainMatchPattern = `${parsedUrl.protocol}//*.${domain}/*`;
+
+      return [originMatchPattern, subDomainMatchPattern];
+    } catch {
+      return [];
+    }
+  }
+
+  /**
+   * Stores the login form data that was modified by the user in the content script. This data is
+   * used to trigger the add login or change password notification when the form is submitted.
+   *
+   * @param message - The message from the content script
+   * @param sender - The sender of the message
+   */
+  private storeModifiedLoginFormData = (
+    message: OverlayNotificationsExtensionMessage,
+    sender: chrome.runtime.MessageSender,
+  ) => {
+    const { uri, username, password, newPassword } = message;
+    if (!username && !password && !newPassword) {
+      return;
+    }
+
+    this.clearLoginCipherFormDataSubject.next();
+    const formData = { uri, username, password, newPassword };
+
+    const existingModifyLoginData = this.modifyLoginCipherFormData.get(sender.tab.id);
+    if (existingModifyLoginData) {
+      formData.username = formData.username || existingModifyLoginData.username;
+      formData.password = formData.password || existingModifyLoginData.password;
+      formData.newPassword = formData.newPassword || existingModifyLoginData.newPassword;
+    }
+
+    this.modifyLoginCipherFormData.set(sender.tab.id, formData);
+  };
+
+  /**
+   * Determines if the sender of the message is from an excluded domain. This is used to prevent the
+   * add login or change password notification from being triggered on the user's vault domain or
+   * other excluded domains.
+   *
+   * @param sender - The sender of the message
+   */
+  private async isSenderFromExcludedDomain(sender: chrome.runtime.MessageSender): Promise<boolean> {
+    try {
+      const senderOrigin = sender.origin;
+      const serverConfig = await this.notificationBackground.getActiveUserServerConfig();
+      const activeUserVault = serverConfig?.environment?.vault;
+      if (activeUserVault === senderOrigin) {
+        return true;
+      }
+
+      const excludedDomains = await this.notificationBackground.getExcludedDomains();
+      if (!excludedDomains) {
+        return false;
+      }
+
+      const senderDomain = new URL(senderOrigin).hostname;
+      return excludedDomains[senderDomain] !== undefined;
+    } catch {
+      return true;
+    }
+  }
+
+  /**
+   * Removes and resets the onBeforeRequest and onCompleted listeners for web requests. This ensures
+   * that we are only listening for form submission requests on the tabs that have fillable form fields.
+   */
+  private setupWebRequestsListeners() {
+    chrome.webRequest.onBeforeRequest.removeListener(this.handleOnBeforeRequestEvent);
+    chrome.webRequest.onCompleted.removeListener(this.handleOnCompletedRequestEvent);
+    if (this.websiteOriginsWithFields.size) {
+      const requestFilter: chrome.webRequest.RequestFilter = this.generateRequestFilter();
+      chrome.webRequest.onBeforeRequest.addListener(this.handleOnBeforeRequestEvent, requestFilter);
+      chrome.webRequest.onCompleted.addListener(this.handleOnCompletedRequestEvent, requestFilter);
+    }
+  }
+
+  /**
+   * Generates the request filter for the web requests. This is used to filter out the web requests
+   * that are not from the tabs that have fillable form fields.
+   */
+  private generateRequestFilter(): chrome.webRequest.RequestFilter {
+    const websiteOrigins = Array.from(this.websiteOriginsWithFields.values());
+    const urls: string[] = [];
+    websiteOrigins.forEach((origins) => urls.push(...origins));
+    return {
+      urls,
+      types: ["main_frame", "sub_frame", "xmlhttprequest"],
+    };
+  }
+
+  /**
+   * Handles the onBeforeRequest event for web requests. This is used to ensures that the following
+   * onCompleted event is only triggered for form submission requests.
+   *
+   * @param details - The details of the web request
+   */
+  private handleOnBeforeRequestEvent = (details: chrome.webRequest.WebRequestDetails) => {
+    if (this.isPostSubmissionFormRedirection(details)) {
+      this.setupNotificationInitTrigger(
+        details.tabId,
+        details.requestId,
+        this.modifyLoginCipherFormData.get(details.tabId),
+      ).catch((error) => this.logService.error(error));
+
+      return;
+    }
+
+    if (!this.isValidFormSubmissionRequest(details)) {
+      return;
+    }
+
+    const { requestId, tabId, frameId } = details;
+    this.activeFormSubmissionRequests.add(requestId);
+
+    if (this.notificationDataIncompleteOnBeforeRequest(tabId)) {
+      this.getFormFieldDataFromTab(tabId, frameId).catch((error) => this.logService.error(error));
+    }
+  };
+
+  /**
+   * Captures the modified login form data if the tab contains incomplete data. This is used as
+   * a redundancy to ensure that the modified login form data is captured in cases where the form
+   * is split into multiple parts.
+   *
+   * @param tabId - The id of the tab
+   */
+  private notificationDataIncompleteOnBeforeRequest = (tabId: number) => {
+    const modifyLoginData = this.modifyLoginCipherFormData.get(tabId);
+    return (
+      !modifyLoginData ||
+      !this.shouldTriggerAddLoginNotification(modifyLoginData) ||
+      !this.shouldTriggerChangePasswordNotification(modifyLoginData)
+    );
+  };
+
+  /**
+   * Determines whether the request is happening after a form submission. This is identified by a GET
+   * request that is triggered after a form submission POST request from the same request id. If
+   * this is the case, and the modified login form data is available, the add login or change password
+   * notification is triggered.
+   *
+   * @param details - The details of the web request
+   */
+  private isPostSubmissionFormRedirection = (details: chrome.webRequest.WebRequestDetails) => {
+    return (
+      details.method?.toUpperCase() === "GET" &&
+      this.activeFormSubmissionRequests.has(details.requestId) &&
+      this.modifyLoginCipherFormData.has(details.tabId)
+    );
+  };
+
+  /**
+   * Determines if the web request is a valid form submission request. A valid web request
+   * is a POST, PUT, or PATCH request that is not from an invalid host.
+   *
+   * @param details - The details of the web request
+   */
+  private isValidFormSubmissionRequest = (details: chrome.webRequest.WebRequestDetails) => {
+    return (
+      !this.requestHostIsInvalid(details) &&
+      this.formSubmissionRequestMethods.has(details.method?.toUpperCase())
+    );
+  };
+
+  /**
+   * Retrieves the form field data from the tab. This is used to get the modified login form data
+   * in cases where the submit button is not clicked, but the form is submitted through other means.
+   *
+   * @param tabId - The senders tab id
+   * @param frameId - The frame where the form is located
+   */
+  private getFormFieldDataFromTab = async (tabId: number, frameId: number) => {
+    const tab = await BrowserApi.getTab(tabId);
+    if (!tab) {
+      return;
+    }
+
+    const response = (await BrowserApi.tabSendMessage(
+      tab,
+      { command: "getFormFieldDataForNotification" },
+      { frameId },
+    )) as OverlayNotificationsExtensionMessage;
+    if (response) {
+      this.storeModifiedLoginFormData(response, { tab });
+    }
+  };
+
+  /**
+   * Handles the onCompleted event for web requests. This is used to trigger the add login or change
+   * password notification when a form submission request is completed.
+   *
+   * @param details - The details of the web response
+   */
+  private handleOnCompletedRequestEvent = async (details: chrome.webRequest.WebResponseDetails) => {
+    if (
+      this.requestHostIsInvalid(details) ||
+      this.isInvalidStatusCode(details.statusCode) ||
+      !this.activeFormSubmissionRequests.has(details.requestId)
+    ) {
+      return;
+    }
+
+    const modifyLoginData = this.modifyLoginCipherFormData.get(details.tabId);
+    if (!modifyLoginData) {
+      return;
+    }
+
+    this.setupNotificationInitTrigger(details.tabId, details.requestId, modifyLoginData).catch(
+      (error) => this.logService.error(error),
+    );
+  };
+
+  /**
+   * Sets up the initialization trigger for the add login or change password notification. This is used
+   * to ensure that the notification is triggered after the tab has finished loading.
+   *
+   * @param tabId - The id of the tab
+   * @param requestId - The request id of the web request
+   * @param modifyLoginData - The modified login form data
+   */
+  private setupNotificationInitTrigger = async (
+    tabId: number,
+    requestId: string,
+    modifyLoginData: ModifyLoginCipherFormData,
+  ) => {
+    const tab = await BrowserApi.getTab(tabId);
+    if (tab.status !== "complete") {
+      await this.delayNotificationInitUntilTabIsComplete(tabId, requestId, modifyLoginData);
+      return;
+    }
+
+    await this.triggerNotificationInit(requestId, modifyLoginData, tab);
+  };
+
+  /**
+   * Delays the initialization of the add login or change password notification
+   * until the tab is complete. This is used to ensure that the notification is
+   * triggered after the tab has finished loading.
+   *
+   * @param tabId - The id of the tab
+   * @param requestId - The request id of the web request
+   * @param modifyLoginData - The modified login form data
+   */
+  private delayNotificationInitUntilTabIsComplete = async (
+    tabId: chrome.webRequest.ResourceRequest["tabId"],
+    requestId: chrome.webRequest.ResourceRequest["requestId"],
+    modifyLoginData: ModifyLoginCipherFormData,
+  ) => {
+    const handleWebNavigationOnCompleted = async () => {
+      chrome.webNavigation.onCompleted.removeListener(handleWebNavigationOnCompleted);
+      const tab = await BrowserApi.getTab(tabId);
+      await this.triggerNotificationInit(requestId, modifyLoginData, tab);
+    };
+    chrome.webNavigation.onCompleted.addListener(handleWebNavigationOnCompleted);
+  };
+
+  /**
+   * Initializes the add login or change password notification based on the modified login form data
+   * and the tab details. This will trigger the notification to be displayed to the user.
+   *
+   * @param requestId - The details of the web response
+   * @param modifyLoginData  - The modified login form data
+   * @param tab - The tab details
+   */
+  private triggerNotificationInit = async (
+    requestId: chrome.webRequest.ResourceRequest["requestId"],
+    modifyLoginData: ModifyLoginCipherFormData,
+    tab: chrome.tabs.Tab,
+  ) => {
+    if (this.shouldTriggerChangePasswordNotification(modifyLoginData)) {
+      // These notifications are temporarily setup as "messages" to the notification background.
+      // This will be structured differently in a future refactor.
+      await this.notificationBackground.changedPassword(
+        {
+          command: "bgChangedPassword",
+          data: {
+            url: modifyLoginData.uri,
+            currentPassword: modifyLoginData.password,
+            newPassword: modifyLoginData.newPassword,
+          },
+        },
+        { tab },
+      );
+      this.clearCompletedWebRequest(requestId, tab);
+      return;
+    }
+
+    if (this.shouldTriggerAddLoginNotification(modifyLoginData)) {
+      await this.notificationBackground.addLogin(
+        {
+          command: "bgAddLogin",
+          login: {
+            url: modifyLoginData.uri,
+            username: modifyLoginData.username,
+            password: modifyLoginData.password || modifyLoginData.newPassword,
+          },
+        },
+        { tab },
+      );
+      this.clearCompletedWebRequest(requestId, tab);
+    }
+  };
+
+  /**
+   * Determines if the change password notification should be triggered.
+   *
+   * @param modifyLoginData - The modified login form data
+   */
+  private shouldTriggerChangePasswordNotification = (
+    modifyLoginData: ModifyLoginCipherFormData,
+  ) => {
+    return modifyLoginData.newPassword && !modifyLoginData.username;
+  };
+
+  /**
+   * Determines if the add login notification should be triggered.
+   *
+   * @param modifyLoginData - The modified login form data
+   */
+  private shouldTriggerAddLoginNotification = (modifyLoginData: ModifyLoginCipherFormData) => {
+    return modifyLoginData.username && (modifyLoginData.password || modifyLoginData.newPassword);
+  };
+
+  /**
+   * Clears the completed web request and removes the modified login form data for the tab.
+   *
+   * @param requestId - The request id of the web request
+   * @param tab - The tab details
+   */
+  private clearCompletedWebRequest = (
+    requestId: chrome.webRequest.ResourceRequest["requestId"],
+    tab: chrome.tabs.Tab,
+  ) => {
+    this.activeFormSubmissionRequests.delete(requestId);
+    this.modifyLoginCipherFormData.delete(tab.id);
+    this.websiteOriginsWithFields.delete(tab.id);
+    this.setupWebRequestsListeners();
+  };
+
+  /**
+   * Determines if the status code of the web response is invalid. An invalid status code is
+   * any status code that is not in the 200-299 range.
+   *
+   * @param statusCode - The status code of the web response
+   */
+  private isInvalidStatusCode = (statusCode: number) => {
+    return statusCode < 200 || statusCode >= 300;
+  };
+
+  /**
+   * Determines if the host of the web request is invalid. An invalid host is any host that does not
+   * start with "http" or a tab id that is less than 0.
+   *
+   * @param details - The details of the web request
+   */
+  private requestHostIsInvalid = (details: chrome.webRequest.ResourceRequest) => {
+    return !details.url?.startsWith("http") || details.tabId < 0;
+  };
+
+  /**
+   * Sets up the listeners for the extension messages and the tab events.
+   */
+  private setupExtensionListeners() {
+    BrowserApi.messageListener("overlay-notifications", this.handleExtensionMessage);
+    chrome.tabs.onRemoved.addListener(this.handleTabRemoved);
+    chrome.tabs.onUpdated.addListener(this.handleTabUpdated);
+  }
+
+  /**
+   * Handles messages that are sent to the extension background.
+   *
+   * @param message - The message from the content script
+   * @param sender - The sender of the message
+   * @param sendResponse - The response to send back to the content script
+   */
+  private handleExtensionMessage = (
+    message: OverlayNotificationsExtensionMessage,
+    sender: chrome.runtime.MessageSender,
+    sendResponse: (response?: any) => void,
+  ) => {
+    const handler: CallableFunction = this.extensionMessageHandlers[message.command];
+    if (!handler) {
+      return null;
+    }
+
+    const messageResponse = handler({ message, sender });
+    if (typeof messageResponse === "undefined") {
+      return null;
+    }
+
+    Promise.resolve(messageResponse)
+      .then((response) => sendResponse(response))
+      .catch((error) => this.logService.error(error));
+    return true;
+  };
+
+  /**
+   * Handles the removal of a tab. This is used to remove the modified login form data for the tab.
+   *
+   * @param tabId - The id of the tab that was removed
+   */
+  private handleTabRemoved = (tabId: number) => {
+    this.modifyLoginCipherFormData.delete(tabId);
+    if (this.websiteOriginsWithFields.has(tabId)) {
+      this.websiteOriginsWithFields.delete(tabId);
+      this.setupWebRequestsListeners();
+    }
+  };
+
+  /**
+   * Handles the update of a tab. This is used to remove the modified
+   * login form  data for the tab when the tab is loading.
+   *
+   * @param tabId - The id of the tab that was updated
+   * @param changeInfo - The change info of the tab
+   */
+  private handleTabUpdated = (tabId: number, changeInfo: chrome.tabs.TabChangeInfo) => {
+    if (changeInfo.status === "loading" && this.websiteOriginsWithFields.has(tabId)) {
+      this.websiteOriginsWithFields.delete(tabId);
+    }
+  };
+}
diff --git a/apps/browser/src/autofill/content/auto-submit-login.spec.ts b/apps/browser/src/autofill/content/auto-submit-login.spec.ts
index d8a192dbcab..98caee3d363 100644
--- a/apps/browser/src/autofill/content/auto-submit-login.spec.ts
+++ b/apps/browser/src/autofill/content/auto-submit-login.spec.ts
@@ -12,6 +12,16 @@ let pageDetailsMock: AutofillPageDetails;
 let fillScriptMock: AutofillScript;
 let autofillFieldElementByOpidMock: FormFieldElement;
 
+jest.mock("../services/dom-query.service", () => {
+  const module = jest.requireActual("../services/dom-query.service");
+  return {
+    DomQueryService: class extends module.DomQueryService {
+      deepQueryElements<T>(element: HTMLElement, queryString: string): T[] {
+        return Array.from(element.querySelectorAll(queryString)) as T[];
+      }
+    },
+  };
+});
 jest.mock("../services/collect-autofill-content.service", () => {
   const module = jest.requireActual("../services/collect-autofill-content.service");
   return {
@@ -20,10 +30,6 @@ jest.mock("../services/collect-autofill-content.service", () => {
         return pageDetailsMock;
       }
 
-      deepQueryElements<T>(element: HTMLElement, queryString: string): T[] {
-        return Array.from(element.querySelectorAll(queryString)) as T[];
-      }
-
       getAutofillFieldElementByOpid(opid: string) {
         const mockedEl = autofillFieldElementByOpidMock;
         if (mockedEl) {
diff --git a/apps/browser/src/autofill/content/auto-submit-login.ts b/apps/browser/src/autofill/content/auto-submit-login.ts
index 9cc06f874e6..19ffac61bcf 100644
--- a/apps/browser/src/autofill/content/auto-submit-login.ts
+++ b/apps/browser/src/autofill/content/auto-submit-login.ts
@@ -4,13 +4,16 @@ import AutofillPageDetails from "../models/autofill-page-details";
 import AutofillScript from "../models/autofill-script";
 import { CollectAutofillContentService } from "../services/collect-autofill-content.service";
 import DomElementVisibilityService from "../services/dom-element-visibility.service";
+import { DomQueryService } from "../services/dom-query.service";
 import InsertAutofillContentService from "../services/insert-autofill-content.service";
 import { elementIsInputElement, nodeIsFormElement, sendExtensionMessage } from "../utils";
 
 (function (globalContext) {
+  const domQueryService = new DomQueryService();
   const domElementVisibilityService = new DomElementVisibilityService();
   const collectAutofillContentService = new CollectAutofillContentService(
     domElementVisibilityService,
+    domQueryService,
   );
   const insertAutofillContentService = new InsertAutofillContentService(
     domElementVisibilityService,
@@ -191,7 +194,7 @@ import { elementIsInputElement, nodeIsFormElement, sendExtensionMessage } from "
     element: HTMLElement,
     lastFieldIsPasswordInput = false,
   ): boolean {
-    const genericSubmitElement = collectAutofillContentService.deepQueryElements<HTMLButtonElement>(
+    const genericSubmitElement = domQueryService.deepQueryElements<HTMLButtonElement>(
       element,
       "[type='submit']",
     );
@@ -200,10 +203,7 @@ import { elementIsInputElement, nodeIsFormElement, sendExtensionMessage } from "
       return true;
     }
 
-    const buttons = collectAutofillContentService.deepQueryElements<HTMLButtonElement>(
-      element,
-      "button",
-    );
+    const buttons = domQueryService.deepQueryElements<HTMLButtonElement>(element, "button");
     for (let i = 0; i < buttons.length; i++) {
       if (isLoginButton(buttons[i])) {
         clickSubmitElement(buttons[i], lastFieldIsPasswordInput);
@@ -274,7 +274,7 @@ import { elementIsInputElement, nodeIsFormElement, sendExtensionMessage } from "
    */
   function getAutofillFormElements(): HTMLFormElement[] {
     const formElements: HTMLFormElement[] = [];
-    collectAutofillContentService.queryAllTreeWalkerNodes(
+    domQueryService.queryAllTreeWalkerNodes(
       globalContext.document.documentElement,
       (node: Node) => {
         if (nodeIsFormElement(node)) {
diff --git a/apps/browser/src/autofill/content/autofill-init.spec.ts b/apps/browser/src/autofill/content/autofill-init.spec.ts
index e27e8ef73d0..ebfbda75b56 100644
--- a/apps/browser/src/autofill/content/autofill-init.spec.ts
+++ b/apps/browser/src/autofill/content/autofill-init.spec.ts
@@ -3,6 +3,8 @@ import { mock, MockProxy } from "jest-mock-extended";
 import AutofillPageDetails from "../models/autofill-page-details";
 import AutofillScript from "../models/autofill-script";
 import { AutofillInlineMenuContentService } from "../overlay/inline-menu/content/autofill-inline-menu-content.service";
+import { OverlayNotificationsContentService } from "../overlay/notifications/abstractions/overlay-notifications-content.service";
+import { DomQueryService } from "../services/abstractions/dom-query.service";
 import { AutofillOverlayContentService } from "../services/autofill-overlay-content.service";
 import {
   flushPromises,
@@ -14,6 +16,8 @@ import { AutofillExtensionMessage } from "./abstractions/autofill-init";
 import AutofillInit from "./autofill-init";
 
 describe("AutofillInit", () => {
+  let domQueryService: MockProxy<DomQueryService>;
+  let overlayNotificationsContentService: MockProxy<OverlayNotificationsContentService>;
   let inlineMenuElements: MockProxy<AutofillInlineMenuContentService>;
   let autofillOverlayContentService: MockProxy<AutofillOverlayContentService>;
   let autofillInit: AutofillInit;
@@ -27,9 +31,16 @@ describe("AutofillInit", () => {
         addListener: jest.fn(),
       },
     });
+    domQueryService = mock<DomQueryService>();
+    overlayNotificationsContentService = mock<OverlayNotificationsContentService>();
     inlineMenuElements = mock<AutofillInlineMenuContentService>();
     autofillOverlayContentService = mock<AutofillOverlayContentService>();
-    autofillInit = new AutofillInit(autofillOverlayContentService, inlineMenuElements);
+    autofillInit = new AutofillInit(
+      domQueryService,
+      autofillOverlayContentService,
+      inlineMenuElements,
+      overlayNotificationsContentService,
+    );
     sendExtensionMessageSpy = jest
       .spyOn(autofillInit as any, "sendExtensionMessage")
       .mockImplementation();
@@ -171,6 +182,16 @@ describe("AutofillInit", () => {
         expect(inlineMenuElements.messageHandlers.messageHandler).toHaveBeenCalled();
       });
 
+      it("triggers extension message handlers from the OverlayNotificationsContentService", () => {
+        overlayNotificationsContentService.messageHandlers.messageHandler = jest.fn();
+
+        sendMockExtensionMessage({ command: "messageHandler" }, sender, sendResponse);
+
+        expect(
+          overlayNotificationsContentService.messageHandlers.messageHandler,
+        ).toHaveBeenCalled();
+      });
+
       describe("collectPageDetails", () => {
         it("sends the collected page details for autofill using a background script message", async () => {
           const pageDetails: AutofillPageDetails = {
diff --git a/apps/browser/src/autofill/content/autofill-init.ts b/apps/browser/src/autofill/content/autofill-init.ts
index e44956e1849..c0cbac3ae67 100644
--- a/apps/browser/src/autofill/content/autofill-init.ts
+++ b/apps/browser/src/autofill/content/autofill-init.ts
@@ -2,7 +2,9 @@ import { EVENTS } from "@bitwarden/common/autofill/constants";
 
 import AutofillPageDetails from "../models/autofill-page-details";
 import { AutofillInlineMenuContentService } from "../overlay/inline-menu/abstractions/autofill-inline-menu-content.service";
+import { OverlayNotificationsContentService } from "../overlay/notifications/abstractions/overlay-notifications-content.service";
 import { AutofillOverlayContentService } from "../services/abstractions/autofill-overlay-content.service";
+import { DomQueryService } from "../services/abstractions/dom-query.service";
 import { CollectAutofillContentService } from "../services/collect-autofill-content.service";
 import DomElementVisibilityService from "../services/dom-element-visibility.service";
 import InsertAutofillContentService from "../services/insert-autofill-content.service";
@@ -16,8 +18,6 @@ import {
 
 class AutofillInit implements AutofillInitInterface {
   private readonly sendExtensionMessage = sendExtensionMessage;
-  private readonly autofillOverlayContentService: AutofillOverlayContentService | undefined;
-  private readonly autofillInlineMenuContentService: AutofillInlineMenuContentService | undefined;
   private readonly domElementVisibilityService: DomElementVisibilityService;
   private readonly collectAutofillContentService: CollectAutofillContentService;
   private readonly insertAutofillContentService: InsertAutofillContentService;
@@ -32,20 +32,23 @@ class AutofillInit implements AutofillInitInterface {
    * AutofillInit constructor. Initializes the DomElementVisibilityService,
    * CollectAutofillContentService and InsertAutofillContentService classes.
    *
+   * @param domQueryService - Service used to handle DOM queries.
    * @param autofillOverlayContentService - The autofill overlay content service, potentially undefined.
-   * @param inlineMenuElements - The inline menu elements, potentially undefined.
+   * @param autofillInlineMenuContentService - The inline menu content service, potentially undefined.
+   * @param overlayNotificationsContentService - The overlay notifications content service, potentially undefined.
    */
   constructor(
-    autofillOverlayContentService?: AutofillOverlayContentService,
-    inlineMenuElements?: AutofillInlineMenuContentService,
+    private domQueryService: DomQueryService,
+    private autofillOverlayContentService?: AutofillOverlayContentService,
+    private autofillInlineMenuContentService?: AutofillInlineMenuContentService,
+    private overlayNotificationsContentService?: OverlayNotificationsContentService,
   ) {
-    this.autofillOverlayContentService = autofillOverlayContentService;
-    this.autofillInlineMenuContentService = inlineMenuElements;
     this.domElementVisibilityService = new DomElementVisibilityService(
       this.autofillInlineMenuContentService,
     );
     this.collectAutofillContentService = new CollectAutofillContentService(
       this.domElementVisibilityService,
+      domQueryService,
       this.autofillOverlayContentService,
     );
     this.insertAutofillContentService = new InsertAutofillContentService(
@@ -204,6 +207,10 @@ class AutofillInit implements AutofillInitInterface {
       return this.autofillInlineMenuContentService.messageHandlers[command];
     }
 
+    if (this.overlayNotificationsContentService?.messageHandlers?.[command]) {
+      return this.overlayNotificationsContentService.messageHandlers[command];
+    }
+
     return this.extensionMessageHandlers[command];
   }
 
@@ -217,6 +224,7 @@ class AutofillInit implements AutofillInitInterface {
     this.collectAutofillContentService.destroy();
     this.autofillOverlayContentService?.destroy();
     this.autofillInlineMenuContentService?.destroy();
+    this.overlayNotificationsContentService?.destroy();
   }
 }
 
diff --git a/apps/browser/src/autofill/content/bootstrap-autofill-overlay-menu.ts b/apps/browser/src/autofill/content/bootstrap-autofill-overlay-menu.ts
new file mode 100644
index 00000000000..aed0f6cb940
--- /dev/null
+++ b/apps/browser/src/autofill/content/bootstrap-autofill-overlay-menu.ts
@@ -0,0 +1,30 @@
+import { AutofillInlineMenuContentService } from "../overlay/inline-menu/content/autofill-inline-menu-content.service";
+import { AutofillOverlayContentService } from "../services/autofill-overlay-content.service";
+import { DomQueryService } from "../services/dom-query.service";
+import { InlineMenuFieldQualificationService } from "../services/inline-menu-field-qualification.service";
+import { setupAutofillInitDisconnectAction } from "../utils";
+
+import AutofillInit from "./autofill-init";
+
+(function (windowContext) {
+  if (!windowContext.bitwardenAutofillInit) {
+    const domQueryService = new DomQueryService();
+    const inlineMenuFieldQualificationService = new InlineMenuFieldQualificationService();
+    const autofillOverlayContentService = new AutofillOverlayContentService(
+      domQueryService,
+      inlineMenuFieldQualificationService,
+    );
+    let inlineMenuElements: AutofillInlineMenuContentService;
+    if (globalThis.self === globalThis.top) {
+      inlineMenuElements = new AutofillInlineMenuContentService();
+    }
+    windowContext.bitwardenAutofillInit = new AutofillInit(
+      domQueryService,
+      autofillOverlayContentService,
+      inlineMenuElements,
+    );
+    setupAutofillInitDisconnectAction(windowContext);
+
+    windowContext.bitwardenAutofillInit.init();
+  }
+})(window);
diff --git a/apps/browser/src/autofill/content/bootstrap-autofill-overlay-notifications.ts b/apps/browser/src/autofill/content/bootstrap-autofill-overlay-notifications.ts
new file mode 100644
index 00000000000..0a810c68f56
--- /dev/null
+++ b/apps/browser/src/autofill/content/bootstrap-autofill-overlay-notifications.ts
@@ -0,0 +1,33 @@
+import { OverlayNotificationsContentService } from "../overlay/notifications/content/overlay-notifications-content.service";
+import { AutofillOverlayContentService } from "../services/autofill-overlay-content.service";
+import { DomQueryService } from "../services/dom-query.service";
+import { InlineMenuFieldQualificationService } from "../services/inline-menu-field-qualification.service";
+import { setupAutofillInitDisconnectAction } from "../utils";
+
+import AutofillInit from "./autofill-init";
+
+(function (windowContext) {
+  if (!windowContext.bitwardenAutofillInit) {
+    const domQueryService = new DomQueryService();
+    const inlineMenuFieldQualificationService = new InlineMenuFieldQualificationService();
+    const autofillOverlayContentService = new AutofillOverlayContentService(
+      domQueryService,
+      inlineMenuFieldQualificationService,
+    );
+
+    let overlayNotificationsContentService: OverlayNotificationsContentService;
+    if (globalThis.self === globalThis.top) {
+      overlayNotificationsContentService = new OverlayNotificationsContentService();
+    }
+
+    windowContext.bitwardenAutofillInit = new AutofillInit(
+      domQueryService,
+      autofillOverlayContentService,
+      null,
+      overlayNotificationsContentService,
+    );
+    setupAutofillInitDisconnectAction(windowContext);
+
+    windowContext.bitwardenAutofillInit.init();
+  }
+})(window);
diff --git a/apps/browser/src/autofill/content/bootstrap-autofill-overlay.ts b/apps/browser/src/autofill/content/bootstrap-autofill-overlay.ts
index 22430227660..6df9397f6d8 100644
--- a/apps/browser/src/autofill/content/bootstrap-autofill-overlay.ts
+++ b/apps/browser/src/autofill/content/bootstrap-autofill-overlay.ts
@@ -1,5 +1,7 @@
 import { AutofillInlineMenuContentService } from "../overlay/inline-menu/content/autofill-inline-menu-content.service";
+import { OverlayNotificationsContentService } from "../overlay/notifications/content/overlay-notifications-content.service";
 import { AutofillOverlayContentService } from "../services/autofill-overlay-content.service";
+import { DomQueryService } from "../services/dom-query.service";
 import { InlineMenuFieldQualificationService } from "../services/inline-menu-field-qualification.service";
 import { setupAutofillInitDisconnectAction } from "../utils";
 
@@ -7,17 +9,25 @@ import AutofillInit from "./autofill-init";
 
 (function (windowContext) {
   if (!windowContext.bitwardenAutofillInit) {
+    const domQueryService = new DomQueryService();
     const inlineMenuFieldQualificationService = new InlineMenuFieldQualificationService();
     const autofillOverlayContentService = new AutofillOverlayContentService(
+      domQueryService,
       inlineMenuFieldQualificationService,
     );
+
     let inlineMenuElements: AutofillInlineMenuContentService;
+    let overlayNotificationsContentService: OverlayNotificationsContentService;
     if (globalThis.self === globalThis.top) {
       inlineMenuElements = new AutofillInlineMenuContentService();
+      overlayNotificationsContentService = new OverlayNotificationsContentService();
     }
+
     windowContext.bitwardenAutofillInit = new AutofillInit(
+      domQueryService,
       autofillOverlayContentService,
       inlineMenuElements,
+      overlayNotificationsContentService,
     );
     setupAutofillInitDisconnectAction(windowContext);
 
diff --git a/apps/browser/src/autofill/content/bootstrap-autofill.ts b/apps/browser/src/autofill/content/bootstrap-autofill.ts
index f98d4bc1d72..3de750cd671 100644
--- a/apps/browser/src/autofill/content/bootstrap-autofill.ts
+++ b/apps/browser/src/autofill/content/bootstrap-autofill.ts
@@ -1,10 +1,12 @@
+import { DomQueryService } from "../services/dom-query.service";
 import { setupAutofillInitDisconnectAction } from "../utils";
 
 import AutofillInit from "./autofill-init";
 
 (function (windowContext) {
   if (!windowContext.bitwardenAutofillInit) {
-    windowContext.bitwardenAutofillInit = new AutofillInit();
+    const domQueryService = new DomQueryService();
+    windowContext.bitwardenAutofillInit = new AutofillInit(domQueryService);
     setupAutofillInitDisconnectAction(windowContext);
 
     windowContext.bitwardenAutofillInit.init();
diff --git a/apps/browser/src/autofill/content/notification-bar.ts b/apps/browser/src/autofill/content/notification-bar.ts
index 2bcf4394fd9..5217ebbe8ed 100644
--- a/apps/browser/src/autofill/content/notification-bar.ts
+++ b/apps/browser/src/autofill/content/notification-bar.ts
@@ -6,6 +6,7 @@ import {
 import AutofillField from "../models/autofill-field";
 import { WatchedForm } from "../models/watched-form";
 import { NotificationBarIframeInitData } from "../notification/abstractions/notification-bar";
+import { NotificationTypeData } from "../overlay/notifications/abstractions/overlay-notifications-content.service";
 import { FormData } from "../services/abstractions/autofill.service";
 import { sendExtensionMessage, setupExtensionDisconnectAction } from "../utils";
 
@@ -832,7 +833,7 @@ async function loadNotificationBar() {
   // End Form Detection and Submission Handling
 
   // Notification Bar Functions (open, close, height adjustment, etc.)
-  function closeExistingAndOpenBar(type: string, typeData: any) {
+  function closeExistingAndOpenBar(type: string, typeData: NotificationTypeData) {
     const notificationBarInitData: NotificationBarIframeInitData = {
       type,
       isVaultLocked: typeData.isVaultLocked,
diff --git a/apps/browser/src/autofill/deprecated/content/autofill-init.deprecated.ts b/apps/browser/src/autofill/deprecated/content/autofill-init.deprecated.ts
index 211e3bf9251..b3ee2637b09 100644
--- a/apps/browser/src/autofill/deprecated/content/autofill-init.deprecated.ts
+++ b/apps/browser/src/autofill/deprecated/content/autofill-init.deprecated.ts
@@ -2,6 +2,7 @@ import { AutofillInit } from "../../content/abstractions/autofill-init";
 import AutofillPageDetails from "../../models/autofill-page-details";
 import { CollectAutofillContentService } from "../../services/collect-autofill-content.service";
 import DomElementVisibilityService from "../../services/dom-element-visibility.service";
+import { DomQueryService } from "../../services/dom-query.service";
 import InsertAutofillContentService from "../../services/insert-autofill-content.service";
 import { sendExtensionMessage } from "../../utils";
 import { LegacyAutofillOverlayContentService } from "../services/abstractions/autofill-overlay-content.service";
@@ -40,8 +41,10 @@ class LegacyAutofillInit implements AutofillInit {
   constructor(autofillOverlayContentService?: LegacyAutofillOverlayContentService) {
     this.autofillOverlayContentService = autofillOverlayContentService;
     this.domElementVisibilityService = new DomElementVisibilityService();
+    const domQueryService = new DomQueryService();
     this.collectAutofillContentService = new CollectAutofillContentService(
       this.domElementVisibilityService,
+      domQueryService,
       this.autofillOverlayContentService,
     );
     this.insertAutofillContentService = new InsertAutofillContentService(
diff --git a/apps/browser/src/autofill/deprecated/services/autofill-overlay-content.service.deprecated.ts b/apps/browser/src/autofill/deprecated/services/autofill-overlay-content.service.deprecated.ts
index 6526f6993db..87af2518ddc 100644
--- a/apps/browser/src/autofill/deprecated/services/autofill-overlay-content.service.deprecated.ts
+++ b/apps/browser/src/autofill/deprecated/services/autofill-overlay-content.service.deprecated.ts
@@ -73,7 +73,7 @@ class LegacyAutofillOverlayContentService implements LegacyAutofillOverlayConten
    * Satisfy the AutofillOverlayContentService interface.
    */
   messageHandlers = {} as AutofillOverlayContentExtensionMessageHandlers;
-  async setupInlineMenu(
+  async setupOverlayListeners(
     autofillFieldElement: ElementWithOpId<FormFieldElement>,
     autofillFieldData: AutofillField,
     pageDetails: AutofillPageDetails,
diff --git a/apps/browser/src/autofill/enums/autofill-field.enums.ts b/apps/browser/src/autofill/enums/autofill-field.enums.ts
index 4fd7c0fe88f..68408f2b671 100644
--- a/apps/browser/src/autofill/enums/autofill-field.enums.ts
+++ b/apps/browser/src/autofill/enums/autofill-field.enums.ts
@@ -1,5 +1,6 @@
 export const AutofillFieldQualifier = {
   password: "password",
+  newPassword: "newPassword",
   username: "username",
   cardholderName: "cardholderName",
   cardNumber: "cardNumber",
diff --git a/apps/browser/src/autofill/notification/abstractions/notification-bar.ts b/apps/browser/src/autofill/notification/abstractions/notification-bar.ts
index 268617c419e..6dfcac4abea 100644
--- a/apps/browser/src/autofill/notification/abstractions/notification-bar.ts
+++ b/apps/browser/src/autofill/notification/abstractions/notification-bar.ts
@@ -4,6 +4,8 @@ type NotificationBarIframeInitData = {
   theme?: string;
   removeIndividualVault?: boolean;
   importType?: string;
+  applyRedesign?: boolean;
+  launchTimestamp?: number;
 };
 
 type NotificationBarWindowMessage = {
diff --git a/apps/browser/src/autofill/notification/bar.html b/apps/browser/src/autofill/notification/bar.html
index 26d9d7086d4..6b0e76b5169 100644
--- a/apps/browser/src/autofill/notification/bar.html
+++ b/apps/browser/src/autofill/notification/bar.html
@@ -13,16 +13,11 @@
         </a>
       </div>
       <div id="content"></div>
-      <div>
+      <div class="notification-close">
         <button type="button" class="neutral" id="close-button">
-          <svg
-            id="close"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-            xmlns:v="https://vecta.io/nano"
-          >
+          <svg id="close" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
             <path
-              d="M497.72 429.63l-169-174.82L498.11 82.24c6.956-7.168 6.956-18.85 0-26.018L449.934 6.31C446.585 2.859 442.076 1 437.31 1s-9.275 1.991-12.624 5.31l-168.62 172.04L87.196 6.45c-3.349-3.451-7.858-5.31-12.624-5.31s-9.275 1.991-12.624 5.31L13.9 56.362c-6.956 7.168-6.956 18.85 0 26.018l169.39 172.57L14.42 429.64c-3.349 3.451-5.281 8.097-5.281 13.009s1.803 9.558 5.281 13.009l48.176 49.912c3.478 3.584 7.987 5.442 12.624 5.442 4.508 0 9.146-1.726 12.624-5.442l168.23-174.16 168.36 174.03c3.478 3.584 7.986 5.442 12.624 5.442 4.509 0 9.146-1.726 12.624-5.442l48.176-49.912c3.349-3.451 5.281-8.097 5.281-13.009a19.32 19.32 0 0 0-5.41-12.876z"
+              d="M14.431 13.57 8.865 8.173a.388.388 0 0 1 0-.559l5.498-5.33a.388.388 0 0 0-.005-.553.415.415 0 0 0-.572-.006l-5.498 5.33a.416.416 0 0 1-.577 0L2.196 1.72a.403.403 0 0 0-.29-.12.422.422 0 0 0-.292.115.395.395 0 0 0-.12.283.386.386 0 0 0 .125.28l5.515 5.338a.388.388 0 0 1 0 .559L1.56 13.568a.397.397 0 0 0-.12.28c0 .105.044.205.12.28a.416.416 0 0 0 .578-.001l5.574-5.395a.416.416 0 0 1 .577 0l5.567 5.395a.422.422 0 0 0 .582.005.398.398 0 0 0 .12-.282.387.387 0 0 0-.125-.281Z"
             />
           </svg>
         </button>
@@ -32,8 +27,8 @@
 
   <template id="template-add">
     <div class="inner-wrapper">
-      <div id="add-text"></div>
-      <div class="add-change-cipher-buttons">
+      <div id="add-text" class="notification-body"></div>
+      <div class="add-change-cipher-buttons notification-actions">
         <button type="button" id="never-save" class="link"></button>
         <select id="select-folder"></select>
         <button type="button" id="add-edit" class="secondary"></button>
@@ -44,8 +39,8 @@
 
   <template id="template-change">
     <div class="inner-wrapper">
-      <div id="change-text"></div>
-      <div class="add-change-cipher-buttons">
+      <div id="change-text" class="notification-body"></div>
+      <div class="add-change-cipher-buttons notification-actions">
         <button type="button" id="change-edit" class="secondary"></button>
         <button type="button" id="change-save" class="primary"></button>
       </div>
@@ -54,8 +49,8 @@
 
   <template id="template-unlock">
     <div class="inner-wrapper">
-      <div id="unlock-text"></div>
-      <div>
+      <div id="unlock-text" class="notification-body"></div>
+      <div class="notification-actions">
         <button type="button" id="unlock-vault" class="primary"></button>
       </div>
     </div>
@@ -63,8 +58,8 @@
 
   <template id="template-fileless-import">
     <div class="inner-wrapper">
-      <div id="fileless-import-text"></div>
-      <div id="fileless-import-buttons">
+      <div id="fileless-import-text" class="notification-body"></div>
+      <div id="fileless-import-buttons" class="notification-actions">
         <button type="button" id="cancel-fileless-import" class="secondary"></button>
         <button type="button" id="start-fileless-import" class="primary"></button>
       </div>
diff --git a/apps/browser/src/autofill/notification/bar.scss b/apps/browser/src/autofill/notification/bar.scss
index 654b9ca3f51..cd995a115ff 100644
--- a/apps/browser/src/autofill/notification/bar.scss
+++ b/apps/browser/src/autofill/notification/bar.scss
@@ -68,8 +68,8 @@ img {
 
 #close {
   display: block;
-  width: 17px;
-  height: 17px;
+  width: 16px;
+  height: 16px;
 
   > path {
     @include themify($themes) {
@@ -158,9 +158,24 @@ button {
 }
 
 .success-message {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+
   @include themify($themes) {
     color: themed("successColor");
   }
+
+  svg {
+    margin-right: 8px;
+
+    path {
+      @include themify($themes) {
+        fill: themed("successColor");
+      }
+    }
+  }
 }
 
 .error-message {
@@ -180,3 +195,158 @@ button {
     display: none;
   }
 }
+
+.notification-bar-redesign {
+  button {
+    padding: 4px 8px;
+  }
+
+  select {
+    padding: 4px 6px;
+  }
+
+  .outer-wrapper {
+    display: block;
+    position: relative;
+    padding: 8px;
+    border-top: 1px solid transparent;
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+    border-radius: 4px;
+
+    @include themify($themes) {
+      border-top-color: themed("borderColor");
+      border-left-color: themed("borderColor");
+      border-right-color: themed("borderColor");
+    }
+  }
+
+  .logo {
+    position: absolute;
+    top: 8px;
+    left: 10px;
+    overflow: hidden;
+  }
+
+  .notification-close {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+
+    #close-button {
+      display: flex;
+      align-content: center;
+      align-items: center;
+      justify-content: center;
+      width: 30px;
+      height: 30px;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  #content .inner-wrapper {
+    display: flex;
+    align-items: flex-start;
+    align-content: flex-start;
+    flex-wrap: wrap;
+
+    .notification-body {
+      width: 100%;
+      padding: 4px 38px 24px 42px;
+      font-weight: 400;
+    }
+    .notification-actions {
+      display: flex;
+      align-items: stretch;
+      align-content: stretch;
+      justify-content: flex-end;
+      width: 100%;
+
+      #never-save {
+        margin-right: auto;
+        padding: 0;
+        font-size: 16px;
+        font-weight: 500;
+        letter-spacing: 0.5px;
+      }
+
+      #select-folder {
+        width: 125px;
+        margin-right: 6px;
+        font-size: 12px;
+        appearance: none;
+        background-size: 16px;
+        background-position: center right 4px;
+        background-repeat: no-repeat;
+
+        @include themify($themes) {
+          color: themed("mutedTextColor");
+          border-color: themed("mutedTextColor");
+        }
+
+        &:not([disabled]) {
+          display: block;
+        }
+      }
+
+      .primary,
+      .secondary {
+        font-size: 12px;
+      }
+
+      .secondary {
+        margin-right: 6px;
+        border-width: 1px;
+      }
+
+      .primary {
+        margin-right: 2px;
+      }
+
+      &.success-message,
+      &.error-message {
+        padding: 4px 36px 6px 42px;
+      }
+    }
+  }
+
+  .success-event,
+  .error-event {
+    .notification-body {
+      display: none;
+    }
+  }
+}
+
+.theme_light {
+  .notification-bar-redesign #content .inner-wrapper {
+    #select-folder {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nMTYnIGhlaWdodD0nMTYnIGZpbGw9J25vbmUnPjxwYXRoIHN0cm9rZT0nIzIxMjUyOScgZD0nbTUgNiAzIDMgMy0zJy8+PC9zdmc+");
+    }
+  }
+}
+
+.theme_dark {
+  .notification-bar-redesign #content .inner-wrapper {
+    #select-folder {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgZmlsbD0nbm9uZSc+PHBhdGggc3Ryb2tlPScjZmZmZmZmJyBkPSdtNSA2IDMgMyAzLTMnLz48L3N2Zz4=");
+    }
+  }
+}
+
+.theme_solarizedDark {
+  .notification-bar-redesign #content .inner-wrapper {
+    #select-folder {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgZmlsbD0nbm9uZSc+PHBhdGggc3Ryb2tlPScjZWVlOGQ1JyBkPSdtNSA2IDMgMyAzLTMnLz48L3N2Zz4=");
+    }
+  }
+}
+
+.theme_nord {
+  .notification-bar-redesign #content .inner-wrapper {
+    #select-folder {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgZmlsbD0nbm9uZSc+PHBhdGggc3Ryb2tlPScjRTVFOUYwJyBkPSdtNSA2IDMgMyAzLTMnLz48L3N2Zz4=");
+    }
+  }
+}
diff --git a/apps/browser/src/autofill/notification/bar.ts b/apps/browser/src/autofill/notification/bar.ts
index a730ee1ebac..3965ddfbce2 100644
--- a/apps/browser/src/autofill/notification/bar.ts
+++ b/apps/browser/src/autofill/notification/bar.ts
@@ -4,6 +4,8 @@ import type { FolderView } from "@bitwarden/common/vault/models/view/folder.view
 
 import { FilelessImportPort, FilelessImportType } from "../../tools/enums/fileless-import.enums";
 import { AdjustNotificationBarMessageData } from "../background/abstractions/notification.background";
+import { buildSvgDomElement } from "../utils";
+import { circleCheckIcon } from "../utils/svg-icons";
 
 import {
   NotificationBarWindowMessageHandlers,
@@ -212,20 +214,24 @@ function handleSaveCipherAttemptCompletedMessage(message: NotificationBarWindowM
       notificationBarOuterWrapper.classList.add("error-event");
     });
 
+    adjustHeight();
     logService.error(`Error encountered when saving credentials: ${message.error}`);
     return;
   }
   const messageName =
-    notificationBarIframeInitData.type === "add"
-      ? "saveCipherAttemptSuccess"
-      : "updateCipherAttemptSuccess";
+    notificationBarIframeInitData.type === "add" ? "passwordSaved" : "passwordUpdated";
 
   addSaveButtonContainers.forEach((element) => {
     element.textContent = chrome.i18n.getMessage(messageName);
+    element.prepend(buildSvgDomElement(circleCheckIcon));
     element.classList.add("success-message");
     notificationBarOuterWrapper.classList.add("success-event");
   });
-  setTimeout(() => sendPlatformMessage({ command: "bgCloseNotificationBar" }), 1250);
+  adjustHeight();
+  globalThis.setTimeout(
+    () => sendPlatformMessage({ command: "bgCloseNotificationBar", fadeOutNotification: true }),
+    3000,
+  );
 }
 
 function handleTypeUnlock() {
@@ -276,14 +282,17 @@ function handleTypeFilelessImport() {
 
     if (msg.command === "filelessImportCompleted") {
       filelessImportButtons.textContent = chrome.i18n.getMessage("dataSuccessfullyImported");
+      filelessImportButtons.prepend(buildSvgDomElement(circleCheckIcon));
       filelessImportButtons.classList.add("success-message");
       notificationBarOuterWrapper.classList.add("success-event");
+      adjustHeight();
       return;
     }
 
     filelessImportButtons.textContent = chrome.i18n.getMessage("dataImportFailed");
     filelessImportButtons.classList.add("error-message");
     notificationBarOuterWrapper.classList.add("error-event");
+    adjustHeight();
     logService.error(`Error Encountered During Import: ${msg.importErrorMessage}`);
   };
   port.onMessage.addListener(handlePortMessage);
@@ -390,6 +399,10 @@ function setNotificationBarTheme() {
   }
 
   document.documentElement.classList.add(`theme_${theme}`);
+
+  if (notificationBarIframeInitData.applyRedesign) {
+    document.body.classList.add("notification-bar-redesign");
+  }
 }
 
 function postMessageToParent(message: NotificationBarWindowMessage) {
diff --git a/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts b/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts
index 688b327d296..8d5e08fc08e 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts
+++ b/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts
@@ -1,5 +1,8 @@
+import { mock, MockProxy } from "jest-mock-extended";
+
 import AutofillInit from "../../../content/autofill-init";
 import { AutofillOverlayElement } from "../../../enums/autofill-overlay.enum";
+import { DomQueryService } from "../../../services/abstractions/dom-query.service";
 import { createMutationRecordMock } from "../../../spec/autofill-mocks";
 import { flushPromises, sendMockExtensionMessage } from "../../../spec/testing-utils";
 import { ElementWithOpId } from "../../../types";
@@ -7,6 +10,7 @@ import { ElementWithOpId } from "../../../types";
 import { AutofillInlineMenuContentService } from "./autofill-inline-menu-content.service";
 
 describe("AutofillInlineMenuContentService", () => {
+  let domQueryService: MockProxy<DomQueryService>;
   let autofillInlineMenuContentService: AutofillInlineMenuContentService;
   let autofillInit: AutofillInit;
   let sendExtensionMessageSpy: jest.SpyInstance;
@@ -17,8 +21,9 @@ describe("AutofillInlineMenuContentService", () => {
   beforeEach(() => {
     globalThis.document.body.innerHTML = "";
     globalThis.requestIdleCallback = jest.fn((cb, options) => setTimeout(cb, 100));
+    domQueryService = mock<DomQueryService>();
     autofillInlineMenuContentService = new AutofillInlineMenuContentService();
-    autofillInit = new AutofillInit(null, autofillInlineMenuContentService);
+    autofillInit = new AutofillInit(domQueryService, null, autofillInlineMenuContentService);
     autofillInit.init();
     observeBodyMutationsSpy = jest.spyOn(
       autofillInlineMenuContentService["bodyElementMutationObserver"] as any,
diff --git a/apps/browser/src/autofill/overlay/notifications/abstractions/overlay-notifications-content.service.ts b/apps/browser/src/autofill/overlay/notifications/abstractions/overlay-notifications-content.service.ts
new file mode 100644
index 00000000000..c97acd15d4c
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/notifications/abstractions/overlay-notifications-content.service.ts
@@ -0,0 +1,40 @@
+export type NotificationTypeData = {
+  isVaultLocked?: boolean;
+  theme?: string;
+  removeIndividualVault?: boolean;
+  importType?: string;
+  launchTimestamp?: number;
+};
+
+export type NotificationsExtensionMessage = {
+  command: string;
+  data?: {
+    type?: string;
+    typeData?: NotificationTypeData;
+    height?: number;
+    error?: string;
+    fadeOutNotification?: boolean;
+  };
+};
+
+type OverlayNotificationsExtensionMessageParam = {
+  message: NotificationsExtensionMessage;
+};
+type OverlayNotificationsExtensionSenderParam = {
+  sender: chrome.runtime.MessageSender;
+};
+export type OverlayNotificationsExtensionMessageParams = OverlayNotificationsExtensionMessageParam &
+  OverlayNotificationsExtensionSenderParam;
+
+export type OverlayNotificationsExtensionMessageHandlers = {
+  [key: string]: ({ message, sender }: OverlayNotificationsExtensionMessageParams) => any;
+  openNotificationBar: ({ message }: OverlayNotificationsExtensionMessageParam) => void;
+  closeNotificationBar: ({ message }: OverlayNotificationsExtensionMessageParam) => void;
+  adjustNotificationBar: ({ message }: OverlayNotificationsExtensionMessageParam) => void;
+  saveCipherAttemptCompleted: ({ message }: OverlayNotificationsExtensionMessageParam) => void;
+};
+
+export interface OverlayNotificationsContentService {
+  messageHandlers: OverlayNotificationsExtensionMessageHandlers;
+  destroy: () => void;
+}
diff --git a/apps/browser/src/autofill/overlay/notifications/content/__snapshots__/overlay-notifications-content.service.spec.ts.snap b/apps/browser/src/autofill/overlay/notifications/content/__snapshots__/overlay-notifications-content.service.spec.ts.snap
new file mode 100644
index 00000000000..c20626212fa
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/notifications/content/__snapshots__/overlay-notifications-content.service.spec.ts.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OverlayNotificationsContentService opening the notification bar creates the notification bar elements and appends them to the body 1`] = `
+<div
+  id="bit-notification-bar"
+  style="height: 82px !important; width: 430px !important; max-width: calc(100% - 20px) !important; min-height: initial !important; top: 10px !important; right: 10px !important; padding: 0px !important; position: fixed !important; z-index: 2147483647 !important; visibility: visible !important; border-radius: 4px !important; background-color: transparent !important; overflow: hidden !important; transition: box-shadow 0.15s ease !important; transition-delay: 0.15s;"
+>
+  <iframe
+    id="bit-notification-bar-iframe"
+    src="chrome-extension://id/notification/bar.html"
+    style="width: 100% !important; height: 100% !important; border: 0px !important; display: block !important; position: relative !important; transition: transform 0.15s ease-out, opacity 0.15s ease !important; border-radius: 4px !important; transform: translateX(0) !important; opacity: 0;"
+  />
+</div>
+`;
diff --git a/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts
new file mode 100644
index 00000000000..f7240b33db4
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts
@@ -0,0 +1,264 @@
+import { mock, MockProxy } from "jest-mock-extended";
+
+import AutofillInit from "../../../content/autofill-init";
+import { DomQueryService } from "../../../services/abstractions/dom-query.service";
+import { flushPromises, sendMockExtensionMessage } from "../../../spec/testing-utils";
+import { NotificationTypeData } from "../abstractions/overlay-notifications-content.service";
+
+import { OverlayNotificationsContentService } from "./overlay-notifications-content.service";
+
+describe("OverlayNotificationsContentService", () => {
+  let overlayNotificationsContentService: OverlayNotificationsContentService;
+  let domQueryService: MockProxy<DomQueryService>;
+  let autofillInit: AutofillInit;
+  let bodyAppendChildSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    domQueryService = mock<DomQueryService>();
+    overlayNotificationsContentService = new OverlayNotificationsContentService();
+    autofillInit = new AutofillInit(
+      domQueryService,
+      null,
+      null,
+      overlayNotificationsContentService,
+    );
+    autofillInit.init();
+    bodyAppendChildSpy = jest.spyOn(globalThis.document.body, "appendChild");
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.clearAllTimers();
+  });
+
+  describe("opening the notification bar", () => {
+    it("skips opening the notification bar if the init data is not present in the message", async () => {
+      sendMockExtensionMessage({ command: "openNotificationBar" });
+      await flushPromises();
+
+      expect(bodyAppendChildSpy).not.toHaveBeenCalled();
+    });
+
+    it("closes the notification bar if the notification bar type has changed", async () => {
+      overlayNotificationsContentService["currentNotificationBarType"] = "add";
+      const closeNotificationBarSpy = jest.spyOn(
+        overlayNotificationsContentService as any,
+        "closeNotificationBar",
+      );
+
+      sendMockExtensionMessage({
+        command: "openNotificationBar",
+        data: {
+          type: "change",
+          typeData: mock<NotificationTypeData>(),
+        },
+      });
+      await flushPromises();
+
+      expect(closeNotificationBarSpy).toHaveBeenCalled();
+    });
+
+    it("creates the notification bar elements and appends them to the body", async () => {
+      sendMockExtensionMessage({
+        command: "openNotificationBar",
+        data: {
+          type: "change",
+          typeData: mock<NotificationTypeData>(),
+        },
+      });
+      await flushPromises();
+
+      expect(overlayNotificationsContentService["notificationBarElement"]).toMatchSnapshot();
+    });
+
+    it("sets up a slide in animation when the notification is fresh", async () => {
+      sendMockExtensionMessage({
+        command: "openNotificationBar",
+        data: {
+          type: "change",
+          typeData: mock<NotificationTypeData>({
+            launchTimestamp: Date.now(),
+          }),
+        },
+      });
+      await flushPromises();
+
+      expect(
+        overlayNotificationsContentService["notificationBarIframeElement"].style.transform,
+      ).toBe("translateX(100%)");
+    });
+
+    it("triggers the iframe animation on load of the element", async () => {
+      sendMockExtensionMessage({
+        command: "openNotificationBar",
+        data: {
+          type: "change",
+          typeData: mock<NotificationTypeData>(),
+        },
+      });
+      await flushPromises();
+
+      overlayNotificationsContentService["notificationBarIframeElement"].dispatchEvent(
+        new Event("load"),
+      );
+
+      expect(
+        overlayNotificationsContentService["notificationBarIframeElement"].style.transform,
+      ).toBe("translateX(0)");
+    });
+
+    it("sends an initialization message to the notification bar iframe", async () => {
+      sendMockExtensionMessage({
+        command: "openNotificationBar",
+        data: {
+          type: "change",
+          typeData: mock<NotificationTypeData>(),
+        },
+      });
+      await flushPromises();
+      const postMessageSpy = jest.spyOn(
+        overlayNotificationsContentService["notificationBarIframeElement"].contentWindow,
+        "postMessage",
+      );
+
+      globalThis.dispatchEvent(
+        new MessageEvent("message", {
+          data: { command: "someOtherMessage" },
+        }),
+      );
+      globalThis.dispatchEvent(
+        new MessageEvent("message", {
+          data: { command: "initNotificationBar" },
+          source: overlayNotificationsContentService["notificationBarIframeElement"].contentWindow,
+        }),
+      );
+      await flushPromises();
+
+      expect(postMessageSpy).toHaveBeenCalledTimes(1);
+      expect(postMessageSpy).toHaveBeenCalledWith(
+        {
+          command: "initNotificationBar",
+          initData: expect.any(Object),
+        },
+        "*",
+      );
+    });
+  });
+
+  describe("closing the notification bar", () => {
+    beforeEach(async () => {
+      sendMockExtensionMessage({
+        command: "openNotificationBar",
+        data: {
+          type: "change",
+          typeData: mock<NotificationTypeData>(),
+        },
+      });
+      await flushPromises();
+    });
+
+    it("triggers a fadeout of the notification bar", () => {
+      sendMockExtensionMessage({
+        command: "closeNotificationBar",
+        data: { fadeOutNotification: true },
+      });
+
+      expect(overlayNotificationsContentService["notificationBarIframeElement"].style.opacity).toBe(
+        "0",
+      );
+
+      jest.advanceTimersByTime(150);
+
+      expect(chrome.runtime.sendMessage).toHaveBeenCalledWith(
+        { command: "bgRemoveTabFromNotificationQueue" },
+        expect.any(Function),
+      );
+    });
+
+    it("closes the notification bar without a fadeout", () => {
+      jest.spyOn(globalThis, "setTimeout");
+      sendMockExtensionMessage({
+        command: "closeNotificationBar",
+        data: { fadeOutNotification: false },
+      });
+
+      expect(globalThis.setTimeout).not.toHaveBeenCalled();
+      expect(overlayNotificationsContentService["notificationBarIframeElement"]).toBeNull();
+    });
+  });
+
+  describe("adjusting the notification bar's height", () => {
+    beforeEach(async () => {
+      sendMockExtensionMessage({
+        command: "openNotificationBar",
+        data: {
+          type: "change",
+          typeData: mock<NotificationTypeData>(),
+        },
+      });
+      await flushPromises();
+    });
+
+    it("adjusts the height of the notification bar", () => {
+      sendMockExtensionMessage({
+        command: "adjustNotificationBar",
+        data: { height: 1000 },
+      });
+
+      expect(overlayNotificationsContentService["notificationBarElement"].style.height).toBe(
+        "1000px",
+      );
+    });
+  });
+
+  describe("when a save cipher attempt is completed", () => {
+    beforeEach(async () => {
+      sendMockExtensionMessage({
+        command: "openNotificationBar",
+        data: {
+          type: "change",
+          typeData: mock<NotificationTypeData>(),
+        },
+      });
+      await flushPromises();
+    });
+
+    it("sends a message to the notification bar iframe indicating that the save attempt completed", () => {
+      jest.spyOn(
+        overlayNotificationsContentService["notificationBarIframeElement"].contentWindow,
+        "postMessage",
+      );
+
+      sendMockExtensionMessage({
+        command: "saveCipherAttemptCompleted",
+        data: { error: "" },
+      });
+
+      expect(
+        overlayNotificationsContentService["notificationBarIframeElement"].contentWindow
+          .postMessage,
+      ).toHaveBeenCalledWith({ command: "saveCipherAttemptCompleted", error: "" }, "*");
+    });
+  });
+
+  describe("destroy", () => {
+    beforeEach(async () => {
+      sendMockExtensionMessage({
+        command: "openNotificationBar",
+        data: {
+          type: "change",
+          typeData: mock<NotificationTypeData>(),
+        },
+      });
+      await flushPromises();
+    });
+
+    it("triggers a closure of the notification bar", () => {
+      overlayNotificationsContentService.destroy();
+
+      expect(overlayNotificationsContentService["notificationBarElement"]).toBeNull();
+      expect(overlayNotificationsContentService["notificationBarIframeElement"]).toBeNull();
+    });
+  });
+});
diff --git a/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts
new file mode 100644
index 00000000000..98a820a3e5a
--- /dev/null
+++ b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts
@@ -0,0 +1,281 @@
+import { EVENTS } from "@bitwarden/common/autofill/constants";
+
+import { NotificationBarIframeInitData } from "../../../notification/abstractions/notification-bar";
+import { sendExtensionMessage, setElementStyles } from "../../../utils";
+import {
+  NotificationsExtensionMessage,
+  OverlayNotificationsContentService as OverlayNotificationsContentServiceInterface,
+  OverlayNotificationsExtensionMessageHandlers,
+} from "../abstractions/overlay-notifications-content.service";
+
+export class OverlayNotificationsContentService
+  implements OverlayNotificationsContentServiceInterface
+{
+  private notificationBarElement: HTMLElement | null = null;
+  private notificationBarIframeElement: HTMLIFrameElement | null = null;
+  private currentNotificationBarType: string | null = null;
+  private removeTabFromNotificationQueueTypes = new Set(["add", "change"]);
+  private notificationBarElementStyles: Partial<CSSStyleDeclaration> = {
+    height: "82px",
+    width: "430px",
+    maxWidth: "calc(100% - 20px)",
+    minHeight: "initial",
+    top: "10px",
+    right: "10px",
+    padding: "0",
+    position: "fixed",
+    zIndex: "2147483647",
+    visibility: "visible",
+    borderRadius: "4px",
+    border: "none",
+    backgroundColor: "transparent",
+    overflow: "hidden",
+    transition: "box-shadow 0.15s ease",
+    transitionDelay: "0.15s",
+  };
+  private notificationBarIframeElementStyles: Partial<CSSStyleDeclaration> = {
+    width: "100%",
+    height: "100%",
+    border: "0",
+    display: "block",
+    position: "relative",
+    transition: "transform 0.15s ease-out, opacity 0.15s ease",
+    borderRadius: "4px",
+  };
+  private readonly extensionMessageHandlers: OverlayNotificationsExtensionMessageHandlers = {
+    openNotificationBar: ({ message }) => this.handleOpenNotificationBarMessage(message),
+    closeNotificationBar: ({ message }) => this.handleCloseNotificationBarMessage(message),
+    adjustNotificationBar: ({ message }) => this.handleAdjustNotificationBarHeightMessage(message),
+    saveCipherAttemptCompleted: ({ message }) =>
+      this.handleSaveCipherAttemptCompletedMessage(message),
+  };
+
+  constructor() {
+    void sendExtensionMessage("checkNotificationQueue");
+  }
+
+  /**
+   * Returns the message handlers for the content script.
+   */
+  get messageHandlers() {
+    return this.extensionMessageHandlers;
+  }
+
+  /**
+   * Opens the notification bar with the provided init data. Will trigger a closure
+   * of the notification bar if the type of the notification bar changes.
+   *
+   * @param message - The message containing the initialization data for the notification bar.
+   */
+  private handleOpenNotificationBarMessage(message: NotificationsExtensionMessage) {
+    if (!message.data) {
+      return;
+    }
+
+    const { type, typeData } = message.data;
+    if (this.currentNotificationBarType && type !== this.currentNotificationBarType) {
+      this.closeNotificationBar();
+    }
+    const initData = {
+      type,
+      isVaultLocked: typeData.isVaultLocked,
+      theme: typeData.theme,
+      removeIndividualVault: typeData.removeIndividualVault,
+      importType: typeData.importType,
+      applyRedesign: true,
+      launchTimestamp: typeData.launchTimestamp,
+    };
+
+    if (globalThis.document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => this.openNotificationBar(initData));
+      return;
+    }
+
+    this.openNotificationBar(initData);
+  }
+
+  /**
+   * Closes the notification bar. If the message contains a flag to fade out the notification,
+   * the notification bar will fade out before being removed from the DOM.
+   *
+   * @param message - The message containing the data for closing the notification bar.
+   */
+  private handleCloseNotificationBarMessage(message: NotificationsExtensionMessage) {
+    if (message.data?.fadeOutNotification) {
+      setElementStyles(this.notificationBarIframeElement, { opacity: "0" }, true);
+      globalThis.setTimeout(() => this.closeNotificationBar(true), 150);
+      return;
+    }
+
+    this.closeNotificationBar(true);
+  }
+
+  /**
+   * Adjusts the height of the notification bar.
+   *
+   * @param message - The message containing the height of the notification bar.
+   */
+  private handleAdjustNotificationBarHeightMessage(message: NotificationsExtensionMessage) {
+    if (this.notificationBarElement && message.data?.height) {
+      this.notificationBarElement.style.height = `${message.data.height}px`;
+    }
+  }
+
+  /**
+   * Handles the message for when a save cipher attempt has completed. This triggers an update
+   * to the presentation of the notification bar, facilitating a visual indication of the save
+   * attempt's success or failure.
+   *
+   * @param message
+   * @private
+   */
+  private handleSaveCipherAttemptCompletedMessage(message: NotificationsExtensionMessage) {
+    this.sendMessageToNotificationBarIframe({
+      command: "saveCipherAttemptCompleted",
+      error: message.data?.error,
+    });
+  }
+
+  /**
+   * Opens the notification bar with the given initialization data.
+   *
+   * @param initData
+   * @private
+   */
+  private openNotificationBar(initData: NotificationBarIframeInitData) {
+    if (!this.notificationBarElement && !this.notificationBarIframeElement) {
+      this.createNotificationBarIframeElement(initData);
+      this.createNotificationBarElement();
+
+      this.setupInitNotificationBarMessageListener(initData);
+      globalThis.document.body.appendChild(this.notificationBarElement);
+    }
+  }
+
+  /**
+   * Creates the iframe element for the notification bar.
+   *
+   * @param initData - The initialization data for the notification bar.
+   */
+  private createNotificationBarIframeElement(initData: NotificationBarIframeInitData) {
+    const isNotificationFresh =
+      initData.launchTimestamp && Date.now() - initData.launchTimestamp < 250;
+
+    this.currentNotificationBarType = initData.type;
+    this.notificationBarIframeElement = globalThis.document.createElement("iframe");
+    this.notificationBarIframeElement.id = "bit-notification-bar-iframe";
+    this.notificationBarIframeElement.src = chrome.runtime.getURL("notification/bar.html");
+    setElementStyles(
+      this.notificationBarIframeElement,
+      {
+        ...this.notificationBarIframeElementStyles,
+        transform: isNotificationFresh ? "translateX(100%)" : "translateX(0)",
+        opacity: isNotificationFresh ? "1" : "0",
+      },
+      true,
+    );
+    this.notificationBarIframeElement.addEventListener(
+      EVENTS.LOAD,
+      this.handleNotificationBarIframeOnLoad,
+    );
+  }
+
+  /**
+   * Handles the load event for the notification bar iframe.
+   * This will animate the notification bar into view.
+   */
+  private handleNotificationBarIframeOnLoad = () => {
+    setElementStyles(
+      this.notificationBarIframeElement,
+      { transform: "translateX(0)", opacity: "1" },
+      true,
+    );
+    setElementStyles(this.notificationBarElement, { boxShadow: "2px 4px 6px 0px #0000001A" }, true);
+    this.notificationBarIframeElement.removeEventListener(
+      EVENTS.LOAD,
+      this.handleNotificationBarIframeOnLoad,
+    );
+  };
+
+  /**
+   * Creates the container for the notification bar iframe.
+   */
+  private createNotificationBarElement() {
+    if (this.notificationBarIframeElement) {
+      this.notificationBarElement = globalThis.document.createElement("div");
+      this.notificationBarElement.id = "bit-notification-bar";
+      setElementStyles(this.notificationBarElement, this.notificationBarElementStyles, true);
+      this.notificationBarElement.appendChild(this.notificationBarIframeElement);
+    }
+  }
+
+  /**
+   * Sets up the message listener for the initialization of the notification bar.
+   * This will send the initialization data to the notification bar iframe.
+   *
+   * @param initData - The initialization data for the notification bar.
+   */
+  private setupInitNotificationBarMessageListener(initData: NotificationBarIframeInitData) {
+    const handleInitNotificationBarMessage = (event: MessageEvent) => {
+      const { source, data } = event;
+      if (
+        source !== this.notificationBarIframeElement.contentWindow ||
+        data?.command !== "initNotificationBar"
+      ) {
+        return;
+      }
+
+      this.sendMessageToNotificationBarIframe({ command: "initNotificationBar", initData });
+      globalThis.removeEventListener("message", handleInitNotificationBarMessage);
+    };
+
+    if (this.notificationBarIframeElement) {
+      globalThis.addEventListener("message", handleInitNotificationBarMessage);
+    }
+  }
+
+  /**
+   * Closes the notification bar. Will trigger a removal of the notification bar
+   * from the background queue if the notification bar was closed by the user.
+   *
+   * @param closedByUserAction - Whether the notification bar was closed by the user.
+   */
+  private closeNotificationBar(closedByUserAction: boolean = false) {
+    if (!this.notificationBarElement && !this.notificationBarIframeElement) {
+      return;
+    }
+
+    this.notificationBarIframeElement.remove();
+    this.notificationBarIframeElement = null;
+
+    this.notificationBarElement.remove();
+    this.notificationBarElement = null;
+
+    if (
+      closedByUserAction &&
+      this.removeTabFromNotificationQueueTypes.has(this.currentNotificationBarType)
+    ) {
+      void sendExtensionMessage("bgRemoveTabFromNotificationQueue");
+    }
+
+    this.currentNotificationBarType = null;
+  }
+
+  /**
+   * Sends a message to the notification bar iframe.
+   *
+   * @param message - The message to send to the notification bar iframe.
+   */
+  private sendMessageToNotificationBarIframe(message: Record<string, any>) {
+    if (this.notificationBarIframeElement) {
+      this.notificationBarIframeElement.contentWindow.postMessage(message, "*");
+    }
+  }
+
+  /**
+   * Destroys the notification bar.
+   */
+  destroy() {
+    this.closeNotificationBar(true);
+  }
+}
diff --git a/apps/browser/src/autofill/services/abstractions/autofill-overlay-content.service.ts b/apps/browser/src/autofill/services/abstractions/autofill-overlay-content.service.ts
index d20cfa675c5..dedbccaa90f 100644
--- a/apps/browser/src/autofill/services/abstractions/autofill-overlay-content.service.ts
+++ b/apps/browser/src/autofill/services/abstractions/autofill-overlay-content.service.ts
@@ -16,6 +16,13 @@ export type SubFrameDataFromWindowMessage = SubFrameOffsetData & {
   subFrameDepth: number;
 };
 
+export type NotificationFormFieldData = {
+  uri: string;
+  username: string;
+  password: string;
+  newPassword: string;
+};
+
 export type AutofillOverlayContentExtensionMessageHandlers = {
   [key: string]: CallableFunction;
   openAutofillInlineMenu: ({ message }: AutofillExtensionMessageParam) => void;
@@ -32,13 +39,14 @@ export type AutofillOverlayContentExtensionMessageHandlers = {
   checkMostRecentlyFocusedFieldHasValue: () => boolean;
   setupRebuildSubFrameOffsetsListeners: () => void;
   destroyAutofillInlineMenuListeners: () => void;
+  getFormFieldDataForNotification: () => Promise<NotificationFormFieldData>;
 };
 
 export interface AutofillOverlayContentService {
   pageDetailsUpdateRequired: boolean;
   messageHandlers: AutofillOverlayContentExtensionMessageHandlers;
   init(): void;
-  setupInlineMenu(
+  setupOverlayListeners(
     autofillFieldElement: ElementWithOpId<FormFieldElement>,
     autofillFieldData: AutofillField,
     pageDetails: AutofillPageDetails,
diff --git a/apps/browser/src/autofill/services/abstractions/collect-autofill-content.service.ts b/apps/browser/src/autofill/services/abstractions/collect-autofill-content.service.ts
index df9b7a5f2f4..6bb77b9e7a4 100644
--- a/apps/browser/src/autofill/services/abstractions/collect-autofill-content.service.ts
+++ b/apps/browser/src/autofill/services/abstractions/collect-autofill-content.service.ts
@@ -18,16 +18,6 @@ interface CollectAutofillContentService {
   autofillFormElements: AutofillFormElements;
   getPageDetails(): Promise<AutofillPageDetails>;
   getAutofillFieldElementByOpid(opid: string): HTMLElement | null;
-  deepQueryElements<T>(
-    root: Document | ShadowRoot | Element,
-    selector: string,
-    isObservingShadowRoot?: boolean,
-  ): T[];
-  queryAllTreeWalkerNodes(
-    rootNode: Node,
-    filterCallback: CallableFunction,
-    isObservingShadowRoot?: boolean,
-  ): Node[];
   destroy(): void;
 }
 
diff --git a/apps/browser/src/autofill/services/abstractions/dom-query.service.ts b/apps/browser/src/autofill/services/abstractions/dom-query.service.ts
new file mode 100644
index 00000000000..8b0b2f5dbdd
--- /dev/null
+++ b/apps/browser/src/autofill/services/abstractions/dom-query.service.ts
@@ -0,0 +1,12 @@
+export interface DomQueryService {
+  deepQueryElements<T>(
+    root: Document | ShadowRoot | Element,
+    queryString: string,
+    mutationObserver?: MutationObserver,
+  ): T[];
+  queryAllTreeWalkerNodes(
+    rootNode: Node,
+    filterCallback: CallableFunction,
+    mutationObserver?: MutationObserver,
+  ): Node[];
+}
diff --git a/apps/browser/src/autofill/services/abstractions/inline-menu-field-qualifications.service.ts b/apps/browser/src/autofill/services/abstractions/inline-menu-field-qualifications.service.ts
index defec59b20f..58cfc253163 100644
--- a/apps/browser/src/autofill/services/abstractions/inline-menu-field-qualifications.service.ts
+++ b/apps/browser/src/autofill/services/abstractions/inline-menu-field-qualifications.service.ts
@@ -9,6 +9,8 @@ export type AutofillKeywordsMap = WeakMap<
   }
 >;
 
+export type SubmitButtonKeywordsMap = WeakMap<HTMLElement, string>;
+
 export interface InlineMenuFieldQualificationService {
   isUsernameField(field: AutofillField): boolean;
   isNewPasswordField(field: AutofillField): boolean;
@@ -39,4 +41,6 @@ export interface InlineMenuFieldQualificationService {
   isFieldForIdentityPhone(field: AutofillField): boolean;
   isFieldForIdentityEmail(field: AutofillField): boolean;
   isFieldForIdentityUsername(field: AutofillField): boolean;
+  isElementLoginSubmitButton(element: Element): boolean;
+  isElementChangePasswordSubmitButton(element: Element): boolean;
 }
diff --git a/apps/browser/src/autofill/services/autofill-constants.ts b/apps/browser/src/autofill/services/autofill-constants.ts
index 22b248be77b..992551256bb 100644
--- a/apps/browser/src/autofill/services/autofill-constants.ts
+++ b/apps/browser/src/autofill/services/autofill-constants.ts
@@ -811,3 +811,21 @@ export class IdentityAutoFillConstants {
     saskatchewan: "SK",
   };
 }
+
+export const SubmitLoginButtonNames: string[] = [
+  "login",
+  "signin",
+  "submit",
+  "continue",
+  "next",
+  "go",
+];
+
+export const SubmitChangePasswordButtonNames: string[] = [
+  "change",
+  "save",
+  "savepassword",
+  "updatepassword",
+  "changepassword",
+  "resetpassword",
+];
diff --git a/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts b/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts
index aedb9ae2d84..14c4f650c66 100644
--- a/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts
+++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.spec.ts
@@ -14,28 +14,38 @@ import AutofillField from "../models/autofill-field";
 import AutofillForm from "../models/autofill-form";
 import AutofillPageDetails from "../models/autofill-page-details";
 import { createAutofillFieldMock } from "../spec/autofill-mocks";
-import { flushPromises, postWindowMessage, sendMockExtensionMessage } from "../spec/testing-utils";
+import {
+  flushPromises,
+  mockQuerySelectorAllDefinedCall,
+  postWindowMessage,
+  sendMockExtensionMessage,
+} from "../spec/testing-utils";
 import { ElementWithOpId, FillableFormFieldElement, FormFieldElement } from "../types";
 
 import { AutoFillConstants } from "./autofill-constants";
 import { AutofillOverlayContentService } from "./autofill-overlay-content.service";
+import { DomQueryService } from "./dom-query.service";
 import { InlineMenuFieldQualificationService } from "./inline-menu-field-qualification.service";
 
 const defaultWindowReadyState = document.readyState;
 const defaultDocumentVisibilityState = document.visibilityState;
 describe("AutofillOverlayContentService", () => {
+  let domQueryService: DomQueryService;
   let autofillInit: AutofillInit;
   let inlineMenuFieldQualificationService: InlineMenuFieldQualificationService;
   let autofillOverlayContentService: AutofillOverlayContentService;
   let sendExtensionMessageSpy: jest.SpyInstance;
   const sendResponseSpy = jest.fn();
+  const mockQuerySelectorAll = mockQuerySelectorAllDefinedCall();
 
   beforeEach(() => {
     inlineMenuFieldQualificationService = new InlineMenuFieldQualificationService();
+    domQueryService = new DomQueryService();
     autofillOverlayContentService = new AutofillOverlayContentService(
+      domQueryService,
       inlineMenuFieldQualificationService,
     );
-    autofillInit = new AutofillInit(autofillOverlayContentService);
+    autofillInit = new AutofillInit(domQueryService, autofillOverlayContentService);
     autofillInit.init();
     sendExtensionMessageSpy = jest
       .spyOn(autofillOverlayContentService as any, "sendExtensionMessage")
@@ -66,6 +76,10 @@ describe("AutofillOverlayContentService", () => {
     jest.clearAllMocks();
   });
 
+  afterAll(() => {
+    mockQuerySelectorAll.mockRestore();
+  });
+
   describe("init", () => {
     let setupGlobalEventListenersSpy: jest.SpyInstance;
 
@@ -171,7 +185,7 @@ describe("AutofillOverlayContentService", () => {
         AutoFillConstants.ExcludedInlineMenuTypes.forEach(async (excludedType) => {
           autofillFieldData.type = excludedType;
 
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -186,7 +200,7 @@ describe("AutofillOverlayContentService", () => {
         autofillFieldData.htmlID = "another-type-of-field";
         autofillFieldData.placeholder = "another-type-of-field";
 
-        await autofillOverlayContentService.setupInlineMenu(
+        await autofillOverlayContentService.setupOverlayListeners(
           autofillFieldElement,
           autofillFieldData,
           pageDetailsMock,
@@ -202,7 +216,7 @@ describe("AutofillOverlayContentService", () => {
         autofillFieldData,
       );
 
-      await autofillOverlayContentService.setupInlineMenu(
+      await autofillOverlayContentService.setupOverlayListeners(
         autofillFieldElement,
         autofillFieldData,
         pageDetailsMock,
@@ -216,7 +230,7 @@ describe("AutofillOverlayContentService", () => {
         sendExtensionMessageSpy.mockResolvedValueOnce(undefined);
         autofillOverlayContentService["inlineMenuVisibility"] = undefined;
 
-        await autofillOverlayContentService.setupInlineMenu(
+        await autofillOverlayContentService.setupOverlayListeners(
           autofillFieldElement,
           autofillFieldData,
           pageDetailsMock,
@@ -232,7 +246,7 @@ describe("AutofillOverlayContentService", () => {
         sendExtensionMessageSpy.mockResolvedValueOnce(AutofillOverlayVisibility.OnFieldFocus);
         autofillOverlayContentService["inlineMenuVisibility"] = undefined;
 
-        await autofillOverlayContentService.setupInlineMenu(
+        await autofillOverlayContentService.setupOverlayListeners(
           autofillFieldElement,
           autofillFieldData,
           pageDetailsMock,
@@ -256,7 +270,7 @@ describe("AutofillOverlayContentService", () => {
           "op-1-username-field-focus-handler": focusHandler,
         };
 
-        await autofillOverlayContentService.setupInlineMenu(
+        await autofillOverlayContentService.setupOverlayListeners(
           autofillFieldElement,
           autofillFieldData,
           pageDetailsMock,
@@ -270,15 +284,20 @@ describe("AutofillOverlayContentService", () => {
         expect(autofillFieldElement.removeEventListener).toHaveBeenNthCalledWith(
           2,
           "input",
-          inputHandler,
+          expect.any(Function),
         );
         expect(autofillFieldElement.removeEventListener).toHaveBeenNthCalledWith(
           3,
+          "input",
+          inputHandler,
+        );
+        expect(autofillFieldElement.removeEventListener).toHaveBeenNthCalledWith(
+          4,
           "click",
           clickHandler,
         );
         expect(autofillFieldElement.removeEventListener).toHaveBeenNthCalledWith(
-          4,
+          5,
           "focus",
           focusHandler,
         );
@@ -286,7 +305,7 @@ describe("AutofillOverlayContentService", () => {
 
       describe("form field blur event listener", () => {
         beforeEach(async () => {
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -310,7 +329,7 @@ describe("AutofillOverlayContentService", () => {
 
       describe("form field keyup event listener", () => {
         beforeEach(async () => {
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -407,7 +426,7 @@ describe("AutofillOverlayContentService", () => {
           ) as ElementWithOpId<HTMLSpanElement>;
           jest.spyOn(autofillOverlayContentService as any, "storeModifiedFormElement");
 
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             spanAutofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -435,7 +454,7 @@ describe("AutofillOverlayContentService", () => {
           autofillOverlayContentService["mostRecentlyFocusedField"] =
             mock<ElementWithOpId<FormFieldElement>>();
 
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -450,7 +469,7 @@ describe("AutofillOverlayContentService", () => {
         });
 
         it("stores the field as a user filled field if the form field data indicates that it is for a username", async () => {
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -468,7 +487,7 @@ describe("AutofillOverlayContentService", () => {
           ) as ElementWithOpId<FormFieldElement>;
           autofillFieldData.type = "password";
 
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             passwordFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -484,7 +503,7 @@ describe("AutofillOverlayContentService", () => {
           jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(false);
           (autofillFieldElement as HTMLInputElement).value = "test";
 
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -506,7 +525,7 @@ describe("AutofillOverlayContentService", () => {
 
           (autofillFieldElement as HTMLInputElement).value = "test";
 
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -524,7 +543,7 @@ describe("AutofillOverlayContentService", () => {
           jest.spyOn(autofillOverlayContentService as any, "openInlineMenu");
           (autofillFieldElement as HTMLInputElement).value = "";
 
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -540,7 +559,7 @@ describe("AutofillOverlayContentService", () => {
           jest.spyOn(autofillOverlayContentService as any, "openInlineMenu");
           (autofillFieldElement as HTMLInputElement).value = "";
 
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -559,7 +578,7 @@ describe("AutofillOverlayContentService", () => {
           jest.spyOn(autofillOverlayContentService as any, "openInlineMenu");
           (autofillFieldElement as HTMLInputElement).value = "";
 
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -608,7 +627,7 @@ describe("AutofillOverlayContentService", () => {
             jest.spyOn(autofillOverlayContentService as any, "storeModifiedFormElement");
             jest.spyOn(autofillOverlayContentService as any, "hideInlineMenuListOnFilledField");
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               selectFieldElement,
               selectFieldData,
               pageDetailsMock,
@@ -627,7 +646,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores cardholder name fields", async () => {
             inputFieldData.autoCompleteType = "cc-name";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -641,7 +660,7 @@ describe("AutofillOverlayContentService", () => {
           });
 
           it("stores card number fields", async () => {
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -657,7 +676,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores card expiration month fields", async () => {
             inputFieldData.autoCompleteType = "cc-exp-month";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -673,7 +692,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores card expiration year fields", async () => {
             inputFieldData.autoCompleteType = "cc-exp-year";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -689,7 +708,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores card expiration date fields", async () => {
             inputFieldData.autoCompleteType = "cc-exp";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -705,7 +724,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores card cvv fields", async () => {
             inputFieldData.autoCompleteType = "cc-csc";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -742,7 +761,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores identity title fields", async () => {
             inputFieldData.autoCompleteType = "honorific-prefix";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -758,7 +777,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores first name fields", async () => {
             inputFieldData.autoCompleteType = "given-name";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -774,7 +793,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores identity middle name fields", async () => {
             inputFieldData.autoCompleteType = "additional-name";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -790,7 +809,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores identity last name fields", async () => {
             inputFieldData.autoCompleteType = "family-name";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -806,7 +825,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores identity full name fields", async () => {
             inputFieldData.autoCompleteType = "name";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -822,7 +841,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores identity address1 fields", async () => {
             inputFieldData.autoCompleteType = "address-line1";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -838,7 +857,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores identity address2 fields", async () => {
             inputFieldData.autoCompleteType = "address-line2";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -854,7 +873,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores identity address3 fields", async () => {
             inputFieldData.autoCompleteType = "address-line3";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -870,7 +889,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores identity city fields", async () => {
             inputFieldData.autoCompleteType = "address-level2";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -886,7 +905,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores identity state fields", async () => {
             inputFieldData.autoCompleteType = "address-level1";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -902,7 +921,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores identity postal code fields", async () => {
             inputFieldData.autoCompleteType = "postal-code";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -918,7 +937,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores identity country fields", async () => {
             inputFieldData.autoCompleteType = "country-name";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -934,7 +953,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores identity company fields", async () => {
             inputFieldData.autoCompleteType = "organization";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -950,7 +969,7 @@ describe("AutofillOverlayContentService", () => {
           it("stores identity phone fields", async () => {
             inputFieldData.autoCompleteType = "tel";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -969,7 +988,7 @@ describe("AutofillOverlayContentService", () => {
               .mockReturnValue(false);
             inputFieldData.autoCompleteType = "email";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -991,7 +1010,7 @@ describe("AutofillOverlayContentService", () => {
               .mockReturnValue(false);
             inputFieldData.autoCompleteType = "username";
 
-            await autofillOverlayContentService.setupInlineMenu(
+            await autofillOverlayContentService.setupOverlayListeners(
               inputFieldElement,
               inputFieldData,
               pageDetailsMock,
@@ -1014,7 +1033,7 @@ describe("AutofillOverlayContentService", () => {
           jest
             .spyOn(autofillOverlayContentService as any, "triggerFormFieldFocusedAction")
             .mockImplementation();
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -1071,7 +1090,7 @@ describe("AutofillOverlayContentService", () => {
           autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement;
           autofillOverlayContentService["inlineMenuVisibility"] =
             AutofillOverlayVisibility.OnFieldFocus;
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -1089,7 +1108,7 @@ describe("AutofillOverlayContentService", () => {
           ) as ElementWithOpId<HTMLSelectElement>;
           autofillFieldData.type = "select";
           autofillFieldData.autoCompleteType = "cc-type";
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             selectFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -1104,7 +1123,7 @@ describe("AutofillOverlayContentService", () => {
         });
 
         it("updates the most recently focused field", async () => {
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -1122,7 +1141,7 @@ describe("AutofillOverlayContentService", () => {
         it("removes the overlay list if the autofill visibility is set to onClick", async () => {
           autofillOverlayContentService["inlineMenuVisibility"] =
             AutofillOverlayVisibility.OnButtonClick;
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -1142,7 +1161,7 @@ describe("AutofillOverlayContentService", () => {
             "input",
           ) as ElementWithOpId<HTMLInputElement>;
           (autofillFieldElement as HTMLInputElement).value = "test";
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -1161,7 +1180,7 @@ describe("AutofillOverlayContentService", () => {
           (autofillFieldElement as HTMLInputElement).value = "";
           autofillOverlayContentService["inlineMenuVisibility"] =
             AutofillOverlayVisibility.OnFieldFocus;
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -1178,7 +1197,7 @@ describe("AutofillOverlayContentService", () => {
           autofillOverlayContentService["inlineMenuVisibility"] =
             AutofillOverlayVisibility.OnFieldFocus;
           jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(true);
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -1197,7 +1216,7 @@ describe("AutofillOverlayContentService", () => {
           jest
             .spyOn(autofillOverlayContentService as any, "isInlineMenuCiphersPopulated")
             .mockReturnValue(true);
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -1215,7 +1234,7 @@ describe("AutofillOverlayContentService", () => {
       describe("hidden form field focus event", () => {
         it("sets up the inline menu listeners if the autofill field data is in the cache", async () => {
           autofillFieldData.viewable = false;
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -1249,7 +1268,7 @@ describe("AutofillOverlayContentService", () => {
 
         it("skips setting up the inline menu listeners if the autofill field data is not in the cache", async () => {
           autofillFieldData.viewable = false;
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             autofillFieldData,
             pageDetailsMock,
@@ -1267,13 +1286,45 @@ describe("AutofillOverlayContentService", () => {
             expect.any(Function),
           );
           expect(autofillFieldElement.addEventListener).not.toHaveBeenCalledWith(
+            EVENTS.CLICK,
+            expect.any(Function),
+          );
+          expect(autofillFieldElement.removeEventListener).toHaveBeenCalled();
+        });
+      });
+
+      describe("hidden form field input event", () => {
+        it("sets up the inline menu listeners if the autofill field data is in the cache", async () => {
+          autofillFieldData.viewable = false;
+          await autofillOverlayContentService.setupOverlayListeners(
+            autofillFieldElement,
+            autofillFieldData,
+            pageDetailsMock,
+          );
+
+          autofillFieldElement.dispatchEvent(new Event("input"));
+          await flushPromises();
+
+          expect(autofillFieldElement.addEventListener).toHaveBeenCalledWith(
+            EVENTS.BLUR,
+            expect.any(Function),
+          );
+          expect(autofillFieldElement.addEventListener).toHaveBeenCalledWith(
+            EVENTS.KEYUP,
+            expect.any(Function),
+          );
+          expect(autofillFieldElement.addEventListener).toHaveBeenCalledWith(
             EVENTS.INPUT,
             expect.any(Function),
           );
-          expect(autofillFieldElement.addEventListener).not.toHaveBeenCalledWith(
+          expect(autofillFieldElement.addEventListener).toHaveBeenCalledWith(
             EVENTS.CLICK,
             expect.any(Function),
           );
+          expect(autofillFieldElement.addEventListener).toHaveBeenCalledWith(
+            EVENTS.FOCUS,
+            expect.any(Function),
+          );
           expect(autofillFieldElement.removeEventListener).toHaveBeenCalled();
         });
       });
@@ -1299,7 +1350,7 @@ describe("AutofillOverlayContentService", () => {
         });
 
         it("sets up the input card field listeners", async () => {
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             inputCardFieldData,
             pageDetailsMock,
@@ -1336,7 +1387,7 @@ describe("AutofillOverlayContentService", () => {
           selectCardFieldElement.opid = "op-2";
           jest.spyOn(selectCardFieldElement, "addEventListener");
 
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             selectCardFieldElement,
             selectCardFieldData,
             pageDetailsMock,
@@ -1385,7 +1436,7 @@ describe("AutofillOverlayContentService", () => {
         });
 
         it("sets up the field listeners on the field", async () => {
-          await autofillOverlayContentService.setupInlineMenu(
+          await autofillOverlayContentService.setupOverlayListeners(
             autofillFieldElement,
             inputAccountFieldData,
             pageDetailsMock,
@@ -1419,6 +1470,187 @@ describe("AutofillOverlayContentService", () => {
       });
     });
 
+    describe("sets up form submission event listeners", () => {
+      describe("listeners set up on a fields with a form", () => {
+        let form: HTMLFormElement;
+
+        beforeEach(() => {
+          form = document.getElementById("validFormId") as HTMLFormElement;
+        });
+
+        it("sends a `formFieldSubmitted` message to the background on submission of the form", async () => {
+          await autofillOverlayContentService.setupOverlayListeners(
+            autofillFieldElement,
+            autofillFieldData,
+            pageDetailsMock,
+          );
+          form.dispatchEvent(new Event("submit"));
+
+          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("formFieldSubmitted", {
+            uri: globalThis.document.URL,
+            username: "",
+            password: "",
+            newPassword: "",
+          });
+        });
+
+        describe("triggering submission through interaction of a generic input element", () => {
+          let genericSubmitElement: HTMLInputElement;
+
+          beforeEach(() => {
+            genericSubmitElement = document.createElement("input");
+            genericSubmitElement.type = "submit";
+            genericSubmitElement.value = "Login In";
+            form.appendChild(genericSubmitElement);
+          });
+
+          it("ignores keyup events triggered on a generic input element if the key is not `Enter` or `Space`", async () => {
+            await autofillOverlayContentService.setupOverlayListeners(
+              autofillFieldElement,
+              autofillFieldData,
+              pageDetailsMock,
+            );
+            genericSubmitElement.dispatchEvent(new KeyboardEvent("keyup", { code: "Tab" }));
+
+            expect(sendExtensionMessageSpy).not.toHaveBeenCalledWith(
+              "formFieldSubmitted",
+              expect.any(Object),
+            );
+          });
+
+          it("sends a `formFieldSubmitted` message to the background on interaction of a generic input element", async () => {
+            await autofillOverlayContentService.setupOverlayListeners(
+              autofillFieldElement,
+              autofillFieldData,
+              pageDetailsMock,
+            );
+            genericSubmitElement.dispatchEvent(new KeyboardEvent("keyup", { code: "Enter" }));
+
+            expect(sendExtensionMessageSpy).toHaveBeenCalledWith(
+              "formFieldSubmitted",
+              expect.any(Object),
+            );
+          });
+        });
+      });
+
+      describe("listeners set up on a fields without a form", () => {
+        let autofillFieldElement: ElementWithOpId<FormFieldElement>;
+        let autofillFieldData: AutofillField;
+        let pageDetailsMock: AutofillPageDetails;
+
+        beforeEach(() => {
+          document.body.innerHTML = `
+          <div id="form-div">
+            <div>
+              <input type="password" id="password-field-1" placeholder="new password" />
+            </div>
+            <div>
+              <input type="password" id="password-field-2" placeholder="confirm new password" />
+            </div>
+            <button id="button-el">Change Password</button>
+          </div>
+          `;
+
+          autofillFieldElement = document.getElementById(
+            "password-field-1",
+          ) as ElementWithOpId<FormFieldElement>;
+          autofillFieldElement.opid = "op-1";
+          jest.spyOn(autofillFieldElement, "addEventListener");
+          jest.spyOn(autofillFieldElement, "removeEventListener");
+          autofillFieldData = createAutofillFieldMock({
+            opid: "new-password-field",
+            placeholder: "new password",
+            autoCompleteType: "new-password",
+            elementNumber: 1,
+            form: "",
+          });
+          const passwordFieldData = createAutofillFieldMock({
+            opid: "confirm-new-password-field",
+            elementNumber: 2,
+            autoCompleteType: "new-password",
+            type: "password",
+            form: "",
+          });
+          pageDetailsMock = mock<AutofillPageDetails>({
+            forms: {},
+            fields: [autofillFieldData, passwordFieldData],
+          });
+        });
+
+        it("skips triggering submission if a button is not found", async () => {
+          const submitButton = document.querySelector("button");
+          submitButton.remove();
+
+          await autofillOverlayContentService.setupOverlayListeners(
+            autofillFieldElement,
+            autofillFieldData,
+            pageDetailsMock,
+          );
+          submitButton.dispatchEvent(new KeyboardEvent("keyup", { code: "Enter" }));
+
+          expect(sendExtensionMessageSpy).not.toHaveBeenCalledWith(
+            "formFieldSubmitted",
+            expect.any(Object),
+          );
+        });
+
+        it("triggers submission through interaction of a submit button", async () => {
+          const submitButton = document.querySelector("button");
+          await autofillOverlayContentService.setupOverlayListeners(
+            autofillFieldElement,
+            autofillFieldData,
+            pageDetailsMock,
+          );
+          submitButton.dispatchEvent(new KeyboardEvent("keyup", { code: "Enter" }));
+
+          expect(sendExtensionMessageSpy).toHaveBeenCalledWith(
+            "formFieldSubmitted",
+            expect.any(Object),
+          );
+        });
+
+        it("captures submit buttons when the field is structured within a shadow DOM", async () => {
+          document.body.innerHTML = `<div id="form-div">
+            <div id="shadow-root"></div>
+            <button id="button-el">Change Password</button>
+          </div>`;
+          const shadowRoot = document.getElementById("shadow-root").attachShadow({ mode: "open" });
+          shadowRoot.innerHTML = `
+            <input type="password" id="password-field-1" placeholder="new password" />
+          `;
+          autofillFieldElement = shadowRoot.getElementById(
+            "password-field-1",
+          ) as ElementWithOpId<FormFieldElement>;
+          autofillFieldElement.opid = "op-1";
+          autofillFieldData = createAutofillFieldMock({
+            opid: "new-password-field",
+            placeholder: "new password",
+            autoCompleteType: "new-password",
+            elementNumber: 1,
+            form: "",
+          });
+          pageDetailsMock = mock<AutofillPageDetails>({
+            forms: {},
+            fields: [autofillFieldData],
+          });
+          const buttonElement = document.getElementById("button-el");
+
+          await autofillOverlayContentService.setupOverlayListeners(
+            autofillFieldElement,
+            autofillFieldData,
+            pageDetailsMock,
+          );
+          buttonElement.dispatchEvent(new KeyboardEvent("keyup", { code: "Enter" }));
+
+          expect(sendExtensionMessageSpy).toHaveBeenCalledWith(
+            "formFieldSubmitted",
+            expect.any(Object),
+          );
+        });
+      });
+    });
+
     it("skips triggering the form field focused handler if the document is not focused", async () => {
       jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(false);
       const documentRoot = autofillFieldElement.getRootNode() as Document;
@@ -1427,7 +1659,7 @@ describe("AutofillOverlayContentService", () => {
         writable: true,
       });
 
-      await autofillOverlayContentService.setupInlineMenu(
+      await autofillOverlayContentService.setupOverlayListeners(
         autofillFieldElement,
         autofillFieldData,
         pageDetailsMock,
@@ -1444,7 +1676,7 @@ describe("AutofillOverlayContentService", () => {
         writable: true,
       });
 
-      await autofillOverlayContentService.setupInlineMenu(
+      await autofillOverlayContentService.setupOverlayListeners(
         autofillFieldElement,
         autofillFieldData,
         pageDetailsMock,
@@ -1459,7 +1691,7 @@ describe("AutofillOverlayContentService", () => {
     it("sets the most recently focused field to the passed form field element if the value is not set", async () => {
       autofillOverlayContentService["mostRecentlyFocusedField"] = undefined;
 
-      await autofillOverlayContentService.setupInlineMenu(
+      await autofillOverlayContentService.setupOverlayListeners(
         autofillFieldElement,
         autofillFieldData,
         pageDetailsMock,
@@ -2345,6 +2577,39 @@ describe("AutofillOverlayContentService", () => {
         expect(autofillOverlayContentService.destroy).toHaveBeenCalled();
       });
     });
+
+    describe("getFormFieldDataForNotification message handler", () => {
+      it("returns early if a field is currently focused", async () => {
+        jest
+          .spyOn(autofillOverlayContentService as any, "isFieldCurrentlyFocused")
+          .mockReturnValue(true);
+
+        sendMockExtensionMessage(
+          { command: "getFormFieldDataForNotification" },
+          mock<chrome.runtime.MessageSender>(),
+          sendResponseSpy,
+        );
+        await flushPromises();
+
+        expect(sendResponseSpy).toHaveBeenCalledWith(undefined);
+      });
+
+      it("returns the form field data for a notification", async () => {
+        sendMockExtensionMessage(
+          { command: "getFormFieldDataForNotification" },
+          mock<chrome.runtime.MessageSender>(),
+          sendResponseSpy,
+        );
+        await flushPromises();
+
+        expect(sendResponseSpy).toHaveBeenCalledWith({
+          uri: globalThis.document.URL,
+          username: "",
+          password: "",
+          newPassword: "",
+        });
+      });
+    });
   });
 
   describe("destroy", () => {
@@ -2381,7 +2646,7 @@ describe("AutofillOverlayContentService", () => {
         forms: { validFormId: mock<AutofillForm>() },
         fields: [autofillFieldData, passwordFieldData],
       });
-      void autofillOverlayContentService.setupInlineMenu(
+      void autofillOverlayContentService.setupOverlayListeners(
         autofillFieldElement,
         autofillFieldData,
         pageDetailsMock,
@@ -2449,5 +2714,15 @@ describe("AutofillOverlayContentService", () => {
         autofillOverlayContentService["closeInlineMenuOnRedirectTimeout"],
       );
     });
+
+    it("deletes all cached user filled field DOM elements", () => {
+      autofillOverlayContentService["userFilledFields"] = {
+        username: autofillFieldElement as FillableFormFieldElement,
+      };
+
+      autofillOverlayContentService.destroy();
+
+      expect(autofillOverlayContentService["userFilledFields"]).toEqual(null);
+    });
   });
 });
diff --git a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
index d0d1a79e293..a78e9e0a6ef 100644
--- a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
+++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
@@ -7,6 +7,7 @@ import {
   EVENTS,
   AutofillOverlayVisibility,
   AUTOFILL_OVERLAY_HANDLE_REPOSITION,
+  AUTOFILL_TRIGGER_FORM_FIELD_SUBMIT,
 } from "@bitwarden/common/autofill/constants";
 import { CipherType } from "@bitwarden/common/vault/enums";
 
@@ -38,9 +39,11 @@ import {
 import {
   AutofillOverlayContentExtensionMessageHandlers,
   AutofillOverlayContentService as AutofillOverlayContentServiceInterface,
+  NotificationFormFieldData,
   OpenAutofillInlineMenuOptions,
   SubFrameDataFromWindowMessage,
 } from "./abstractions/autofill-overlay-content.service";
+import { DomQueryService } from "./abstractions/dom-query.service";
 import { InlineMenuFieldQualificationService } from "./abstractions/inline-menu-field-qualifications.service";
 import { AutoFillConstants } from "./autofill-constants";
 
@@ -52,6 +55,9 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
   private formFieldElements: Map<ElementWithOpId<FormFieldElement>, AutofillField> = new Map();
   private hiddenFormFieldElements: WeakMap<ElementWithOpId<FormFieldElement>, AutofillField> =
     new WeakMap();
+  private formElements: Set<HTMLFormElement> = new Set();
+  private submitElements: Set<HTMLElement> = new Set();
+  private fieldsWithSubmitElements: WeakMap<FillableFormFieldElement, HTMLElement> = new WeakMap();
   private ignoredFieldTypes: Set<string> = new Set(AutoFillConstants.ExcludedInlineMenuTypes);
   private userFilledFields: Record<string, FillableFormFieldElement> = {};
   private authStatus: AuthenticationStatus;
@@ -79,6 +85,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
     checkMostRecentlyFocusedFieldHasValue: () => this.mostRecentlyFocusedFieldHasValue(),
     setupRebuildSubFrameOffsetsListeners: () => this.setupRebuildSubFrameOffsetsListeners(),
     destroyAutofillInlineMenuListeners: () => this.destroy(),
+    getFormFieldDataForNotification: () => this.handleGetFormFieldDataForNotificationMessage(),
   };
   private readonly cardFieldQualifiers: Record<string, CallableFunction> = {
     [AutofillFieldQualifier.cardholderName]:
@@ -126,10 +133,14 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
       this.inlineMenuFieldQualificationService.isFieldForIdentityEmail,
     [AutofillFieldQualifier.identityUsername]:
       this.inlineMenuFieldQualificationService.isFieldForIdentityUsername,
-    [AutofillFieldQualifier.password]: this.inlineMenuFieldQualificationService.isNewPasswordField,
+    [AutofillFieldQualifier.newPassword]:
+      this.inlineMenuFieldQualificationService.isNewPasswordField,
   };
 
-  constructor(private inlineMenuFieldQualificationService: InlineMenuFieldQualificationService) {}
+  constructor(
+    private domQueryService: DomQueryService,
+    private inlineMenuFieldQualificationService: InlineMenuFieldQualificationService,
+  ) {}
 
   /**
    * Initializes the autofill overlay content service by setting up the mutation observers.
@@ -160,7 +171,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
    * @param autofillFieldData - Autofill field data captured from the form field element.
    * @param pageDetails - The collected page details from the tab.
    */
-  async setupInlineMenu(
+  async setupOverlayListeners(
     formFieldElement: ElementWithOpId<FormFieldElement>,
     autofillFieldData: AutofillField,
     pageDetails: AutofillPageDetails,
@@ -176,7 +187,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
       return;
     }
 
-    await this.setupInlineMenuOnQualifiedField(formFieldElement, autofillFieldData);
+    await this.setupOverlayListenersOnQualifiedField(formFieldElement, autofillFieldData);
   }
 
   /**
@@ -250,11 +261,13 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
    */
   async addNewVaultItem({ addNewCipherType }: AutofillExtensionMessage) {
     const command = "autofillOverlayAddNewVaultItem";
+    const password =
+      this.userFilledFields["newPassword"]?.value || this.userFilledFields["password"]?.value;
 
     if (addNewCipherType === CipherType.Login) {
       const login: NewLoginCipherData = {
         username: this.userFilledFields["username"]?.value || "",
-        password: this.userFilledFields["password"]?.value || "",
+        password: password || "",
         uri: globalThis.document.URL,
         hostname: globalThis.document.location.hostname,
       };
@@ -394,6 +407,214 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
     }
   }
 
+  /**
+   * Sets up listeners on the submit button that triggers a submission of the field's form.
+   *
+   * @param formFieldElement - The form field element to set up the submit button listeners for.
+   * @param autofillFieldData - Autofill field data captured from the form field element.
+   */
+  private setupFormSubmissionEventListeners(
+    formFieldElement: ElementWithOpId<FormFieldElement>,
+    autofillFieldData: AutofillField,
+  ) {
+    if (
+      !elementIsFillableFormField(formFieldElement) ||
+      autofillFieldData.filledByCipherType === CipherType.Card
+    ) {
+      return;
+    }
+
+    if (autofillFieldData.form) {
+      this.setupSubmitListenerOnFieldWithForms(formFieldElement);
+      return;
+    }
+
+    this.setupSubmitListenerOnFormlessField(formFieldElement);
+  }
+
+  /**
+   * Sets up the submit listener on the form field element that contains a form element.
+   * Will establish on submit event listeners on the form element and click listeners on
+   * the submit button element that triggers the submission of the form.
+   *
+   * @param formFieldElement - The form field element to set up the submit listener for.
+   */
+  private setupSubmitListenerOnFieldWithForms(formFieldElement: FillableFormFieldElement) {
+    const formElement = formFieldElement.form;
+    if (formElement && !this.formElements.has(formElement)) {
+      this.formElements.add(formElement);
+      formElement.addEventListener(EVENTS.SUBMIT, this.handleFormFieldSubmitEvent);
+
+      const closesSubmitButton = this.findSubmitButton(formElement);
+      this.setupSubmitButtonEventListeners(closesSubmitButton);
+    }
+  }
+
+  /**
+   * Sets up the submit listener on the form field element that does not contain a form element.
+   * Will establish a submit button event listener on the closest formless submit button element.
+   *
+   * @param formFieldElement - The form field element to set up the submit listener for.
+   */
+  private setupSubmitListenerOnFormlessField(formFieldElement: FillableFormFieldElement) {
+    if (formFieldElement && !this.fieldsWithSubmitElements.has(formFieldElement)) {
+      const closesSubmitButton = this.findClosestFormlessSubmitButton(formFieldElement);
+      this.setupSubmitButtonEventListeners(closesSubmitButton);
+    }
+  }
+
+  /**
+   * Finds the closest formless submit button element to the form field element.
+   *
+   * @param formFieldElement - The form field element to find the closest formless submit button for.
+   */
+  private findClosestFormlessSubmitButton(
+    formFieldElement: FillableFormFieldElement,
+  ): HTMLElement | null {
+    let currentElement: HTMLElement = formFieldElement;
+
+    while (currentElement && currentElement.tagName !== "HTML") {
+      const submitButton = this.findSubmitButton(currentElement);
+      if (submitButton) {
+        this.formFieldElements.forEach((_, element) => {
+          if (currentElement.contains(element)) {
+            this.fieldsWithSubmitElements.set(element as FillableFormFieldElement, submitButton);
+          }
+        });
+
+        return submitButton;
+      }
+
+      if (!currentElement.parentElement && currentElement.getRootNode() instanceof ShadowRoot) {
+        currentElement = (currentElement.getRootNode() as ShadowRoot).host as any;
+        continue;
+      }
+
+      currentElement = currentElement.parentElement;
+    }
+
+    return null;
+  }
+
+  /**
+   * Finds the submit button element within the provided element. Will attempt to find a generic
+   * submit element before attempting to find a button or button-like element.
+   *
+   * @param element - The element to find the submit button within.
+   */
+  private findSubmitButton(element: HTMLElement): HTMLElement | null {
+    const genericSubmitElement = this.querySubmitButtonElement(element, "[type='submit']");
+    if (genericSubmitElement) {
+      return genericSubmitElement;
+    }
+
+    const submitButtonElement = this.querySubmitButtonElement(element, "button, [type='button']");
+    if (submitButtonElement) {
+      return submitButtonElement;
+    }
+  }
+
+  /**
+   * Queries the provided element for a submit button element using the provided selector.
+   *
+   * @param element - The element to query for a submit button.
+   * @param selector - The selector to use to query the element for a submit button.
+   */
+  private querySubmitButtonElement(element: HTMLElement, selector: string) {
+    const submitButtonElements = this.domQueryService.deepQueryElements<HTMLButtonElement>(
+      element,
+      selector,
+    );
+    for (let index = 0; index < submitButtonElements.length; index++) {
+      const submitElement = submitButtonElements[index];
+      if (this.isElementSubmitButton(submitElement)) {
+        return submitElement;
+      }
+    }
+  }
+
+  /**
+   * Determines if the provided element is a submit button element.
+   *
+   * @param element - The element to determine if it is a submit button.
+   */
+  private isElementSubmitButton(element: HTMLElement) {
+    return (
+      this.inlineMenuFieldQualificationService.isElementLoginSubmitButton(element) ||
+      this.inlineMenuFieldQualificationService.isElementChangePasswordSubmitButton(element)
+    );
+  }
+
+  /**
+   * Sets up the event listeners that trigger an indication that a form has been submitted.
+   *
+   * @param submitButton - The submit button element to set up the event listeners for.
+   */
+  private setupSubmitButtonEventListeners = (submitButton: HTMLElement) => {
+    if (!submitButton || this.submitElements.has(submitButton)) {
+      return;
+    }
+
+    this.submitElements.add(submitButton);
+
+    const handler = this.useEventHandlersMemo(
+      throttle(this.handleSubmitButtonInteraction, 150),
+      AUTOFILL_TRIGGER_FORM_FIELD_SUBMIT,
+    );
+    submitButton.addEventListener(EVENTS.KEYUP, handler);
+    globalThis.document.addEventListener(EVENTS.CLICK, handler);
+    globalThis.document.addEventListener(EVENTS.MOUSEUP, handler);
+  };
+
+  /**
+   * Handles click and keyup events that trigger behavior for a submit button element.
+   *
+   * @param event - The event that triggered the submit button interaction.
+   */
+  private handleSubmitButtonInteraction = (event: PointerEvent) => {
+    if (
+      !this.submitElements.has(event.target as HTMLElement) ||
+      (event.type === "keyup" &&
+        !["Enter", "Space"].includes((event as unknown as KeyboardEvent).code))
+    ) {
+      return;
+    }
+
+    this.handleFormFieldSubmitEvent();
+  };
+
+  /**
+   * Handles the repositioning of the autofill overlay when the form is submitted.
+   */
+  private handleFormFieldSubmitEvent = () => {
+    void this.sendExtensionMessage("formFieldSubmitted", this.getFormFieldDataForNotification());
+  };
+
+  /**
+   * Handles capturing the form field data for a notification message. Is triggered from the
+   * background script when a POST request is encountered. Will not trigger this behavior
+   * in the case where the user is still typing in the field.
+   */
+  private handleGetFormFieldDataForNotificationMessage = async () => {
+    if (await this.isFieldCurrentlyFocused()) {
+      return;
+    }
+
+    return this.getFormFieldDataForNotification();
+  };
+
+  /**
+   * Returns the form field data used for add login and change password notifications.
+   */
+  private getFormFieldDataForNotification = (): NotificationFormFieldData => {
+    return {
+      uri: globalThis.document.URL,
+      username: this.userFilledFields["username"]?.value || "",
+      password: this.userFilledFields["password"]?.value || "",
+      newPassword: this.userFilledFields["newPassword"]?.value || "",
+    };
+  };
+
   /**
    * Helper method that facilitates registration of an event handler to a form field element.
    *
@@ -437,7 +658,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
    *
    * @param event - The keyup event.
    */
-  private handleFormFieldKeyupEvent = async (event: KeyboardEvent) => {
+  private handleFormFieldKeyupEvent = async (event: globalThis.KeyboardEvent) => {
     const eventCode = event.code;
     if (eventCode === "Escape") {
       void this.sendExtensionMessage("closeAutofillInlineMenu", {
@@ -614,15 +835,16 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
       return;
     }
 
+    const clonedNode = formFieldElement.cloneNode() as FillableFormFieldElement;
     const identityLoginFields: AutofillFieldQualifierType[] = [
       AutofillFieldQualifier.identityUsername,
       AutofillFieldQualifier.identityEmail,
     ];
     if (identityLoginFields.includes(autofillFieldData.fieldQualifier)) {
-      this.userFilledFields[AutofillFieldQualifier.username] = formFieldElement;
+      this.userFilledFields[AutofillFieldQualifier.username] = clonedNode;
     }
 
-    this.userFilledFields[autofillFieldData.fieldQualifier] = formFieldElement;
+    this.userFilledFields[autofillFieldData.fieldQualifier] = clonedNode;
   }
 
   /**
@@ -947,6 +1169,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
   ) {
     this.hiddenFormFieldElements.set(formFieldElement, autofillFieldData);
     formFieldElement.addEventListener(EVENTS.FOCUS, this.handleHiddenFieldFocusEvent);
+    formFieldElement.addEventListener(EVENTS.INPUT, this.handleHiddenFieldInputEvent);
   }
 
   /**
@@ -957,6 +1180,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
    */
   private removeHiddenFieldFallbackListener(formFieldElement: ElementWithOpId<FormFieldElement>) {
     formFieldElement.removeEventListener(EVENTS.FOCUS, this.handleHiddenFieldFocusEvent);
+    formFieldElement.removeEventListener(EVENTS.INPUT, this.handleHiddenFieldInputEvent);
     this.hiddenFormFieldElements.delete(formFieldElement);
   }
 
@@ -968,12 +1192,36 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
    */
   private handleHiddenFieldFocusEvent = (event: FocusEvent) => {
     const formFieldElement = event.target as ElementWithOpId<FormFieldElement>;
+    this.handleHiddenElementFallbackEvent(formFieldElement);
+  };
+
+  /**
+   * Handles an input event on a hidden field. When triggered, the inline menu is set up on the
+   * field. We also capture the input value for the field to facilitate presentation of the value
+   * for the field in the notification bar.
+   *
+   * @param event - The input event.
+   */
+  private handleHiddenFieldInputEvent = async (event: InputEvent) => {
+    const formFieldElement = event.target as ElementWithOpId<FormFieldElement>;
+    this.handleHiddenElementFallbackEvent(formFieldElement);
+    await this.triggerFormFieldInput(formFieldElement);
+  };
+
+  /**
+   * Handles updating the hidden element when a fallback event is triggered.
+   *
+   * @param formFieldElement - The form field element that triggered the focus event.
+   */
+  private handleHiddenElementFallbackEvent = (
+    formFieldElement: ElementWithOpId<FormFieldElement>,
+  ) => {
     const autofillFieldData = this.hiddenFormFieldElements.get(formFieldElement);
     if (autofillFieldData) {
       autofillFieldData.readonly = getAttributeBoolean(formFieldElement, "disabled");
       autofillFieldData.disabled = getAttributeBoolean(formFieldElement, "disabled");
       autofillFieldData.viewable = true;
-      void this.setupInlineMenuOnQualifiedField(formFieldElement, autofillFieldData);
+      void this.setupOverlayListenersOnQualifiedField(formFieldElement, autofillFieldData);
     }
 
     this.removeHiddenFieldFallbackListener(formFieldElement);
@@ -985,7 +1233,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
    * @param formFieldElement - The form field element to set up the inline menu on.
    * @param autofillFieldData - Autofill field data captured from the form field element.
    */
-  private async setupInlineMenuOnQualifiedField(
+  private async setupOverlayListenersOnQualifiedField(
     formFieldElement: ElementWithOpId<FormFieldElement>,
     autofillFieldData: AutofillField,
   ) {
@@ -1000,6 +1248,7 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
     }
 
     this.setupFormFieldElementEventListeners(formFieldElement);
+    this.setupFormSubmissionEventListeners(formFieldElement, autofillFieldData);
 
     if (
       globalThis.document.hasFocus() &&
@@ -1072,6 +1321,13 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
     return (await this.sendExtensionMessage("checkIsAutofillInlineMenuListVisible")) === true;
   }
 
+  /**
+   * Checks if the field is currently focused within the top frame.
+   */
+  private async isFieldCurrentlyFocused() {
+    return (await this.sendExtensionMessage("checkIsFieldCurrentlyFocused")) === true;
+  }
+
   /**
    * Checks if the current tab contains ciphers that can be used to populate the inline menu.
    */
@@ -1465,6 +1721,12 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
       formFieldElement.removeEventListener(EVENTS.KEYUP, this.handleFormFieldKeyupEvent);
       this.formFieldElements.delete(formFieldElement);
     });
+    Object.keys(this.userFilledFields).forEach((key) => {
+      if (this.userFilledFields[key]) {
+        delete this.userFilledFields[key];
+      }
+    });
+    this.userFilledFields = null;
     globalThis.removeEventListener(EVENTS.MESSAGE, this.handleWindowMessageEvent);
     globalThis.document.removeEventListener(
       EVENTS.VISIBILITYCHANGE,
diff --git a/apps/browser/src/autofill/services/autofill.service.spec.ts b/apps/browser/src/autofill/services/autofill.service.spec.ts
index 90e49b15db9..b1c372655c2 100644
--- a/apps/browser/src/autofill/services/autofill.service.spec.ts
+++ b/apps/browser/src/autofill/services/autofill.service.spec.ts
@@ -10,9 +10,11 @@ import {
   DefaultDomainSettingsService,
   DomainSettingsService,
 } from "@bitwarden/common/autofill/services/domain-settings.service";
+import { UserNotificationSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/user-notification-settings.service";
 import { InlineMenuVisibilitySetting } from "@bitwarden/common/autofill/types";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { EventType } from "@bitwarden/common/enums";
+import { FeatureFlag, FeatureFlagValueType } from "@bitwarden/common/enums/feature-flag.enum";
 import { UriMatchStrategy } from "@bitwarden/common/models/domain/domain-service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
@@ -27,6 +29,7 @@ import {
   subscribeTo,
 } from "@bitwarden/common/spec";
 import { UserId } from "@bitwarden/common/types/guid";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { FieldType, LinkedIdType, LoginLinkedId, CipherType } from "@bitwarden/common/vault/enums";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { CardView } from "@bitwarden/common/vault/models/view/card.view";
@@ -35,7 +38,6 @@ import { FieldView } from "@bitwarden/common/vault/models/view/field.view";
 import { IdentityView } from "@bitwarden/common/vault/models/view/identity.view";
 import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
-import { CipherService } from "@bitwarden/common/vault/services/cipher.service";
 import { TotpService } from "@bitwarden/common/vault/services/totp.service";
 
 import { BrowserApi } from "../../platform/browser/browser-api";
@@ -88,6 +90,9 @@ describe("AutofillService", () => {
   let activeAccountStatusMock$: BehaviorSubject<AuthenticationStatus>;
   let authService: MockProxy<AuthService>;
   let configService: MockProxy<ConfigService>;
+  let enableChangedPasswordPromptMock$: BehaviorSubject<boolean>;
+  let enableAddedLoginPromptMock$: BehaviorSubject<boolean>;
+  let userNotificationsSettings: MockProxy<UserNotificationSettingsServiceAbstraction>;
   let messageListener: MockProxy<MessageListener>;
 
   beforeEach(() => {
@@ -100,6 +105,11 @@ describe("AutofillService", () => {
     authService.activeAccountStatus$ = activeAccountStatusMock$;
     configService = mock<ConfigService>();
     messageListener = mock<MessageListener>();
+    enableChangedPasswordPromptMock$ = new BehaviorSubject(true);
+    enableAddedLoginPromptMock$ = new BehaviorSubject(true);
+    userNotificationsSettings = mock<UserNotificationSettingsServiceAbstraction>();
+    userNotificationsSettings.enableChangedPasswordPrompt$ = enableChangedPasswordPromptMock$;
+    userNotificationsSettings.enableAddedLoginPrompt$ = enableAddedLoginPromptMock$;
     autofillService = new AutofillService(
       cipherService,
       autofillSettingsService,
@@ -113,6 +123,7 @@ describe("AutofillService", () => {
       accountService,
       authService,
       configService,
+      userNotificationsSettings,
       messageListener,
     );
     domainSettingsService = new DefaultDomainSettingsService(fakeStateProvider);
@@ -349,13 +360,18 @@ describe("AutofillService", () => {
   describe("injectAutofillScripts", () => {
     const autofillBootstrapScript = "bootstrap-autofill.js";
     const autofillOverlayBootstrapScript = "bootstrap-autofill-overlay.js";
+    const autofillOverlayMenuBootstrapScript = "bootstrap-autofill-overlay-menu.js";
+    const autofillOverlayNotificationsBootstrapScript =
+      "bootstrap-autofill-overlay-notifications.js";
     const defaultAutofillScripts = ["autofiller.js", "notificationBar.js", "contextMenuHandler.js"];
     const defaultExecuteScriptOptions = { runAt: "document_start" };
     let tabMock: chrome.tabs.Tab;
     let sender: chrome.runtime.MessageSender;
 
     beforeEach(() => {
-      configService.getFeatureFlag.mockResolvedValue(true);
+      configService.getFeatureFlag.mockImplementation(
+        async (_feature) => true as FeatureFlagValueType<any>,
+      );
       tabMock = createChromeTabMock();
       sender = { tab: tabMock, frameId: 1 };
       jest.spyOn(BrowserApi, "executeScriptInTab").mockImplementation();
@@ -366,9 +382,16 @@ describe("AutofillService", () => {
     });
 
     it("accepts an extension message sender and injects the autofill scripts into the tab of the sender", async () => {
+      configService.getFeatureFlag.mockImplementation(async (_feature) => {
+        if (_feature === FeatureFlag.NotificationBarAddLoginImprovements) {
+          return false as FeatureFlagValueType<any>;
+        }
+
+        return true as FeatureFlagValueType<any>;
+      });
       await autofillService.injectAutofillScripts(sender.tab, sender.frameId, true);
 
-      [autofillOverlayBootstrapScript, ...defaultAutofillScripts].forEach((scriptName) => {
+      [autofillOverlayMenuBootstrapScript, ...defaultAutofillScripts].forEach((scriptName) => {
         expect(BrowserApi.executeScriptInTab).toHaveBeenCalledWith(tabMock.id, {
           file: `content/${scriptName}`,
           frameId: sender.frameId,
@@ -420,6 +443,13 @@ describe("AutofillService", () => {
       jest
         .spyOn(autofillService, "getInlineMenuVisibility")
         .mockResolvedValue(AutofillOverlayVisibility.Off);
+      configService.getFeatureFlag.mockImplementation(async (_feature) => {
+        if (_feature === FeatureFlag.NotificationBarAddLoginImprovements) {
+          return false as FeatureFlagValueType<any>;
+        }
+
+        return true as FeatureFlagValueType<any>;
+      });
 
       await autofillService.injectAutofillScripts(sender.tab, sender.frameId);
 
@@ -435,6 +465,21 @@ describe("AutofillService", () => {
       });
     });
 
+    it("will inject the bootstrap-autofill-overlay-notifications script if the user has the notification bar turned on but does not have the inline menu turned on", async () => {
+      jest
+        .spyOn(autofillService, "getInlineMenuVisibility")
+        .mockResolvedValue(AutofillOverlayVisibility.Off);
+      enableChangedPasswordPromptMock$.next(true);
+
+      await autofillService.injectAutofillScripts(sender.tab, sender.frameId);
+
+      expect(BrowserApi.executeScriptInTab).toHaveBeenCalledWith(tabMock.id, {
+        file: `content/${autofillOverlayNotificationsBootstrapScript}`,
+        frameId: sender.frameId,
+        ...defaultExecuteScriptOptions,
+      });
+    });
+
     it("injects the content-message-handler script if not injecting on page load", async () => {
       await autofillService.injectAutofillScripts(sender.tab, sender.frameId, false);
 
diff --git a/apps/browser/src/autofill/services/autofill.service.ts b/apps/browser/src/autofill/services/autofill.service.ts
index 632d6896d21..6f953e68b93 100644
--- a/apps/browser/src/autofill/services/autofill.service.ts
+++ b/apps/browser/src/autofill/services/autofill.service.ts
@@ -2,13 +2,14 @@ import { filter, firstValueFrom, Observable, scan, startWith } from "rxjs";
 import { pairwise } from "rxjs/operators";
 
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
-import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { AccountInfo, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
 import { AutofillOverlayVisibility } from "@bitwarden/common/autofill/constants";
 import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
+import { UserNotificationSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/user-notification-settings.service";
 import { InlineMenuVisibilitySetting } from "@bitwarden/common/autofill/types";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { EventType } from "@bitwarden/common/enums";
@@ -20,6 +21,7 @@ import {
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { MessageListener } from "@bitwarden/common/platform/messaging";
+import { UserId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { TotpService } from "@bitwarden/common/vault/abstractions/totp.service";
 import { FieldType, CipherType } from "@bitwarden/common/vault/enums";
@@ -71,6 +73,7 @@ export default class AutofillService implements AutofillServiceInterface {
     private accountService: AccountService,
     private authService: AuthService,
     private configService: ConfigService,
+    private userNotificationSettingsService: UserNotificationSettingsServiceAbstraction,
     private messageListener: MessageListener,
   ) {}
 
@@ -164,25 +167,14 @@ export default class AutofillService implements AutofillServiceInterface {
     const activeAccount = await firstValueFrom(this.accountService.activeAccount$);
     const authStatus = await firstValueFrom(this.authService.activeAccountStatus$);
     const accountIsUnlocked = authStatus === AuthenticationStatus.Unlocked;
-    let inlineMenuVisibility: InlineMenuVisibilitySetting = AutofillOverlayVisibility.Off;
     let autoFillOnPageLoadIsEnabled = false;
+    const addLoginImprovementsFlagActive = await this.configService.getFeatureFlag(
+      FeatureFlag.NotificationBarAddLoginImprovements,
+    );
 
-    if (activeAccount) {
-      inlineMenuVisibility = await this.getInlineMenuVisibility();
-    }
-
-    let mainAutofillScript = "bootstrap-autofill.js";
-
-    if (inlineMenuVisibility) {
-      const inlineMenuPositioningImprovements = await this.configService.getFeatureFlag(
-        FeatureFlag.InlineMenuPositioningImprovements,
-      );
-      mainAutofillScript = inlineMenuPositioningImprovements
-        ? "bootstrap-autofill-overlay.js"
-        : "bootstrap-legacy-autofill-overlay.js";
-    }
-
-    const injectedScripts = [mainAutofillScript];
+    const injectedScripts = [
+      await this.getBootstrapAutofillContentScript(activeAccount, addLoginImprovementsFlagActive),
+    ];
 
     if (activeAccount && accountIsUnlocked) {
       autoFillOnPageLoadIsEnabled = await this.getAutofillOnPageLoad();
@@ -199,7 +191,11 @@ export default class AutofillService implements AutofillServiceInterface {
       });
     }
 
-    injectedScripts.push("notificationBar.js", "contextMenuHandler.js");
+    if (!addLoginImprovementsFlagActive) {
+      injectedScripts.push("notificationBar.js");
+    }
+
+    injectedScripts.push("contextMenuHandler.js");
 
     for (const injectedScript of injectedScripts) {
       await this.scriptInjectorService.inject({
@@ -213,6 +209,55 @@ export default class AutofillService implements AutofillServiceInterface {
     }
   }
 
+  /**
+   * Identifies the correct autofill script to inject based on whether the
+   * inline menu is enabled, and whether the user has the notification bar
+   * enabled.
+   *
+   * @param activeAccount - The active account
+   * @param addLoginImprovementsFlagActive - Whether the add login improvements feature flag is active
+   */
+  private async getBootstrapAutofillContentScript(
+    activeAccount: { id: UserId | undefined } & AccountInfo,
+    addLoginImprovementsFlagActive = false,
+  ): Promise<string> {
+    let inlineMenuVisibility: InlineMenuVisibilitySetting = AutofillOverlayVisibility.Off;
+
+    if (activeAccount) {
+      inlineMenuVisibility = await this.getInlineMenuVisibility();
+    }
+
+    const inlineMenuPositioningImprovements = await this.configService.getFeatureFlag(
+      FeatureFlag.InlineMenuPositioningImprovements,
+    );
+    if (!inlineMenuPositioningImprovements) {
+      return "bootstrap-legacy-autofill-overlay.js";
+    }
+
+    const enableChangedPasswordPrompt = await firstValueFrom(
+      this.userNotificationSettingsService.enableChangedPasswordPrompt$,
+    );
+    const enableAddedLoginPrompt = await firstValueFrom(
+      this.userNotificationSettingsService.enableAddedLoginPrompt$,
+    );
+    const isNotificationBarEnabled =
+      addLoginImprovementsFlagActive && (enableChangedPasswordPrompt || enableAddedLoginPrompt);
+
+    if (!inlineMenuVisibility && !isNotificationBarEnabled) {
+      return "bootstrap-autofill.js";
+    }
+
+    if (!inlineMenuVisibility && isNotificationBarEnabled) {
+      return "bootstrap-autofill-overlay-notifications.js";
+    }
+
+    if (inlineMenuVisibility && !isNotificationBarEnabled) {
+      return "bootstrap-autofill-overlay-menu.js";
+    }
+
+    return "bootstrap-autofill-overlay.js";
+  }
+
   /**
    * Gets all forms with password fields and formats the data
    * for both forms and password input elements.
diff --git a/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts b/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts
index 40a370d70cd..97b231a1dac 100644
--- a/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts
+++ b/apps/browser/src/autofill/services/collect-autofill-content.service.spec.ts
@@ -15,6 +15,7 @@ import { InlineMenuFieldQualificationService } from "./abstractions/inline-menu-
 import { AutofillOverlayContentService } from "./autofill-overlay-content.service";
 import { CollectAutofillContentService } from "./collect-autofill-content.service";
 import DomElementVisibilityService from "./dom-element-visibility.service";
+import { DomQueryService } from "./dom-query.service";
 
 const mockLoginForm = `
   <div id="root">
@@ -30,7 +31,9 @@ const waitForIdleCallback = () => new Promise((resolve) => globalThis.requestIdl
 describe("CollectAutofillContentService", () => {
   const domElementVisibilityService = new DomElementVisibilityService();
   const inlineMenuFieldQualificationService = mock<InlineMenuFieldQualificationService>();
+  const domQueryService = new DomQueryService();
   const autofillOverlayContentService = new AutofillOverlayContentService(
+    domQueryService,
     inlineMenuFieldQualificationService,
   );
   let collectAutofillContentService: CollectAutofillContentService;
@@ -43,6 +46,7 @@ describe("CollectAutofillContentService", () => {
     document.body.innerHTML = mockLoginForm;
     collectAutofillContentService = new CollectAutofillContentService(
       domElementVisibilityService,
+      domQueryService,
       autofillOverlayContentService,
     );
     window.IntersectionObserver = jest.fn(() => mockIntersectionObserver);
@@ -254,7 +258,7 @@ describe("CollectAutofillContentService", () => {
         .mockResolvedValue(true);
       const setupAutofillOverlayListenerOnFieldSpy = jest.spyOn(
         collectAutofillContentService["autofillOverlayContentService"],
-        "setupInlineMenu",
+        "setupOverlayListeners",
       );
 
       await collectAutofillContentService.getPageDetails();
@@ -457,51 +461,6 @@ describe("CollectAutofillContentService", () => {
     });
   });
 
-  describe("deepQueryElements", () => {
-    beforeEach(() => {
-      collectAutofillContentService["mutationObserver"] = mock<MutationObserver>();
-    });
-
-    it("queries form field elements that are nested within a ShadowDOM", () => {
-      const root = document.createElement("div");
-      const shadowRoot = root.attachShadow({ mode: "open" });
-      const form = document.createElement("form");
-      const input = document.createElement("input");
-      input.type = "text";
-      form.appendChild(input);
-      shadowRoot.appendChild(form);
-
-      const formFieldElements = collectAutofillContentService.deepQueryElements(
-        shadowRoot,
-        "input",
-        true,
-      );
-
-      expect(formFieldElements).toStrictEqual([input]);
-    });
-
-    it("queries form field elements that are nested within multiple ShadowDOM elements", () => {
-      const root = document.createElement("div");
-      const shadowRoot1 = root.attachShadow({ mode: "open" });
-      const root2 = document.createElement("div");
-      const shadowRoot2 = root2.attachShadow({ mode: "open" });
-      const form = document.createElement("form");
-      const input = document.createElement("input");
-      input.type = "text";
-      form.appendChild(input);
-      shadowRoot2.appendChild(form);
-      shadowRoot1.appendChild(root2);
-
-      const formFieldElements = collectAutofillContentService.deepQueryElements(
-        shadowRoot1,
-        "input",
-        true,
-      );
-
-      expect(formFieldElements).toStrictEqual([input]);
-    });
-  });
-
   describe("buildAutofillFormsData", () => {
     it("will not attempt to gather data from a cached form element", () => {
       const documentTitle = "Test Page";
@@ -2570,7 +2529,7 @@ describe("CollectAutofillContentService", () => {
       );
       setupAutofillOverlayListenerOnFieldSpy = jest.spyOn(
         collectAutofillContentService["autofillOverlayContentService"],
-        "setupInlineMenu",
+        "setupOverlayListeners",
       );
     });
 
diff --git a/apps/browser/src/autofill/services/collect-autofill-content.service.ts b/apps/browser/src/autofill/services/collect-autofill-content.service.ts
index 25aedd6a41f..2cdcbd67023 100644
--- a/apps/browser/src/autofill/services/collect-autofill-content.service.ts
+++ b/apps/browser/src/autofill/services/collect-autofill-content.service.ts
@@ -30,11 +30,10 @@ import {
   UpdateAutofillDataAttributeParams,
 } from "./abstractions/collect-autofill-content.service";
 import { DomElementVisibilityService } from "./abstractions/dom-element-visibility.service";
+import { DomQueryService } from "./abstractions/dom-query.service";
 
 export class CollectAutofillContentService implements CollectAutofillContentServiceInterface {
   private readonly sendExtensionMessage = sendExtensionMessage;
-  private readonly domElementVisibilityService: DomElementVisibilityService;
-  private readonly autofillOverlayContentService: AutofillOverlayContentService;
   private readonly getAttributeBoolean = getAttributeBoolean;
   private readonly getPropertyOrAttribute = getPropertyOrAttribute;
   private noFieldsFound = false;
@@ -61,12 +60,10 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
   private useTreeWalkerStrategyFlagSet = true;
 
   constructor(
-    domElementVisibilityService: DomElementVisibilityService,
-    autofillOverlayContentService?: AutofillOverlayContentService,
+    private domElementVisibilityService: DomElementVisibilityService,
+    private domQueryService: DomQueryService,
+    private autofillOverlayContentService?: AutofillOverlayContentService,
   ) {
-    this.domElementVisibilityService = domElementVisibilityService;
-    this.autofillOverlayContentService = autofillOverlayContentService;
-
     let inputQuery = "input:not([data-bwignore])";
     for (const type of this.ignoredInputTypes) {
       inputQuery += `:not([type="${type}"])`;
@@ -126,7 +123,7 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
 
     this.domRecentlyMutated = false;
     const pageDetails = this.getFormattedPageDetails(autofillFormsData, autofillFieldsData);
-    this.setupInlineMenuListeners(pageDetails);
+    this.setupOverlayListeners(pageDetails);
 
     return pageDetails;
   }
@@ -161,89 +158,6 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
     return fieldElementsWithOpid[0];
   }
 
-  /**
-   * Queries all elements in the DOM that match the given query string.
-   * Also, recursively queries all shadow roots for the element.
-   *
-   * @param root - The root element to start the query from
-   * @param queryString - The query string to match elements against
-   * @param isObservingShadowRoot - Determines whether to observe shadow roots
-   */
-  deepQueryElements<T>(
-    root: Document | ShadowRoot | Element,
-    queryString: string,
-    isObservingShadowRoot = false,
-  ): T[] {
-    let elements = this.queryElements<T>(root, queryString);
-    const shadowRoots = this.recursivelyQueryShadowRoots(root, isObservingShadowRoot);
-    for (let index = 0; index < shadowRoots.length; index++) {
-      const shadowRoot = shadowRoots[index];
-      elements = elements.concat(this.queryElements<T>(shadowRoot, queryString));
-    }
-
-    return elements;
-  }
-
-  /**
-   * Queries the DOM for elements based on the given query string.
-   *
-   * @param root - The root element to start the query from
-   * @param queryString - The query string to match elements against
-   */
-  private queryElements<T>(root: Document | ShadowRoot | Element, queryString: string): T[] {
-    if (!root.querySelector(queryString)) {
-      return [];
-    }
-
-    return Array.from(root.querySelectorAll(queryString)) as T[];
-  }
-
-  /**
-   * Recursively queries all shadow roots found within the given root element.
-   * Will also set up a mutation observer on the shadow root if the
-   * `isObservingShadowRoot` parameter is set to true.
-   *
-   * @param root - The root element to start the query from
-   * @param isObservingShadowRoot - Determines whether to observe shadow roots
-   */
-  private recursivelyQueryShadowRoots(
-    root: Document | ShadowRoot | Element,
-    isObservingShadowRoot = false,
-  ): ShadowRoot[] {
-    let shadowRoots = this.queryShadowRoots(root);
-    for (let index = 0; index < shadowRoots.length; index++) {
-      const shadowRoot = shadowRoots[index];
-      shadowRoots = shadowRoots.concat(this.recursivelyQueryShadowRoots(shadowRoot));
-      if (isObservingShadowRoot) {
-        this.mutationObserver.observe(shadowRoot, {
-          attributes: true,
-          childList: true,
-          subtree: true,
-        });
-      }
-    }
-
-    return shadowRoots;
-  }
-
-  /**
-   * Queries any immediate shadow roots found within the given root element.
-   *
-   * @param root - The root element to start the query from
-   */
-  private queryShadowRoots(root: Document | ShadowRoot | Element): ShadowRoot[] {
-    const shadowRoots: ShadowRoot[] = [];
-    const potentialShadowRoots = root.querySelectorAll(":defined");
-    for (let index = 0; index < potentialShadowRoots.length; index++) {
-      const shadowRoot = this.getShadowRoot(potentialShadowRoots[index]);
-      if (shadowRoot) {
-        shadowRoots.push(shadowRoot);
-      }
-    }
-
-    return shadowRoots;
-  }
-
   /**
    * Sorts the AutofillFieldElements map by the elementNumber property.
    * @private
@@ -290,7 +204,7 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
       autofillField.viewable = await this.domElementVisibilityService.isFormFieldViewable(element);
 
       if (!previouslyViewable && autofillField.viewable) {
-        this.setupInlineMenu(element, autofillField);
+        this.setupOverlayOnField(element, autofillField);
       }
     });
   }
@@ -385,7 +299,11 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
     if (!formFieldElements) {
       formFieldElements = this.useTreeWalkerStrategyFlagSet
         ? this.queryTreeWalkerForAutofillFormFieldElements()
-        : this.deepQueryElements(document, this.formFieldQueryString, true);
+        : this.domQueryService.deepQueryElements(
+            document,
+            this.formFieldQueryString,
+            this.mutationObserver,
+          );
     }
 
     if (!fieldsLimit || formFieldElements.length <= fieldsLimit) {
@@ -918,10 +836,10 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
       return this.queryTreeWalkerForAutofillFormAndFieldElements();
     }
 
-    const queriedElements = this.deepQueryElements<HTMLElement>(
+    const queriedElements = this.domQueryService.deepQueryElements<HTMLElement>(
       document,
       `form, ${this.formFieldQueryString}`,
-      true,
+      this.mutationObserver,
     );
     const formElements: HTMLFormElement[] = [];
     const formFieldElements: FormFieldElement[] = [];
@@ -1123,7 +1041,11 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
 
       const autofillElements = this.useTreeWalkerStrategyFlagSet
         ? this.queryTreeWalkerForMutatedElements(node)
-        : this.deepQueryElements<HTMLElement>(node, `form, ${this.formFieldQueryString}`, true);
+        : this.domQueryService.deepQueryElements<HTMLElement>(
+            node,
+            `form, ${this.formFieldQueryString}`,
+            this.mutationObserver,
+          );
       if (autofillElements.length) {
         mutatedElements = mutatedElements.concat(autofillElements);
       }
@@ -1394,7 +1316,7 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
       }
 
       cachedAutofillFieldElement.viewable = true;
-      this.setupInlineMenu(formFieldElement, cachedAutofillFieldElement);
+      this.setupOverlayOnField(formFieldElement, cachedAutofillFieldElement);
 
       this.intersectionObserver?.unobserve(entry.target);
     }
@@ -1405,14 +1327,12 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
    *
    * @param pageDetails - The page details to use for the inline menu listeners
    */
-  private setupInlineMenuListeners(pageDetails: AutofillPageDetails) {
-    if (!this.autofillOverlayContentService) {
-      return;
+  private setupOverlayListeners(pageDetails: AutofillPageDetails) {
+    if (this.autofillOverlayContentService) {
+      this.autofillFieldElements.forEach((autofillField, formFieldElement) => {
+        this.setupOverlayOnField(formFieldElement, autofillField, pageDetails);
+      });
     }
-
-    this.autofillFieldElements.forEach((autofillField, formFieldElement) => {
-      this.setupInlineMenu(formFieldElement, autofillField, pageDetails);
-    });
   }
 
   /**
@@ -1422,27 +1342,25 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
    * @param autofillField - The metadata for the form field
    * @param pageDetails - The page details to use for the inline menu listeners
    */
-  private setupInlineMenu(
+  private setupOverlayOnField(
     formFieldElement: ElementWithOpId<FormFieldElement>,
     autofillField: AutofillField,
     pageDetails?: AutofillPageDetails,
   ) {
-    if (!this.autofillOverlayContentService) {
-      return;
-    }
+    if (this.autofillOverlayContentService) {
+      const autofillPageDetails =
+        pageDetails ||
+        this.getFormattedPageDetails(
+          this.getFormattedAutofillFormsData(),
+          this.getFormattedAutofillFieldsData(),
+        );
 
-    const autofillPageDetails =
-      pageDetails ||
-      this.getFormattedPageDetails(
-        this.getFormattedAutofillFormsData(),
-        this.getFormattedAutofillFieldsData(),
+      void this.autofillOverlayContentService.setupOverlayListeners(
+        formFieldElement,
+        autofillField,
+        autofillPageDetails,
       );
-
-    void this.autofillOverlayContentService.setupInlineMenu(
-      formFieldElement,
-      autofillField,
-      autofillPageDetails,
-    );
+    }
   }
 
   /**
@@ -1457,78 +1375,6 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
     this.intersectionObserver?.disconnect();
   }
 
-  /**
-   * Queries the DOM for all the nodes that match the given filter callback
-   * and returns a collection of nodes.
-   * @param rootNode
-   * @param filterCallback
-   * @param isObservingShadowRoot
-   *
-   * @deprecated - This method remains as a fallback in the case that the deepQuery implementation fails.
-   */
-  queryAllTreeWalkerNodes(
-    rootNode: Node,
-    filterCallback: CallableFunction,
-    isObservingShadowRoot = true,
-  ): Node[] {
-    const treeWalkerQueryResults: Node[] = [];
-
-    this.buildTreeWalkerNodesQueryResults(
-      rootNode,
-      treeWalkerQueryResults,
-      filterCallback,
-      isObservingShadowRoot,
-    );
-
-    return treeWalkerQueryResults;
-  }
-
-  /**
-   * Recursively builds a collection of nodes that match the given filter callback.
-   * If a node has a ShadowRoot, it will be observed for mutations.
-   *
-   * @param rootNode
-   * @param treeWalkerQueryResults
-   * @param filterCallback
-   *
-   * @deprecated - This method remains as a fallback in the case that the deepQuery implementation fails.
-   */
-  private buildTreeWalkerNodesQueryResults(
-    rootNode: Node,
-    treeWalkerQueryResults: Node[],
-    filterCallback: CallableFunction,
-    isObservingShadowRoot: boolean,
-  ) {
-    const treeWalker = document?.createTreeWalker(rootNode, NodeFilter.SHOW_ELEMENT);
-    let currentNode = treeWalker?.currentNode;
-
-    while (currentNode) {
-      if (filterCallback(currentNode)) {
-        treeWalkerQueryResults.push(currentNode);
-      }
-
-      const nodeShadowRoot = this.getShadowRoot(currentNode);
-      if (nodeShadowRoot) {
-        if (isObservingShadowRoot) {
-          this.mutationObserver.observe(nodeShadowRoot, {
-            attributes: true,
-            childList: true,
-            subtree: true,
-          });
-        }
-
-        this.buildTreeWalkerNodesQueryResults(
-          nodeShadowRoot,
-          treeWalkerQueryResults,
-          filterCallback,
-          isObservingShadowRoot,
-        );
-      }
-
-      currentNode = treeWalker?.nextNode();
-    }
-  }
-
   /**
    * @deprecated - This method remains as a fallback in the case that the deepQuery implementation fails.
    */
@@ -1538,19 +1384,23 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
   } {
     const formElements: HTMLFormElement[] = [];
     const formFieldElements: FormFieldElement[] = [];
-    this.queryAllTreeWalkerNodes(document.documentElement, (node: Node) => {
-      if (nodeIsFormElement(node)) {
-        formElements.push(node);
-        return true;
-      }
+    this.domQueryService.queryAllTreeWalkerNodes(
+      document.documentElement,
+      (node: Node) => {
+        if (nodeIsFormElement(node)) {
+          formElements.push(node);
+          return true;
+        }
 
-      if (this.isNodeFormFieldElement(node)) {
-        formFieldElements.push(node as FormFieldElement);
-        return true;
-      }
+        if (this.isNodeFormFieldElement(node)) {
+          formFieldElements.push(node as FormFieldElement);
+          return true;
+        }
 
-      return false;
-    });
+        return false;
+      },
+      this.mutationObserver,
+    );
 
     return { formElements, formFieldElements };
   }
@@ -1559,8 +1409,10 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
    * @deprecated - This method remains as a fallback in the case that the deepQuery implementation fails.
    */
   private queryTreeWalkerForAutofillFormFieldElements(): FormFieldElement[] {
-    return this.queryAllTreeWalkerNodes(document.documentElement, (node: Node) =>
-      this.isNodeFormFieldElement(node),
+    return this.domQueryService.queryAllTreeWalkerNodes(
+      document.documentElement,
+      (node: Node) => this.isNodeFormFieldElement(node),
+      this.mutationObserver,
     ) as FormFieldElement[];
   }
 
@@ -1570,10 +1422,11 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
    * @param node - The node to query
    */
   private queryTreeWalkerForMutatedElements(node: Node): HTMLElement[] {
-    return this.queryAllTreeWalkerNodes(
+    return this.domQueryService.queryAllTreeWalkerNodes(
       node,
       (walkerNode: Node) =>
         nodeIsFormElement(walkerNode) || this.isNodeFormFieldElement(walkerNode),
+      this.mutationObserver,
     ) as HTMLElement[];
   }
 
@@ -1581,10 +1434,9 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
    * @deprecated - This method remains as a fallback in the case that the deepQuery implementation fails.
    */
   private queryTreeWalkerForPasswordElements(): HTMLElement[] {
-    return this.queryAllTreeWalkerNodes(
+    return this.domQueryService.queryAllTreeWalkerNodes(
       document.documentElement,
       (node: Node) => nodeIsInputElement(node) && node.type === "password",
-      false,
     ) as HTMLElement[];
   }
 
@@ -1598,6 +1450,8 @@ export class CollectAutofillContentService implements CollectAutofillContentServ
       return Boolean(this.queryTreeWalkerForPasswordElements()?.length);
     }
 
-    return Boolean(this.deepQueryElements(document, `input[type="password"]`)?.length);
+    return Boolean(
+      this.domQueryService.deepQueryElements(document, `input[type="password"]`)?.length,
+    );
   }
 }
diff --git a/apps/browser/src/autofill/services/dom-query.service.spec.ts b/apps/browser/src/autofill/services/dom-query.service.spec.ts
new file mode 100644
index 00000000000..22212333fc8
--- /dev/null
+++ b/apps/browser/src/autofill/services/dom-query.service.spec.ts
@@ -0,0 +1,82 @@
+import { mockQuerySelectorAllDefinedCall } from "../spec/testing-utils";
+
+import { DomQueryService } from "./dom-query.service";
+
+describe("DomQueryService", () => {
+  let domQueryService: DomQueryService;
+  let mutationObserver: MutationObserver;
+  const mockQuerySelectorAll = mockQuerySelectorAllDefinedCall();
+
+  beforeEach(() => {
+    domQueryService = new DomQueryService();
+    mutationObserver = new MutationObserver(() => {});
+  });
+
+  afterAll(() => {
+    mockQuerySelectorAll.mockRestore();
+  });
+
+  describe("deepQueryElements", () => {
+    it("queries form field elements that are nested within a ShadowDOM", () => {
+      const root = document.createElement("div");
+      const shadowRoot = root.attachShadow({ mode: "open" });
+      const form = document.createElement("form");
+      const input = document.createElement("input");
+      input.type = "text";
+      form.appendChild(input);
+      shadowRoot.appendChild(form);
+
+      const formFieldElements = domQueryService.deepQueryElements(
+        shadowRoot,
+        "input",
+        mutationObserver,
+      );
+
+      expect(formFieldElements).toStrictEqual([input]);
+    });
+
+    it("queries form field elements that are nested within multiple ShadowDOM elements", () => {
+      const root = document.createElement("div");
+      const shadowRoot1 = root.attachShadow({ mode: "open" });
+      const root2 = document.createElement("div");
+      const shadowRoot2 = root2.attachShadow({ mode: "open" });
+      const form = document.createElement("form");
+      const input = document.createElement("input");
+      input.type = "text";
+      form.appendChild(input);
+      shadowRoot2.appendChild(form);
+      shadowRoot1.appendChild(root2);
+
+      const formFieldElements = domQueryService.deepQueryElements(
+        shadowRoot1,
+        "input",
+        mutationObserver,
+      );
+
+      expect(formFieldElements).toStrictEqual([input]);
+    });
+  });
+
+  describe("queryAllTreeWalkerNodes", () => {
+    it("queries form field elements that are nested within multiple ShadowDOM elements", () => {
+      const root = document.createElement("div");
+      const shadowRoot1 = root.attachShadow({ mode: "open" });
+      const root2 = document.createElement("div");
+      const shadowRoot2 = root2.attachShadow({ mode: "open" });
+      const form = document.createElement("form");
+      const input = document.createElement("input");
+      input.type = "text";
+      form.appendChild(input);
+      shadowRoot2.appendChild(form);
+      shadowRoot1.appendChild(root2);
+
+      const formFieldElements = domQueryService.queryAllTreeWalkerNodes(
+        shadowRoot1,
+        (element: Element) => element.tagName === "INPUT",
+        mutationObserver,
+      );
+
+      expect(formFieldElements).toStrictEqual([input]);
+    });
+  });
+});
diff --git a/apps/browser/src/autofill/services/dom-query.service.ts b/apps/browser/src/autofill/services/dom-query.service.ts
new file mode 100644
index 00000000000..0d766ea3ba0
--- /dev/null
+++ b/apps/browser/src/autofill/services/dom-query.service.ts
@@ -0,0 +1,185 @@
+import { nodeIsElement } from "../utils";
+
+import { DomQueryService as DomQueryServiceInterface } from "./abstractions/dom-query.service";
+
+export class DomQueryService implements DomQueryServiceInterface {
+  /**
+   * Queries all elements in the DOM that match the given query string.
+   * Also, recursively queries all shadow roots for the element.
+   *
+   * @param root - The root element to start the query from
+   * @param queryString - The query string to match elements against
+   * @param mutationObserver - The MutationObserver to use for observing shadow roots
+   */
+  deepQueryElements<T>(
+    root: Document | ShadowRoot | Element,
+    queryString: string,
+    mutationObserver?: MutationObserver,
+  ): T[] {
+    let elements = this.queryElements<T>(root, queryString);
+    const shadowRoots = this.recursivelyQueryShadowRoots(root, mutationObserver);
+    for (let index = 0; index < shadowRoots.length; index++) {
+      const shadowRoot = shadowRoots[index];
+      elements = elements.concat(this.queryElements<T>(shadowRoot, queryString));
+    }
+
+    return elements;
+  }
+
+  /**
+   * Queries the DOM for elements based on the given query string.
+   *
+   * @param root - The root element to start the query from
+   * @param queryString - The query string to match elements against
+   */
+  private queryElements<T>(root: Document | ShadowRoot | Element, queryString: string): T[] {
+    if (!root.querySelector(queryString)) {
+      return [];
+    }
+
+    return Array.from(root.querySelectorAll(queryString)) as T[];
+  }
+
+  /**
+   * Recursively queries all shadow roots found within the given root element.
+   * Will also set up a mutation observer on the shadow root if the
+   * `isObservingShadowRoot` parameter is set to true.
+   *
+   * @param root - The root element to start the query from
+   * @param mutationObserver - The MutationObserver to use for observing shadow roots
+   */
+  private recursivelyQueryShadowRoots(
+    root: Document | ShadowRoot | Element,
+    mutationObserver?: MutationObserver,
+  ): ShadowRoot[] {
+    let shadowRoots = this.queryShadowRoots(root);
+    for (let index = 0; index < shadowRoots.length; index++) {
+      const shadowRoot = shadowRoots[index];
+      shadowRoots = shadowRoots.concat(this.recursivelyQueryShadowRoots(shadowRoot));
+      if (mutationObserver) {
+        mutationObserver.observe(shadowRoot, {
+          attributes: true,
+          childList: true,
+          subtree: true,
+        });
+      }
+    }
+
+    return shadowRoots;
+  }
+
+  /**
+   * Queries any immediate shadow roots found within the given root element.
+   *
+   * @param root - The root element to start the query from
+   */
+  private queryShadowRoots(root: Document | ShadowRoot | Element): ShadowRoot[] {
+    const shadowRoots: ShadowRoot[] = [];
+    const potentialShadowRoots = root.querySelectorAll(":defined");
+    for (let index = 0; index < potentialShadowRoots.length; index++) {
+      const shadowRoot = this.getShadowRoot(potentialShadowRoots[index]);
+      if (shadowRoot) {
+        shadowRoots.push(shadowRoot);
+      }
+    }
+
+    return shadowRoots;
+  }
+
+  /**
+   * Attempts to get the ShadowRoot of the passed node. If support for the
+   * extension based openOrClosedShadowRoot API is available, it will be used.
+   * Will return null if the node is not an HTMLElement or if the node has
+   * child nodes.
+   *
+   * @param {Node} node
+   */
+  private getShadowRoot(node: Node): ShadowRoot | null {
+    if (!nodeIsElement(node)) {
+      return null;
+    }
+
+    if (node.shadowRoot) {
+      return node.shadowRoot;
+    }
+
+    if ((chrome as any).dom?.openOrClosedShadowRoot) {
+      try {
+        return (chrome as any).dom.openOrClosedShadowRoot(node);
+      } catch (error) {
+        return null;
+      }
+    }
+
+    return (node as any).openOrClosedShadowRoot;
+  }
+
+  /**
+   * Queries the DOM for all the nodes that match the given filter callback
+   * and returns a collection of nodes.
+   * @param rootNode
+   * @param filterCallback
+   * @param mutationObserver
+   */
+  queryAllTreeWalkerNodes(
+    rootNode: Node,
+    filterCallback: CallableFunction,
+    mutationObserver?: MutationObserver,
+  ): Node[] {
+    const treeWalkerQueryResults: Node[] = [];
+
+    this.buildTreeWalkerNodesQueryResults(
+      rootNode,
+      treeWalkerQueryResults,
+      filterCallback,
+      mutationObserver,
+    );
+
+    return treeWalkerQueryResults;
+  }
+
+  /**
+   * Recursively builds a collection of nodes that match the given filter callback.
+   * If a node has a ShadowRoot, it will be observed for mutations.
+   *
+   * @param rootNode
+   * @param treeWalkerQueryResults
+   * @param filterCallback
+   * @param mutationObserver
+   */
+  private buildTreeWalkerNodesQueryResults(
+    rootNode: Node,
+    treeWalkerQueryResults: Node[],
+    filterCallback: CallableFunction,
+    mutationObserver?: MutationObserver,
+  ) {
+    const treeWalker = document?.createTreeWalker(rootNode, NodeFilter.SHOW_ELEMENT);
+    let currentNode = treeWalker?.currentNode;
+
+    while (currentNode) {
+      if (filterCallback(currentNode)) {
+        treeWalkerQueryResults.push(currentNode);
+      }
+
+      const nodeShadowRoot = this.getShadowRoot(currentNode);
+      if (nodeShadowRoot) {
+        if (mutationObserver) {
+          mutationObserver.observe(nodeShadowRoot, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+          });
+        }
+
+        this.buildTreeWalkerNodesQueryResults(
+          nodeShadowRoot,
+          treeWalkerQueryResults,
+          filterCallback,
+          mutationObserver,
+        );
+      }
+
+      currentNode = treeWalker?.nextNode();
+    }
+  }
+}
diff --git a/apps/browser/src/autofill/services/inline-menu-field-qualification.service.spec.ts b/apps/browser/src/autofill/services/inline-menu-field-qualification.service.spec.ts
index 9b3ef4ce692..21bdcba3365 100644
--- a/apps/browser/src/autofill/services/inline-menu-field-qualification.service.spec.ts
+++ b/apps/browser/src/autofill/services/inline-menu-field-qualification.service.spec.ts
@@ -502,7 +502,7 @@ describe("InlineMenuFieldQualificationService", () => {
             ).toBe(false);
           });
 
-          it("is structured on a page with multiple viewable password field", () => {
+          it("is structured on a page with multiple viewable password fields", () => {
             const field = mock<AutofillField>({
               type: "text",
               autoCompleteType: "",
@@ -534,7 +534,7 @@ describe("InlineMenuFieldQualificationService", () => {
             ).toBe(false);
           });
 
-          it("is structured on a page with a with no visible password fields and but contains a disabled autocomplete type", () => {
+          it("contains a disabled autocomplete type when multiple password fields are on the page", () => {
             const field = mock<AutofillField>({
               type: "text",
               autoCompleteType: "off",
@@ -552,7 +552,16 @@ describe("InlineMenuFieldQualificationService", () => {
               form: "validFormId",
               viewable: false,
             });
-            pageDetails.fields = [field, passwordField];
+            const secondPasswordField = mock<AutofillField>({
+              type: "password",
+              autoCompleteType: "current-password",
+              htmlID: "second-password",
+              htmlName: "second-password",
+              placeholder: "second-password",
+              form: "validFormId",
+              viewable: false,
+            });
+            pageDetails.fields = [field, passwordField, secondPasswordField];
 
             expect(
               inlineMenuFieldQualificationService.isFieldForLoginForm(field, pageDetails),
diff --git a/apps/browser/src/autofill/services/inline-menu-field-qualification.service.ts b/apps/browser/src/autofill/services/inline-menu-field-qualification.service.ts
index 9b4bb6e1e5f..f27e2faf3fa 100644
--- a/apps/browser/src/autofill/services/inline-menu-field-qualification.service.ts
+++ b/apps/browser/src/autofill/services/inline-menu-field-qualification.service.ts
@@ -5,11 +5,14 @@ import { sendExtensionMessage } from "../utils";
 import {
   AutofillKeywordsMap,
   InlineMenuFieldQualificationService as InlineMenuFieldQualificationServiceInterface,
+  SubmitButtonKeywordsMap,
 } from "./abstractions/inline-menu-field-qualifications.service";
 import {
   AutoFillConstants,
   CreditCardAutoFillConstants,
   IdentityAutoFillConstants,
+  SubmitChangePasswordButtonNames,
+  SubmitLoginButtonNames,
 } from "./autofill-constants";
 
 export class InlineMenuFieldQualificationService
@@ -31,6 +34,7 @@ export class InlineMenuFieldQualificationService
   private currentPasswordAutocompleteValue = "current-password";
   private newPasswordAutoCompleteValue = "new-password";
   private autofillFieldKeywordsMap: AutofillKeywordsMap = new WeakMap();
+  private submitButtonKeywordsMap: SubmitButtonKeywordsMap = new WeakMap();
   private autocompleteDisabledValues = new Set(["off", "false"]);
   private newFieldKeywords = new Set(["new", "change", "neue", "ändern"]);
   private accountCreationFieldKeywords = [
@@ -378,7 +382,9 @@ export class InlineMenuFieldQualificationService
     // If the provided field is set with an autocomplete of "username", we should assume that
     // the page developer intends for this field to be interpreted as a username field.
     if (this.fieldContainsAutocompleteValues(field, this.loginUsernameAutocompleteValues)) {
-      const newPasswordFieldsInPageDetails = pageDetails.fields.filter(this.isNewPasswordField);
+      const newPasswordFieldsInPageDetails = pageDetails.fields.filter(
+        (field) => field.viewable && this.isNewPasswordField(field),
+      );
       return newPasswordFieldsInPageDetails.length === 0;
     }
 
@@ -435,7 +441,7 @@ export class InlineMenuFieldQualificationService
       // If the form that contains the field has more than one visible field, we should assume
       // that the field is part of an account creation form.
       const fieldsWithinForm = pageDetails.fields.filter(
-        (pageDetailsField) => pageDetailsField.form === field.form && pageDetailsField.viewable,
+        (pageDetailsField) => pageDetailsField.form === field.form,
       );
       return fieldsWithinForm.length === 1;
     }
@@ -455,6 +461,12 @@ export class InlineMenuFieldQualificationService
       return false;
     }
 
+    // If no visible fields are found on the page, but we have a single password
+    // field we should assume that the field is part of a login form.
+    if (passwordFieldsInPageDetails.length === 1) {
+      return true;
+    }
+
     // If no visible password fields are found, this field might be part of a multipart form.
     // Check for an invalid autocompleteType to determine if the field is part of a login form.
     return !this.fieldContainsAutocompleteValues(field, this.autocompleteDisabledValues);
@@ -1002,6 +1014,67 @@ export class InlineMenuFieldQualificationService
     return false;
   }
 
+  /**
+   * Validates the provided field to indicate if the field is a submit button for a login form.
+   *
+   * @param element - The element to validate
+   */
+  isElementLoginSubmitButton = (element: HTMLElement): boolean => {
+    const keywordValues = this.getSubmitButtonKeywords(element);
+    return SubmitLoginButtonNames.some((keyword) => keywordValues.indexOf(keyword) > -1);
+  };
+
+  /**
+   * Validates the provided field to indicate if the field is a submit button for a change password form.
+   *
+   * @param element - The element to validate
+   */
+  isElementChangePasswordSubmitButton = (element: HTMLElement): boolean => {
+    const keywordValues = this.getSubmitButtonKeywords(element);
+    return SubmitChangePasswordButtonNames.some((keyword) => keywordValues.indexOf(keyword) > -1);
+  };
+
+  /**
+   * Gather the keywords from the provided element to validate the submit button.
+   *
+   * @param element - The element to validate
+   */
+  private getSubmitButtonKeywords(element: HTMLElement): string {
+    if (!this.submitButtonKeywordsMap.has(element)) {
+      const keywords = [
+        element.textContent,
+        element.getAttribute("value"),
+        element.getAttribute("aria-label"),
+        element.getAttribute("aria-labelledby"),
+        element.getAttribute("aria-describedby"),
+        element.getAttribute("title"),
+        element.getAttribute("id"),
+        element.getAttribute("name"),
+        element.getAttribute("class"),
+      ];
+
+      const keywordsSet = new Set<string>();
+      for (let i = 0; i < keywords.length; i++) {
+        if (typeof keywords[i] === "string") {
+          keywords[i]
+            .toLowerCase()
+            .replace(/[-\s]/g, "")
+            .replace(/[^a-zA-Z0-9]+/g, "|")
+            .split("|")
+            .forEach((keyword) => {
+              if (keyword) {
+                keywordsSet.add(keyword);
+              }
+            });
+        }
+      }
+
+      this.submitButtonKeywordsMap.set(element, Array.from(keywordsSet).join(","));
+    }
+
+    return this.submitButtonKeywordsMap.get(element);
+  }
+
   /**
    * Validates the provided field to indicate if the field has any of the provided keywords.
    *
diff --git a/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts b/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts
index 3b3c487fb83..e5e21c4b021 100644
--- a/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts
+++ b/apps/browser/src/autofill/services/insert-autofill-content.service.spec.ts
@@ -10,6 +10,7 @@ import { InlineMenuFieldQualificationService } from "./abstractions/inline-menu-
 import { AutofillOverlayContentService } from "./autofill-overlay-content.service";
 import { CollectAutofillContentService } from "./collect-autofill-content.service";
 import DomElementVisibilityService from "./dom-element-visibility.service";
+import { DomQueryService } from "./dom-query.service";
 import InsertAutofillContentService from "./insert-autofill-content.service";
 
 const mockLoginForm = `
@@ -68,12 +69,15 @@ function setMockWindowLocation({
 
 describe("InsertAutofillContentService", () => {
   const inlineMenuFieldQualificationService = mock<InlineMenuFieldQualificationService>();
+  const domQueryService = new DomQueryService();
   const domElementVisibilityService = new DomElementVisibilityService();
   const autofillOverlayContentService = new AutofillOverlayContentService(
+    domQueryService,
     inlineMenuFieldQualificationService,
   );
   const collectAutofillContentService = new CollectAutofillContentService(
     domElementVisibilityService,
+    domQueryService,
     autofillOverlayContentService,
   );
   let insertAutofillContentService: InsertAutofillContentService;
diff --git a/apps/browser/src/autofill/services/insert-autofill-content.service.ts b/apps/browser/src/autofill/services/insert-autofill-content.service.ts
index f3bc01ce1fe..058ce087c61 100644
--- a/apps/browser/src/autofill/services/insert-autofill-content.service.ts
+++ b/apps/browser/src/autofill/services/insert-autofill-content.service.ts
@@ -14,8 +14,6 @@ import { CollectAutofillContentService } from "./collect-autofill-content.servic
 import DomElementVisibilityService from "./dom-element-visibility.service";
 
 class InsertAutofillContentService implements InsertAutofillContentServiceInterface {
-  private readonly domElementVisibilityService: DomElementVisibilityService;
-  private readonly collectAutofillContentService: CollectAutofillContentService;
   private readonly autofillInsertActions: AutofillInsertActions = {
     fill_by_opid: ({ opid, value }) => this.handleFillFieldByOpidAction(opid, value),
     click_on_opid: ({ opid }) => this.handleClickOnFieldByOpidAction(opid),
@@ -27,12 +25,9 @@ class InsertAutofillContentService implements InsertAutofillContentServiceInterf
    * DomElementVisibilityService and CollectAutofillContentService classes.
    */
   constructor(
-    domElementVisibilityService: DomElementVisibilityService,
-    collectAutofillContentService: CollectAutofillContentService,
-  ) {
-    this.domElementVisibilityService = domElementVisibilityService;
-    this.collectAutofillContentService = collectAutofillContentService;
-  }
+    private domElementVisibilityService: DomElementVisibilityService,
+    private collectAutofillContentService: CollectAutofillContentService,
+  ) {}
 
   /**
    * Handles autofill of the forms on the current page based on the
diff --git a/apps/browser/src/autofill/spec/testing-utils.ts b/apps/browser/src/autofill/spec/testing-utils.ts
index 02cb4748009..4bbcd72dda2 100644
--- a/apps/browser/src/autofill/spec/testing-utils.ts
+++ b/apps/browser/src/autofill/spec/testing-utils.ts
@@ -165,6 +165,15 @@ export function triggerWebRequestOnBeforeRedirectEvent(
   });
 }
 
+export function triggerWebRequestOnCompletedEvent(details: chrome.webRequest.WebRequestDetails) {
+  (chrome.webRequest.onCompleted.addListener as unknown as jest.SpyInstance).mock.calls.forEach(
+    (call) => {
+      const callback = call[0];
+      callback(details);
+    },
+  );
+}
+
 export function mockQuerySelectorAllDefinedCall() {
   const originalDocumentQuerySelectorAll = document.querySelectorAll;
   document.querySelectorAll = function (selector: string) {
diff --git a/apps/browser/src/autofill/utils/index.ts b/apps/browser/src/autofill/utils/index.ts
index 95e84d19d12..d62013b1611 100644
--- a/apps/browser/src/autofill/utils/index.ts
+++ b/apps/browser/src/autofill/utils/index.ts
@@ -346,7 +346,7 @@ export function getPropertyOrAttribute(element: HTMLElement, attributeName: stri
  * @param callback - The callback function to throttle.
  * @param limit - The time in milliseconds to throttle the callback.
  */
-export function throttle(callback: () => void, limit: number) {
+export function throttle(callback: (_args: any) => any, limit: number) {
   let waitingDelay = false;
   return function (...args: unknown[]) {
     if (!waitingDelay) {
diff --git a/apps/browser/src/autofill/utils/svg-icons.ts b/apps/browser/src/autofill/utils/svg-icons.ts
index f9cf2ae0796..df2cfa189f9 100644
--- a/apps/browser/src/autofill/utils/svg-icons.ts
+++ b/apps/browser/src/autofill/utils/svg-icons.ts
@@ -24,3 +24,6 @@ export const viewCipherIcon =
 
 export const passkeyIcon =
   '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none"><path fill="#6D757E" d="M2.35 12.112a.713.713 0 1 1 0-1.426.713.713 0 0 1 0 1.426Z"/><path fill="#6D757E" fill-rule="evenodd" d="M4.597 7.695a3.5 3.5 0 1 1 3.741 0A5.33 5.33 0 0 1 10.5 9.186c.154.172.29.328.384.461l1.562-.001L14 11.14l-2.188 1.952-.874-.875-.876.875-.874-.875-.876.84-2.613-.003a3.152 3.152 0 0 1-2.634 1.307c-1.729-.036-3.101-1.436-3.064-3.127C.038 9.543 1.469 8.2 3.199 8.237c.098.002.195.009.291.02a6.76 6.76 0 0 1 .296-.181c.257-.149.528-.276.81-.381Zm1.176 1.957 3.952-.004a4.11 4.11 0 0 0-.498-.462 4.452 4.452 0 0 0-2.76-.95c-.647 0-1.262.137-1.817.384a3.12 3.12 0 0 1 1.123 1.032Zm-1.93-4.916a2.625 2.625 0 1 0 5.25 0 2.625 2.625 0 0 0-5.25 0Zm1.407 7.442-.262.366a2.277 2.277 0 0 1-1.904.942C1.819 13.459.85 12.442.876 11.253c.025-1.19 1.04-2.168 2.304-2.141a2.27 2.27 0 0 1 1.86 1.019l.26.396 6.794-.006.619.595-.866.773-.91-.909-.874.875-.863-.862-1.239 1.19-2.711-.005Z" clip-rule="evenodd"/></svg>';
+
+export const circleCheckIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><g clip-path="url(#a)"><path fill="#017E45" d="M8 15.5a8.383 8.383 0 0 1-4.445-1.264A7.627 7.627 0 0 1 .61 10.87a7.063 7.063 0 0 1-.455-4.333 7.368 7.368 0 0 1 2.19-3.84A8.181 8.181 0 0 1 6.438.644a8.498 8.498 0 0 1 4.623.427 7.912 7.912 0 0 1 3.59 2.762A7.171 7.171 0 0 1 16 8c-.002 1.988-.846 3.895-2.345 5.3-1.5 1.406-3.534 2.198-5.655 2.2ZM8 1.437a7.337 7.337 0 0 0-3.889 1.106 6.672 6.672 0 0 0-2.578 2.945 6.182 6.182 0 0 0-.399 3.792 6.448 6.448 0 0 0 1.916 3.36 7.156 7.156 0 0 0 3.584 1.796 7.434 7.434 0 0 0 4.044-.374 6.924 6.924 0 0 0 3.142-2.417A6.275 6.275 0 0 0 15 8c-.002-1.74-.74-3.407-2.053-4.638C11.635 2.131 9.856 1.44 8 1.437Zm-1.351 9.905a.361.361 0 0 1-.245-.094l-2.257-2.07a.326.326 0 0 1-.103-.232c0-.043.009-.085.027-.125a.334.334 0 0 1 .076-.107.366.366 0 0 1 .246-.097c.093 0 .182.033.249.093l1.843 1.687a.166.166 0 0 0 .126.044.17.17 0 0 0 .066-.018.157.157 0 0 0 .052-.041l4.623-5.636a.34.34 0 0 1 .102-.088.375.375 0 0 1 .27-.038.34.34 0 0 1 .216.156.311.311 0 0 1-.033.37L6.93 11.21a.344.344 0 0 1-.112.09.376.376 0 0 1-.141.039l-.03.003h.001Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 .5h16v15H0z"/></clipPath></defs></svg>';
diff --git a/apps/browser/src/background/main.background.ts b/apps/browser/src/background/main.background.ts
index 432d6566dda..5dc5afb4791 100644
--- a/apps/browser/src/background/main.background.ts
+++ b/apps/browser/src/background/main.background.ts
@@ -204,10 +204,12 @@ import {
   VaultExportServiceAbstraction,
 } from "@bitwarden/vault-export-core";
 
+import { OverlayNotificationsBackground as OverlayNotificationsBackgroundInterface } from "../autofill/background/abstractions/overlay-notifications.background";
 import { OverlayBackground as OverlayBackgroundInterface } from "../autofill/background/abstractions/overlay.background";
 import { AutoSubmitLoginBackground } from "../autofill/background/auto-submit-login.background";
 import ContextMenusBackground from "../autofill/background/context-menus.background";
 import NotificationBackground from "../autofill/background/notification.background";
+import { OverlayNotificationsBackground } from "../autofill/background/overlay-notifications.background";
 import { OverlayBackground } from "../autofill/background/overlay.background";
 import TabsBackground from "../autofill/background/tabs.background";
 import WebRequestBackground from "../autofill/background/web-request.background";
@@ -368,6 +370,7 @@ export default class MainBackground {
   private idleBackground: IdleBackground;
   private notificationBackground: NotificationBackground;
   private overlayBackground: OverlayBackgroundInterface;
+  private overlayNotificationsBackground: OverlayNotificationsBackgroundInterface;
   private filelessImporterBackground: FilelessImporterBackground;
   private runtimeBackground: RuntimeBackground;
   private tabsBackground: TabsBackground;
@@ -948,6 +951,7 @@ export default class MainBackground {
       this.accountService,
       this.authService,
       this.configService,
+      this.userNotificationSettingsService,
       messageListener,
     );
     this.auditService = new AuditService(this.cryptoFunctionService, this.apiService);
@@ -1105,6 +1109,12 @@ export default class MainBackground {
         this.accountService,
       );
 
+      this.overlayNotificationsBackground = new OverlayNotificationsBackground(
+        this.logService,
+        this.configService,
+        this.notificationBackground,
+      );
+
       this.filelessImporterBackground = new FilelessImporterBackground(
         this.configService,
         this.authService,
@@ -1238,7 +1248,8 @@ export default class MainBackground {
     await this.vaultTimeoutService.init(true);
     this.fido2Background.init();
     await this.runtimeBackground.init();
-    this.notificationBackground.init();
+    await this.notificationBackground.init();
+    this.overlayNotificationsBackground.init();
     this.filelessImporterBackground.init();
     this.commandsBackground.init();
     this.contextMenusBackground?.init();
diff --git a/apps/browser/src/popup/services/services.module.ts b/apps/browser/src/popup/services/services.module.ts
index 0349d1a694a..098c6eb91ce 100644
--- a/apps/browser/src/popup/services/services.module.ts
+++ b/apps/browser/src/popup/services/services.module.ts
@@ -329,6 +329,7 @@ const safeProviders: SafeProvider[] = [
       AccountServiceAbstraction,
       AuthService,
       ConfigService,
+      UserNotificationSettingsServiceAbstraction,
       MessageListener,
     ],
   }),
diff --git a/apps/browser/test.setup.ts b/apps/browser/test.setup.ts
index 4bb440315a1..27f53e9de15 100644
--- a/apps/browser/test.setup.ts
+++ b/apps/browser/test.setup.ts
@@ -163,6 +163,10 @@ const webRequest = {
     addListener: jest.fn(),
     removeListener: jest.fn(),
   },
+  onCompleted: {
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+  },
 };
 
 const alarms = {
diff --git a/apps/browser/webpack.config.js b/apps/browser/webpack.config.js
index 8d0b695f7a4..7ac5a635b18 100644
--- a/apps/browser/webpack.config.js
+++ b/apps/browser/webpack.config.js
@@ -226,6 +226,10 @@ const mainConfig = {
       "./src/autofill/content/trigger-autofill-script-injection.ts",
     "content/bootstrap-autofill": "./src/autofill/content/bootstrap-autofill.ts",
     "content/bootstrap-autofill-overlay": "./src/autofill/content/bootstrap-autofill-overlay.ts",
+    "content/bootstrap-autofill-overlay-menu":
+      "./src/autofill/content/bootstrap-autofill-overlay-menu.ts",
+    "content/bootstrap-autofill-overlay-notifications":
+      "./src/autofill/content/bootstrap-autofill-overlay-notifications.ts",
     "content/bootstrap-legacy-autofill-overlay":
       "./src/autofill/deprecated/content/bootstrap-legacy-autofill-overlay.ts",
     "content/autofiller": "./src/autofill/content/autofiller.ts",
diff --git a/libs/common/src/autofill/constants/index.ts b/libs/common/src/autofill/constants/index.ts
index b838ff64e9d..4b0ea53ad0d 100644
--- a/libs/common/src/autofill/constants/index.ts
+++ b/libs/common/src/autofill/constants/index.ts
@@ -23,6 +23,8 @@ export const EVENTS = {
   VISIBILITYCHANGE: "visibilitychange",
   MOUSEENTER: "mouseenter",
   MOUSELEAVE: "mouseleave",
+  MOUSEUP: "mouseup",
+  SUBMIT: "submit",
 } as const;
 
 export const ClearClipboardDelay = {
@@ -58,6 +60,8 @@ export const AUTOFILL_OVERLAY_HANDLE_REPOSITION = "autofill-overlay-handle-repos
 
 export const UPDATE_PASSKEYS_HEADINGS_ON_SCROLL = "update-passkeys-headings-on-scroll";
 
+export const AUTOFILL_TRIGGER_FORM_FIELD_SUBMIT = "autofill-trigger-form-field-submit";
+
 export const AutofillOverlayVisibility = {
   Off: 0,
   OnButtonClick: 1,
@@ -101,3 +105,5 @@ export const ExtensionCommand = {
 } as const;
 
 export type ExtensionCommandType = (typeof ExtensionCommand)[keyof typeof ExtensionCommand];
+
+export const CLEAR_NOTIFICATION_LOGIN_DATA_DURATION = 60 * 1000; // 1 minute
diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts
index 9edc14e7b09..1ac4c99b1fa 100644
--- a/libs/common/src/enums/feature-flag.enum.ts
+++ b/libs/common/src/enums/feature-flag.enum.ts
@@ -32,6 +32,7 @@ export enum FeatureFlag {
   GenerateIdentityFillScriptRefactor = "generate-identity-fill-script-refactor",
   DelayFido2PageScriptInitWithinMv2 = "delay-fido2-page-script-init-within-mv2",
   AccountDeprovisioning = "pm-10308-account-deprovisioning",
+  NotificationBarAddLoginImprovements = "notification-bar-add-login-improvements",
 }
 
 export type AllowedFeatureFlagTypes = boolean | number | string;
@@ -74,6 +75,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.GenerateIdentityFillScriptRefactor]: FALSE,
   [FeatureFlag.DelayFido2PageScriptInitWithinMv2]: FALSE,
   [FeatureFlag.AccountDeprovisioning]: FALSE,
+  [FeatureFlag.NotificationBarAddLoginImprovements]: FALSE,
 } satisfies Record<FeatureFlag, AllowedFeatureFlagTypes>;
 
 export type DefaultFeatureFlagValueType = typeof DefaultFeatureFlagValue;

From 7564c4aa7cbbfa2affb2f07ac9025e007d87c245 Mon Sep 17 00:00:00 2001
From: Alec Rippberger <127791530+alec-livefront@users.noreply.github.com>
Date: Tue, 27 Aug 2024 15:19:25 -0500
Subject: [PATCH 08/18] [PM-10833] Add cipher types to "new" dropdown in admin
 console (#10614)

* Add cipher types to "new" dropdown in admin console.

* Keep feature flag code consistent.
---
 .../vault-header/vault-header.component.html  | 30 ++++++++++++++++---
 .../vault-header/vault-header.component.ts    | 18 +++++++++--
 .../app/vault/org-vault/vault.component.html  |  2 +-
 .../app/vault/org-vault/vault.component.ts    |  5 ++--
 4 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.html b/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.html
index 75ea3fd050b..a85d700194e 100644
--- a/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.html
+++ b/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.html
@@ -113,10 +113,32 @@
         {{ "new" | i18n }}<i class="bwi bwi-angle-down tw-ml-2" aria-hidden="true"></i>
       </button>
       <bit-menu #addOptions aria-labelledby="newItemDropdown">
-        <button type="button" bitMenuItem (click)="addCipher()">
-          <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>
-          {{ "item" | i18n }}
-        </button>
+        <ng-container [ngSwitch]="extensionRefreshEnabled">
+          <ng-container *ngSwitchCase="true">
+            <button type="button" bitMenuItem (click)="addCipher(CipherType.Login)">
+              <i class="bwi bwi-globe" slot="start" aria-hidden="true"></i>
+              {{ "typeLogin" | i18n }}
+            </button>
+            <button type="button" bitMenuItem (click)="addCipher(CipherType.Card)">
+              <i class="bwi bwi-credit-card" slot="start" aria-hidden="true"></i>
+              {{ "typeCard" | i18n }}
+            </button>
+            <button type="button" bitMenuItem (click)="addCipher(CipherType.Identity)">
+              <i class="bwi bwi-id-card" slot="start" aria-hidden="true"></i>
+              {{ "typeIdentity" | i18n }}
+            </button>
+            <button type="button" bitMenuItem (click)="addCipher(CipherType.SecureNote)">
+              <i class="bwi bwi-sticky-note" slot="start" aria-hidden="true"></i>
+              {{ "note" | i18n }}
+            </button>
+          </ng-container>
+          <ng-container *ngSwitchCase="false">
+            <button type="button" bitMenuItem (click)="addCipher()">
+              <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>
+              {{ "item" | i18n }}
+            </button>
+          </ng-container>
+        </ng-container>
         <button type="button" bitMenuItem (click)="addCollection()">
           <i class="bwi bwi-fw bwi-collection" aria-hidden="true"></i>
           {{ "collection" | i18n }}
diff --git a/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts b/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts
index 56fb2e4cec8..d9930d22716 100644
--- a/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts
+++ b/apps/web/src/app/vault/org-vault/vault-header/vault-header.component.ts
@@ -10,6 +10,7 @@ import { ProductTierType } from "@bitwarden/common/billing/enums";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { CipherType } from "@bitwarden/common/vault/enums";
 import { TreeNode } from "@bitwarden/common/vault/models/domain/tree-node";
 import {
   DialogService,
@@ -67,7 +68,7 @@ export class VaultHeaderComponent implements OnInit {
   @Input() searchText: string;
 
   /** Emits an event when the new item button is clicked in the header */
-  @Output() onAddCipher = new EventEmitter<void>();
+  @Output() onAddCipher = new EventEmitter<CipherType | undefined>();
 
   /** Emits an event when the new collection button is clicked in the header */
   @Output() onAddCollection = new EventEmitter<void>();
@@ -89,6 +90,14 @@ export class VaultHeaderComponent implements OnInit {
 
   protected restrictProviderAccessFlag = false;
 
+  /**
+   * Whether the extension refresh feature flag is enabled.
+   */
+  protected extensionRefreshEnabled = false;
+
+  /** The cipher type enum. */
+  protected CipherType = CipherType;
+
   constructor(
     private organizationService: OrganizationService,
     private i18nService: I18nService,
@@ -102,6 +111,9 @@ export class VaultHeaderComponent implements OnInit {
     this.restrictProviderAccessFlag = await this.configService.getFeatureFlag(
       FeatureFlag.RestrictProviderAccess,
     );
+    this.extensionRefreshEnabled = await this.configService.getFeatureFlag(
+      FeatureFlag.ExtensionRefresh,
+    );
   }
 
   get title() {
@@ -194,8 +206,8 @@ export class VaultHeaderComponent implements OnInit {
     return this.collection.node.canEdit(this.organization);
   }
 
-  addCipher() {
-    this.onAddCipher.emit();
+  addCipher(cipherType?: CipherType) {
+    this.onAddCipher.emit(cipherType);
   }
 
   async addCollection() {
diff --git a/apps/web/src/app/vault/org-vault/vault.component.html b/apps/web/src/app/vault/org-vault/vault.component.html
index b27c0234a58..63160abea69 100644
--- a/apps/web/src/app/vault/org-vault/vault.component.html
+++ b/apps/web/src/app/vault/org-vault/vault.component.html
@@ -4,7 +4,7 @@
   [organization]="organization"
   [collection]="selectedCollection"
   [searchText]="currentSearchText$ | async"
-  (onAddCipher)="addCipher()"
+  (onAddCipher)="addCipher($event)"
   (onAddCollection)="addCollection()"
   (onEditCollection)="editCollection(selectedCollection.node, $event.tab, $event.readonly)"
   (onDeleteCollection)="deleteCollection(selectedCollection.node)"
diff --git a/apps/web/src/app/vault/org-vault/vault.component.ts b/apps/web/src/app/vault/org-vault/vault.component.ts
index 6aae3cddd1d..aed4c7b4bca 100644
--- a/apps/web/src/app/vault/org-vault/vault.component.ts
+++ b/apps/web/src/app/vault/org-vault/vault.component.ts
@@ -54,6 +54,7 @@ import { OrganizationId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CollectionService } from "@bitwarden/common/vault/abstractions/collection.service";
 import { TotpService } from "@bitwarden/common/vault/abstractions/totp.service";
+import { CipherType } from "@bitwarden/common/vault/enums";
 import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
 import { TreeNode } from "@bitwarden/common/vault/models/domain/tree-node";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
@@ -786,14 +787,14 @@ export class VaultComponent implements OnInit, OnDestroy {
     }
   }
 
-  async addCipher() {
+  async addCipher(cipherType?: CipherType) {
     let collections: CollectionView[] = [];
 
     // Admins limited to only adding items to collections they have access to.
     collections = await firstValueFrom(this.editableCollections$);
 
     await this.editCipher(null, (comp) => {
-      comp.type = this.activeFilter.cipherType;
+      comp.type = cipherType || this.activeFilter.cipherType;
       comp.collections = collections;
       if (this.activeFilter.collectionId) {
         comp.collectionIds = [this.activeFilter.collectionId];

From 76b9adf50beca5b93a05a661d89ce501b3186628 Mon Sep 17 00:00:00 2001
From: Addison Beck <github@addisonbeck.com>
Date: Tue, 27 Aug 2024 18:21:33 -0400
Subject: [PATCH 09/18] Enable event logs to show events logged by the Public
 API (#10660)

* Add PublicApi to event system users

* Remove `import` api service method
---
 .../admin-console/organizations/manage/events.component.ts   | 1 +
 apps/web/src/locales/en/messages.json                        | 4 ++++
 libs/common/src/abstractions/api.service.ts                  | 2 --
 libs/common/src/enums/event-system-user.enum.ts              | 1 +
 libs/common/src/services/api.service.ts                      | 5 -----
 5 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/manage/events.component.ts b/apps/web/src/app/admin-console/organizations/manage/events.component.ts
index 20af02a84f7..ec0a43eeda7 100644
--- a/apps/web/src/app/admin-console/organizations/manage/events.component.ts
+++ b/apps/web/src/app/admin-console/organizations/manage/events.component.ts
@@ -22,6 +22,7 @@ import { BaseEventsComponent } from "../../common/base.events.component";
 const EVENT_SYSTEM_USER_TO_TRANSLATION: Record<EventSystemUser, string> = {
   [EventSystemUser.SCIM]: null, // SCIM acronym not able to be translated so just display SCIM
   [EventSystemUser.DomainVerification]: "domainVerification",
+  [EventSystemUser.PublicApi]: "publicApi",
 };
 
 @Component({
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 29e2e398254..2583747b4f8 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -9012,5 +9012,9 @@
   },
   "secretsManagerWithFreePasswordManagerInfo": {
     "message": "Your complementary one year Password Manager subscription will upgrade to the selected plan. You will not be charged until the complimentary period is over."
+  },
+  "publicApi": {
+    "message": "Public API",
+    "description": "The text, 'API', is an acronymn and should not be translated."
   }
 }
diff --git a/libs/common/src/abstractions/api.service.ts b/libs/common/src/abstractions/api.service.ts
index dc68a9f79ac..f1be46f6645 100644
--- a/libs/common/src/abstractions/api.service.ts
+++ b/libs/common/src/abstractions/api.service.ts
@@ -90,7 +90,6 @@ import { DeleteRecoverRequest } from "../models/request/delete-recover.request";
 import { EventRequest } from "../models/request/event.request";
 import { KdfRequest } from "../models/request/kdf.request";
 import { KeysRequest } from "../models/request/keys.request";
-import { OrganizationImportRequest } from "../models/request/organization-import.request";
 import { PreloginRequest } from "../models/request/prelogin.request";
 import { RegisterRequest } from "../models/request/register.request";
 import { StorageRequest } from "../models/request/storage.request";
@@ -301,7 +300,6 @@ export abstract class ApiService {
   deleteGroupUser: (organizationId: string, id: string, organizationUserId: string) => Promise<any>;
 
   getSync: () => Promise<SyncResponse>;
-  postPublicImportDirectory: (request: OrganizationImportRequest) => Promise<any>;
 
   getSettingsDomains: () => Promise<DomainsResponse>;
   putSettingsDomains: (request: UpdateDomainsRequest) => Promise<DomainsResponse>;
diff --git a/libs/common/src/enums/event-system-user.enum.ts b/libs/common/src/enums/event-system-user.enum.ts
index 757b1d9d7b8..e2d43a4f113 100644
--- a/libs/common/src/enums/event-system-user.enum.ts
+++ b/libs/common/src/enums/event-system-user.enum.ts
@@ -2,4 +2,5 @@
 export enum EventSystemUser {
   SCIM = 1,
   DomainVerification = 2,
+  PublicApi = 3,
 }
diff --git a/libs/common/src/services/api.service.ts b/libs/common/src/services/api.service.ts
index 03ea402363c..3d95190fea2 100644
--- a/libs/common/src/services/api.service.ts
+++ b/libs/common/src/services/api.service.ts
@@ -102,7 +102,6 @@ import { DeleteRecoverRequest } from "../models/request/delete-recover.request";
 import { EventRequest } from "../models/request/event.request";
 import { KdfRequest } from "../models/request/kdf.request";
 import { KeysRequest } from "../models/request/keys.request";
-import { OrganizationImportRequest } from "../models/request/organization-import.request";
 import { PreloginRequest } from "../models/request/prelogin.request";
 import { RegisterRequest } from "../models/request/register.request";
 import { StorageRequest } from "../models/request/storage.request";
@@ -893,10 +892,6 @@ export class ApiService implements ApiServiceAbstraction {
     return new ListResponse(r, PlanResponse);
   }
 
-  async postPublicImportDirectory(request: OrganizationImportRequest): Promise<any> {
-    return this.send("POST", "/public/organization/import", request, true, false);
-  }
-
   async getTaxRates(): Promise<ListResponse<TaxRateResponse>> {
     const r = await this.send("GET", "/plans/sales-tax-rates/", null, true, true);
     return new ListResponse(r, TaxRateResponse);

From d14c6ed728d034642db2038b7a98a7e63c698196 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 27 Aug 2024 20:29:42 -0400
Subject: [PATCH 10/18] [deps] AC: Update css-loader to v7 (#10586)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package-lock.json | 55 +++++++++++++++++++++++++++++++++++++++--------
 package.json      |  2 +-
 2 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 68873cc8314..8c73aa87740 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -128,7 +128,7 @@
         "concurrently": "8.2.2",
         "copy-webpack-plugin": "12.0.2",
         "cross-env": "7.0.3",
-        "css-loader": "6.10.0",
+        "css-loader": "7.1.2",
         "electron": "32.0.1",
         "electron-builder": "24.13.3",
         "electron-log": "5.0.1",
@@ -7486,6 +7486,42 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@storybook/builder-webpack5/node_modules/css-loader": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
+      "integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.33",
+        "postcss-modules-extract-imports": "^3.1.0",
+        "postcss-modules-local-by-default": "^4.0.5",
+        "postcss-modules-scope": "^3.2.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@storybook/builder-webpack5/node_modules/magic-string": {
       "version": "0.30.10",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
@@ -13976,22 +14012,23 @@
       }
     },
     "node_modules/css-loader": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.10.0.tgz",
-      "integrity": "sha512-LTSA/jWbwdMlk+rhmElbDR2vbtQoTBPr7fkJE+mxrHj+7ru0hUmHafDRzWIjIHTwpitWVaqY2/UWGRca3yUgRw==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.2.tgz",
+      "integrity": "sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "icss-utils": "^5.1.0",
         "postcss": "^8.4.33",
-        "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.4",
-        "postcss-modules-scope": "^3.1.1",
+        "postcss-modules-extract-imports": "^3.1.0",
+        "postcss-modules-local-by-default": "^4.0.5",
+        "postcss-modules-scope": "^3.2.0",
         "postcss-modules-values": "^4.0.0",
         "postcss-value-parser": "^4.2.0",
         "semver": "^7.5.4"
       },
       "engines": {
-        "node": ">= 12.13.0"
+        "node": ">= 18.12.0"
       },
       "funding": {
         "type": "opencollective",
@@ -13999,7 +14036,7 @@
       },
       "peerDependencies": {
         "@rspack/core": "0.x || 1.x",
-        "webpack": "^5.0.0"
+        "webpack": "^5.27.0"
       },
       "peerDependenciesMeta": {
         "@rspack/core": {
diff --git a/package.json b/package.json
index ce5c3e81df2..6ec8b53e98f 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,7 @@
     "concurrently": "8.2.2",
     "copy-webpack-plugin": "12.0.2",
     "cross-env": "7.0.3",
-    "css-loader": "6.10.0",
+    "css-loader": "7.1.2",
     "electron": "32.0.1",
     "electron-builder": "24.13.3",
     "electron-log": "5.0.1",

From 29fb3937a91fbab2738e37654376822e6b844581 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 28 Aug 2024 08:22:38 +0000
Subject: [PATCH 11/18] [deps] Tools: Update @types/zxcvbn to v4.4.5 (#10741)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>
---
 package-lock.json | 11 ++++++-----
 package.json      |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8c73aa87740..01026a7a4e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -115,7 +115,7 @@
         "@types/papaparse": "5.3.14",
         "@types/proper-lockfile": "4.1.4",
         "@types/retry": "0.12.5",
-        "@types/zxcvbn": "4.4.4",
+        "@types/zxcvbn": "4.4.5",
         "@typescript-eslint/eslint-plugin": "7.16.1",
         "@typescript-eslint/parser": "7.16.1",
         "@webcomponents/custom-elements": "1.6.0",
@@ -8880,10 +8880,11 @@
       }
     },
     "node_modules/@types/zxcvbn": {
-      "version": "4.4.4",
-      "resolved": "https://registry.npmjs.org/@types/zxcvbn/-/zxcvbn-4.4.4.tgz",
-      "integrity": "sha512-Tuk4q7q0DnpzyJDI4aMeghGuFu2iS1QAdKpabn8JfbtfGmVDUgvZv1I7mEjP61Bvnp3ljKCC8BE6YYSTNxmvRQ==",
-      "dev": true
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/zxcvbn/-/zxcvbn-4.4.5.tgz",
+      "integrity": "sha512-FZJgC5Bxuqg7Rhsm/bx6gAruHHhDQ55r+s0JhDh8CQ16fD7NsJJ+p8YMMQDhSQoIrSmjpqqYWA96oQVMNkjRyA==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "7.16.1",
diff --git a/package.json b/package.json
index 6ec8b53e98f..cc02d001382 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "@types/papaparse": "5.3.14",
     "@types/proper-lockfile": "4.1.4",
     "@types/retry": "0.12.5",
-    "@types/zxcvbn": "4.4.4",
+    "@types/zxcvbn": "4.4.5",
     "@typescript-eslint/eslint-plugin": "7.16.1",
     "@typescript-eslint/parser": "7.16.1",
     "@webcomponents/custom-elements": "1.6.0",

From a49f110fc2da49906a09152c1dd191d0f909c850 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 28 Aug 2024 10:55:36 +0200
Subject: [PATCH 12/18] [deps] Tools: Update jsdom to v24.1.3 (#10747)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 apps/cli/package.json |  2 +-
 package-lock.json     | 14 +++++++++-----
 package.json          |  2 +-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/apps/cli/package.json b/apps/cli/package.json
index 9a0b5df3468..2b7c1333471 100644
--- a/apps/cli/package.json
+++ b/apps/cli/package.json
@@ -66,7 +66,7 @@
     "form-data": "4.0.0",
     "https-proxy-agent": "7.0.2",
     "inquirer": "8.2.6",
-    "jsdom": "24.1.1",
+    "jsdom": "24.1.3",
     "jszip": "3.10.1",
     "koa": "2.15.0",
     "koa-bodyparser": "4.4.1",
diff --git a/package-lock.json b/package-lock.json
index 01026a7a4e2..a9311c7c5b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
         "https-proxy-agent": "7.0.2",
         "inquirer": "8.2.6",
         "jquery": "3.7.1",
-        "jsdom": "24.1.1",
+        "jsdom": "24.1.3",
         "jszip": "3.10.1",
         "koa": "2.15.0",
         "koa-bodyparser": "4.4.1",
@@ -209,7 +209,7 @@
         "form-data": "4.0.0",
         "https-proxy-agent": "7.0.2",
         "inquirer": "8.2.6",
-        "jsdom": "24.1.1",
+        "jsdom": "24.1.3",
         "jszip": "3.10.1",
         "koa": "2.15.0",
         "koa-bodyparser": "4.4.1",
@@ -22754,9 +22754,10 @@
       }
     },
     "node_modules/jsdom": {
-      "version": "24.1.1",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.1.1.tgz",
-      "integrity": "sha512-5O1wWV99Jhq4DV7rCLIoZ/UIhyQeDR7wHVyZAHAshbrvZsLs+Xzz7gtwnlJTJDjleiTKh54F4dXrX70vJQTyJQ==",
+      "version": "24.1.3",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.1.3.tgz",
+      "integrity": "sha512-MyL55p3Ut3cXbeBEG7Hcv0mVM8pp8PBNWxRqchZnSfAiES1v1mRnMeFfaHWIPULpwsYfvO+ZmMZz5tGCnjzDUQ==",
+      "license": "MIT",
       "dependencies": {
         "cssstyle": "^4.0.1",
         "data-urls": "^5.0.0",
@@ -22796,6 +22797,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
       "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+      "license": "MIT",
       "dependencies": {
         "debug": "^4.3.4"
       },
@@ -22807,6 +22809,7 @@
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
       "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "license": "MIT",
       "dependencies": {
         "agent-base": "^7.1.0",
         "debug": "^4.3.4"
@@ -22819,6 +22822,7 @@
       "version": "7.0.5",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
       "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+      "license": "MIT",
       "dependencies": {
         "agent-base": "^7.0.2",
         "debug": "4"
diff --git a/package.json b/package.json
index cc02d001382..c944659d075 100644
--- a/package.json
+++ b/package.json
@@ -176,7 +176,7 @@
     "https-proxy-agent": "7.0.2",
     "inquirer": "8.2.6",
     "jquery": "3.7.1",
-    "jsdom": "24.1.1",
+    "jsdom": "24.1.3",
     "jszip": "3.10.1",
     "koa": "2.15.0",
     "koa-bodyparser": "4.4.1",

From 819c312ce272c4b33efbfdab9618ba090b294597 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 28 Aug 2024 06:46:15 -0400
Subject: [PATCH 13/18] [deps] AC: Update webpack to v5.94.0 [SECURITY]
 (#10759)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package-lock.json | 20 +++++++++++++-------
 package.json      |  2 +-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a9311c7c5b8..02985126f04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -180,7 +180,7 @@
         "url": "0.11.3",
         "util": "0.12.5",
         "wait-on": "7.2.0",
-        "webpack": "5.93.0",
+        "webpack": "5.94.0",
         "webpack-cli": "5.1.4",
         "webpack-dev-server": "5.0.4",
         "webpack-node-externals": "3.0.0"
@@ -35477,12 +35477,12 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.93.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.93.0.tgz",
-      "integrity": "sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==",
+      "version": "5.94.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+      "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
@@ -35491,7 +35491,7 @@
         "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.17.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -35903,6 +35903,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -35919,6 +35920,7 @@
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
       "dev": true,
+      "license": "MIT",
       "peerDependencies": {
         "ajv": "^6.9.1"
       }
@@ -35928,6 +35930,7 @@
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -35941,6 +35944,7 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
       }
@@ -35949,13 +35953,15 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/webpack/node_modules/schema-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
       "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
diff --git a/package.json b/package.json
index c944659d075..b131a2ebdda 100644
--- a/package.json
+++ b/package.json
@@ -142,7 +142,7 @@
     "url": "0.11.3",
     "util": "0.12.5",
     "wait-on": "7.2.0",
-    "webpack": "5.93.0",
+    "webpack": "5.94.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4",
     "webpack-node-externals": "3.0.0"

From 8c4b8d71ea50d63529f08f19d96a0756a1a280d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=9C=A8=20Audrey=20=E2=9C=A8?= <ajensen@bitwarden.com>
Date: Wed, 28 Aug 2024 09:26:17 -0400
Subject: [PATCH 14/18] [PM-5609] passphrase settings component & services
 (#10535)

---
 apps/browser/src/popup/app-routing.module.ts  |   7 +-
 .../credential-generator.component.html       |   1 +
 .../credential-generator.component.ts         |  11 +
 jest.config.js                                |   1 +
 .../src/tools/generator/generator-swap.ts     |  32 ++
 .../tools/state/user-state-subject.spec.ts    |  30 +-
 .../src/tools/state/user-state-subject.ts     |  17 +-
 libs/common/src/tools/types.ts                |  48 +++
 .../generator/components/src/dependencies.ts  |  48 +++
 libs/tools/generator/components/src/index.ts  |   1 +
 .../src/passphrase-settings.component.html    |  38 ++
 .../src/passphrase-settings.component.ts      | 139 +++++++
 libs/tools/generator/components/src/util.ts   |  68 ++++
 .../disabled-passphrase-generator-policy.ts   |   8 -
 .../disabled-password-generator-policy.ts     |  12 -
 .../generator/core/src/data/generators.ts     |  31 ++
 libs/tools/generator/core/src/data/index.ts   |   3 +-
 .../tools/generator/core/src/data/policies.ts |  34 +-
 libs/tools/generator/core/src/index.ts        |   7 +-
 ...phrase-generator-options-evaluator.spec.ts |  46 +--
 .../passphrase-generator-options-evaluator.ts |   6 +-
 .../passphrase-least-privilege.spec.ts        |  14 +-
 ...ssword-generator-options-evaluator.spec.ts | 104 ++---
 .../policies/password-least-privilege.spec.ts |  14 +-
 libs/tools/generator/core/src/rx.ts           |  13 +
 .../credential-generator.service.spec.ts      | 377 ++++++++++++++++++
 .../services/credential-generator.service.ts  | 128 ++++++
 .../generator/core/src/services/index.ts      |   1 +
 .../passphrase-generator-strategy.spec.ts     |   4 +-
 .../password-generator-strategy.spec.ts       |   4 +-
 .../credential-generator-configuration.ts     |  19 +
 libs/tools/generator/core/src/types/index.ts  |   1 +
 .../core/src/types/policy-configuration.ts    |  17 +-
 ...legacy-password-generation.service.spec.ts |   7 +-
 34 files changed, 1147 insertions(+), 144 deletions(-)
 create mode 100644 apps/browser/src/tools/popup/generator/credential-generator.component.html
 create mode 100644 apps/browser/src/tools/popup/generator/credential-generator.component.ts
 create mode 100644 libs/angular/src/tools/generator/generator-swap.ts
 create mode 100644 libs/common/src/tools/types.ts
 create mode 100644 libs/tools/generator/components/src/dependencies.ts
 create mode 100644 libs/tools/generator/components/src/passphrase-settings.component.html
 create mode 100644 libs/tools/generator/components/src/passphrase-settings.component.ts
 create mode 100644 libs/tools/generator/components/src/util.ts
 delete mode 100644 libs/tools/generator/core/src/data/disabled-passphrase-generator-policy.ts
 delete mode 100644 libs/tools/generator/core/src/data/disabled-password-generator-policy.ts
 create mode 100644 libs/tools/generator/core/src/data/generators.ts
 create mode 100644 libs/tools/generator/core/src/services/credential-generator.service.spec.ts
 create mode 100644 libs/tools/generator/core/src/services/credential-generator.service.ts
 create mode 100644 libs/tools/generator/core/src/types/credential-generator-configuration.ts

diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts
index 79a2df30e65..455909336b3 100644
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/apps/browser/src/popup/app-routing.module.ts
@@ -9,6 +9,7 @@ import {
   unauthGuardFn,
 } from "@bitwarden/angular/auth/guards";
 import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard";
+import { generatorSwap } from "@bitwarden/angular/tools/generator/generator-swap";
 import { extensionRefreshSwap } from "@bitwarden/angular/utils/extension-refresh-swap";
 import {
   AnonLayoutWrapperComponent,
@@ -51,6 +52,7 @@ import { PremiumV2Component } from "../billing/popup/settings/premium-v2.compone
 import { PremiumComponent } from "../billing/popup/settings/premium.component";
 import BrowserPopupUtils from "../platform/popup/browser-popup-utils";
 import { popupRouterCacheGuard } from "../platform/popup/view-cache/popup-router-cache.service";
+import { CredentialGeneratorComponent } from "../tools/popup/generator/credential-generator.component";
 import { GeneratorComponent } from "../tools/popup/generator/generator.component";
 import { PasswordGeneratorHistoryComponent } from "../tools/popup/generator/password-generator-history.component";
 import { SendAddEditComponent } from "../tools/popup/send/send-add-edit.component";
@@ -472,12 +474,11 @@ const routes: Routes = [
         canDeactivate: [clearVaultStateGuard],
         data: { state: "tabs_vault" },
       }),
-      {
+      ...generatorSwap(GeneratorComponent, CredentialGeneratorComponent, {
         path: "generator",
-        component: GeneratorComponent,
         canActivate: [authGuard],
         data: { state: "tabs_generator" },
-      },
+      }),
       ...extensionRefreshSwap(SettingsComponent, SettingsV2Component, {
         path: "settings",
         canActivate: [authGuard],
diff --git a/apps/browser/src/tools/popup/generator/credential-generator.component.html b/apps/browser/src/tools/popup/generator/credential-generator.component.html
new file mode 100644
index 00000000000..1bb626e3e89
--- /dev/null
+++ b/apps/browser/src/tools/popup/generator/credential-generator.component.html
@@ -0,0 +1 @@
+<bit-passphrase-settings />
diff --git a/apps/browser/src/tools/popup/generator/credential-generator.component.ts b/apps/browser/src/tools/popup/generator/credential-generator.component.ts
new file mode 100644
index 00000000000..91a17ab2d39
--- /dev/null
+++ b/apps/browser/src/tools/popup/generator/credential-generator.component.ts
@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+
+import { PassphraseSettingsComponent } from "@bitwarden/generator-components";
+
+@Component({
+  standalone: true,
+  selector: "credential-generator",
+  templateUrl: "credential-generator.component.html",
+  imports: [PassphraseSettingsComponent],
+})
+export class CredentialGeneratorComponent {}
diff --git a/jest.config.js b/jest.config.js
index 6526237261f..829adf1bf72 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -32,6 +32,7 @@ module.exports = {
     "<rootDir>/libs/components/jest.config.js",
     "<rootDir>/libs/tools/export/vault-export/vault-export-core/jest.config.js",
     "<rootDir>/libs/tools/generator/core/jest.config.js",
+    "<rootDir>/libs/tools/generator/components/jest.config.js",
     "<rootDir>/libs/tools/generator/extensions/history/jest.config.js",
     "<rootDir>/libs/tools/generator/extensions/legacy/jest.config.js",
     "<rootDir>/libs/tools/generator/extensions/navigation/jest.config.js",
diff --git a/libs/angular/src/tools/generator/generator-swap.ts b/libs/angular/src/tools/generator/generator-swap.ts
new file mode 100644
index 00000000000..16fafc67116
--- /dev/null
+++ b/libs/angular/src/tools/generator/generator-swap.ts
@@ -0,0 +1,32 @@
+import { Type, inject } from "@angular/core";
+import { Route, Routes } from "@angular/router";
+
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+
+import { componentRouteSwap } from "../../utils/component-route-swap";
+
+/**
+ * Helper function to swap between two components based on the GeneratorToolsModernization feature flag.
+ * @param defaultComponent - The current non-refreshed component to render.
+ * @param refreshedComponent - The new refreshed component to render.
+ * @param options - The shared route options to apply to the default component, and to the alt component if altOptions is not provided.
+ * @param altOptions - The alt route options to apply to the alt component.
+ */
+export function generatorSwap(
+  defaultComponent: Type<any>,
+  refreshedComponent: Type<any>,
+  options: Route,
+  altOptions?: Route,
+): Routes {
+  return componentRouteSwap(
+    defaultComponent,
+    refreshedComponent,
+    async () => {
+      const configService = inject(ConfigService);
+      return configService.getFeatureFlag(FeatureFlag.GeneratorToolsModernization);
+    },
+    options,
+    altOptions,
+  );
+}
diff --git a/libs/common/src/tools/state/user-state-subject.spec.ts b/libs/common/src/tools/state/user-state-subject.spec.ts
index 9d019abb0bc..a441505b350 100644
--- a/libs/common/src/tools/state/user-state-subject.spec.ts
+++ b/libs/common/src/tools/state/user-state-subject.spec.ts
@@ -257,8 +257,8 @@ describe("UserStateSubject", () => {
 
       let actual: TestType = null;
       subject.subscribe({
-        error: (value) => {
-          actual = value;
+        error: (value: unknown) => {
+          actual = value as any;
         },
       });
       subject.error(expected);
@@ -275,8 +275,8 @@ describe("UserStateSubject", () => {
 
       let actual: TestType = null;
       subject.subscribe({
-        error: (value) => {
-          actual = value;
+        error: (value: unknown) => {
+          actual = value as any;
         },
       });
       subject.error("expectedError");
@@ -415,8 +415,8 @@ describe("UserStateSubject", () => {
 
       let error = false;
       subject.subscribe({
-        error: (e) => {
-          error = e;
+        error: (e: unknown) => {
+          error = e as any;
         },
       });
       singleUserId$.next(errorUserId);
@@ -434,8 +434,8 @@ describe("UserStateSubject", () => {
 
       let actual = false;
       subject.subscribe({
-        error: (e) => {
-          actual = e;
+        error: (e: unknown) => {
+          actual = e as any;
         },
       });
       singleUserId$.error(expected);
@@ -454,8 +454,8 @@ describe("UserStateSubject", () => {
 
       let actual = false;
       subject.subscribe({
-        error: (e) => {
-          actual = e;
+        error: (e: unknown) => {
+          actual = e as any;
         },
       });
       when$.error(expected);
@@ -464,4 +464,14 @@ describe("UserStateSubject", () => {
       expect(actual).toEqual(expected);
     });
   });
+
+  describe("userId", () => {
+    it("returns the userId to which the subject is bound", () => {
+      const state = new FakeSingleUserState<TestType>(SomeUser, { foo: "init" });
+      const singleUserId$ = new Subject<UserId>();
+      const subject = new UserStateSubject(state, { singleUserId$ });
+
+      expect(subject.userId).toEqual(SomeUser);
+    });
+  });
 });
diff --git a/libs/common/src/tools/state/user-state-subject.ts b/libs/common/src/tools/state/user-state-subject.ts
index 290103664bf..659eb949478 100644
--- a/libs/common/src/tools/state/user-state-subject.ts
+++ b/libs/common/src/tools/state/user-state-subject.ts
@@ -15,6 +15,8 @@ import {
   ignoreElements,
   endWith,
   startWith,
+  Observable,
+  Subscription,
 } from "rxjs";
 import { Simplify } from "type-fest";
 
@@ -59,7 +61,10 @@ export type UserStateSubjectDependencies<State, Dependency> = Simplify<
  * @template State the state stored by the subject
  * @template Dependencies use-specific dependencies provided by the user.
  */
-export class UserStateSubject<State, Dependencies = null> implements SubjectLike<State> {
+export class UserStateSubject<State, Dependencies = null>
+  extends Observable<State>
+  implements SubjectLike<State>
+{
   /**
    * Instantiates the user state subject
    * @param state the backing store of the subject
@@ -76,6 +81,8 @@ export class UserStateSubject<State, Dependencies = null> implements SubjectLike
     private state: SingleUserState<State>,
     private dependencies: UserStateSubjectDependencies<State, Dependencies>,
   ) {
+    super();
+
     // normalize dependencies
     const when$ = (this.dependencies.when$ ?? new BehaviorSubject(true)).pipe(
       distinctUntilChanged(),
@@ -114,6 +121,12 @@ export class UserStateSubject<State, Dependencies = null> implements SubjectLike
       });
   }
 
+  /** The userId to which the subject is bound.
+   */
+  get userId() {
+    return this.state.userId;
+  }
+
   next(value: State) {
     this.input?.next(value);
   }
@@ -130,7 +143,7 @@ export class UserStateSubject<State, Dependencies = null> implements SubjectLike
    * @param observer listening for events
    * @returns the subscription
    */
-  subscribe(observer: Partial<Observer<State>> | ((value: State) => void)): Unsubscribable {
+  subscribe(observer?: Partial<Observer<State>> | ((value: State) => void) | null): Subscription {
     return this.output.subscribe(observer);
   }
 
diff --git a/libs/common/src/tools/types.ts b/libs/common/src/tools/types.ts
new file mode 100644
index 00000000000..0c2f2832eaa
--- /dev/null
+++ b/libs/common/src/tools/types.ts
@@ -0,0 +1,48 @@
+import { Simplify } from "type-fest";
+
+/** Constraints that are shared by all primitive field types */
+type PrimitiveConstraint = {
+  /** presence indicates the field is required */
+  required?: true;
+};
+
+/** Constraints that are shared by string fields */
+type StringConstraints = {
+  /** minimum string length. When absent, min length is 0. */
+  minLength?: number;
+
+  /** maximum string length. When absent, max length is unbounded. */
+  maxLength?: number;
+};
+
+/** Constraints that are shared by number fields */
+type NumberConstraints = {
+  /** minimum number value. When absent, min value is unbounded. */
+  min?: number;
+
+  /** maximum number value. When absent, min value is unbounded. */
+  max?: number;
+
+  /** presence indicates the field only accepts integer values */
+  integer?: true;
+
+  /** requires the number be a multiple of the step value */
+  step?: number;
+};
+
+/** Utility type that transforms keys of T into their supported
+ *  validators.
+ */
+export type Constraints<T> = {
+  [Key in keyof T]: Simplify<
+    PrimitiveConstraint &
+      (T[Key] extends string
+        ? StringConstraints
+        : T[Key] extends number
+          ? NumberConstraints
+          : never)
+  >;
+};
+
+/** utility type for methods that evaluate constraints generically. */
+export type AnyConstraint = PrimitiveConstraint & StringConstraints & NumberConstraints;
diff --git a/libs/tools/generator/components/src/dependencies.ts b/libs/tools/generator/components/src/dependencies.ts
new file mode 100644
index 00000000000..927c3811c86
--- /dev/null
+++ b/libs/tools/generator/components/src/dependencies.ts
@@ -0,0 +1,48 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { ReactiveFormsModule } from "@angular/forms";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { safeProvider } from "@bitwarden/angular/platform/utils/safe-provider";
+import { JslibServicesModule } from "@bitwarden/angular/services/jslib-services.module";
+import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { StateProvider } from "@bitwarden/common/platform/state";
+import {
+  CardComponent,
+  CheckboxModule,
+  ColorPasswordModule,
+  FormFieldModule,
+  InputModule,
+  SectionComponent,
+  SectionHeaderComponent,
+} from "@bitwarden/components";
+import { CredentialGeneratorService } from "@bitwarden/generator-core";
+
+/** Shared module containing generator component dependencies */
+@NgModule({
+  imports: [SectionComponent, SectionHeaderComponent, CardComponent],
+  exports: [
+    JslibModule,
+    JslibServicesModule,
+    FormFieldModule,
+    CommonModule,
+    ReactiveFormsModule,
+    ColorPasswordModule,
+    InputModule,
+    CheckboxModule,
+    SectionComponent,
+    SectionHeaderComponent,
+    CardComponent,
+  ],
+  providers: [
+    safeProvider({
+      provide: CredentialGeneratorService,
+      useClass: CredentialGeneratorService,
+      deps: [StateProvider, PolicyService],
+    }),
+  ],
+  declarations: [],
+})
+export class DependenciesModule {
+  constructor() {}
+}
diff --git a/libs/tools/generator/components/src/index.ts b/libs/tools/generator/components/src/index.ts
index e69de29bb2d..ae631f71373 100644
--- a/libs/tools/generator/components/src/index.ts
+++ b/libs/tools/generator/components/src/index.ts
@@ -0,0 +1 @@
+export { PassphraseSettingsComponent } from "./passphrase-settings.component";
diff --git a/libs/tools/generator/components/src/passphrase-settings.component.html b/libs/tools/generator/components/src/passphrase-settings.component.html
new file mode 100644
index 00000000000..c19c03943b3
--- /dev/null
+++ b/libs/tools/generator/components/src/passphrase-settings.component.html
@@ -0,0 +1,38 @@
+<bit-section>
+  <bit-section-header *ngIf="showHeader">
+    <h6 bitTypography="h6">{{ "options" | i18n }}</h6>
+  </bit-section-header>
+  <form class="box" [formGroup]="settings" class="tw-container">
+    <div class="tw-mb-4">
+      <bit-card>
+        <bit-form-field>
+          <bit-label>{{ "numWords" | i18n }}</bit-label>
+          <input
+            bitInput
+            formControlName="numWords"
+            id="num-words"
+            type="number"
+            [min]="minNumWords"
+            [max]="maxNumWords"
+          />
+        </bit-form-field>
+      </bit-card>
+    </div>
+    <div>
+      <bit-card>
+        <bit-form-field>
+          <bit-label>{{ "wordSeparator" | i18n }}</bit-label>
+          <input bitInput formControlName="wordSeparator" id="word-separator" type="text" />
+        </bit-form-field>
+        <bit-form-control>
+          <input bitCheckbox formControlName="capitalize" id="capitalize" type="checkbox" />
+          <bit-label>{{ "capitalize" | i18n }}</bit-label>
+        </bit-form-control>
+        <bit-form-control>
+          <input bitCheckbox formControlName="includeNumber" id="include-number" type="checkbox" />
+          <bit-label>{{ "includeNumber" | i18n }}</bit-label>
+        </bit-form-control>
+      </bit-card>
+    </div>
+  </form>
+</bit-section>
diff --git a/libs/tools/generator/components/src/passphrase-settings.component.ts b/libs/tools/generator/components/src/passphrase-settings.component.ts
new file mode 100644
index 00000000000..f55cc7ba577
--- /dev/null
+++ b/libs/tools/generator/components/src/passphrase-settings.component.ts
@@ -0,0 +1,139 @@
+import { OnInit, Input, Output, EventEmitter, Component, OnDestroy } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+import { BehaviorSubject, skip, takeUntil, Subject } from "rxjs";
+
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { UserId } from "@bitwarden/common/types/guid";
+import {
+  Generators,
+  CredentialGeneratorService,
+  PassphraseGenerationOptions,
+} from "@bitwarden/generator-core";
+
+import { DependenciesModule } from "./dependencies";
+import { completeOnAccountSwitch, toValidators } from "./util";
+
+const Controls = Object.freeze({
+  numWords: "numWords",
+  includeNumber: "includeNumber",
+  capitalize: "capitalize",
+  wordSeparator: "wordSeparator",
+});
+
+/** Options group for passphrases */
+@Component({
+  standalone: true,
+  selector: "bit-passphrase-settings",
+  templateUrl: "passphrase-settings.component.html",
+  imports: [DependenciesModule],
+})
+export class PassphraseSettingsComponent implements OnInit, OnDestroy {
+  /** Instantiates the component
+   *  @param accountService queries user availability
+   *  @param generatorService settings and policy logic
+   *  @param formBuilder reactive form controls
+   */
+  constructor(
+    private formBuilder: FormBuilder,
+    private generatorService: CredentialGeneratorService,
+    private accountService: AccountService,
+  ) {}
+
+  /** Binds the passphrase component to a specific user's settings.
+   *  When this input is not provided, the form binds to the active
+   *  user
+   */
+  @Input()
+  userId: UserId | null;
+
+  /** When `true`, an options header is displayed by the component. Otherwise, the header is hidden. */
+  @Input()
+  showHeader: boolean = true;
+
+  /** Emits settings updates and completes if the settings become unavailable.
+   * @remarks this does not emit the initial settings. If you would like
+   *   to receive live settings updates including the initial update,
+   *   use `CredentialGeneratorService.settings$(...)` instead.
+   */
+  @Output()
+  readonly onUpdated = new EventEmitter<PassphraseGenerationOptions>();
+
+  protected settings = this.formBuilder.group({
+    [Controls.numWords]: [Generators.Passphrase.settings.initial.numWords],
+    [Controls.wordSeparator]: [Generators.Passphrase.settings.initial.wordSeparator],
+    [Controls.capitalize]: [Generators.Passphrase.settings.initial.capitalize],
+    [Controls.includeNumber]: [Generators.Passphrase.settings.initial.includeNumber],
+  });
+
+  async ngOnInit() {
+    const singleUserId$ = this.singleUserId$();
+    const settings = await this.generatorService.settings(Generators.Passphrase, { singleUserId$ });
+
+    // skips reactive event emissions to break a subscription cycle
+    settings.pipe(takeUntil(this.destroyed$)).subscribe((s) => {
+      this.settings.patchValue(s, { emitEvent: false });
+    });
+
+    // the first emission is the current value; subsequent emissions are updates
+    settings.pipe(skip(1), takeUntil(this.destroyed$)).subscribe(this.onUpdated);
+
+    // dynamic policy enforcement
+    this.generatorService
+      .policy$(Generators.Passphrase, { userId$: singleUserId$ })
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe((policy) => {
+        this.settings
+          .get(Controls.numWords)
+          .setValidators(toValidators(Controls.numWords, Generators.Passphrase, policy));
+
+        this.settings
+          .get(Controls.wordSeparator)
+          .setValidators(toValidators(Controls.wordSeparator, Generators.Passphrase, policy));
+
+        // forward word boundaries to the template (can't do it through the rx form)
+        // FIXME: move the boundary logic fully into the policy evaluator
+        this.minNumWords =
+          policy.numWords?.min ?? Generators.Passphrase.settings.constraints.numWords.min;
+        this.maxNumWords =
+          policy.numWords?.max ?? Generators.Passphrase.settings.constraints.numWords.max;
+
+        this.toggleEnabled(Controls.capitalize, !policy.policy.capitalize);
+        this.toggleEnabled(Controls.includeNumber, !policy.policy.includeNumber);
+      });
+
+    // now that outputs are set up, connect inputs
+    this.settings.valueChanges.pipe(takeUntil(this.destroyed$)).subscribe(settings);
+  }
+
+  /** attribute binding for numWords[min] */
+  protected minNumWords: number;
+
+  /** attribute binding for numWords[max] */
+  protected maxNumWords: number;
+
+  private toggleEnabled(setting: keyof typeof Controls, enabled: boolean) {
+    if (enabled) {
+      this.settings.get(setting).enable();
+    } else {
+      this.settings.get(setting).disable();
+    }
+  }
+
+  private singleUserId$() {
+    // FIXME: this branch should probably scan for the user and make sure
+    // the account is unlocked
+    if (this.userId) {
+      return new BehaviorSubject(this.userId as UserId).asObservable();
+    }
+
+    return this.accountService.activeAccount$.pipe(
+      completeOnAccountSwitch(),
+      takeUntil(this.destroyed$),
+    );
+  }
+
+  private readonly destroyed$ = new Subject<void>();
+  ngOnDestroy(): void {
+    this.destroyed$.complete();
+  }
+}
diff --git a/libs/tools/generator/components/src/util.ts b/libs/tools/generator/components/src/util.ts
new file mode 100644
index 00000000000..07d6277c0c6
--- /dev/null
+++ b/libs/tools/generator/components/src/util.ts
@@ -0,0 +1,68 @@
+import { ValidatorFn, Validators } from "@angular/forms";
+import { map, pairwise, pipe, skipWhile, startWith, takeWhile } from "rxjs";
+
+import { AnyConstraint, Constraints } from "@bitwarden/common/tools/types";
+import { UserId } from "@bitwarden/common/types/guid";
+import { CredentialGeneratorConfiguration } from "@bitwarden/generator-core";
+
+export function completeOnAccountSwitch() {
+  return pipe(
+    map(({ id }: { id: UserId | null }) => id),
+    skipWhile((id) => !id),
+    startWith(null as UserId),
+    pairwise(),
+    takeWhile(([prev, next]) => (prev ?? next) === next),
+    map(([_, id]) => id),
+  );
+}
+
+export function toValidators<Policy, Settings>(
+  target: keyof Settings,
+  configuration: CredentialGeneratorConfiguration<Settings, Policy>,
+  policy?: Constraints<Settings>,
+) {
+  const validators: Array<ValidatorFn> = [];
+
+  // widen the types to avoid typecheck issues
+  const config: AnyConstraint = configuration.settings.constraints[target];
+  const runtime: AnyConstraint = policy[target];
+
+  const required = getConstraint("required", config, runtime) ?? false;
+  if (required) {
+    validators.push(Validators.required);
+  }
+
+  const maxLength = getConstraint("maxLength", config, runtime);
+  if (maxLength !== undefined) {
+    validators.push(Validators.maxLength(maxLength));
+  }
+
+  const minLength = getConstraint("minLength", config, runtime);
+  if (minLength !== undefined) {
+    validators.push(Validators.minLength(config.minLength));
+  }
+
+  const min = getConstraint("min", config, runtime);
+  if (min !== undefined) {
+    validators.push(Validators.min(min));
+  }
+
+  const max = getConstraint("max", config, runtime);
+  if (max === undefined) {
+    validators.push(Validators.max(max));
+  }
+
+  return validators;
+}
+
+function getConstraint<Key extends keyof AnyConstraint>(
+  key: Key,
+  config: AnyConstraint,
+  policy?: AnyConstraint,
+) {
+  if (policy && key in policy) {
+    return policy[key] ?? config[key];
+  } else if (key in config) {
+    return config[key];
+  }
+}
diff --git a/libs/tools/generator/core/src/data/disabled-passphrase-generator-policy.ts b/libs/tools/generator/core/src/data/disabled-passphrase-generator-policy.ts
deleted file mode 100644
index 2eb77a2cd4e..00000000000
--- a/libs/tools/generator/core/src/data/disabled-passphrase-generator-policy.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { PassphraseGeneratorPolicy } from "../types";
-
-/** The default options for password generation policy. */
-export const DisabledPassphraseGeneratorPolicy: PassphraseGeneratorPolicy = Object.freeze({
-  minNumberWords: 0,
-  capitalize: false,
-  includeNumber: false,
-});
diff --git a/libs/tools/generator/core/src/data/disabled-password-generator-policy.ts b/libs/tools/generator/core/src/data/disabled-password-generator-policy.ts
deleted file mode 100644
index 4fc921975c0..00000000000
--- a/libs/tools/generator/core/src/data/disabled-password-generator-policy.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { PasswordGeneratorPolicy } from "../types";
-
-/** The default options for password generation policy. */
-export const DisabledPasswordGeneratorPolicy: PasswordGeneratorPolicy = Object.freeze({
-  minLength: 0,
-  useUppercase: false,
-  useLowercase: false,
-  useNumbers: false,
-  numberCount: 0,
-  useSpecial: false,
-  specialCount: 0,
-});
diff --git a/libs/tools/generator/core/src/data/generators.ts b/libs/tools/generator/core/src/data/generators.ts
new file mode 100644
index 00000000000..dadba41f422
--- /dev/null
+++ b/libs/tools/generator/core/src/data/generators.ts
@@ -0,0 +1,31 @@
+import { PASSPHRASE_SETTINGS } from "../strategies/storage";
+import { PassphraseGenerationOptions, PassphraseGeneratorPolicy } from "../types";
+import { CredentialGeneratorConfiguration } from "../types/credential-generator-configuration";
+
+import { DefaultPassphraseBoundaries } from "./default-passphrase-boundaries";
+import { DefaultPassphraseGenerationOptions } from "./default-passphrase-generation-options";
+import { Policies } from "./policies";
+
+const PASSPHRASE = Object.freeze({
+  settings: {
+    initial: DefaultPassphraseGenerationOptions,
+    constraints: {
+      numWords: {
+        min: DefaultPassphraseBoundaries.numWords.min,
+        max: DefaultPassphraseBoundaries.numWords.max,
+      },
+      wordSeparator: { maxLength: 1 },
+    },
+    account: PASSPHRASE_SETTINGS,
+  },
+  policy: Policies.Passphrase,
+} satisfies CredentialGeneratorConfiguration<
+  PassphraseGenerationOptions,
+  PassphraseGeneratorPolicy
+>);
+
+/** Generator configurations */
+export const Generators = Object.freeze({
+  /** Passphrase generator configuration */
+  Passphrase: PASSPHRASE,
+});
diff --git a/libs/tools/generator/core/src/data/index.ts b/libs/tools/generator/core/src/data/index.ts
index b4aa4fe3b93..eaaac757ff5 100644
--- a/libs/tools/generator/core/src/data/index.ts
+++ b/libs/tools/generator/core/src/data/index.ts
@@ -1,3 +1,4 @@
+export * from "./generators";
 export * from "./default-addy-io-options";
 export * from "./default-catchall-options";
 export * from "./default-duck-duck-go-options";
@@ -11,8 +12,6 @@ export * from "./default-passphrase-generation-options";
 export * from "./default-password-generation-options";
 export * from "./default-subaddress-generator-options";
 export * from "./default-simple-login-options";
-export * from "./disabled-passphrase-generator-policy";
-export * from "./disabled-password-generator-policy";
 export * from "./forwarders";
 export * from "./integrations";
 export * from "./policies";
diff --git a/libs/tools/generator/core/src/data/policies.ts b/libs/tools/generator/core/src/data/policies.ts
index e7271e5616e..7df1f603602 100644
--- a/libs/tools/generator/core/src/data/policies.ts
+++ b/libs/tools/generator/core/src/data/policies.ts
@@ -1,23 +1,45 @@
-import { DisabledPassphraseGeneratorPolicy, DisabledPasswordGeneratorPolicy } from "../data";
+import { PolicyType } from "@bitwarden/common/admin-console/enums";
+
 import {
   passphraseLeastPrivilege,
   passwordLeastPrivilege,
   PassphraseGeneratorOptionsEvaluator,
   PasswordGeneratorOptionsEvaluator,
 } from "../policies";
-import { PassphraseGeneratorPolicy, PasswordGeneratorPolicy, PolicyConfiguration } from "../types";
+import {
+  PassphraseGenerationOptions,
+  PassphraseGeneratorPolicy,
+  PasswordGenerationOptions,
+  PasswordGeneratorPolicy,
+  PolicyConfiguration,
+} from "../types";
 
 const PASSPHRASE = Object.freeze({
-  disabledValue: DisabledPassphraseGeneratorPolicy,
+  type: PolicyType.PasswordGenerator,
+  disabledValue: Object.freeze({
+    minNumberWords: 0,
+    capitalize: false,
+    includeNumber: false,
+  }),
   combine: passphraseLeastPrivilege,
   createEvaluator: (policy) => new PassphraseGeneratorOptionsEvaluator(policy),
-} as PolicyConfiguration<PassphraseGeneratorPolicy, PassphraseGeneratorOptionsEvaluator>);
+  createEvaluatorV2: (policy) => new PassphraseGeneratorOptionsEvaluator(policy),
+} as PolicyConfiguration<PassphraseGeneratorPolicy, PassphraseGenerationOptions>);
 
 const PASSWORD = Object.freeze({
-  disabledValue: DisabledPasswordGeneratorPolicy,
+  type: PolicyType.PasswordGenerator,
+  disabledValue: Object.freeze({
+    minLength: 0,
+    useUppercase: false,
+    useLowercase: false,
+    useNumbers: false,
+    numberCount: 0,
+    useSpecial: false,
+    specialCount: 0,
+  }),
   combine: passwordLeastPrivilege,
   createEvaluator: (policy) => new PasswordGeneratorOptionsEvaluator(policy),
-} as PolicyConfiguration<PasswordGeneratorPolicy, PasswordGeneratorOptionsEvaluator>);
+} as PolicyConfiguration<PasswordGeneratorPolicy, PasswordGenerationOptions>);
 
 /** Policy configurations */
 export const Policies = Object.freeze({
diff --git a/libs/tools/generator/core/src/index.ts b/libs/tools/generator/core/src/index.ts
index 330bb64f590..494d034b674 100644
--- a/libs/tools/generator/core/src/index.ts
+++ b/libs/tools/generator/core/src/index.ts
@@ -1,10 +1,15 @@
+// The root module interface has API stability guarantees
 export * from "./abstractions";
 export * from "./data";
 export { createRandomizer } from "./factories";
+export * from "./types";
+export { CredentialGeneratorService } from "./services";
+
+// These internal interfacess are exposed for use by other generator modules
+// They are unstable and may change arbitrarily
 export * as engine from "./engine";
 export * as integration from "./integration";
 export * as policies from "./policies";
 export * as rx from "./rx";
 export * as services from "./services";
 export * as strategies from "./strategies";
-export * from "./types";
diff --git a/libs/tools/generator/core/src/policies/passphrase-generator-options-evaluator.spec.ts b/libs/tools/generator/core/src/policies/passphrase-generator-options-evaluator.spec.ts
index 3a57df70df1..811c4aa822c 100644
--- a/libs/tools/generator/core/src/policies/passphrase-generator-options-evaluator.spec.ts
+++ b/libs/tools/generator/core/src/policies/passphrase-generator-options-evaluator.spec.ts
@@ -1,4 +1,4 @@
-import { DisabledPassphraseGeneratorPolicy, DefaultPassphraseBoundaries } from "../data";
+import { Policies, DefaultPassphraseBoundaries } from "../data";
 import { PassphraseGenerationOptions } from "../types";
 
 import { PassphraseGeneratorOptionsEvaluator } from "./passphrase-generator-options-evaluator";
@@ -6,7 +6,7 @@ import { PassphraseGeneratorOptionsEvaluator } from "./passphrase-generator-opti
 describe("Password generator options builder", () => {
   describe("constructor()", () => {
     it("should set the policy object to a copy of the input policy", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       policy.minNumberWords = 10; // arbitrary change for deep equality check
 
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
@@ -16,7 +16,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should set default boundaries when a default policy is used", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
 
       expect(builder.numWords).toEqual(DefaultPassphraseBoundaries.numWords);
@@ -25,7 +25,7 @@ describe("Password generator options builder", () => {
     it.each([1, 2])(
       "should use the default word boundaries when they are greater than `policy.minNumberWords` (= %i)",
       (minNumberWords) => {
-        const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Passphrase.disabledValue);
         policy.minNumberWords = minNumberWords;
 
         const builder = new PassphraseGeneratorOptionsEvaluator(policy);
@@ -37,7 +37,7 @@ describe("Password generator options builder", () => {
     it.each([8, 12, 18])(
       "should use `policy.minNumberWords` (= %i) when it is greater than the default minimum words",
       (minNumberWords) => {
-        const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Passphrase.disabledValue);
         policy.minNumberWords = minNumberWords;
 
         const builder = new PassphraseGeneratorOptionsEvaluator(policy);
@@ -50,7 +50,7 @@ describe("Password generator options builder", () => {
     it.each([150, 300, 9000])(
       "should use `policy.minNumberWords` (= %i) when it is greater than the default boundaries",
       (minNumberWords) => {
-        const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Passphrase.disabledValue);
         policy.minNumberWords = minNumberWords;
 
         const builder = new PassphraseGeneratorOptionsEvaluator(policy);
@@ -63,14 +63,14 @@ describe("Password generator options builder", () => {
 
   describe("policyInEffect", () => {
     it("should return false when the policy has no effect", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
 
       expect(builder.policyInEffect).toEqual(false);
     });
 
     it("should return true when the policy has a numWords greater than the default boundary", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       policy.minNumberWords = DefaultPassphraseBoundaries.numWords.min + 1;
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
 
@@ -78,7 +78,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should return true when the policy has capitalize enabled", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       policy.capitalize = true;
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
 
@@ -86,7 +86,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should return true when the policy has includeNumber enabled", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       policy.includeNumber = true;
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
 
@@ -98,7 +98,7 @@ describe("Password generator options builder", () => {
     // All tests should freeze the options to ensure they are not modified
 
     it("should set `capitalize` to `false` when the policy does not override it", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({});
 
@@ -108,7 +108,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should set `capitalize` to `true` when the policy overrides it", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       policy.capitalize = true;
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({ capitalize: false });
@@ -119,7 +119,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should set `includeNumber` to false when the policy does not override it", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({});
 
@@ -129,7 +129,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should set `includeNumber` to true when the policy overrides it", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       policy.includeNumber = true;
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({ includeNumber: false });
@@ -140,7 +140,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should set `numWords` to the minimum value when it isn't supplied", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({});
 
@@ -154,7 +154,7 @@ describe("Password generator options builder", () => {
       (numWords) => {
         expect(numWords).toBeLessThan(DefaultPassphraseBoundaries.numWords.min);
 
-        const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Passphrase.disabledValue);
         const builder = new PassphraseGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ numWords });
 
@@ -170,7 +170,7 @@ describe("Password generator options builder", () => {
         expect(numWords).toBeGreaterThanOrEqual(DefaultPassphraseBoundaries.numWords.min);
         expect(numWords).toBeLessThanOrEqual(DefaultPassphraseBoundaries.numWords.max);
 
-        const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Passphrase.disabledValue);
         const builder = new PassphraseGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ numWords });
 
@@ -185,7 +185,7 @@ describe("Password generator options builder", () => {
       (numWords) => {
         expect(numWords).toBeGreaterThan(DefaultPassphraseBoundaries.numWords.max);
 
-        const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Passphrase.disabledValue);
         const builder = new PassphraseGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ numWords });
 
@@ -196,7 +196,7 @@ describe("Password generator options builder", () => {
     );
 
     it("should preserve unknown properties", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({
         unknown: "property",
@@ -214,7 +214,7 @@ describe("Password generator options builder", () => {
     // All tests should freeze the options to ensure they are not modified
 
     it("should return the input options without altering them", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({ wordSeparator: "%" });
 
@@ -224,7 +224,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should set `wordSeparator` to '-' when it isn't supplied and there is no policy override", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({});
 
@@ -234,7 +234,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should leave `wordSeparator` as the empty string '' when it is the empty string", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({ wordSeparator: "" });
 
@@ -244,7 +244,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should preserve unknown properties", () => {
-      const policy = Object.assign({}, DisabledPassphraseGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Passphrase.disabledValue);
       const builder = new PassphraseGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({
         unknown: "property",
diff --git a/libs/tools/generator/core/src/policies/passphrase-generator-options-evaluator.ts b/libs/tools/generator/core/src/policies/passphrase-generator-options-evaluator.ts
index 35f4e07dfd0..5a510ed3a82 100644
--- a/libs/tools/generator/core/src/policies/passphrase-generator-options-evaluator.ts
+++ b/libs/tools/generator/core/src/policies/passphrase-generator-options-evaluator.ts
@@ -1,3 +1,5 @@
+import { Constraints } from "@bitwarden/common/tools/types";
+
 import { PolicyEvaluator } from "../abstractions";
 import { DefaultPassphraseGenerationOptions, DefaultPassphraseBoundaries } from "../data";
 import { Boundary, PassphraseGenerationOptions, PassphraseGeneratorPolicy } from "../types";
@@ -5,7 +7,9 @@ import { Boundary, PassphraseGenerationOptions, PassphraseGeneratorPolicy } from
 /** Enforces policy for passphrase generation options.
  */
 export class PassphraseGeneratorOptionsEvaluator
-  implements PolicyEvaluator<PassphraseGeneratorPolicy, PassphraseGenerationOptions>
+  implements
+    PolicyEvaluator<PassphraseGeneratorPolicy, PassphraseGenerationOptions>,
+    Constraints<PassphraseGenerationOptions>
 {
   // This design is not ideal, but it is a step towards a more robust passphrase
   // generator. Ideally, `sanitize` would be implemented on an options class,
diff --git a/libs/tools/generator/core/src/policies/passphrase-least-privilege.spec.ts b/libs/tools/generator/core/src/policies/passphrase-least-privilege.spec.ts
index 4a330f032fc..ecac3855987 100644
--- a/libs/tools/generator/core/src/policies/passphrase-least-privilege.spec.ts
+++ b/libs/tools/generator/core/src/policies/passphrase-least-privilege.spec.ts
@@ -4,7 +4,7 @@ import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 import { PolicyId } from "@bitwarden/common/types/guid";
 
-import { DisabledPassphraseGeneratorPolicy } from "../data";
+import { Policies } from "../data";
 
 import { passphraseLeastPrivilege } from "./passphrase-least-privilege";
 
@@ -26,17 +26,17 @@ describe("passphraseLeastPrivilege", () => {
   it("should return the accumulator when the policy type does not apply", () => {
     const policy = createPolicy({}, PolicyType.RequireSso);
 
-    const result = passphraseLeastPrivilege(DisabledPassphraseGeneratorPolicy, policy);
+    const result = passphraseLeastPrivilege(Policies.Passphrase.disabledValue, policy);
 
-    expect(result).toEqual(DisabledPassphraseGeneratorPolicy);
+    expect(result).toEqual(Policies.Passphrase.disabledValue);
   });
 
   it("should return the accumulator when the policy is not enabled", () => {
     const policy = createPolicy({}, PolicyType.PasswordGenerator, false);
 
-    const result = passphraseLeastPrivilege(DisabledPassphraseGeneratorPolicy, policy);
+    const result = passphraseLeastPrivilege(Policies.Passphrase.disabledValue, policy);
 
-    expect(result).toEqual(DisabledPassphraseGeneratorPolicy);
+    expect(result).toEqual(Policies.Passphrase.disabledValue);
   });
 
   it.each([
@@ -46,8 +46,8 @@ describe("passphraseLeastPrivilege", () => {
   ])("should take the %p from the policy", (input, value) => {
     const policy = createPolicy({ [input]: value });
 
-    const result = passphraseLeastPrivilege(DisabledPassphraseGeneratorPolicy, policy);
+    const result = passphraseLeastPrivilege(Policies.Passphrase.disabledValue, policy);
 
-    expect(result).toEqual({ ...DisabledPassphraseGeneratorPolicy, [input]: value });
+    expect(result).toEqual({ ...Policies.Passphrase.disabledValue, [input]: value });
   });
 });
diff --git a/libs/tools/generator/core/src/policies/password-generator-options-evaluator.spec.ts b/libs/tools/generator/core/src/policies/password-generator-options-evaluator.spec.ts
index a703388f95c..c6cc96dd82c 100644
--- a/libs/tools/generator/core/src/policies/password-generator-options-evaluator.spec.ts
+++ b/libs/tools/generator/core/src/policies/password-generator-options-evaluator.spec.ts
@@ -1,4 +1,4 @@
-import { DefaultPasswordBoundaries, DisabledPasswordGeneratorPolicy } from "../data";
+import { DefaultPasswordBoundaries, Policies } from "../data";
 import { PasswordGenerationOptions } from "../types";
 
 import { PasswordGeneratorOptionsEvaluator } from "./password-generator-options-evaluator";
@@ -8,7 +8,7 @@ describe("Password generator options builder", () => {
 
   describe("constructor()", () => {
     it("should set the policy object to a copy of the input policy", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
       policy.minLength = 10; // arbitrary change for deep equality check
 
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
@@ -18,7 +18,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should set default boundaries when a default policy is used", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
 
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
 
@@ -32,7 +32,7 @@ describe("Password generator options builder", () => {
       (minLength) => {
         expect(minLength).toBeLessThan(DefaultPasswordBoundaries.length.min);
 
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.minLength = minLength;
 
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
@@ -47,7 +47,7 @@ describe("Password generator options builder", () => {
         expect(expectedLength).toBeGreaterThan(DefaultPasswordBoundaries.length.min);
         expect(expectedLength).toBeLessThanOrEqual(DefaultPasswordBoundaries.length.max);
 
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.minLength = expectedLength;
 
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
@@ -62,7 +62,7 @@ describe("Password generator options builder", () => {
       (expectedLength) => {
         expect(expectedLength).toBeGreaterThan(DefaultPasswordBoundaries.length.max);
 
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.minLength = expectedLength;
 
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
@@ -78,7 +78,7 @@ describe("Password generator options builder", () => {
         expect(expectedMinDigits).toBeGreaterThan(DefaultPasswordBoundaries.minDigits.min);
         expect(expectedMinDigits).toBeLessThanOrEqual(DefaultPasswordBoundaries.minDigits.max);
 
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.numberCount = expectedMinDigits;
 
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
@@ -93,7 +93,7 @@ describe("Password generator options builder", () => {
       (expectedMinDigits) => {
         expect(expectedMinDigits).toBeGreaterThan(DefaultPasswordBoundaries.minDigits.max);
 
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.numberCount = expectedMinDigits;
 
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
@@ -113,7 +113,7 @@ describe("Password generator options builder", () => {
           DefaultPasswordBoundaries.minSpecialCharacters.max,
         );
 
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.specialCount = expectedSpecialCharacters;
 
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
@@ -132,7 +132,7 @@ describe("Password generator options builder", () => {
           DefaultPasswordBoundaries.minSpecialCharacters.max,
         );
 
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.specialCount = expectedSpecialCharacters;
 
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
@@ -151,7 +151,7 @@ describe("Password generator options builder", () => {
       (expectedLength, numberCount, specialCount) => {
         expect(expectedLength).toBeGreaterThanOrEqual(DefaultPasswordBoundaries.length.min);
 
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.numberCount = numberCount;
         policy.specialCount = specialCount;
 
@@ -164,14 +164,14 @@ describe("Password generator options builder", () => {
 
   describe("policyInEffect", () => {
     it("should return false when the policy has no effect", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
 
       expect(builder.policyInEffect).toEqual(false);
     });
 
     it("should return true when the policy has a minlength greater than the default boundary", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
       policy.minLength = DefaultPasswordBoundaries.length.min + 1;
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
 
@@ -179,7 +179,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should return true when the policy has a number count greater than the default boundary", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
       policy.numberCount = DefaultPasswordBoundaries.minDigits.min + 1;
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
 
@@ -187,7 +187,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should return true when the policy has a special character count greater than the default boundary", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
       policy.specialCount = DefaultPasswordBoundaries.minSpecialCharacters.min + 1;
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
 
@@ -195,7 +195,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should return true when the policy has uppercase enabled", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
       policy.useUppercase = true;
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
 
@@ -203,7 +203,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should return true when the policy has lowercase enabled", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
       policy.useLowercase = true;
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
 
@@ -211,7 +211,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should return true when the policy has numbers enabled", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
       policy.useNumbers = true;
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
 
@@ -219,7 +219,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should return true when the policy has special characters enabled", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
       policy.useSpecial = true;
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
 
@@ -237,7 +237,7 @@ describe("Password generator options builder", () => {
     ])(
       "should set `options.uppercase` to '%s' when `policy.useUppercase` is false and `options.uppercase` is '%s'",
       (expectedUppercase, uppercase) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.useUppercase = false;
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ ...defaultOptions, uppercase });
@@ -251,7 +251,7 @@ describe("Password generator options builder", () => {
     it.each([false, true, undefined])(
       "should set `options.uppercase` (= %s) to true when `policy.useUppercase` is true",
       (uppercase) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.useUppercase = true;
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ ...defaultOptions, uppercase });
@@ -269,7 +269,7 @@ describe("Password generator options builder", () => {
     ])(
       "should set `options.lowercase` to '%s' when `policy.useLowercase` is false and `options.lowercase` is '%s'",
       (expectedLowercase, lowercase) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.useLowercase = false;
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ ...defaultOptions, lowercase });
@@ -283,7 +283,7 @@ describe("Password generator options builder", () => {
     it.each([false, true, undefined])(
       "should set `options.lowercase` (= %s) to true when `policy.useLowercase` is true",
       (lowercase) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.useLowercase = true;
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ ...defaultOptions, lowercase });
@@ -301,7 +301,7 @@ describe("Password generator options builder", () => {
     ])(
       "should set `options.number` to '%s' when `policy.useNumbers` is false and `options.number` is '%s'",
       (expectedNumber, number) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.useNumbers = false;
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ ...defaultOptions, number });
@@ -315,7 +315,7 @@ describe("Password generator options builder", () => {
     it.each([false, true, undefined])(
       "should set `options.number` (= %s) to true when `policy.useNumbers` is true",
       (number) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.useNumbers = true;
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ ...defaultOptions, number });
@@ -333,7 +333,7 @@ describe("Password generator options builder", () => {
     ])(
       "should set `options.special` to '%s' when `policy.useSpecial` is false and `options.special` is '%s'",
       (expectedSpecial, special) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.useSpecial = false;
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ ...defaultOptions, special });
@@ -347,7 +347,7 @@ describe("Password generator options builder", () => {
     it.each([false, true, undefined])(
       "should set `options.special` (= %s) to true when `policy.useSpecial` is true",
       (special) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.useSpecial = true;
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ ...defaultOptions, special });
@@ -361,7 +361,7 @@ describe("Password generator options builder", () => {
     it.each([1, 2, 3, 4])(
       "should set `options.length` (= %i) to the minimum it is less than the minimum length",
       (length) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         expect(length).toBeLessThan(builder.length.min);
 
@@ -376,7 +376,7 @@ describe("Password generator options builder", () => {
     it.each([5, 10, 50, 100, 128])(
       "should not change `options.length` (= %i) when it is within the boundaries",
       (length) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         expect(length).toBeGreaterThanOrEqual(builder.length.min);
         expect(length).toBeLessThanOrEqual(builder.length.max);
@@ -392,7 +392,7 @@ describe("Password generator options builder", () => {
     it.each([129, 500, 9000])(
       "should set `options.length` (= %i) to the maximum length when it is exceeded",
       (length) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         expect(length).toBeGreaterThan(builder.length.max);
 
@@ -414,7 +414,7 @@ describe("Password generator options builder", () => {
     ])(
       "should set `options.number === %s` when `options.minNumber` (= %i) is set to a value greater than 0",
       (expectedNumber, minNumber) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ ...defaultOptions, minNumber });
 
@@ -425,7 +425,7 @@ describe("Password generator options builder", () => {
     );
 
     it("should set `options.minNumber` to the minimum value when `options.number` is true", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({ ...defaultOptions, number: true });
 
@@ -435,7 +435,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should set `options.minNumber` to 0 when `options.number` is false", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({ ...defaultOptions, number: false });
 
@@ -447,7 +447,7 @@ describe("Password generator options builder", () => {
     it.each([1, 2, 3, 4])(
       "should set `options.minNumber` (= %i) to the minimum it is less than the minimum number",
       (minNumber) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.numberCount = 5; // arbitrary value greater than minNumber
         expect(minNumber).toBeLessThan(policy.numberCount);
 
@@ -463,7 +463,7 @@ describe("Password generator options builder", () => {
     it.each([1, 3, 5, 7, 9])(
       "should not change `options.minNumber` (= %i) when it is within the boundaries",
       (minNumber) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         expect(minNumber).toBeGreaterThanOrEqual(builder.minDigits.min);
         expect(minNumber).toBeLessThanOrEqual(builder.minDigits.max);
@@ -479,7 +479,7 @@ describe("Password generator options builder", () => {
     it.each([10, 20, 400])(
       "should set `options.minNumber` (= %i) to the maximum digit boundary when it is exceeded",
       (minNumber) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         expect(minNumber).toBeGreaterThan(builder.minDigits.max);
 
@@ -501,7 +501,7 @@ describe("Password generator options builder", () => {
     ])(
       "should set `options.special === %s` when `options.minSpecial` (= %i) is set to a value greater than 0",
       (expectedSpecial, minSpecial) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ ...defaultOptions, minSpecial });
 
@@ -512,7 +512,7 @@ describe("Password generator options builder", () => {
     );
 
     it("should set `options.minSpecial` to the minimum value when `options.special` is true", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({ ...defaultOptions, special: true });
 
@@ -522,7 +522,7 @@ describe("Password generator options builder", () => {
     });
 
     it("should set `options.minSpecial` to 0 when `options.special` is false", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({ ...defaultOptions, special: false });
 
@@ -534,7 +534,7 @@ describe("Password generator options builder", () => {
     it.each([1, 2, 3, 4])(
       "should set `options.minSpecial` (= %i) to the minimum it is less than the minimum special characters",
       (minSpecial) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         policy.specialCount = 5; // arbitrary value greater than minSpecial
         expect(minSpecial).toBeLessThan(policy.specialCount);
 
@@ -550,7 +550,7 @@ describe("Password generator options builder", () => {
     it.each([1, 3, 5, 7, 9])(
       "should not change `options.minSpecial` (= %i) when it is within the boundaries",
       (minSpecial) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         expect(minSpecial).toBeGreaterThanOrEqual(builder.minSpecialCharacters.min);
         expect(minSpecial).toBeLessThanOrEqual(builder.minSpecialCharacters.max);
@@ -566,7 +566,7 @@ describe("Password generator options builder", () => {
     it.each([10, 20, 400])(
       "should set `options.minSpecial` (= %i) to the maximum special character boundary when it is exceeded",
       (minSpecial) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         expect(minSpecial).toBeGreaterThan(builder.minSpecialCharacters.max);
 
@@ -579,7 +579,7 @@ describe("Password generator options builder", () => {
     );
 
     it("should preserve unknown properties", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({
         unknown: "property",
@@ -602,7 +602,7 @@ describe("Password generator options builder", () => {
     ])(
       "should output `options.minLowercase === %i` when `options.lowercase` is %s",
       (expectedMinLowercase, lowercase) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ lowercase, ...defaultOptions });
 
@@ -618,7 +618,7 @@ describe("Password generator options builder", () => {
     ])(
       "should output `options.minUppercase === %i` when `options.uppercase` is %s",
       (expectedMinUppercase, uppercase) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ uppercase, ...defaultOptions });
 
@@ -634,7 +634,7 @@ describe("Password generator options builder", () => {
     ])(
       "should output `options.minNumber === %i` when `options.number` is %s and `options.minNumber` is not set",
       (expectedMinNumber, number) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ number, ...defaultOptions });
 
@@ -652,7 +652,7 @@ describe("Password generator options builder", () => {
     ])(
       "should output `options.number === %s` when `options.minNumber` is %i and `options.number` is not set",
       (expectedNumber, minNumber) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ minNumber, ...defaultOptions });
 
@@ -668,7 +668,7 @@ describe("Password generator options builder", () => {
     ])(
       "should output `options.minSpecial === %i` when `options.special` is %s and `options.minSpecial` is not set",
       (special, expectedMinSpecial) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ special, ...defaultOptions });
 
@@ -686,7 +686,7 @@ describe("Password generator options builder", () => {
     ])(
       "should output `options.special === %s` when `options.minSpecial` is %i and `options.special` is not set",
       (minSpecial, expectedSpecial) => {
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({ minSpecial, ...defaultOptions });
 
@@ -707,7 +707,7 @@ describe("Password generator options builder", () => {
         const sumOfMinimums = minLowercase + minUppercase + minNumber + minSpecial;
         expect(sumOfMinimums).toBeLessThan(DefaultPasswordBoundaries.length.min);
 
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({
           minLowercase,
@@ -732,7 +732,7 @@ describe("Password generator options builder", () => {
       (expectedMinLength, minLowercase, minUppercase, minNumber, minSpecial) => {
         expect(expectedMinLength).toBeGreaterThanOrEqual(DefaultPasswordBoundaries.length.min);
 
-        const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+        const policy = Object.assign({}, Policies.Password.disabledValue);
         const builder = new PasswordGeneratorOptionsEvaluator(policy);
         const options = Object.freeze({
           minLowercase,
@@ -749,7 +749,7 @@ describe("Password generator options builder", () => {
     );
 
     it("should preserve unknown properties", () => {
-      const policy = Object.assign({}, DisabledPasswordGeneratorPolicy);
+      const policy = Object.assign({}, Policies.Password.disabledValue);
       const builder = new PasswordGeneratorOptionsEvaluator(policy);
       const options = Object.freeze({
         unknown: "property",
diff --git a/libs/tools/generator/core/src/policies/password-least-privilege.spec.ts b/libs/tools/generator/core/src/policies/password-least-privilege.spec.ts
index 2ce02a97a24..5d5430b8cad 100644
--- a/libs/tools/generator/core/src/policies/password-least-privilege.spec.ts
+++ b/libs/tools/generator/core/src/policies/password-least-privilege.spec.ts
@@ -4,7 +4,7 @@ import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 import { PolicyId } from "@bitwarden/common/types/guid";
 
-import { DisabledPasswordGeneratorPolicy } from "../data";
+import { Policies } from "../data";
 
 import { passwordLeastPrivilege } from "./password-least-privilege";
 
@@ -26,17 +26,17 @@ describe("passwordLeastPrivilege", () => {
   it("should return the accumulator when the policy type does not apply", () => {
     const policy = createPolicy({}, PolicyType.RequireSso);
 
-    const result = passwordLeastPrivilege(DisabledPasswordGeneratorPolicy, policy);
+    const result = passwordLeastPrivilege(Policies.Password.disabledValue, policy);
 
-    expect(result).toEqual(DisabledPasswordGeneratorPolicy);
+    expect(result).toEqual(Policies.Password.disabledValue);
   });
 
   it("should return the accumulator when the policy is not enabled", () => {
     const policy = createPolicy({}, PolicyType.PasswordGenerator, false);
 
-    const result = passwordLeastPrivilege(DisabledPasswordGeneratorPolicy, policy);
+    const result = passwordLeastPrivilege(Policies.Password.disabledValue, policy);
 
-    expect(result).toEqual(DisabledPasswordGeneratorPolicy);
+    expect(result).toEqual(Policies.Password.disabledValue);
   });
 
   it.each([
@@ -50,8 +50,8 @@ describe("passwordLeastPrivilege", () => {
   ])("should take the %p from the policy", (input, value, expected) => {
     const policy = createPolicy({ [input]: value });
 
-    const result = passwordLeastPrivilege(DisabledPasswordGeneratorPolicy, policy);
+    const result = passwordLeastPrivilege(Policies.Password.disabledValue, policy);
 
-    expect(result).toEqual({ ...DisabledPasswordGeneratorPolicy, [expected]: value });
+    expect(result).toEqual({ ...Policies.Password.disabledValue, [expected]: value });
   });
 });
diff --git a/libs/tools/generator/core/src/rx.ts b/libs/tools/generator/core/src/rx.ts
index ab907b6455f..e3c02be1298 100644
--- a/libs/tools/generator/core/src/rx.ts
+++ b/libs/tools/generator/core/src/rx.ts
@@ -18,6 +18,19 @@ export function mapPolicyToEvaluator<Policy, Evaluator>(
   );
 }
 
+/** Maps an administrative console policy to a policy evaluator using the provided configuration.
+ *  @param configuration the configuration that constructs the evaluator.
+ */
+export function mapPolicyToEvaluatorV2<Policy, Evaluator>(
+  configuration: PolicyConfiguration<Policy, Evaluator>,
+) {
+  return pipe(
+    reduceCollection(configuration.combine, configuration.disabledValue),
+    distinctIfShallowMatch(),
+    map(configuration.createEvaluatorV2),
+  );
+}
+
 /** Constructs a method that maps a policy to the default (no-op) policy. */
 export function newDefaultEvaluator<Target>() {
   return () => {
diff --git a/libs/tools/generator/core/src/services/credential-generator.service.spec.ts b/libs/tools/generator/core/src/services/credential-generator.service.spec.ts
new file mode 100644
index 00000000000..31f5134918b
--- /dev/null
+++ b/libs/tools/generator/core/src/services/credential-generator.service.spec.ts
@@ -0,0 +1,377 @@
+import { mock } from "jest-mock-extended";
+import { BehaviorSubject, firstValueFrom } from "rxjs";
+
+import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { PolicyType } from "@bitwarden/common/admin-console/enums";
+import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
+import { GENERATOR_DISK, UserKeyDefinition } from "@bitwarden/common/platform/state";
+import { Constraints } from "@bitwarden/common/tools/types";
+import { OrganizationId, PolicyId, UserId } from "@bitwarden/common/types/guid";
+
+import { FakeStateProvider, FakeAccountService, awaitAsync } from "../../../../../common/spec";
+import { PolicyEvaluator } from "../abstractions";
+import { CredentialGeneratorConfiguration } from "../types";
+
+import { CredentialGeneratorService } from "./credential-generator.service";
+
+// arbitrary settings types
+type SomeSettings = { foo: string };
+type SomePolicy = { fooPolicy: boolean };
+
+// settings storage location
+const SettingsKey = new UserKeyDefinition<SomeSettings>(GENERATOR_DISK, "SomeSettings", {
+  deserializer: (value) => value,
+  clearOn: [],
+});
+
+// fake policy
+const policyService = mock<PolicyService>();
+const somePolicy = new Policy({
+  data: { fooPolicy: true },
+  type: PolicyType.PasswordGenerator,
+  id: "" as PolicyId,
+  organizationId: "" as OrganizationId,
+  enabled: true,
+});
+
+// fake the configuration
+const SomeConfiguration: CredentialGeneratorConfiguration<SomeSettings, SomePolicy> = {
+  settings: {
+    initial: { foo: "initial" },
+    constraints: { foo: {} },
+    account: SettingsKey,
+  },
+  policy: {
+    type: PolicyType.PasswordGenerator,
+    disabledValue: {
+      fooPolicy: false,
+    },
+    combine: (acc, policy) => {
+      return { fooPolicy: acc.fooPolicy || policy.data.fooPolicy };
+    },
+    createEvaluator: () => {
+      throw new Error("this should never be called");
+    },
+    createEvaluatorV2: (policy) => {
+      return {
+        foo: {},
+        policy,
+        policyInEffect: policy.fooPolicy,
+        applyPolicy: (settings) => {
+          return policy.fooPolicy ? { foo: `apply(${settings.foo})` } : settings;
+        },
+        sanitize: (settings) => {
+          return policy.fooPolicy ? { foo: `sanitize(${settings.foo})` } : settings;
+        },
+      } as PolicyEvaluator<SomePolicy, SomeSettings> & Constraints<SomeSettings>;
+    },
+  },
+};
+
+// fake user information
+const SomeUser = "SomeUser" as UserId;
+const AnotherUser = "SomeOtherUser" as UserId;
+const accountService = new FakeAccountService({
+  [SomeUser]: {
+    name: "some user",
+    email: "some.user@example.com",
+    emailVerified: true,
+  },
+  [AnotherUser]: {
+    name: "some other user",
+    email: "some.other.user@example.com",
+    emailVerified: true,
+  },
+});
+
+// fake state
+const stateProvider = new FakeStateProvider(accountService);
+
+describe("CredentialGeneratorService", () => {
+  beforeEach(async () => {
+    await accountService.switchAccount(SomeUser);
+    policyService.getAll$.mockImplementation(() => new BehaviorSubject([]).asObservable());
+    jest.clearAllMocks();
+  });
+
+  describe("settings$", () => {
+    it("defaults to the configuration's initial settings if settings aren't found", async () => {
+      await stateProvider.setUserState(SettingsKey, null, SomeUser);
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+
+      const result = await firstValueFrom(generator.settings$(SomeConfiguration));
+
+      expect(result).toEqual(SomeConfiguration.settings.initial);
+    });
+
+    it("reads from the active user's configuration-defined storage", async () => {
+      const settings = { foo: "value" };
+      await stateProvider.setUserState(SettingsKey, settings, SomeUser);
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+
+      const result = await firstValueFrom(generator.settings$(SomeConfiguration));
+
+      expect(result).toEqual(settings);
+    });
+
+    it("applies policy to the loaded settings", async () => {
+      const settings = { foo: "value" };
+      await stateProvider.setUserState(SettingsKey, settings, SomeUser);
+      const policy$ = new BehaviorSubject([somePolicy]);
+      policyService.getAll$.mockReturnValue(policy$);
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+
+      const result = await firstValueFrom(generator.settings$(SomeConfiguration));
+
+      expect(result).toEqual({ foo: "sanitize(apply(value))" });
+    });
+
+    it("follows changes to the active user", async () => {
+      const someSettings = { foo: "value" };
+      const anotherSettings = { foo: "another" };
+      await stateProvider.setUserState(SettingsKey, someSettings, SomeUser);
+      await stateProvider.setUserState(SettingsKey, anotherSettings, AnotherUser);
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+      const results: any = [];
+      const sub = generator.settings$(SomeConfiguration).subscribe((r) => results.push(r));
+
+      await accountService.switchAccount(AnotherUser);
+      await awaitAsync();
+      sub.unsubscribe();
+
+      const [someResult, anotherResult] = results;
+      expect(someResult).toEqual(someSettings);
+      expect(anotherResult).toEqual(anotherSettings);
+    });
+
+    it("reads an arbitrary user's settings", async () => {
+      await stateProvider.setUserState(SettingsKey, { foo: "value" }, SomeUser);
+      const anotherSettings = { foo: "another" };
+      await stateProvider.setUserState(SettingsKey, anotherSettings, AnotherUser);
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+      const userId$ = new BehaviorSubject(AnotherUser).asObservable();
+
+      const result = await firstValueFrom(generator.settings$(SomeConfiguration, { userId$ }));
+
+      expect(result).toEqual(anotherSettings);
+    });
+
+    it("follows changes to the arbitrary user", async () => {
+      const someSettings = { foo: "value" };
+      await stateProvider.setUserState(SettingsKey, someSettings, SomeUser);
+      const anotherSettings = { foo: "another" };
+      await stateProvider.setUserState(SettingsKey, anotherSettings, AnotherUser);
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+      const userId = new BehaviorSubject(SomeUser);
+      const userId$ = userId.asObservable();
+      const results: any = [];
+      const sub = generator
+        .settings$(SomeConfiguration, { userId$ })
+        .subscribe((r) => results.push(r));
+
+      userId.next(AnotherUser);
+      await awaitAsync();
+      sub.unsubscribe();
+
+      const [someResult, anotherResult] = results;
+      expect(someResult).toEqual(someSettings);
+      expect(anotherResult).toEqual(anotherSettings);
+    });
+
+    it("errors when the arbitrary user's stream errors", async () => {
+      await stateProvider.setUserState(SettingsKey, null, SomeUser);
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+      const userId = new BehaviorSubject(SomeUser);
+      const userId$ = userId.asObservable();
+      let error = null;
+
+      generator.settings$(SomeConfiguration, { userId$ }).subscribe({
+        error: (e: unknown) => {
+          error = e;
+        },
+      });
+      userId.error({ some: "error" });
+      await awaitAsync();
+
+      expect(error).toEqual({ some: "error" });
+    });
+
+    it("completes when the arbitrary user's stream completes", async () => {
+      await stateProvider.setUserState(SettingsKey, null, SomeUser);
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+      const userId = new BehaviorSubject(SomeUser);
+      const userId$ = userId.asObservable();
+      let completed = false;
+
+      generator.settings$(SomeConfiguration, { userId$ }).subscribe({
+        complete: () => {
+          completed = true;
+        },
+      });
+      userId.complete();
+      await awaitAsync();
+
+      expect(completed).toBeTruthy();
+    });
+
+    it("ignores repeated arbitrary user emissions", async () => {
+      await stateProvider.setUserState(SettingsKey, null, SomeUser);
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+      const userId = new BehaviorSubject(SomeUser);
+      const userId$ = userId.asObservable();
+      let count = 0;
+
+      const sub = generator.settings$(SomeConfiguration, { userId$ }).subscribe({
+        next: () => {
+          count++;
+        },
+      });
+      await awaitAsync();
+      userId.next(SomeUser);
+      await awaitAsync();
+      userId.next(SomeUser);
+      await awaitAsync();
+      sub.unsubscribe();
+
+      expect(count).toEqual(1);
+    });
+  });
+
+  describe("settings", () => {
+    it("writes to the user's state", async () => {
+      const singleUserId$ = new BehaviorSubject(SomeUser).asObservable();
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+      const subject = await generator.settings(SomeConfiguration, { singleUserId$ });
+
+      subject.next({ foo: "next value" });
+      await awaitAsync();
+      const result = await firstValueFrom(stateProvider.getUserState$(SettingsKey, SomeUser));
+
+      expect(result).toEqual({ foo: "next value" });
+    });
+
+    it("waits for the user to become available", async () => {
+      const singleUserId = new BehaviorSubject(null);
+      const singleUserId$ = singleUserId.asObservable();
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+
+      let completed = false;
+      const promise = generator.settings(SomeConfiguration, { singleUserId$ }).then((settings) => {
+        completed = true;
+        return settings;
+      });
+      await awaitAsync();
+      expect(completed).toBeFalsy();
+      singleUserId.next(SomeUser);
+      const result = await promise;
+
+      expect(result.userId).toEqual(SomeUser);
+    });
+  });
+
+  describe("policy$", () => {
+    it("creates a disabled policy evaluator when there is no policy", async () => {
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+      const userId$ = new BehaviorSubject(SomeUser).asObservable();
+
+      const result = await firstValueFrom(generator.policy$(SomeConfiguration, { userId$ }));
+
+      expect(result.policy).toEqual(SomeConfiguration.policy.disabledValue);
+      expect(result.policyInEffect).toBeFalsy();
+    });
+
+    it("creates an active policy evaluator when there is a policy", async () => {
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+      const userId$ = new BehaviorSubject(SomeUser).asObservable();
+      const policy$ = new BehaviorSubject([somePolicy]);
+      policyService.getAll$.mockReturnValue(policy$);
+
+      const result = await firstValueFrom(generator.policy$(SomeConfiguration, { userId$ }));
+
+      expect(result.policy).toEqual({ fooPolicy: true });
+      expect(result.policyInEffect).toBeTruthy();
+    });
+
+    it("follows policy emissions", async () => {
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+      const userId = new BehaviorSubject(SomeUser);
+      const userId$ = userId.asObservable();
+      const somePolicySubject = new BehaviorSubject([somePolicy]);
+      policyService.getAll$.mockReturnValueOnce(somePolicySubject.asObservable());
+      const emissions: any = [];
+      const sub = generator
+        .policy$(SomeConfiguration, { userId$ })
+        .subscribe((policy) => emissions.push(policy));
+
+      // swap the active policy for an inactive policy
+      somePolicySubject.next([]);
+      await awaitAsync();
+      sub.unsubscribe();
+      const [someResult, anotherResult] = emissions;
+
+      expect(someResult.policy).toEqual({ fooPolicy: true });
+      expect(someResult.policyInEffect).toBeTruthy();
+      expect(anotherResult.policy).toEqual(SomeConfiguration.policy.disabledValue);
+      expect(anotherResult.policyInEffect).toBeFalsy();
+    });
+
+    it("follows user emissions", async () => {
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+      const userId = new BehaviorSubject(SomeUser);
+      const userId$ = userId.asObservable();
+      const somePolicy$ = new BehaviorSubject([somePolicy]).asObservable();
+      const anotherPolicy$ = new BehaviorSubject([]).asObservable();
+      policyService.getAll$.mockReturnValueOnce(somePolicy$).mockReturnValueOnce(anotherPolicy$);
+      const emissions: any = [];
+      const sub = generator
+        .policy$(SomeConfiguration, { userId$ })
+        .subscribe((policy) => emissions.push(policy));
+
+      // swapping the user invokes the return for `anotherPolicy$`
+      userId.next(AnotherUser);
+      await awaitAsync();
+      sub.unsubscribe();
+      const [someResult, anotherResult] = emissions;
+
+      expect(someResult.policy).toEqual({ fooPolicy: true });
+      expect(someResult.policyInEffect).toBeTruthy();
+      expect(anotherResult.policy).toEqual(SomeConfiguration.policy.disabledValue);
+      expect(anotherResult.policyInEffect).toBeFalsy();
+    });
+
+    it("errors when the user errors", async () => {
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+      const userId = new BehaviorSubject(SomeUser);
+      const userId$ = userId.asObservable();
+      const expectedError = { some: "error" };
+
+      let actualError: any = null;
+      generator.policy$(SomeConfiguration, { userId$ }).subscribe({
+        error: (e: unknown) => {
+          actualError = e;
+        },
+      });
+      userId.error(expectedError);
+      await awaitAsync();
+
+      expect(actualError).toEqual(expectedError);
+    });
+
+    it("completes when the user completes", async () => {
+      const generator = new CredentialGeneratorService(stateProvider, policyService);
+      const userId = new BehaviorSubject(SomeUser);
+      const userId$ = userId.asObservable();
+
+      let completed = false;
+      generator.policy$(SomeConfiguration, { userId$ }).subscribe({
+        complete: () => {
+          completed = true;
+        },
+      });
+      userId.complete();
+      await awaitAsync();
+
+      expect(completed).toBeTruthy();
+    });
+  });
+});
diff --git a/libs/tools/generator/core/src/services/credential-generator.service.ts b/libs/tools/generator/core/src/services/credential-generator.service.ts
new file mode 100644
index 00000000000..891d0016fef
--- /dev/null
+++ b/libs/tools/generator/core/src/services/credential-generator.service.ts
@@ -0,0 +1,128 @@
+import {
+  combineLatest,
+  distinctUntilChanged,
+  endWith,
+  filter,
+  firstValueFrom,
+  ignoreElements,
+  map,
+  mergeMap,
+  Observable,
+  switchMap,
+  takeUntil,
+} from "rxjs";
+
+import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { StateProvider } from "@bitwarden/common/platform/state";
+import { SingleUserDependency, UserDependency } from "@bitwarden/common/tools/dependencies";
+import { UserStateSubject } from "@bitwarden/common/tools/state/user-state-subject";
+import { Constraints } from "@bitwarden/common/tools/types";
+
+import { PolicyEvaluator } from "../abstractions";
+import { mapPolicyToEvaluatorV2 } from "../rx";
+import { CredentialGeneratorConfiguration as Configuration } from "../types/credential-generator-configuration";
+
+type Policy$Dependencies = UserDependency;
+type Settings$Dependencies = Partial<UserDependency>;
+// FIXME: once the modernization is complete, switch the type parameters
+// in `PolicyEvaluator<P, S>` and bake-in the constraints type.
+type Evaluator<Settings, Policy> = PolicyEvaluator<Policy, Settings> & Constraints<Settings>;
+
+export class CredentialGeneratorService {
+  constructor(
+    private stateProvider: StateProvider,
+    private policyService: PolicyService,
+  ) {}
+
+  /** Get the settings for the provided configuration
+   * @param configuration determines which generator's settings are loaded
+   * @param dependencies.userId$ identifies the user to which the settings are bound.
+   *   If this parameter is not provided, the observable follows the active user and
+   *   may not complete.
+   * @returns an observable that emits settings
+   * @remarks the observable enforces policies on the settings
+   */
+  settings$<Settings, Policy>(
+    configuration: Configuration<Settings, Policy>,
+    dependencies?: Settings$Dependencies,
+  ) {
+    const userId$ = dependencies?.userId$ ?? this.stateProvider.activeUserId$;
+    const completion$ = userId$.pipe(ignoreElements(), endWith(true));
+
+    const state$ = userId$.pipe(
+      filter((userId) => !!userId),
+      distinctUntilChanged(),
+      switchMap((userId) => {
+        const state$ = this.stateProvider
+          .getUserState$(configuration.settings.account, userId)
+          .pipe(takeUntil(completion$));
+
+        return state$;
+      }),
+      map((settings) => settings ?? structuredClone(configuration.settings.initial)),
+    );
+
+    const settings$ = combineLatest([state$, this.policy$(configuration, { userId$ })]).pipe(
+      map(([settings, policy]) => {
+        // FIXME: create `onLoadApply` that wraps these operations
+        const applied = policy.applyPolicy(settings);
+        const sanitized = policy.sanitize(applied);
+        return sanitized;
+      }),
+    );
+
+    return settings$;
+  }
+
+  /** Get a subject bound to a specific user's settings
+   * @param configuration determines which generator's settings are loaded
+   * @param dependencies.singleUserId$ identifies the user to which the settings are bound
+   * @returns a promise that resolves with the subject once
+   *  `dependencies.singleUserId$` becomes available.
+   * @remarks the subject enforces policy for the settings
+   */
+  async settings<Settings, Policy>(
+    configuration: Configuration<Settings, Policy>,
+    dependencies: SingleUserDependency,
+  ) {
+    const userId = await firstValueFrom(
+      dependencies.singleUserId$.pipe(filter((userId) => !!userId)),
+    );
+    const state = this.stateProvider.getUser(userId, configuration.settings.account);
+
+    // FIXME: apply policy to the settings - this should happen *within* the subject.
+    // Note that policies could be evaluated when the settings are saved or when they
+    // are loaded. The existing subject presently could only apply settings on save
+    // (by wiring the policy in as a dependency and applying with "nextState"), and
+    // even that has a limitation since arbitrary dependencies do not trigger state
+    // emissions.
+    const subject = new UserStateSubject(state, dependencies);
+
+    return subject;
+  }
+
+  /** Get the policy for the provided configuration
+   *  @param dependencies.userId$ determines which user's policy is loaded
+   *  @returns an observable that emits the policy once `dependencies.userId$`
+   *   and the policy become available.
+   */
+  policy$<Settings, Policy>(
+    configuration: Configuration<Settings, Policy>,
+    dependencies: Policy$Dependencies,
+  ): Observable<Evaluator<Settings, Policy>> {
+    const completion$ = dependencies.userId$.pipe(ignoreElements(), endWith(true));
+
+    const policy$ = dependencies.userId$.pipe(
+      mergeMap((userId) => {
+        // complete policy emissions otherwise `mergeMap` holds `policy$` open indefinitely
+        const policies$ = this.policyService
+          .getAll$(configuration.policy.type, userId)
+          .pipe(takeUntil(completion$));
+        return policies$;
+      }),
+      mapPolicyToEvaluatorV2(configuration.policy),
+    );
+
+    return policy$;
+  }
+}
diff --git a/libs/tools/generator/core/src/services/index.ts b/libs/tools/generator/core/src/services/index.ts
index 7568f55b688..d7184f684ae 100644
--- a/libs/tools/generator/core/src/services/index.ts
+++ b/libs/tools/generator/core/src/services/index.ts
@@ -1 +1,2 @@
 export { DefaultGeneratorService } from "./default-generator.service";
+export { CredentialGeneratorService } from "./credential-generator.service";
diff --git a/libs/tools/generator/core/src/strategies/passphrase-generator-strategy.spec.ts b/libs/tools/generator/core/src/strategies/passphrase-generator-strategy.spec.ts
index f3a6046facf..f9b346e02b0 100644
--- a/libs/tools/generator/core/src/strategies/passphrase-generator-strategy.spec.ts
+++ b/libs/tools/generator/core/src/strategies/passphrase-generator-strategy.spec.ts
@@ -8,7 +8,7 @@ import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 import { StateProvider } from "@bitwarden/common/platform/state";
 import { UserId } from "@bitwarden/common/types/guid";
 
-import { DefaultPassphraseGenerationOptions, DisabledPassphraseGeneratorPolicy } from "../data";
+import { DefaultPassphraseGenerationOptions, Policies } from "../data";
 import { PasswordRandomizer } from "../engine";
 import { PassphraseGeneratorOptionsEvaluator } from "../policies";
 
@@ -50,7 +50,7 @@ describe("Password generation strategy", () => {
         const evaluator = await firstValueFrom(evaluator$);
 
         expect(evaluator).toBeInstanceOf(PassphraseGeneratorOptionsEvaluator);
-        expect(evaluator.policy).toMatchObject(DisabledPassphraseGeneratorPolicy);
+        expect(evaluator.policy).toMatchObject(Policies.Passphrase.disabledValue);
       },
     );
   });
diff --git a/libs/tools/generator/core/src/strategies/password-generator-strategy.spec.ts b/libs/tools/generator/core/src/strategies/password-generator-strategy.spec.ts
index 536d69c9c15..928e0b0dc8b 100644
--- a/libs/tools/generator/core/src/strategies/password-generator-strategy.spec.ts
+++ b/libs/tools/generator/core/src/strategies/password-generator-strategy.spec.ts
@@ -8,7 +8,7 @@ import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 import { StateProvider } from "@bitwarden/common/platform/state";
 import { UserId } from "@bitwarden/common/types/guid";
 
-import { DefaultPasswordGenerationOptions, DisabledPasswordGeneratorPolicy } from "../data";
+import { DefaultPasswordGenerationOptions, Policies } from "../data";
 import { PasswordRandomizer } from "../engine";
 import { PasswordGeneratorOptionsEvaluator } from "../policies";
 
@@ -58,7 +58,7 @@ describe("Password generation strategy", () => {
         const evaluator = await firstValueFrom(evaluator$);
 
         expect(evaluator).toBeInstanceOf(PasswordGeneratorOptionsEvaluator);
-        expect(evaluator.policy).toMatchObject(DisabledPasswordGeneratorPolicy);
+        expect(evaluator.policy).toMatchObject(Policies.Password.disabledValue);
       },
     );
   });
diff --git a/libs/tools/generator/core/src/types/credential-generator-configuration.ts b/libs/tools/generator/core/src/types/credential-generator-configuration.ts
new file mode 100644
index 00000000000..2a8b07b0e82
--- /dev/null
+++ b/libs/tools/generator/core/src/types/credential-generator-configuration.ts
@@ -0,0 +1,19 @@
+import { UserKeyDefinition } from "@bitwarden/common/platform/state";
+import { Constraints } from "@bitwarden/common/tools/types";
+
+import { PolicyConfiguration } from "../types";
+
+export type CredentialGeneratorConfiguration<Settings, Policy> = {
+  settings: {
+    /** value used when an account's settings haven't been initialized */
+    initial: Readonly<Partial<Settings>>;
+
+    constraints: Constraints<Settings>;
+
+    /** storage location for account-global settings */
+    account: UserKeyDefinition<Settings>;
+  };
+
+  /** defines how to construct policy for this settings instance */
+  policy: PolicyConfiguration<Policy, Settings>;
+};
diff --git a/libs/tools/generator/core/src/types/index.ts b/libs/tools/generator/core/src/types/index.ts
index 7a6d49d87c5..786b15b9d11 100644
--- a/libs/tools/generator/core/src/types/index.ts
+++ b/libs/tools/generator/core/src/types/index.ts
@@ -1,5 +1,6 @@
 export * from "./boundary";
 export * from "./catchall-generator-options";
+export * from "./credential-generator-configuration";
 export * from "./eff-username-generator-options";
 export * from "./forwarder-options";
 export * from "./generator-options";
diff --git a/libs/tools/generator/core/src/types/policy-configuration.ts b/libs/tools/generator/core/src/types/policy-configuration.ts
index afecbe7d2b4..6ec077bcb6a 100644
--- a/libs/tools/generator/core/src/types/policy-configuration.ts
+++ b/libs/tools/generator/core/src/types/policy-configuration.ts
@@ -1,7 +1,13 @@
+import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Policy as AdminPolicy } from "@bitwarden/common/admin-console/models/domain/policy";
+import { Constraints } from "@bitwarden/common/tools/types";
+
+import { PolicyEvaluator } from "../abstractions";
 
 /** Determines how to construct a password generator policy */
-export type PolicyConfiguration<Policy, Evaluator> = {
+export type PolicyConfiguration<Policy, Settings> = {
+  type: PolicyType;
+
   /** The value of the policy when it is not in effect. */
   disabledValue: Policy;
 
@@ -12,5 +18,12 @@ export type PolicyConfiguration<Policy, Evaluator> = {
 
   /** Converts policy service data into an actionable policy.
    */
-  createEvaluator: (policy: Policy) => Evaluator;
+  createEvaluator: (policy: Policy) => PolicyEvaluator<Policy, Settings>;
+
+  /** Converts policy service data into an actionable policy.
+   * @remarks this version includes constraints needed for the reactive forms;
+   *  it was introduced so that the constraints can be incrementally introduced
+   *  as the new UI is built.
+   */
+  createEvaluatorV2?: (policy: Policy) => PolicyEvaluator<Policy, Settings> & Constraints<Settings>;
 };
diff --git a/libs/tools/generator/extensions/legacy/src/legacy-password-generation.service.spec.ts b/libs/tools/generator/extensions/legacy/src/legacy-password-generation.service.spec.ts
index 4c1dee7a5d9..21fbcb26273 100644
--- a/libs/tools/generator/extensions/legacy/src/legacy-password-generation.service.spec.ts
+++ b/libs/tools/generator/extensions/legacy/src/legacy-password-generation.service.spec.ts
@@ -7,8 +7,7 @@ import {
   GeneratorService,
   DefaultPassphraseGenerationOptions,
   DefaultPasswordGenerationOptions,
-  DisabledPassphraseGeneratorPolicy,
-  DisabledPasswordGeneratorPolicy,
+  Policies,
   PassphraseGenerationOptions,
   PassphraseGeneratorPolicy,
   PasswordGenerationOptions,
@@ -39,7 +38,7 @@ const PasswordGeneratorOptionsEvaluator = policies.PasswordGeneratorOptionsEvalu
 
 function createPassphraseGenerator(
   options: PassphraseGenerationOptions = {},
-  policy: PassphraseGeneratorPolicy = DisabledPassphraseGeneratorPolicy,
+  policy: PassphraseGeneratorPolicy = Policies.Passphrase.disabledValue,
 ) {
   let savedOptions = options;
   const generator = mock<GeneratorService<PassphraseGenerationOptions, PassphraseGeneratorPolicy>>({
@@ -64,7 +63,7 @@ function createPassphraseGenerator(
 
 function createPasswordGenerator(
   options: PasswordGenerationOptions = {},
-  policy: PasswordGeneratorPolicy = DisabledPasswordGeneratorPolicy,
+  policy: PasswordGeneratorPolicy = Policies.Password.disabledValue,
 ) {
   let savedOptions = options;
   const generator = mock<GeneratorService<PasswordGenerationOptions, PasswordGeneratorPolicy>>({

From b0ffac04aff8436cfbb2baa4ad839b0e8be63fc1 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 28 Aug 2024 09:46:50 -0400
Subject: [PATCH 15/18] [deps] Billing: Update braintree-web-drop-in to v1.43.0
 (#10576)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package-lock.json | 139 +++++++++++++++++++++++++++-------------------
 package.json      |   2 +-
 2 files changed, 84 insertions(+), 57 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 02985126f04..0fa25f12f9b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,7 @@
         "argon2-browser": "1.18.0",
         "big-integer": "1.6.51",
         "bootstrap": "4.6.0",
-        "braintree-web-drop-in": "1.42.0",
+        "braintree-web-drop-in": "1.43.0",
         "buffer": "6.0.3",
         "bufferutil": "4.0.8",
         "chalk": "4.1.2",
@@ -4465,12 +4465,10 @@
       "link": true
     },
     "node_modules/@braintree/asset-loader": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/@braintree/asset-loader/-/asset-loader-0.4.4.tgz",
-      "integrity": "sha512-uVhXC5dydmngmNVuDiKgfXSlz4kv4x5ytIJodI8N5SY16mRh13m/UmbQ7yH+o8DQqp50qPZ45MUHIZkXKPg85w==",
-      "dependencies": {
-        "promise-polyfill": "^8.1.3"
-      }
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@braintree/asset-loader/-/asset-loader-2.0.1.tgz",
+      "integrity": "sha512-OGAoBA5MRVsr5qg0sXM6NMJbqHnYZhBudtM6WGgpQnoX42fjUYbE6Y6qFuuerD5z3lsOAjnu80DooBs1VBuh5Q==",
+      "license": "MIT"
     },
     "node_modules/@braintree/browser-detection": {
       "version": "1.17.1",
@@ -4483,24 +4481,28 @@
       "integrity": "sha512-X41357O3OXUDlnwMvS1m0GQEn3zB3s3flOBeg2J5OBvLvdJEIAVpPkblABPtsPrlciDSvfv1aSG5ixHPgFH0Zg=="
     },
     "node_modules/@braintree/extended-promise": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@braintree/extended-promise/-/extended-promise-0.4.1.tgz",
-      "integrity": "sha512-00n7m4z+swWHoFQLHLvrIBIEoxnGUBsl3ogvX79ITpcn8CHczDwtxYy5+RhMoAraRdfN3oB+8QIpN3KOxs2Q7w=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@braintree/extended-promise/-/extended-promise-1.0.0.tgz",
+      "integrity": "sha512-E9529FJNG4OgeeLJ00vNs3TW67+AeSQobJg0hwfsQk29hgK4bVBsvQHVD4nwDuDD1Czon90K88gfQIFadAMs0w==",
+      "license": "MIT"
     },
     "node_modules/@braintree/iframer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@braintree/iframer/-/iframer-1.1.0.tgz",
-      "integrity": "sha512-tVpr7U6u6bqeQlHreEjYMNtnHX62vLnNWziY2kQLqkWhvusPuY5DfuGEIPpWqsd+V/a1slyTQaxK6HWTlH6A/Q=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@braintree/iframer/-/iframer-2.0.0.tgz",
+      "integrity": "sha512-x1kHOyIJNDvi4P1s6pVBZhqhBa1hqDG9+yzcsCR1oNVC0LxH9CAP8bKxioT8/auY1sUyy+D8T4Vp/jv7QqSqLQ==",
+      "license": "MIT"
     },
     "node_modules/@braintree/sanitize-url": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz",
-      "integrity": "sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A=="
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-7.0.4.tgz",
+      "integrity": "sha512-hPYRrKFoI+nuckPgDJfyYAkybFvheo4usS0Vw0HNAe+fmGBQA5Az37b/yStO284atBoqqdOUhKJ3d9Zw3PQkcQ==",
+      "license": "MIT"
     },
     "node_modules/@braintree/uuid": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@braintree/uuid/-/uuid-0.1.0.tgz",
-      "integrity": "sha512-YvZJdlNcK5EnR+7M8AjgEAf4Qx696+FOSYlPfy5ePn80vODtVAUU0FxHnzKZC0og1VbDNQDDiwhthR65D4Na0g=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@braintree/uuid/-/uuid-1.0.0.tgz",
+      "integrity": "sha512-AtI5hfttWSuWAgcwLUZdcZ7Fp/8jCCUf9JTs7+Xow9ditU28zuoBovqq083yph2m3SxPYb84lGjOq+cXlXBvJg==",
+      "license": "ISC"
     },
     "node_modules/@braintree/wrap-promise": {
       "version": "2.1.0",
@@ -11943,39 +11945,53 @@
       }
     },
     "node_modules/braintree-web": {
-      "version": "3.99.0",
-      "resolved": "https://registry.npmjs.org/braintree-web/-/braintree-web-3.99.0.tgz",
-      "integrity": "sha512-9vSeQxAl8nz53K43Qb0GU7qgxKlxYC+YMFMMWXHyIQRg+So3wU8mZWSqlXnTJXHLXhqH2dpqMb/sAA2WKBq9WQ==",
+      "version": "3.103.0",
+      "resolved": "https://registry.npmjs.org/braintree-web/-/braintree-web-3.103.0.tgz",
+      "integrity": "sha512-gwmC5LSUP5VUC2HmUyaFnEyLjRRAo1iKKHS5eD9KIAZHB7cAQ2il1V1q2f5zdz7+7EE11eSHXznj6n/Qm6jp6w==",
+      "license": "MIT",
       "dependencies": {
-        "@braintree/asset-loader": "0.4.4",
-        "@braintree/browser-detection": "1.17.1",
+        "@braintree/asset-loader": "2.0.1",
+        "@braintree/browser-detection": "2.0.1",
         "@braintree/event-emitter": "0.4.1",
-        "@braintree/extended-promise": "0.4.1",
-        "@braintree/iframer": "1.1.0",
-        "@braintree/sanitize-url": "6.0.4",
-        "@braintree/uuid": "0.1.0",
+        "@braintree/extended-promise": "1.0.0",
+        "@braintree/iframer": "2.0.0",
+        "@braintree/sanitize-url": "7.0.4",
+        "@braintree/uuid": "1.0.0",
         "@braintree/wrap-promise": "2.1.0",
-        "card-validator": "8.1.1",
-        "credit-card-type": "9.1.0",
-        "framebus": "5.2.1",
-        "inject-stylesheet": "5.0.0",
+        "card-validator": "10.0.0",
+        "credit-card-type": "10.0.1",
+        "framebus": "6.0.0",
+        "inject-stylesheet": "6.0.1",
         "promise-polyfill": "8.2.3",
         "restricted-input": "3.0.5"
       }
     },
     "node_modules/braintree-web-drop-in": {
-      "version": "1.42.0",
-      "resolved": "https://registry.npmjs.org/braintree-web-drop-in/-/braintree-web-drop-in-1.42.0.tgz",
-      "integrity": "sha512-f+hcJvDSxyWIE/Z1XHt0ye5jR8N/1/l7CAoOHo+zoMXKO01omuEd6O+GsSYeG+LLivPyDnaN/TPRpeRNxyWCjA==",
+      "version": "1.43.0",
+      "resolved": "https://registry.npmjs.org/braintree-web-drop-in/-/braintree-web-drop-in-1.43.0.tgz",
+      "integrity": "sha512-lkUpQfYXR0CGtR7mPRR17AnZoYkHjhycxVnMGIPcWT6JPagEZcG/7tYyy34iWjYZeGa2wsquLBDV2Xeita962Q==",
+      "license": "MIT",
       "dependencies": {
-        "@braintree/asset-loader": "0.4.4",
-        "@braintree/browser-detection": "1.17.1",
+        "@braintree/asset-loader": "2.0.1",
+        "@braintree/browser-detection": "2.0.1",
         "@braintree/event-emitter": "0.4.1",
-        "@braintree/uuid": "0.1.0",
+        "@braintree/uuid": "1.0.0",
         "@braintree/wrap-promise": "2.1.0",
-        "braintree-web": "3.99.0"
+        "braintree-web": "3.103.0"
       }
     },
+    "node_modules/braintree-web-drop-in/node_modules/@braintree/browser-detection": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@braintree/browser-detection/-/browser-detection-2.0.1.tgz",
+      "integrity": "sha512-wpRI7AXEUh6o3ILrJbpNOYE7ItfjX/S8JZP7Z5FF66ULngBGYOqE8SeLlLKXG69Nc07HtlL/6nk/h539iz9hcQ==",
+      "license": "MIT"
+    },
+    "node_modules/braintree-web/node_modules/@braintree/browser-detection": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@braintree/browser-detection/-/browser-detection-2.0.1.tgz",
+      "integrity": "sha512-wpRI7AXEUh6o3ILrJbpNOYE7ItfjX/S8JZP7Z5FF66ULngBGYOqE8SeLlLKXG69Nc07HtlL/6nk/h539iz9hcQ==",
+      "license": "MIT"
+    },
     "node_modules/braintree-web/node_modules/promise-polyfill": {
       "version": "8.2.3",
       "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.2.3.tgz",
@@ -12535,13 +12551,20 @@
       "license": "CC-BY-4.0"
     },
     "node_modules/card-validator": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/card-validator/-/card-validator-8.1.1.tgz",
-      "integrity": "sha512-cN4FsKwoTfTFnqPwVc7TQLSsH/QMDB3n/gWm0XelcApz4sKipnOQ6k33sa3bWsNnnIpgs7eXOF+mUV2UQAX2Sw==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/card-validator/-/card-validator-10.0.0.tgz",
+      "integrity": "sha512-2fLyCBOxO7/b56sxoYav8FeJqv9bWpZSyKq8sXKxnpxTGXHnM/0c8WEKG+ZJ+OXFcabnl98pD0EKBtTn+Tql0g==",
+      "license": "MIT",
       "dependencies": {
         "credit-card-type": "^9.1.0"
       }
     },
+    "node_modules/card-validator/node_modules/credit-card-type": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/credit-card-type/-/credit-card-type-9.1.0.tgz",
+      "integrity": "sha512-CpNFuLxiPFxuZqhSKml3M+t0K/484pMAnfYWH14JoD7OZMnmC0Lmo+P7JX9SobqFpRoo7ifA18kOHdxJywYPEA==",
+      "license": "MIT"
+    },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -13930,9 +13953,10 @@
       }
     },
     "node_modules/credit-card-type": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/credit-card-type/-/credit-card-type-9.1.0.tgz",
-      "integrity": "sha512-CpNFuLxiPFxuZqhSKml3M+t0K/484pMAnfYWH14JoD7OZMnmC0Lmo+P7JX9SobqFpRoo7ifA18kOHdxJywYPEA=="
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/credit-card-type/-/credit-card-type-10.0.1.tgz",
+      "integrity": "sha512-vQOuWmBgsgG1ovGeDi8m6Zeu1JaqH/JncrxKmaqMbv/LunyOQdLiQhPHtOsNlbUI05TocR5nod/Mbs3HYtr6sQ==",
+      "license": "MIT"
     },
     "node_modules/critters": {
       "version": "0.0.20",
@@ -17731,13 +17755,20 @@
       }
     },
     "node_modules/framebus": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/framebus/-/framebus-5.2.1.tgz",
-      "integrity": "sha512-K6pw+M2wNBuOhEoFrmMbf1O+fm7PnNDIfA9y0KpAyQzXRIJ420szGgJ/dI2Ikz0XG+5VfspLqA72M6bXhuyKIQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/framebus/-/framebus-6.0.0.tgz",
+      "integrity": "sha512-bL9V68hVaVBCY9rveoWbPFFI9hAXIJtESs51B+9XmzvMt38+wP8b4VdiJsavjMS6NfPZ/afQ/jc2qaHmSGI1kQ==",
+      "license": "MIT",
       "dependencies": {
         "@braintree/uuid": "^0.1.0"
       }
     },
+    "node_modules/framebus/node_modules/@braintree/uuid": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@braintree/uuid/-/uuid-0.1.0.tgz",
+      "integrity": "sha512-YvZJdlNcK5EnR+7M8AjgEAf4Qx696+FOSYlPfy5ePn80vODtVAUU0FxHnzKZC0og1VbDNQDDiwhthR65D4Na0g==",
+      "license": "ISC"
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -20334,9 +20365,10 @@
       }
     },
     "node_modules/inject-stylesheet": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/inject-stylesheet/-/inject-stylesheet-5.0.0.tgz",
-      "integrity": "sha512-GzncrJP8E/pavMQzoO93CXoYCfTttwVm2cX2TyXJdgtVE0cCvWSFCn1/uMsM6ZkEg7LUsOcKuamcLiGWlv2p9A=="
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/inject-stylesheet/-/inject-stylesheet-6.0.1.tgz",
+      "integrity": "sha512-2fvune1D4+8mvJoLVo95ncY4HrDkIaYIReRzXv8tkWFgdG9iuc5QuX57gtSDPWTWQI/f5BGwwtH85wxHouzucg==",
+      "license": "MIT"
     },
     "node_modules/inquirer": {
       "version": "8.2.6",
@@ -29103,11 +29135,6 @@
       "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
       "dev": true
     },
-    "node_modules/promise-polyfill": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-8.3.0.tgz",
-      "integrity": "sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg=="
-    },
     "node_modules/promise-retry": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
diff --git a/package.json b/package.json
index b131a2ebdda..bbb23fefd8c 100644
--- a/package.json
+++ b/package.json
@@ -166,7 +166,7 @@
     "argon2-browser": "1.18.0",
     "big-integer": "1.6.51",
     "bootstrap": "4.6.0",
-    "braintree-web-drop-in": "1.42.0",
+    "braintree-web-drop-in": "1.43.0",
     "buffer": "6.0.3",
     "bufferutil": "4.0.8",
     "chalk": "4.1.2",

From a58642e370040907ef9a6d46de715d3440d6eb57 Mon Sep 17 00:00:00 2001
From: Alex Morask <144709477+amorask-bitwarden@users.noreply.github.com>
Date: Wed, 28 Aug 2024 10:48:22 -0400
Subject: [PATCH 16/18] [AC-2959] ACH Direct Debit POC (#10746)

* (No Logic) Fix typo in billing-api-service.abstraction file name

* (Cleanup) Remove payment method components and API methods from provider portal

Product team decided not to have a payment method page in the provider portal for consolidated billing. This just removes all the unused components and API methods.

* Add organization endpoints to support new payment method behavior

* Add payment-v2.component

This component existed in the libs folder because we used it for the provider portal, but since we've removed payment functionality from the provider portal, I moved it into web in this commit.

* (No Logic) Move existing payment.component into new payment component folder

* Add verify-bank-account.component

This component existed in the libs folder because we used it for the provider portal, but since we've removed payment functionality from the provider portal, I moved it into web in this commit.

* Add adjust-payment-dialog-v2.component

* (No Logic) Move existing adjust-payment-dialog.component into new adjust-payment-dialog component folder

* Add organization-payment-method.component

* Add feature flag: AC-2476-deprecate-stripe-sources-api

* Pivot organization payment method route on new feature flag

* Fix broken test
---
 .../members/members.component.ts              |   2 +-
 .../change-plan-dialog.component.ts           |   2 +-
 .../organization-billing-routing.module.ts    |  27 +--
 .../organization-billing.module.ts            |   2 +
 .../organization-plans.component.ts           |   2 +-
 ...organization-payment-method.component.html |  63 +++++++
 .../organization-payment-method.component.ts  | 169 ++++++++++++++++++
 .../adjust-payment-dialog-v2.component.html   |  24 +++
 .../adjust-payment-dialog-v2.component.ts     | 123 +++++++++++++
 .../adjust-payment-dialog.component.html      |   0
 .../adjust-payment-dialog.component.ts        |   4 +-
 .../shared/adjust-storage.component.ts        |   2 +-
 .../billing/shared/billing-shared.module.ts   |  18 +-
 apps/web/src/app/billing/shared/index.ts      |   2 +-
 .../shared/offboarding-survey.component.ts    |   2 +-
 .../shared/payment-method.component.ts        |   2 +-
 .../shared/payment/payment-v2.component.html  |  15 +-
 .../shared/payment/payment-v2.component.ts    | 135 ++++++++------
 .../{ => payment}/payment.component.html      |   0
 .../shared/{ => payment}/payment.component.ts |   2 +-
 .../verify-bank-account.component.html        |   2 +-
 .../verify-bank-account.component.ts          |  20 ++-
 .../providers/providers.module.ts             |   4 -
 .../services/web-provider.service.ts          |   2 +-
 .../clients/create-client-dialog.component.ts |   2 +-
 .../manage-client-name-dialog.component.ts    |   2 +-
 .../clients/manage-clients.component.ts       |   2 +-
 .../src/app/billing/providers/index.ts        |   2 -
 .../provider-payment-method.component.html    |  52 ------
 .../provider-payment-method.component.ts      | 140 ---------------
 ...elect-payment-method-dialog.component.html |  18 --
 ...-select-payment-method-dialog.component.ts |  60 -------
 .../provider-subscription.component.ts        |   2 +-
 libs/angular/src/billing/components/index.ts  |   2 -
 libs/angular/src/jslib.module.ts              |   6 -
 ....ts => billing-api.service.abstraction.ts} |  36 ++--
 libs/common/src/billing/abstractions/index.ts |   2 +-
 .../common/src/billing/models/domain/index.ts |   2 -
 .../models/domain/masked-payment-method.ts    |  17 --
 .../tokenized-payment-method.request.ts       |  14 --
 .../tokenized-payment-source.request.ts}      |   4 +-
 .../request/update-payment-method.request.ts  |   7 +
 ...ion-risks-subscription-failure.response.ts |  13 --
 ...response.ts => payment-method.response.ts} |  15 +-
 ...response.ts => payment-source.response.ts} |   2 +-
 .../billing/services/billing-api.service.ts   |  78 ++++----
 libs/common/src/enums/feature-flag.enum.ts    |   2 +
 47 files changed, 623 insertions(+), 481 deletions(-)
 create mode 100644 apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.html
 create mode 100644 apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.ts
 create mode 100644 apps/web/src/app/billing/shared/adjust-payment-dialog/adjust-payment-dialog-v2.component.html
 create mode 100644 apps/web/src/app/billing/shared/adjust-payment-dialog/adjust-payment-dialog-v2.component.ts
 rename apps/web/src/app/billing/shared/{ => adjust-payment-dialog}/adjust-payment-dialog.component.html (100%)
 rename apps/web/src/app/billing/shared/{ => adjust-payment-dialog}/adjust-payment-dialog.component.ts (97%)
 rename libs/angular/src/billing/components/select-payment-method/select-payment-method.component.html => apps/web/src/app/billing/shared/payment/payment-v2.component.html (89%)
 rename libs/angular/src/billing/components/select-payment-method/select-payment-method.component.ts => apps/web/src/app/billing/shared/payment/payment-v2.component.ts (50%)
 rename apps/web/src/app/billing/shared/{ => payment}/payment.component.html (100%)
 rename apps/web/src/app/billing/shared/{ => payment}/payment.component.ts (99%)
 rename {libs/angular/src/billing/components => apps/web/src/app/billing/shared}/verify-bank-account/verify-bank-account.component.html (89%)
 rename {libs/angular/src/billing/components => apps/web/src/app/billing/shared}/verify-bank-account/verify-bank-account.component.ts (57%)
 delete mode 100644 bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-payment-method.component.html
 delete mode 100644 bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-payment-method.component.ts
 delete mode 100644 bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-select-payment-method-dialog.component.html
 delete mode 100644 bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-select-payment-method-dialog.component.ts
 rename libs/common/src/billing/abstractions/{billilng-api.service.abstraction.ts => billing-api.service.abstraction.ts} (79%)
 delete mode 100644 libs/common/src/billing/models/domain/masked-payment-method.ts
 delete mode 100644 libs/common/src/billing/models/request/tokenized-payment-method.request.ts
 rename libs/common/src/billing/models/{domain/tokenized-payment-method.ts => request/tokenized-payment-source.request.ts} (70%)
 create mode 100644 libs/common/src/billing/models/request/update-payment-method.request.ts
 delete mode 100644 libs/common/src/billing/models/response/organization-risks-subscription-failure.response.ts
 rename libs/common/src/billing/models/response/{payment-information.response.ts => payment-method.response.ts} (52%)
 rename libs/common/src/billing/models/response/{masked-payment-method.response.ts => payment-source.response.ts} (88%)

diff --git a/apps/web/src/app/admin-console/organizations/members/members.component.ts b/apps/web/src/app/admin-console/organizations/members/members.component.ts
index 431a0ac6085..66a62f7acc7 100644
--- a/apps/web/src/app/admin-console/organizations/members/members.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/members.component.ts
@@ -32,7 +32,7 @@ import {
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 import { OrganizationKeysRequest } from "@bitwarden/common/admin-console/models/request/organization-keys.request";
-import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billilng-api.service.abstraction";
+import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billing-api.service.abstraction";
 import { isNotSelfUpgradable, ProductTierType } from "@bitwarden/common/billing/enums";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
diff --git a/apps/web/src/app/billing/organizations/change-plan-dialog.component.ts b/apps/web/src/app/billing/organizations/change-plan-dialog.component.ts
index 8b69a8956e3..a359c281ebe 100644
--- a/apps/web/src/app/billing/organizations/change-plan-dialog.component.ts
+++ b/apps/web/src/app/billing/organizations/change-plan-dialog.component.ts
@@ -37,7 +37,7 @@ import { MessagingService } from "@bitwarden/common/platform/abstractions/messag
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { DialogService, ToastService } from "@bitwarden/components";
 
-import { PaymentComponent } from "../shared/payment.component";
+import { PaymentComponent } from "../shared/payment/payment.component";
 import { TaxInfoComponent } from "../shared/tax-info.component";
 
 type ChangePlanDialogParams = {
diff --git a/apps/web/src/app/billing/organizations/organization-billing-routing.module.ts b/apps/web/src/app/billing/organizations/organization-billing-routing.module.ts
index 970b40a54bd..3d4c8dd3870 100644
--- a/apps/web/src/app/billing/organizations/organization-billing-routing.module.ts
+++ b/apps/web/src/app/billing/organizations/organization-billing-routing.module.ts
@@ -1,7 +1,9 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 
+import { featureFlaggedRoute } from "@bitwarden/angular/platform/utils/feature-flagged-route";
 import { canAccessBillingTab } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
 import { organizationPermissionsGuard } from "../../admin-console/organizations/guards/org-permissions.guard";
 import { organizationIsUnmanaged } from "../../billing/guards/organization-is-unmanaged.guard";
@@ -11,6 +13,7 @@ import { PaymentMethodComponent } from "../shared";
 import { OrgBillingHistoryViewComponent } from "./organization-billing-history-view.component";
 import { OrganizationSubscriptionCloudComponent } from "./organization-subscription-cloud.component";
 import { OrganizationSubscriptionSelfhostComponent } from "./organization-subscription-selfhost.component";
+import { OrganizationPaymentMethodComponent } from "./payment-method/organization-payment-method.component";
 
 const routes: Routes = [
   {
@@ -25,17 +28,21 @@ const routes: Routes = [
           : OrganizationSubscriptionCloudComponent,
         data: { titleId: "subscription" },
       },
-      {
-        path: "payment-method",
-        component: PaymentMethodComponent,
-        canActivate: [
-          organizationPermissionsGuard((org) => org.canEditPaymentMethods),
-          organizationIsUnmanaged,
-        ],
-        data: {
-          titleId: "paymentMethod",
+      ...featureFlaggedRoute({
+        defaultComponent: PaymentMethodComponent,
+        flaggedComponent: OrganizationPaymentMethodComponent,
+        featureFlag: FeatureFlag.AC2476_DeprecateStripeSourcesAPI,
+        routeOptions: {
+          path: "payment-method",
+          canActivate: [
+            organizationPermissionsGuard((org) => org.canEditPaymentMethods),
+            organizationIsUnmanaged,
+          ],
+          data: {
+            titleId: "paymentMethod",
+          },
         },
-      },
+      }),
       {
         path: "history",
         component: OrgBillingHistoryViewComponent,
diff --git a/apps/web/src/app/billing/organizations/organization-billing.module.ts b/apps/web/src/app/billing/organizations/organization-billing.module.ts
index 5d9dd8cf5b5..ccfe12b2e59 100644
--- a/apps/web/src/app/billing/organizations/organization-billing.module.ts
+++ b/apps/web/src/app/billing/organizations/organization-billing.module.ts
@@ -15,6 +15,7 @@ import { OrganizationBillingRoutingModule } from "./organization-billing-routing
 import { OrganizationPlansComponent } from "./organization-plans.component";
 import { OrganizationSubscriptionCloudComponent } from "./organization-subscription-cloud.component";
 import { OrganizationSubscriptionSelfhostComponent } from "./organization-subscription-selfhost.component";
+import { OrganizationPaymentMethodComponent } from "./payment-method/organization-payment-method.component";
 import { SecretsManagerAdjustSubscriptionComponent } from "./sm-adjust-subscription.component";
 import { SecretsManagerSubscribeStandaloneComponent } from "./sm-subscribe-standalone.component";
 import { SubscriptionHiddenComponent } from "./subscription-hidden.component";
@@ -42,6 +43,7 @@ import { SubscriptionStatusComponent } from "./subscription-status.component";
     SubscriptionHiddenComponent,
     SubscriptionStatusComponent,
     ChangePlanDialogComponent,
+    OrganizationPaymentMethodComponent,
   ],
 })
 export class OrganizationBillingModule {}
diff --git a/apps/web/src/app/billing/organizations/organization-plans.component.ts b/apps/web/src/app/billing/organizations/organization-plans.component.ts
index fe1c1568a9e..20839d5d2b9 100644
--- a/apps/web/src/app/billing/organizations/organization-plans.component.ts
+++ b/apps/web/src/app/billing/organizations/organization-plans.component.ts
@@ -41,7 +41,7 @@ import { ToastService } from "@bitwarden/components";
 
 import { OrganizationCreateModule } from "../../admin-console/organizations/create/organization-create.module";
 import { BillingSharedModule, secretsManagerSubscribeFormFactory } from "../shared";
-import { PaymentComponent } from "../shared/payment.component";
+import { PaymentComponent } from "../shared/payment/payment.component";
 import { TaxInfoComponent } from "../shared/tax-info.component";
 
 interface OnSuccessArgs {
diff --git a/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.html b/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.html
new file mode 100644
index 00000000000..9f9cb9efc65
--- /dev/null
+++ b/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.html
@@ -0,0 +1,63 @@
+<app-header></app-header>
+<bit-container>
+  <ng-container *ngIf="loading">
+    <i
+      class="bwi bwi-spinner bwi-spin tw-text-muted"
+      title="{{ 'loading' | i18n }}"
+      aria-hidden="true"
+    ></i>
+    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+  </ng-container>
+  <ng-container *ngIf="!loading">
+    <!-- Account Credit -->
+    <bit-section>
+      <h2 bitTypography="h2">
+        {{ accountCreditHeaderText }}
+      </h2>
+      <p class="tw-text-lg tw-font-bold">{{ Math.abs(accountCredit) | currency: "$" }}</p>
+      <p bitTypography="body1">{{ "creditAppliedDesc" | i18n }}</p>
+      <button type="button" bitButton buttonType="secondary" [bitAction]="addAccountCredit">
+        {{ "addCredit" | i18n }}
+      </button>
+    </bit-section>
+    <!-- Payment Method -->
+    <bit-section>
+      <h2 bitTypography="h2">{{ "paymentMethod" | i18n }}</h2>
+      <p *ngIf="!paymentSource" bitTypography="body1">{{ "noPaymentMethod" | i18n }}</p>
+      <ng-container *ngIf="paymentSource">
+        <app-verify-bank-account
+          *ngIf="paymentSource.needsVerification"
+          [onSubmit]="verifyBankAccount"
+          (submitted)="load()"
+        >
+        </app-verify-bank-account>
+        <p>
+          <i class="bwi bwi-fw" [ngClass]="paymentSourceClasses"></i>
+          {{ paymentSource.description }}
+          <span *ngIf="paymentSource.needsVerification">- {{ "unverified" | i18n }}</span>
+        </p>
+      </ng-container>
+      <button type="button" bitButton buttonType="secondary" [bitAction]="updatePaymentMethod">
+        {{ updatePaymentSourceButtonText }}
+      </button>
+      <p *ngIf="subscriptionIsUnpaid" bitTypography="body1">
+        {{ "paymentChargedWithUnpaidSubscription" | i18n }}
+      </p>
+    </bit-section>
+    <!-- Tax Information -->
+    <bit-section>
+      <h2 bitTypography="h2">{{ "taxInformation" | i18n }}</h2>
+      <p bitTypography="body1">{{ "taxInformationDesc" | i18n }}</p>
+      <app-tax-info></app-tax-info>
+      <button
+        type="button"
+        bitButton
+        bitFormButton
+        buttonType="primary"
+        [bitAction]="updateTaxInformation"
+      >
+        {{ "save" | i18n }}
+      </button>
+    </bit-section>
+  </ng-container>
+</bit-container>
diff --git a/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.ts b/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.ts
new file mode 100644
index 00000000000..0756a6c314c
--- /dev/null
+++ b/apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.ts
@@ -0,0 +1,169 @@
+import { Component, ViewChild } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { ActivatedRoute, Router } from "@angular/router";
+import { from, lastValueFrom, switchMap } from "rxjs";
+
+import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
+import { PaymentMethodType } from "@bitwarden/common/billing/enums";
+import { ExpandedTaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/expanded-tax-info-update.request";
+import { VerifyBankAccountRequest } from "@bitwarden/common/billing/models/request/verify-bank-account.request";
+import { PaymentSourceResponse } from "@bitwarden/common/billing/models/response/payment-source.response";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { DialogService, ToastService } from "@bitwarden/components";
+
+import { TaxInfoComponent } from "../../shared";
+import {
+  AddCreditDialogResult,
+  openAddCreditDialog,
+} from "../../shared/add-credit-dialog.component";
+import {
+  AdjustPaymentDialogV2Component,
+  AdjustPaymentDialogV2ResultType,
+} from "../../shared/adjust-payment-dialog/adjust-payment-dialog-v2.component";
+
+@Component({
+  templateUrl: "./organization-payment-method.component.html",
+})
+export class OrganizationPaymentMethodComponent {
+  @ViewChild(TaxInfoComponent) taxInfoComponent: TaxInfoComponent;
+
+  organizationId: string;
+  accountCredit: number;
+  paymentSource?: PaymentSourceResponse;
+  subscriptionStatus?: string;
+
+  loading = true;
+
+  protected readonly Math = Math;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private billingApiService: BillingApiServiceAbstraction,
+    private dialogService: DialogService,
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService,
+    private router: Router,
+    private toastService: ToastService,
+  ) {
+    this.activatedRoute.params
+      .pipe(
+        takeUntilDestroyed(),
+        switchMap(({ organizationId }) => {
+          if (this.platformUtilsService.isSelfHost()) {
+            return from(this.router.navigate(["/settings/subscription"]));
+          }
+
+          this.organizationId = organizationId;
+          return from(this.load());
+        }),
+      )
+      .subscribe();
+  }
+
+  protected addAccountCredit = async (): Promise<void> => {
+    const dialogRef = openAddCreditDialog(this.dialogService, {
+      data: {
+        organizationId: this.organizationId,
+      },
+    });
+
+    const result = await lastValueFrom(dialogRef.closed);
+
+    if (result === AddCreditDialogResult.Added) {
+      await this.load();
+    }
+  };
+
+  protected load = async (): Promise<void> => {
+    this.loading = true;
+    const { accountCredit, paymentSource, subscriptionStatus } =
+      await this.billingApiService.getOrganizationPaymentMethod(this.organizationId);
+    this.accountCredit = accountCredit;
+    this.paymentSource = paymentSource;
+    this.subscriptionStatus = subscriptionStatus;
+    this.loading = false;
+  };
+
+  protected updatePaymentMethod = async (): Promise<void> => {
+    const dialogRef = AdjustPaymentDialogV2Component.open(this.dialogService, {
+      data: {
+        initialPaymentMethod: this.paymentSource?.type,
+        organizationId: this.organizationId,
+      },
+    });
+
+    const result = await lastValueFrom(dialogRef.closed);
+
+    if (result === AdjustPaymentDialogV2ResultType.Submitted) {
+      await this.load();
+    }
+  };
+
+  protected updateTaxInformation = async (): Promise<void> => {
+    this.taxInfoComponent.taxFormGroup.updateValueAndValidity();
+    this.taxInfoComponent.taxFormGroup.markAllAsTouched();
+
+    if (this.taxInfoComponent.taxFormGroup.invalid) {
+      return;
+    }
+
+    const request = new ExpandedTaxInfoUpdateRequest();
+    request.country = this.taxInfoComponent.country;
+    request.postalCode = this.taxInfoComponent.postalCode;
+    request.taxId = this.taxInfoComponent.taxId;
+    request.line1 = this.taxInfoComponent.line1;
+    request.line2 = this.taxInfoComponent.line2;
+    request.city = this.taxInfoComponent.city;
+    request.state = this.taxInfoComponent.state;
+
+    await this.billingApiService.updateOrganizationTaxInformation(this.organizationId, request);
+
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("taxInfoUpdated"),
+    });
+  };
+
+  protected verifyBankAccount = async (request: VerifyBankAccountRequest): Promise<void> => {
+    await this.billingApiService.verifyOrganizationBankAccount(this.organizationId, request);
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("verifiedBankAccount"),
+    });
+  };
+
+  protected get accountCreditHeaderText(): string {
+    const key = this.accountCredit <= 0 ? "accountBalance" : "accountCredit";
+    return this.i18nService.t(key);
+  }
+
+  protected get paymentSourceClasses() {
+    if (this.paymentSource == null) {
+      return [];
+    }
+    switch (this.paymentSource.type) {
+      case PaymentMethodType.Card:
+        return ["bwi-credit-card"];
+      case PaymentMethodType.BankAccount:
+        return ["bwi-bank"];
+      case PaymentMethodType.Check:
+        return ["bwi-money"];
+      case PaymentMethodType.PayPal:
+        return ["bwi-paypal text-primary"];
+      default:
+        return [];
+    }
+  }
+
+  protected get subscriptionIsUnpaid(): boolean {
+    return this.subscriptionStatus === "unpaid";
+  }
+
+  protected get updatePaymentSourceButtonText(): string {
+    const key = this.paymentSource == null ? "addPaymentMethod" : "changePaymentMethod";
+    return this.i18nService.t(key);
+  }
+}
diff --git a/apps/web/src/app/billing/shared/adjust-payment-dialog/adjust-payment-dialog-v2.component.html b/apps/web/src/app/billing/shared/adjust-payment-dialog/adjust-payment-dialog-v2.component.html
new file mode 100644
index 00000000000..fb1ff3e0d00
--- /dev/null
+++ b/apps/web/src/app/billing/shared/adjust-payment-dialog/adjust-payment-dialog-v2.component.html
@@ -0,0 +1,24 @@
+<bit-dialog dialogSize="large" [title]="dialogHeader">
+  <ng-container bitDialogContent>
+    <app-payment-v2
+      [showAccountCredit]="false"
+      [showBankAccount]="!!organizationId"
+      [initialPaymentMethod]="initialPaymentMethod"
+    ></app-payment-v2>
+    <app-tax-info (onCountryChanged)="onCountryChanged()"></app-tax-info>
+  </ng-container>
+  <ng-container bitDialogFooter>
+    <button type="submit" bitButton bitFormButton buttonType="primary" [bitAction]="submit">
+      {{ "submit" }}
+    </button>
+    <button
+      type="button"
+      bitButton
+      bitFormButton
+      buttonType="secondary"
+      [bitDialogClose]="ResultType.Closed"
+    >
+      {{ "cancel" | i18n }}
+    </button>
+  </ng-container>
+</bit-dialog>
diff --git a/apps/web/src/app/billing/shared/adjust-payment-dialog/adjust-payment-dialog-v2.component.ts b/apps/web/src/app/billing/shared/adjust-payment-dialog/adjust-payment-dialog-v2.component.ts
new file mode 100644
index 00000000000..ccf71dc7f88
--- /dev/null
+++ b/apps/web/src/app/billing/shared/adjust-payment-dialog/adjust-payment-dialog-v2.component.ts
@@ -0,0 +1,123 @@
+import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
+import { forwardRef, Component, Inject, ViewChild } from "@angular/core";
+
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
+import { PaymentMethodType } from "@bitwarden/common/billing/enums";
+import { PaymentRequest } from "@bitwarden/common/billing/models/request/payment.request";
+import { UpdatePaymentMethodRequest } from "@bitwarden/common/billing/models/request/update-payment-method.request";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { DialogService, ToastService } from "@bitwarden/components";
+
+import { TaxInfoComponent } from "../";
+import { PaymentV2Component } from "../payment/payment-v2.component";
+
+export interface AdjustPaymentDialogV2Params {
+  initialPaymentMethod?: PaymentMethodType;
+  organizationId?: string;
+}
+
+export enum AdjustPaymentDialogV2ResultType {
+  Closed = "closed",
+  Submitted = "submitted",
+}
+
+@Component({
+  templateUrl: "./adjust-payment-dialog-v2.component.html",
+})
+export class AdjustPaymentDialogV2Component {
+  @ViewChild(PaymentV2Component) paymentComponent: PaymentV2Component;
+  @ViewChild(forwardRef(() => TaxInfoComponent)) taxInfoComponent: TaxInfoComponent;
+
+  protected readonly PaymentMethodType = PaymentMethodType;
+  protected readonly ResultType = AdjustPaymentDialogV2ResultType;
+
+  protected dialogHeader: string;
+  protected initialPaymentMethod: PaymentMethodType;
+  protected organizationId?: string;
+
+  constructor(
+    private apiService: ApiService,
+    private billingApiService: BillingApiServiceAbstraction,
+    @Inject(DIALOG_DATA) protected dialogParams: AdjustPaymentDialogV2Params,
+    private dialogRef: DialogRef<AdjustPaymentDialogV2ResultType>,
+    private i18nService: I18nService,
+    private toastService: ToastService,
+  ) {
+    const key = this.dialogParams.initialPaymentMethod ? "changePaymentMethod" : "addPaymentMethod";
+    this.dialogHeader = this.i18nService.t(key);
+    this.initialPaymentMethod = this.dialogParams.initialPaymentMethod ?? PaymentMethodType.Card;
+    this.organizationId = this.dialogParams.organizationId;
+  }
+
+  onCountryChanged = () => {
+    if (this.taxInfoComponent.taxInfo.country === "US") {
+      this.paymentComponent.showBankAccount = !!this.organizationId;
+    } else {
+      this.paymentComponent.showBankAccount = false;
+      if (this.paymentComponent.selected === PaymentMethodType.BankAccount) {
+        this.paymentComponent.select(PaymentMethodType.Card);
+      }
+    }
+  };
+
+  submit = async (): Promise<void> => {
+    this.taxInfoComponent.taxFormGroup.updateValueAndValidity();
+    this.taxInfoComponent.taxFormGroup.markAllAsTouched();
+    if (this.taxInfoComponent.taxFormGroup.invalid) {
+      return;
+    }
+
+    if (!this.organizationId) {
+      await this.updatePremiumUserPaymentMethod();
+    } else {
+      await this.updateOrganizationPaymentMethod();
+    }
+
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("updatedPaymentMethod"),
+    });
+
+    this.dialogRef.close(AdjustPaymentDialogV2ResultType.Submitted);
+  };
+
+  private updateOrganizationPaymentMethod = async () => {
+    const paymentSource = await this.paymentComponent.tokenize();
+
+    const request = new UpdatePaymentMethodRequest();
+    request.paymentSource = paymentSource;
+    request.taxInformation = {
+      country: this.taxInfoComponent.country,
+      postalCode: this.taxInfoComponent.postalCode,
+      taxId: this.taxInfoComponent.taxId,
+      line1: this.taxInfoComponent.line1,
+      line2: this.taxInfoComponent.line2,
+      city: this.taxInfoComponent.city,
+      state: this.taxInfoComponent.state,
+    };
+
+    await this.billingApiService.updateOrganizationPaymentMethod(this.organizationId, request);
+  };
+
+  private updatePremiumUserPaymentMethod = async () => {
+    const { type, token } = await this.paymentComponent.tokenize();
+
+    const request = new PaymentRequest();
+    request.paymentMethodType = type;
+    request.paymentToken = token;
+    request.country = this.taxInfoComponent.country;
+    request.postalCode = this.taxInfoComponent.postalCode;
+    await this.apiService.postAccountPayment(request);
+  };
+
+  static open = (
+    dialogService: DialogService,
+    dialogConfig: DialogConfig<AdjustPaymentDialogV2Params>,
+  ) =>
+    dialogService.open<AdjustPaymentDialogV2ResultType>(
+      AdjustPaymentDialogV2Component,
+      dialogConfig,
+    );
+}
diff --git a/apps/web/src/app/billing/shared/adjust-payment-dialog.component.html b/apps/web/src/app/billing/shared/adjust-payment-dialog/adjust-payment-dialog.component.html
similarity index 100%
rename from apps/web/src/app/billing/shared/adjust-payment-dialog.component.html
rename to apps/web/src/app/billing/shared/adjust-payment-dialog/adjust-payment-dialog.component.html
diff --git a/apps/web/src/app/billing/shared/adjust-payment-dialog.component.ts b/apps/web/src/app/billing/shared/adjust-payment-dialog/adjust-payment-dialog.component.ts
similarity index 97%
rename from apps/web/src/app/billing/shared/adjust-payment-dialog.component.ts
rename to apps/web/src/app/billing/shared/adjust-payment-dialog/adjust-payment-dialog.component.ts
index 08c9bf27660..450c1234567 100644
--- a/apps/web/src/app/billing/shared/adjust-payment-dialog.component.ts
+++ b/apps/web/src/app/billing/shared/adjust-payment-dialog/adjust-payment-dialog.component.ts
@@ -10,8 +10,8 @@ import { ConfigService } from "@bitwarden/common/platform/abstractions/config/co
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 
-import { PaymentComponent } from "./payment.component";
-import { TaxInfoComponent } from "./tax-info.component";
+import { PaymentComponent } from "../payment/payment.component";
+import { TaxInfoComponent } from "../tax-info.component";
 
 export interface AdjustPaymentDialogData {
   organizationId: string;
diff --git a/apps/web/src/app/billing/shared/adjust-storage.component.ts b/apps/web/src/app/billing/shared/adjust-storage.component.ts
index 439bfec82a0..5cf05ea015c 100644
--- a/apps/web/src/app/billing/shared/adjust-storage.component.ts
+++ b/apps/web/src/app/billing/shared/adjust-storage.component.ts
@@ -12,7 +12,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 
-import { PaymentComponent } from "./payment.component";
+import { PaymentComponent } from "./payment/payment.component";
 
 export interface AdjustStorageDialogData {
   storageGbPrice: number;
diff --git a/apps/web/src/app/billing/shared/billing-shared.module.ts b/apps/web/src/app/billing/shared/billing-shared.module.ts
index 0031cff7755..300817bad55 100644
--- a/apps/web/src/app/billing/shared/billing-shared.module.ts
+++ b/apps/web/src/app/billing/shared/billing-shared.module.ts
@@ -4,19 +4,29 @@ import { HeaderModule } from "../../layouts/header/header.module";
 import { SharedModule } from "../../shared";
 
 import { AddCreditDialogComponent } from "./add-credit-dialog.component";
-import { AdjustPaymentDialogComponent } from "./adjust-payment-dialog.component";
+import { AdjustPaymentDialogV2Component } from "./adjust-payment-dialog/adjust-payment-dialog-v2.component";
+import { AdjustPaymentDialogComponent } from "./adjust-payment-dialog/adjust-payment-dialog.component";
 import { AdjustStorageComponent } from "./adjust-storage.component";
 import { BillingHistoryComponent } from "./billing-history.component";
 import { OffboardingSurveyComponent } from "./offboarding-survey.component";
+import { PaymentV2Component } from "./payment/payment-v2.component";
+import { PaymentComponent } from "./payment/payment.component";
 import { PaymentMethodComponent } from "./payment-method.component";
-import { PaymentComponent } from "./payment.component";
 import { SecretsManagerSubscribeComponent } from "./sm-subscribe.component";
 import { TaxInfoComponent } from "./tax-info.component";
 import { UpdateLicenseDialogComponent } from "./update-license-dialog.component";
 import { UpdateLicenseComponent } from "./update-license.component";
+import { VerifyBankAccountComponent } from "./verify-bank-account/verify-bank-account.component";
 
 @NgModule({
-  imports: [SharedModule, PaymentComponent, TaxInfoComponent, HeaderModule],
+  imports: [
+    SharedModule,
+    PaymentComponent,
+    TaxInfoComponent,
+    HeaderModule,
+    PaymentV2Component,
+    VerifyBankAccountComponent,
+  ],
   declarations: [
     AddCreditDialogComponent,
     AdjustPaymentDialogComponent,
@@ -27,6 +37,7 @@ import { UpdateLicenseComponent } from "./update-license.component";
     UpdateLicenseComponent,
     UpdateLicenseDialogComponent,
     OffboardingSurveyComponent,
+    AdjustPaymentDialogV2Component,
   ],
   exports: [
     SharedModule,
@@ -38,6 +49,7 @@ import { UpdateLicenseComponent } from "./update-license.component";
     UpdateLicenseComponent,
     UpdateLicenseDialogComponent,
     OffboardingSurveyComponent,
+    VerifyBankAccountComponent,
   ],
 })
 export class BillingSharedModule {}
diff --git a/apps/web/src/app/billing/shared/index.ts b/apps/web/src/app/billing/shared/index.ts
index ae28e45f789..69a4b93bec8 100644
--- a/apps/web/src/app/billing/shared/index.ts
+++ b/apps/web/src/app/billing/shared/index.ts
@@ -1,5 +1,5 @@
 export * from "./billing-shared.module";
 export * from "./payment-method.component";
-export * from "./payment.component";
+export * from "./payment/payment.component";
 export * from "./sm-subscribe.component";
 export * from "./tax-info.component";
diff --git a/apps/web/src/app/billing/shared/offboarding-survey.component.ts b/apps/web/src/app/billing/shared/offboarding-survey.component.ts
index 7ffd40e058d..90ca8e254ce 100644
--- a/apps/web/src/app/billing/shared/offboarding-survey.component.ts
+++ b/apps/web/src/app/billing/shared/offboarding-survey.component.ts
@@ -2,7 +2,7 @@ import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
-import { BillingApiServiceAbstraction as BillingApiService } from "@bitwarden/common/billing/abstractions/billilng-api.service.abstraction";
+import { BillingApiServiceAbstraction as BillingApiService } from "@bitwarden/common/billing/abstractions/billing-api.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { DialogService, ToastService } from "@bitwarden/components";
diff --git a/apps/web/src/app/billing/shared/payment-method.component.ts b/apps/web/src/app/billing/shared/payment-method.component.ts
index 0c089fa0733..06acf2142a5 100644
--- a/apps/web/src/app/billing/shared/payment-method.component.ts
+++ b/apps/web/src/app/billing/shared/payment-method.component.ts
@@ -19,7 +19,7 @@ import { AddCreditDialogResult, openAddCreditDialog } from "./add-credit-dialog.
 import {
   AdjustPaymentDialogResult,
   openAdjustPaymentDialog,
-} from "./adjust-payment-dialog.component";
+} from "./adjust-payment-dialog/adjust-payment-dialog.component";
 import { TaxInfoComponent } from "./tax-info.component";
 
 @Component({
diff --git a/libs/angular/src/billing/components/select-payment-method/select-payment-method.component.html b/apps/web/src/app/billing/shared/payment/payment-v2.component.html
similarity index 89%
rename from libs/angular/src/billing/components/select-payment-method/select-payment-method.component.html
rename to apps/web/src/app/billing/shared/payment/payment-v2.component.html
index f7e57acb7f8..e701c1ce679 100644
--- a/libs/angular/src/billing/components/select-payment-method/select-payment-method.component.html
+++ b/apps/web/src/app/billing/shared/payment/payment-v2.component.html
@@ -43,24 +43,31 @@
   <ng-container *ngIf="usingCard">
     <div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-4">
       <div class="tw-col-span-1">
-        <label for="stripe-card-number">{{ "number" | i18n }}</label>
+        <label for="stripe-card-number">
+          {{ "number" | i18n }}
+          <span class="tw-text-xs tw-font-normal">({{ "required" | i18n }})</span>
+        </label>
         <div id="stripe-card-number" class="form-control stripe-form-control"></div>
       </div>
       <div class="tw-col-span-1 tw-flex tw-items-end">
         <img
-          src="../../images/cards.png"
+          src="../../../images/cards.png"
           alt="Visa, MasterCard, Discover, AmEx, JCB, Diners Club, UnionPay"
           class="tw-max-w-full"
         />
       </div>
       <div class="tw-col-span-1">
-        <label for="stripe-card-expiry">{{ "expiration" | i18n }}</label>
+        <label for="stripe-card-expiry">
+          {{ "expiration" | i18n }}
+          <span class="tw-text-xs tw-font-normal">({{ "required" | i18n }})</span>
+        </label>
         <div id="stripe-card-expiry" class="form-control stripe-form-control"></div>
       </div>
       <div class="tw-col-span-1">
         <div class="tw-flex">
           <label for="stripe-card-cvc">
             {{ "securityCode" | i18n }}
+            <span class="tw-text-xs tw-font-normal">({{ "required" | i18n }})</span>
           </label>
           <a
             href="https://www.cvvnumber.com/cvv.html"
@@ -82,7 +89,7 @@
     <app-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
       {{ "verifyBankAccountInitialDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}
     </app-callout>
-    <div class="tw-grid tw-grid-cols-2 tw-gap-4" formGroupName="bankInformation">
+    <div class="tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-4" formGroupName="bankInformation">
       <bit-form-field class="tw-col-span-1" disableMargin>
         <bit-label>{{ "routingNumber" | i18n }}</bit-label>
         <input
diff --git a/libs/angular/src/billing/components/select-payment-method/select-payment-method.component.ts b/apps/web/src/app/billing/shared/payment/payment-v2.component.ts
similarity index 50%
rename from libs/angular/src/billing/components/select-payment-method/select-payment-method.component.ts
rename to apps/web/src/app/billing/shared/payment/payment-v2.component.ts
index 4dc39334a70..a8027e11f24 100644
--- a/libs/angular/src/billing/components/select-payment-method/select-payment-method.component.ts
+++ b/apps/web/src/app/billing/shared/payment/payment-v2.component.ts
@@ -1,5 +1,5 @@
-import { Component, Input, OnDestroy, OnInit } from "@angular/core";
-import { FormBuilder, Validators } from "@angular/forms";
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { Subject } from "rxjs";
 import { takeUntil } from "rxjs/operators";
 
@@ -9,40 +9,103 @@ import {
   StripeServiceAbstraction,
 } from "@bitwarden/common/billing/abstractions";
 import { PaymentMethodType } from "@bitwarden/common/billing/enums";
-import { TokenizedPaymentMethod } from "@bitwarden/common/billing/models/domain";
+import { TokenizedPaymentSourceRequest } from "@bitwarden/common/billing/models/request/tokenized-payment-source.request";
 
+import { SharedModule } from "../../../shared";
+
+/**
+ * Render a form that allows the user to enter their payment method, tokenize it against one of our payment providers and,
+ * optionally, submit it using the {@link onSubmit} function if it is provided.
+ *
+ * This component is meant to replace the existing {@link PaymentComponent} which is using the deprecated Stripe Sources API.
+ */
 @Component({
-  selector: "app-select-payment-method",
-  templateUrl: "./select-payment-method.component.html",
+  selector: "app-payment-v2",
+  templateUrl: "./payment-v2.component.html",
+  standalone: true,
+  imports: [SharedModule],
 })
-export class SelectPaymentMethodComponent implements OnInit, OnDestroy {
-  @Input() protected showAccountCredit: boolean = true;
-  @Input() protected showBankAccount: boolean = true;
-  @Input() protected showPayPal: boolean = true;
-  @Input() private startWith: PaymentMethodType = PaymentMethodType.Card;
-  @Input() protected onSubmit: (tokenizedPaymentMethod: TokenizedPaymentMethod) => Promise<void>;
+export class PaymentV2Component implements OnInit, OnDestroy {
+  /** Show account credit as a payment option. */
+  @Input() showAccountCredit: boolean = true;
+  /** Show bank account as a payment option. */
+  @Input() showBankAccount: boolean = true;
+  /** Show PayPal as a payment option. */
+  @Input() showPayPal: boolean = true;
+
+  /** The payment method selected by default when the component renders. */
+  @Input() private initialPaymentMethod: PaymentMethodType = PaymentMethodType.Card;
+  /** If provided, will be invoked with the tokenized payment source during form submission. */
+  @Input() protected onSubmit?: (request: TokenizedPaymentSourceRequest) => Promise<void>;
+
+  @Output() submitted = new EventEmitter<PaymentMethodType>();
 
   private destroy$ = new Subject<void>();
 
-  protected formGroup = this.formBuilder.group({
-    paymentMethod: [this.startWith],
-    bankInformation: this.formBuilder.group({
-      routingNumber: ["", [Validators.required]],
-      accountNumber: ["", [Validators.required]],
-      accountHolderName: ["", [Validators.required]],
-      accountHolderType: ["", [Validators.required]],
+  protected formGroup = new FormGroup({
+    paymentMethod: new FormControl<PaymentMethodType>(null),
+    bankInformation: new FormGroup({
+      routingNumber: new FormControl<string>("", [Validators.required]),
+      accountNumber: new FormControl<string>("", [Validators.required]),
+      accountHolderName: new FormControl<string>("", [Validators.required]),
+      accountHolderType: new FormControl<string>("", [Validators.required]),
     }),
   });
+
   protected PaymentMethodType = PaymentMethodType;
 
   constructor(
     private billingApiService: BillingApiServiceAbstraction,
     private braintreeService: BraintreeServiceAbstraction,
-    private formBuilder: FormBuilder,
     private stripeService: StripeServiceAbstraction,
   ) {}
 
-  async tokenizePaymentMethod(): Promise<TokenizedPaymentMethod> {
+  ngOnInit(): void {
+    this.formGroup.controls.paymentMethod.patchValue(this.initialPaymentMethod);
+
+    this.stripeService.loadStripe(
+      {
+        cardNumber: "#stripe-card-number",
+        cardExpiry: "#stripe-card-expiry",
+        cardCvc: "#stripe-card-cvc",
+      },
+      this.initialPaymentMethod === PaymentMethodType.Card,
+    );
+
+    if (this.showPayPal) {
+      this.braintreeService.loadBraintree(
+        "#braintree-container",
+        this.initialPaymentMethod === PaymentMethodType.PayPal,
+      );
+    }
+
+    this.formGroup
+      .get("paymentMethod")
+      .valueChanges.pipe(takeUntil(this.destroy$))
+      .subscribe((type) => {
+        this.onPaymentMethodChange(type);
+      });
+  }
+
+  /** Programmatically select the provided payment method. */
+  select = (paymentMethod: PaymentMethodType) => {
+    this.formGroup.value.paymentMethod = paymentMethod;
+  };
+
+  protected submit = async () => {
+    const { type, token } = await this.tokenize();
+    await this.onSubmit({ type, token });
+    this.submitted.emit(type);
+  };
+
+  /**
+   * Tokenize the payment method information entered by the user against one of our payment providers.
+   *
+   * - {@link PaymentMethodType.Card} => [Stripe.confirmCardSetup]{@link https://docs.stripe.com/js/setup_intents/confirm_card_setup}
+   * - {@link PaymentMethodType.BankAccount} => [Stripe.confirmUsBankAccountSetup]{@link https://docs.stripe.com/js/setup_intents/confirm_us_bank_account_setup}
+   * - {@link PaymentMethodType.PayPal} => [Braintree.requestPaymentMethod]{@link https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#requestPaymentMethod}
+   * */
+  async tokenize(): Promise<{ type: PaymentMethodType; token: string }> {
     const type = this.selected;
 
     if (this.usingStripe) {
@@ -81,36 +144,6 @@ export class SelectPaymentMethodComponent implements OnInit, OnDestroy {
     return null;
   }
 
-  submit = async () => {
-    const tokenizedPaymentMethod = await this.tokenizePaymentMethod();
-    await this.onSubmit(tokenizedPaymentMethod);
-  };
-
-  ngOnInit(): void {
-    this.stripeService.loadStripe(
-      {
-        cardNumber: "#stripe-card-number",
-        cardExpiry: "#stripe-card-expiry",
-        cardCvc: "#stripe-card-cvc",
-      },
-      this.startWith === PaymentMethodType.Card,
-    );
-
-    if (this.showPayPal) {
-      this.braintreeService.loadBraintree(
-        "#braintree-container",
-        this.startWith === PaymentMethodType.PayPal,
-      );
-    }
-
-    this.formGroup
-      .get("paymentMethod")
-      .valueChanges.pipe(takeUntil(this.destroy$))
-      .subscribe((type) => {
-        this.onPaymentMethodChange(type);
-      });
-  }
-
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
@@ -133,7 +166,7 @@ export class SelectPaymentMethodComponent implements OnInit, OnDestroy {
     }
   }
 
-  private get selected(): PaymentMethodType {
+  get selected(): PaymentMethodType {
     return this.formGroup.value.paymentMethod;
   }
 
diff --git a/apps/web/src/app/billing/shared/payment.component.html b/apps/web/src/app/billing/shared/payment/payment.component.html
similarity index 100%
rename from apps/web/src/app/billing/shared/payment.component.html
rename to apps/web/src/app/billing/shared/payment/payment.component.html
diff --git a/apps/web/src/app/billing/shared/payment.component.ts b/apps/web/src/app/billing/shared/payment/payment.component.ts
similarity index 99%
rename from apps/web/src/app/billing/shared/payment.component.ts
rename to apps/web/src/app/billing/shared/payment/payment.component.ts
index 95b25a74e4e..03269c70a5a 100644
--- a/apps/web/src/app/billing/shared/payment.component.ts
+++ b/apps/web/src/app/billing/shared/payment/payment.component.ts
@@ -7,7 +7,7 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { PaymentMethodType } from "@bitwarden/common/billing/enums";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 
-import { SharedModule } from "../../shared";
+import { SharedModule } from "../../../shared";
 
 @Component({
   selector: "app-payment",
diff --git a/libs/angular/src/billing/components/verify-bank-account/verify-bank-account.component.html b/apps/web/src/app/billing/shared/verify-bank-account/verify-bank-account.component.html
similarity index 89%
rename from libs/angular/src/billing/components/verify-bank-account/verify-bank-account.component.html
rename to apps/web/src/app/billing/shared/verify-bank-account/verify-bank-account.component.html
index f338f5b0817..1b09f4bed51 100644
--- a/libs/angular/src/billing/components/verify-bank-account/verify-bank-account.component.html
+++ b/apps/web/src/app/billing/shared/verify-bank-account/verify-bank-account.component.html
@@ -11,7 +11,7 @@
       <input bitInput type="number" step="1" placeholder="xx" formControlName="amount2" />
       <span bitPrefix>$0.</span>
     </bit-form-field>
-    <button type="submit" bitButton bitFormButton buttonType="primary">
+    <button *ngIf="onSubmit" type="submit" bitButton bitFormButton buttonType="primary">
       {{ "submit" | i18n }}
     </button>
   </form>
diff --git a/libs/angular/src/billing/components/verify-bank-account/verify-bank-account.component.ts b/apps/web/src/app/billing/shared/verify-bank-account/verify-bank-account.component.ts
similarity index 57%
rename from libs/angular/src/billing/components/verify-bank-account/verify-bank-account.component.ts
rename to apps/web/src/app/billing/shared/verify-bank-account/verify-bank-account.component.ts
index c8abb65d819..5a6a7b0cf3d 100644
--- a/libs/angular/src/billing/components/verify-bank-account/verify-bank-account.component.ts
+++ b/apps/web/src/app/billing/shared/verify-bank-account/verify-bank-account.component.ts
@@ -1,13 +1,19 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { FormBuilder, FormControl, Validators } from "@angular/forms";
 
+import { VerifyBankAccountRequest } from "@bitwarden/common/billing/models/request/verify-bank-account.request";
+
+import { SharedModule } from "../../../shared";
+
 @Component({
   selector: "app-verify-bank-account",
   templateUrl: "./verify-bank-account.component.html",
+  standalone: true,
+  imports: [SharedModule],
 })
 export class VerifyBankAccountComponent {
-  @Input() onSubmit?: (amount1: number, amount2: number) => Promise<void>;
-  @Output() verificationSubmitted = new EventEmitter();
+  @Input() onSubmit?: (request: VerifyBankAccountRequest) => Promise<void>;
+  @Output() submitted = new EventEmitter();
 
   protected formGroup = this.formBuilder.group({
     amount1: new FormControl<number>(null, [
@@ -25,9 +31,11 @@ export class VerifyBankAccountComponent {
   constructor(private formBuilder: FormBuilder) {}
 
   submit = async () => {
-    if (this.onSubmit) {
-      await this.onSubmit(this.formGroup.value.amount1, this.formGroup.value.amount2);
-    }
-    this.verificationSubmitted.emit();
+    const request = new VerifyBankAccountRequest(
+      this.formGroup.value.amount1,
+      this.formGroup.value.amount2,
+    );
+    await this.onSubmit(request);
+    this.submitted.emit();
   };
 }
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts
index 37ef3173602..8ed10a2d6e3 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts
@@ -16,8 +16,6 @@ import {
   ManageClientsComponent,
   ManageClientSubscriptionDialogComponent,
   ProviderBillingHistoryComponent,
-  ProviderPaymentMethodComponent,
-  ProviderSelectPaymentMethodDialogComponent,
   ProviderSubscriptionComponent,
   ProviderSubscriptionStatusComponent,
 } from "../../billing/providers";
@@ -80,8 +78,6 @@ import { SetupComponent } from "./setup/setup.component";
     ManageClientSubscriptionDialogComponent,
     ProviderBillingHistoryComponent,
     ProviderSubscriptionComponent,
-    ProviderSelectPaymentMethodDialogComponent,
-    ProviderPaymentMethodComponent,
     ProviderSubscriptionStatusComponent,
   ],
   providers: [WebProviderService],
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/services/web-provider.service.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/services/web-provider.service.ts
index 16b2d51de47..76094646808 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/services/web-provider.service.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/services/web-provider.service.ts
@@ -3,7 +3,7 @@ import { Injectable } from "@angular/core";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationKeysRequest } from "@bitwarden/common/admin-console/models/request/organization-keys.request";
 import { ProviderAddOrganizationRequest } from "@bitwarden/common/admin-console/models/request/provider/provider-add-organization.request";
-import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billilng-api.service.abstraction";
+import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billing-api.service.abstraction";
 import { PlanType } from "@bitwarden/common/billing/enums";
 import { CreateClientOrganizationRequest } from "@bitwarden/common/billing/models/request/create-client-organization.request";
 import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/clients/create-client-dialog.component.ts b/bitwarden_license/bit-web/src/app/billing/providers/clients/create-client-dialog.component.ts
index c0ee21d2ab3..3e019b759f7 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/clients/create-client-dialog.component.ts
+++ b/bitwarden_license/bit-web/src/app/billing/providers/clients/create-client-dialog.component.ts
@@ -2,7 +2,7 @@ import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
 import { Component, Inject, OnInit } from "@angular/core";
 import { FormControl, FormGroup, Validators } from "@angular/forms";
 
-import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billilng-api.service.abstraction";
+import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billing-api.service.abstraction";
 import { PlanType } from "@bitwarden/common/billing/enums";
 import { PlanResponse } from "@bitwarden/common/billing/models/response/plan.response";
 import { ProviderPlanResponse } from "@bitwarden/common/billing/models/response/provider-subscription-response";
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-client-name-dialog.component.ts b/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-client-name-dialog.component.ts
index 20b7e9aaa7b..2e71a6c2d76 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-client-name-dialog.component.ts
+++ b/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-client-name-dialog.component.ts
@@ -2,7 +2,7 @@ import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
-import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billilng-api.service.abstraction";
+import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billing-api.service.abstraction";
 import { UpdateClientOrganizationRequest } from "@bitwarden/common/billing/models/request/update-client-organization.request";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { DialogService, ToastService } from "@bitwarden/components";
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-clients.component.ts b/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-clients.component.ts
index 03ef71482fb..a870b053dba 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-clients.component.ts
+++ b/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-clients.component.ts
@@ -9,7 +9,7 @@ import { ProviderService } from "@bitwarden/common/admin-console/abstractions/pr
 import { ProviderUserType } from "@bitwarden/common/admin-console/enums";
 import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
 import { ProviderOrganizationOrganizationDetailsResponse } from "@bitwarden/common/admin-console/models/response/provider/provider-organization.response";
-import { BillingApiServiceAbstraction as BillingApiService } from "@bitwarden/common/billing/abstractions/billilng-api.service.abstraction";
+import { BillingApiServiceAbstraction as BillingApiService } from "@bitwarden/common/billing/abstractions/billing-api.service.abstraction";
 import { hasConsolidatedBilling } from "@bitwarden/common/billing/abstractions/provider-billing.service.abstraction";
 import { PlanResponse } from "@bitwarden/common/billing/models/response/plan.response";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/index.ts b/bitwarden_license/bit-web/src/app/billing/providers/index.ts
index 87fed1cbd9d..b1294bc8047 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/index.ts
+++ b/bitwarden_license/bit-web/src/app/billing/providers/index.ts
@@ -1,7 +1,5 @@
 export * from "./billing-history/provider-billing-history.component";
 export * from "./clients";
 export * from "./guards/has-consolidated-billing.guard";
-export * from "./payment-method/provider-select-payment-method-dialog.component";
-export * from "./payment-method/provider-payment-method.component";
 export * from "./subscription/provider-subscription.component";
 export * from "./subscription/provider-subscription-status.component";
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-payment-method.component.html b/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-payment-method.component.html
deleted file mode 100644
index 2894752b28f..00000000000
--- a/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-payment-method.component.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<app-header></app-header>
-<ng-container *ngIf="loading">
-  <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>
-<bit-container *ngIf="!loading">
-  <!-- Account Credit -->
-  <ng-container>
-    <h2 bitTypography="h2">
-      {{ "accountCredit" | i18n }}
-    </h2>
-    <p class="tw-text-lg tw-font-bold">{{ accountCredit | currency: "$" }}</p>
-    <p bitTypography="body1">{{ "creditAppliedDesc" | i18n }}</p>
-    <button type="button" bitButton buttonType="secondary" [bitAction]="addAccountCredit">
-      {{ "addCredit" | i18n }}
-    </button>
-  </ng-container>
-  <!-- Payment Method -->
-  <ng-container>
-    <h2 class="spaced-header">{{ "paymentMethod" | i18n }}</h2>
-    <p *ngIf="!hasPaymentMethod">{{ "noPaymentMethod" | i18n }}</p>
-    <app-verify-bank-account
-      [onSubmit]="verifyBankAccount"
-      (verificationSubmitted)="onDataUpdated()"
-      *ngIf="hasUnverifiedPaymentMethod"
-    />
-    <ng-container *ngIf="hasPaymentMethod">
-      <p>
-        <i class="bwi bwi-fw" [ngClass]="paymentMethodClass"></i>
-        {{ paymentMethodDescription }}
-      </p>
-    </ng-container>
-    <button type="button" bitButton buttonType="secondary" [bitAction]="changePaymentMethod">
-      {{ (hasPaymentMethod ? "changePaymentMethod" : "addPaymentMethod") | i18n }}
-    </button>
-  </ng-container>
-  <!-- Tax Information -->
-  <ng-container>
-    <h2 class="spaced-header">{{ "taxInformation" | i18n }}</h2>
-    <p>{{ "taxInformationDesc" | i18n }}</p>
-    <app-manage-tax-information
-      *ngIf="taxInformation"
-      [startWith]="taxInformation"
-      [onSubmit]="updateTaxInformation"
-      (taxInformationUpdated)="onDataUpdated()"
-    />
-  </ng-container>
-</bit-container>
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-payment-method.component.ts b/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-payment-method.component.ts
deleted file mode 100644
index 42a7dbdec05..00000000000
--- a/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-payment-method.component.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
-import { from, lastValueFrom, Subject, switchMap } from "rxjs";
-import { takeUntil } from "rxjs/operators";
-
-import { openAddAccountCreditDialog } from "@bitwarden/angular/billing/components";
-import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
-import { PaymentMethodType } from "@bitwarden/common/billing/enums";
-import { MaskedPaymentMethod, TaxInformation } from "@bitwarden/common/billing/models/domain";
-import { ExpandedTaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/expanded-tax-info-update.request";
-import { VerifyBankAccountRequest } from "@bitwarden/common/billing/models/request/verify-bank-account.request";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { DialogService, ToastService } from "@bitwarden/components";
-
-import {
-  openProviderSelectPaymentMethodDialog,
-  ProviderSelectPaymentMethodDialogResultType,
-} from "./provider-select-payment-method-dialog.component";
-
-@Component({
-  selector: "app-provider-payment-method",
-  templateUrl: "./provider-payment-method.component.html",
-})
-export class ProviderPaymentMethodComponent implements OnInit, OnDestroy {
-  protected providerId: string;
-  protected loading: boolean;
-
-  protected accountCredit: number;
-  protected maskedPaymentMethod: MaskedPaymentMethod;
-  protected taxInformation: TaxInformation;
-
-  private destroy$ = new Subject<void>();
-
-  constructor(
-    private activatedRoute: ActivatedRoute,
-    private billingApiService: BillingApiServiceAbstraction,
-    private dialogService: DialogService,
-    private i18nService: I18nService,
-    private toastService: ToastService,
-  ) {}
-
-  addAccountCredit = () =>
-    openAddAccountCreditDialog(this.dialogService, {
-      data: {
-        providerId: this.providerId,
-      },
-    });
-
-  changePaymentMethod = async () => {
-    const dialogRef = openProviderSelectPaymentMethodDialog(this.dialogService, {
-      data: {
-        providerId: this.providerId,
-      },
-    });
-
-    const result = await lastValueFrom(dialogRef.closed);
-
-    if (result == ProviderSelectPaymentMethodDialogResultType.Submitted) {
-      await this.load();
-    }
-  };
-
-  async load() {
-    this.loading = true;
-    const paymentInformation = await this.billingApiService.getProviderPaymentInformation(
-      this.providerId,
-    );
-    this.accountCredit = paymentInformation.accountCredit;
-    this.maskedPaymentMethod = MaskedPaymentMethod.from(paymentInformation.paymentMethod);
-    this.taxInformation = TaxInformation.from(paymentInformation.taxInformation);
-    this.loading = false;
-  }
-
-  onDataUpdated = async () => await this.load();
-
-  updateTaxInformation = async (taxInformation: TaxInformation) => {
-    const request = ExpandedTaxInfoUpdateRequest.From(taxInformation);
-    await this.billingApiService.updateProviderTaxInformation(this.providerId, request);
-    this.toastService.showToast({
-      variant: "success",
-      title: null,
-      message: this.i18nService.t("updatedTaxInformation"),
-    });
-  };
-
-  verifyBankAccount = async (amount1: number, amount2: number) => {
-    const request = new VerifyBankAccountRequest(amount1, amount2);
-    await this.billingApiService.verifyProviderBankAccount(this.providerId, request);
-  };
-
-  ngOnInit() {
-    this.activatedRoute.params
-      .pipe(
-        switchMap(({ providerId }) => {
-          this.providerId = providerId;
-          return from(this.load());
-        }),
-        takeUntil(this.destroy$),
-      )
-      .subscribe();
-  }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  protected get hasPaymentMethod(): boolean {
-    return !!this.maskedPaymentMethod;
-  }
-
-  protected get hasUnverifiedPaymentMethod(): boolean {
-    return !!this.maskedPaymentMethod && this.maskedPaymentMethod.needsVerification;
-  }
-
-  protected get paymentMethodClass(): string[] {
-    switch (this.maskedPaymentMethod.type) {
-      case PaymentMethodType.Card:
-        return ["bwi-credit-card"];
-      case PaymentMethodType.BankAccount:
-        return ["bwi-bank"];
-      case PaymentMethodType.PayPal:
-        return ["bwi-paypal tw-text-primary"];
-      default:
-        return [];
-    }
-  }
-
-  protected get paymentMethodDescription(): string {
-    let description = this.maskedPaymentMethod.description;
-    if (this.maskedPaymentMethod.type === PaymentMethodType.BankAccount) {
-      if (this.hasUnverifiedPaymentMethod) {
-        description += " - " + this.i18nService.t("unverified");
-      } else {
-        description += " - " + this.i18nService.t("verified");
-      }
-    }
-    return description;
-  }
-}
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-select-payment-method-dialog.component.html b/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-select-payment-method-dialog.component.html
deleted file mode 100644
index 03e8405a48c..00000000000
--- a/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-select-payment-method-dialog.component.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<form [formGroup]="formGroup" [bitSubmit]="submit">
-  <bit-dialog dialogSize="large">
-    <span bitDialogTitle class="tw-font-semibold">
-      {{ "addPaymentMethod" | i18n }}
-    </span>
-    <ng-container bitDialogContent>
-      <app-select-payment-method [showAccountCredit]="false" />
-    </ng-container>
-    <ng-container bitDialogFooter>
-      <button bitButton bitFormButton buttonType="primary" type="submit">
-        {{ "submit" | i18n }}
-      </button>
-      <button bitButton buttonType="secondary" type="button" [bitDialogClose]="ResultType.Closed">
-        {{ "cancel" | i18n }}
-      </button>
-    </ng-container>
-  </bit-dialog>
-</form>
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-select-payment-method-dialog.component.ts b/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-select-payment-method-dialog.component.ts
deleted file mode 100644
index 09a293d12d8..00000000000
--- a/bitwarden_license/bit-web/src/app/billing/providers/payment-method/provider-select-payment-method-dialog.component.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
-import { Component, EventEmitter, Inject, Output, ViewChild } from "@angular/core";
-import { FormGroup } from "@angular/forms";
-
-import { SelectPaymentMethodComponent } from "@bitwarden/angular/billing/components";
-import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
-import { TokenizedPaymentMethodRequest } from "@bitwarden/common/billing/models/request/tokenized-payment-method.request";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { DialogService, ToastService } from "@bitwarden/components";
-
-type ProviderSelectPaymentMethodDialogParams = {
-  providerId: string;
-};
-
-export enum ProviderSelectPaymentMethodDialogResultType {
-  Closed = "closed",
-  Submitted = "submitted",
-}
-
-export const openProviderSelectPaymentMethodDialog = (
-  dialogService: DialogService,
-  dialogConfig: DialogConfig<ProviderSelectPaymentMethodDialogParams>,
-) =>
-  dialogService.open<
-    ProviderSelectPaymentMethodDialogResultType,
-    ProviderSelectPaymentMethodDialogParams
-  >(ProviderSelectPaymentMethodDialogComponent, dialogConfig);
-
-@Component({
-  templateUrl: "provider-select-payment-method-dialog.component.html",
-})
-export class ProviderSelectPaymentMethodDialogComponent {
-  @ViewChild(SelectPaymentMethodComponent)
-  selectPaymentMethodComponent: SelectPaymentMethodComponent;
-  @Output() providerPaymentMethodUpdated = new EventEmitter();
-
-  protected readonly formGroup = new FormGroup({});
-  protected readonly ResultType = ProviderSelectPaymentMethodDialogResultType;
-
-  constructor(
-    private billingApiService: BillingApiServiceAbstraction,
-    @Inject(DIALOG_DATA) private dialogParams: ProviderSelectPaymentMethodDialogParams,
-    private dialogRef: DialogRef<ProviderSelectPaymentMethodDialogResultType>,
-    private i18nService: I18nService,
-    private toastService: ToastService,
-  ) {}
-
-  submit = async () => {
-    const tokenizedPaymentMethod = await this.selectPaymentMethodComponent.tokenizePaymentMethod();
-    const request = TokenizedPaymentMethodRequest.From(tokenizedPaymentMethod);
-    await this.billingApiService.updateProviderPaymentMethod(this.dialogParams.providerId, request);
-    this.providerPaymentMethodUpdated.emit();
-    this.toastService.showToast({
-      variant: "success",
-      title: null,
-      message: this.i18nService.t("updatedPaymentMethod"),
-    });
-    this.dialogRef.close(this.ResultType.Submitted);
-  };
-}
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.ts b/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.ts
index 4e428d45143..43521ebe863 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.ts
+++ b/bitwarden_license/bit-web/src/app/billing/providers/subscription/provider-subscription.component.ts
@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { Subject, concatMap, takeUntil } from "rxjs";
 
-import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billilng-api.service.abstraction";
+import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billing-api.service.abstraction";
 import { TaxInformation } from "@bitwarden/common/billing/models/domain";
 import { ExpandedTaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/expanded-tax-info-update.request";
 import {
diff --git a/libs/angular/src/billing/components/index.ts b/libs/angular/src/billing/components/index.ts
index 8c8d5bd292b..675d7555ed2 100644
--- a/libs/angular/src/billing/components/index.ts
+++ b/libs/angular/src/billing/components/index.ts
@@ -2,5 +2,3 @@ export * from "./add-account-credit-dialog/add-account-credit-dialog.component";
 export * from "./invoices/invoices.component";
 export * from "./invoices/no-invoices.component";
 export * from "./manage-tax-information/manage-tax-information.component";
-export * from "./select-payment-method/select-payment-method.component";
-export * from "./verify-bank-account/verify-bank-account.component";
diff --git a/libs/angular/src/jslib.module.ts b/libs/angular/src/jslib.module.ts
index 755d52c0e77..bebac42fd83 100644
--- a/libs/angular/src/jslib.module.ts
+++ b/libs/angular/src/jslib.module.ts
@@ -7,8 +7,6 @@ import {
   InvoicesComponent,
   NoInvoicesComponent,
   ManageTaxInformationComponent,
-  SelectPaymentMethodComponent,
-  VerifyBankAccountComponent,
 } from "@bitwarden/angular/billing/components";
 import {
   AsyncActionsModule,
@@ -116,8 +114,6 @@ import { IconComponent } from "./vault/components/icon.component";
     InvoicesComponent,
     NoInvoicesComponent,
     ManageTaxInformationComponent,
-    SelectPaymentMethodComponent,
-    VerifyBankAccountComponent,
     TwoFactorIconComponent,
   ],
   exports: [
@@ -153,8 +149,6 @@ import { IconComponent } from "./vault/components/icon.component";
     InvoicesComponent,
     NoInvoicesComponent,
     ManageTaxInformationComponent,
-    SelectPaymentMethodComponent,
-    VerifyBankAccountComponent,
     TwoFactorIconComponent,
   ],
   providers: [
diff --git a/libs/common/src/billing/abstractions/billilng-api.service.abstraction.ts b/libs/common/src/billing/abstractions/billing-api.service.abstraction.ts
similarity index 79%
rename from libs/common/src/billing/abstractions/billilng-api.service.abstraction.ts
rename to libs/common/src/billing/abstractions/billing-api.service.abstraction.ts
index fd7feab4c32..ef148d1aef4 100644
--- a/libs/common/src/billing/abstractions/billilng-api.service.abstraction.ts
+++ b/libs/common/src/billing/abstractions/billing-api.service.abstraction.ts
@@ -1,10 +1,10 @@
 import { ProviderOrganizationOrganizationDetailsResponse } from "@bitwarden/common/admin-console/models/response/provider/provider-organization.response";
 import { PaymentMethodType } from "@bitwarden/common/billing/enums";
 import { ExpandedTaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/expanded-tax-info-update.request";
-import { TokenizedPaymentMethodRequest } from "@bitwarden/common/billing/models/request/tokenized-payment-method.request";
+import { UpdatePaymentMethodRequest } from "@bitwarden/common/billing/models/request/update-payment-method.request";
 import { VerifyBankAccountRequest } from "@bitwarden/common/billing/models/request/verify-bank-account.request";
 import { InvoicesResponse } from "@bitwarden/common/billing/models/response/invoices.response";
-import { PaymentInformationResponse } from "@bitwarden/common/billing/models/response/payment-information.response";
+import { PaymentMethodResponse } from "@bitwarden/common/billing/models/response/payment-method.response";
 
 import { SubscriptionCancellationRequest } from "../../billing/models/request/subscription-cancellation.request";
 import { OrganizationBillingMetadataResponse } from "../../billing/models/response/organization-billing-metadata.response";
@@ -33,6 +33,8 @@ export abstract class BillingApiServiceAbstraction {
     organizationId: string,
   ) => Promise<OrganizationBillingMetadataResponse>;
 
+  getOrganizationPaymentMethod: (organizationId: string) => Promise<PaymentMethodResponse>;
+
   getPlans: () => Promise<ListResponse<PlanResponse>>;
 
   getProviderClientInvoiceReport: (providerId: string, invoiceId: string) => Promise<string>;
@@ -43,37 +45,31 @@ export abstract class BillingApiServiceAbstraction {
 
   getProviderInvoices: (providerId: string) => Promise<InvoicesResponse>;
 
-  /**
-   * @deprecated This endpoint is currently deactivated.
-   */
-  getProviderPaymentInformation: (providerId: string) => Promise<PaymentInformationResponse>;
-
   getProviderSubscription: (providerId: string) => Promise<ProviderSubscriptionResponse>;
 
+  updateOrganizationPaymentMethod: (
+    organizationId: string,
+    request: UpdatePaymentMethodRequest,
+  ) => Promise<void>;
+
+  updateOrganizationTaxInformation: (
+    organizationId: string,
+    request: ExpandedTaxInfoUpdateRequest,
+  ) => Promise<void>;
+
   updateProviderClientOrganization: (
     providerId: string,
     organizationId: string,
     request: UpdateClientOrganizationRequest,
   ) => Promise<any>;
 
-  /**
-   * @deprecated This endpoint is currently deactivated.
-   */
-  updateProviderPaymentMethod: (
-    providerId: string,
-    request: TokenizedPaymentMethodRequest,
-  ) => Promise<void>;
-
   updateProviderTaxInformation: (
     providerId: string,
     request: ExpandedTaxInfoUpdateRequest,
   ) => Promise<void>;
 
-  /**
-   * @deprecated This endpoint is currently deactivated.
-   */
-  verifyProviderBankAccount: (
-    providerId: string,
+  verifyOrganizationBankAccount: (
+    organizationId: string,
     request: VerifyBankAccountRequest,
   ) => Promise<void>;
 }
diff --git a/libs/common/src/billing/abstractions/index.ts b/libs/common/src/billing/abstractions/index.ts
index c3ef8baca29..05d214f424c 100644
--- a/libs/common/src/billing/abstractions/index.ts
+++ b/libs/common/src/billing/abstractions/index.ts
@@ -1,5 +1,5 @@
 export * from "./account/billing-account-profile-state.service";
-export * from "./billilng-api.service.abstraction";
+export * from "./billing-api.service.abstraction";
 export * from "./organization-billing.service";
 export * from "./payment-processors/braintree.service.abstraction";
 export * from "./payment-processors/stripe.service.abstraction";
diff --git a/libs/common/src/billing/models/domain/index.ts b/libs/common/src/billing/models/domain/index.ts
index 66d7e29c100..0f53c3e116c 100644
--- a/libs/common/src/billing/models/domain/index.ts
+++ b/libs/common/src/billing/models/domain/index.ts
@@ -1,4 +1,2 @@
 export * from "./bank-account";
-export * from "./masked-payment-method";
 export * from "./tax-information";
-export * from "./tokenized-payment-method";
diff --git a/libs/common/src/billing/models/domain/masked-payment-method.ts b/libs/common/src/billing/models/domain/masked-payment-method.ts
deleted file mode 100644
index 5756f9f25c0..00000000000
--- a/libs/common/src/billing/models/domain/masked-payment-method.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { PaymentMethodType } from "@bitwarden/common/billing/enums";
-import { MaskedPaymentMethodResponse } from "@bitwarden/common/billing/models/response/masked-payment-method.response";
-
-export class MaskedPaymentMethod {
-  type: PaymentMethodType;
-  description: string;
-  needsVerification: boolean;
-
-  static from(response: MaskedPaymentMethodResponse | undefined) {
-    if (response === undefined) {
-      return null;
-    }
-    return {
-      ...response,
-    };
-  }
-}
diff --git a/libs/common/src/billing/models/request/tokenized-payment-method.request.ts b/libs/common/src/billing/models/request/tokenized-payment-method.request.ts
deleted file mode 100644
index 7f89b216935..00000000000
--- a/libs/common/src/billing/models/request/tokenized-payment-method.request.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { PaymentMethodType } from "@bitwarden/common/billing/enums";
-import { TokenizedPaymentMethod } from "@bitwarden/common/billing/models/domain";
-
-export class TokenizedPaymentMethodRequest {
-  type: PaymentMethodType;
-  token: string;
-
-  static From(tokenizedPaymentMethod: TokenizedPaymentMethod): TokenizedPaymentMethodRequest {
-    const request = new TokenizedPaymentMethodRequest();
-    request.type = tokenizedPaymentMethod.type;
-    request.token = tokenizedPaymentMethod.token;
-    return request;
-  }
-}
diff --git a/libs/common/src/billing/models/domain/tokenized-payment-method.ts b/libs/common/src/billing/models/request/tokenized-payment-source.request.ts
similarity index 70%
rename from libs/common/src/billing/models/domain/tokenized-payment-method.ts
rename to libs/common/src/billing/models/request/tokenized-payment-source.request.ts
index 5900a1ab242..26faa036d57 100644
--- a/libs/common/src/billing/models/domain/tokenized-payment-method.ts
+++ b/libs/common/src/billing/models/request/tokenized-payment-source.request.ts
@@ -1,6 +1,6 @@
 import { PaymentMethodType } from "@bitwarden/common/billing/enums";
 
-export type TokenizedPaymentMethod = {
+export class TokenizedPaymentSourceRequest {
   type: PaymentMethodType;
   token: string;
-};
+}
diff --git a/libs/common/src/billing/models/request/update-payment-method.request.ts b/libs/common/src/billing/models/request/update-payment-method.request.ts
new file mode 100644
index 00000000000..613dc636482
--- /dev/null
+++ b/libs/common/src/billing/models/request/update-payment-method.request.ts
@@ -0,0 +1,7 @@
+import { ExpandedTaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/expanded-tax-info-update.request";
+import { TokenizedPaymentSourceRequest } from "@bitwarden/common/billing/models/request/tokenized-payment-source.request";
+
+export class UpdatePaymentMethodRequest {
+  paymentSource: TokenizedPaymentSourceRequest;
+  taxInformation: ExpandedTaxInfoUpdateRequest;
+}
diff --git a/libs/common/src/billing/models/response/organization-risks-subscription-failure.response.ts b/libs/common/src/billing/models/response/organization-risks-subscription-failure.response.ts
deleted file mode 100644
index 76cf5ab66f9..00000000000
--- a/libs/common/src/billing/models/response/organization-risks-subscription-failure.response.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { BaseResponse } from "../../../models/response/base.response";
-
-export class OrganizationRisksSubscriptionFailureResponse extends BaseResponse {
-  organizationId: string;
-  risksSubscriptionFailure: boolean;
-
-  constructor(response: any) {
-    super(response);
-
-    this.organizationId = this.getResponseProperty("OrganizationId");
-    this.risksSubscriptionFailure = this.getResponseProperty("RisksSubscriptionFailure");
-  }
-}
diff --git a/libs/common/src/billing/models/response/payment-information.response.ts b/libs/common/src/billing/models/response/payment-method.response.ts
similarity index 52%
rename from libs/common/src/billing/models/response/payment-information.response.ts
rename to libs/common/src/billing/models/response/payment-method.response.ts
index a74ec8f406b..34e95032aef 100644
--- a/libs/common/src/billing/models/response/payment-information.response.ts
+++ b/libs/common/src/billing/models/response/payment-method.response.ts
@@ -1,22 +1,25 @@
 import { BaseResponse } from "../../../models/response/base.response";
 
-import { MaskedPaymentMethodResponse } from "./masked-payment-method.response";
+import { PaymentSourceResponse } from "./payment-source.response";
 import { TaxInfoResponse } from "./tax-info.response";
 
-export class PaymentInformationResponse extends BaseResponse {
+export class PaymentMethodResponse extends BaseResponse {
   accountCredit: number;
-  paymentMethod?: MaskedPaymentMethodResponse;
+  paymentSource?: PaymentSourceResponse;
+  subscriptionStatus?: string;
   taxInformation?: TaxInfoResponse;
 
   constructor(response: any) {
     super(response);
     this.accountCredit = this.getResponseProperty("AccountCredit");
 
-    const paymentMethod = this.getResponseProperty("PaymentMethod");
-    if (paymentMethod) {
-      this.paymentMethod = new MaskedPaymentMethodResponse(paymentMethod);
+    const paymentSource = this.getResponseProperty("PaymentSource");
+    if (paymentSource) {
+      this.paymentSource = new PaymentSourceResponse(paymentSource);
     }
 
+    this.subscriptionStatus = this.getResponseProperty("SubscriptionStatus");
+
     const taxInformation = this.getResponseProperty("TaxInformation");
     if (taxInformation) {
       this.taxInformation = new TaxInfoResponse(taxInformation);
diff --git a/libs/common/src/billing/models/response/masked-payment-method.response.ts b/libs/common/src/billing/models/response/payment-source.response.ts
similarity index 88%
rename from libs/common/src/billing/models/response/masked-payment-method.response.ts
rename to libs/common/src/billing/models/response/payment-source.response.ts
index 19ae1b426b0..1aeeb450b11 100644
--- a/libs/common/src/billing/models/response/masked-payment-method.response.ts
+++ b/libs/common/src/billing/models/response/payment-source.response.ts
@@ -1,7 +1,7 @@
 import { PaymentMethodType } from "@bitwarden/common/billing/enums";
 import { BaseResponse } from "@bitwarden/common/models/response/base.response";
 
-export class MaskedPaymentMethodResponse extends BaseResponse {
+export class PaymentSourceResponse extends BaseResponse {
   type: PaymentMethodType;
   description: string;
   needsVerification: boolean;
diff --git a/libs/common/src/billing/services/billing-api.service.ts b/libs/common/src/billing/services/billing-api.service.ts
index 822e6d16871..534b22362d6 100644
--- a/libs/common/src/billing/services/billing-api.service.ts
+++ b/libs/common/src/billing/services/billing-api.service.ts
@@ -1,5 +1,8 @@
 import { ProviderOrganizationOrganizationDetailsResponse } from "@bitwarden/common/admin-console/models/response/provider/provider-organization.response";
+import { UpdatePaymentMethodRequest } from "@bitwarden/common/billing/models/request/update-payment-method.request";
+import { VerifyBankAccountRequest } from "@bitwarden/common/billing/models/request/verify-bank-account.request";
 import { InvoicesResponse } from "@bitwarden/common/billing/models/response/invoices.response";
+import { PaymentMethodResponse } from "@bitwarden/common/billing/models/response/payment-method.response";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { ToastService } from "@bitwarden/components";
@@ -9,10 +12,7 @@ import { BillingApiServiceAbstraction } from "../../billing/abstractions";
 import { PaymentMethodType } from "../../billing/enums";
 import { ExpandedTaxInfoUpdateRequest } from "../../billing/models/request/expanded-tax-info-update.request";
 import { SubscriptionCancellationRequest } from "../../billing/models/request/subscription-cancellation.request";
-import { TokenizedPaymentMethodRequest } from "../../billing/models/request/tokenized-payment-method.request";
-import { VerifyBankAccountRequest } from "../../billing/models/request/verify-bank-account.request";
 import { OrganizationBillingMetadataResponse } from "../../billing/models/response/organization-billing-metadata.response";
-import { PaymentInformationResponse } from "../../billing/models/response/payment-information.response";
 import { PlanResponse } from "../../billing/models/response/plan.response";
 import { ListResponse } from "../../models/response/list.response";
 import { CreateClientOrganizationRequest } from "../models/request/create-client-organization.request";
@@ -85,6 +85,19 @@ export class BillingApiService implements BillingApiServiceAbstraction {
     return new OrganizationBillingMetadataResponse(r);
   }
 
+  async getOrganizationPaymentMethod(organizationId: string): Promise<PaymentMethodResponse> {
+    const response = await this.execute(() =>
+      this.apiService.send(
+        "GET",
+        "/organizations/" + organizationId + "/billing/payment-method",
+        null,
+        true,
+        true,
+      ),
+    );
+    return new PaymentMethodResponse(response);
+  }
+
   async getPlans(): Promise<ListResponse<PlanResponse>> {
     const r = await this.apiService.send("GET", "/plans", null, false, true);
     return new ListResponse(r, PlanResponse);
@@ -123,19 +136,6 @@ export class BillingApiService implements BillingApiServiceAbstraction {
     return new InvoicesResponse(response);
   }
 
-  async getProviderPaymentInformation(providerId: string): Promise<PaymentInformationResponse> {
-    const response = await this.execute(() =>
-      this.apiService.send(
-        "GET",
-        "/providers/" + providerId + "/billing/payment-information",
-        null,
-        true,
-        true,
-      ),
-    );
-    return new PaymentInformationResponse(response);
-  }
-
   async getProviderSubscription(providerId: string): Promise<ProviderSubscriptionResponse> {
     const response = await this.execute(() =>
       this.apiService.send(
@@ -149,6 +149,32 @@ export class BillingApiService implements BillingApiServiceAbstraction {
     return new ProviderSubscriptionResponse(response);
   }
 
+  async updateOrganizationPaymentMethod(
+    organizationId: string,
+    request: UpdatePaymentMethodRequest,
+  ): Promise<void> {
+    return await this.apiService.send(
+      "PUT",
+      "/organizations/" + organizationId + "/billing/payment-method",
+      request,
+      true,
+      false,
+    );
+  }
+
+  async updateOrganizationTaxInformation(
+    organizationId: string,
+    request: ExpandedTaxInfoUpdateRequest,
+  ): Promise<void> {
+    return await this.apiService.send(
+      "PUT",
+      "/organizations/" + organizationId + "/billing/tax-information",
+      request,
+      true,
+      false,
+    );
+  }
+
   async updateProviderClientOrganization(
     providerId: string,
     organizationId: string,
@@ -163,19 +189,6 @@ export class BillingApiService implements BillingApiServiceAbstraction {
     );
   }
 
-  async updateProviderPaymentMethod(
-    providerId: string,
-    request: TokenizedPaymentMethodRequest,
-  ): Promise<void> {
-    return await this.apiService.send(
-      "PUT",
-      "/providers/" + providerId + "/billing/payment-method",
-      request,
-      true,
-      false,
-    );
-  }
-
   async updateProviderTaxInformation(providerId: string, request: ExpandedTaxInfoUpdateRequest) {
     return await this.apiService.send(
       "PUT",
@@ -186,10 +199,13 @@ export class BillingApiService implements BillingApiServiceAbstraction {
     );
   }
 
-  async verifyProviderBankAccount(providerId: string, request: VerifyBankAccountRequest) {
+  async verifyOrganizationBankAccount(
+    organizationId: string,
+    request: VerifyBankAccountRequest,
+  ): Promise<void> {
     return await this.apiService.send(
       "POST",
-      "/providers/" + providerId + "/billing/payment-method/verify-bank-account",
+      "/organizations/" + organizationId + "/billing/payment-method/verify-bank-account",
       request,
       true,
       false,
diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts
index 1ac4c99b1fa..8e88cda6178 100644
--- a/libs/common/src/enums/feature-flag.enum.ts
+++ b/libs/common/src/enums/feature-flag.enum.ts
@@ -33,6 +33,7 @@ export enum FeatureFlag {
   DelayFido2PageScriptInitWithinMv2 = "delay-fido2-page-script-init-within-mv2",
   AccountDeprovisioning = "pm-10308-account-deprovisioning",
   NotificationBarAddLoginImprovements = "notification-bar-add-login-improvements",
+  AC2476_DeprecateStripeSourcesAPI = "AC-2476-deprecate-stripe-sources-api",
 }
 
 export type AllowedFeatureFlagTypes = boolean | number | string;
@@ -76,6 +77,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.DelayFido2PageScriptInitWithinMv2]: FALSE,
   [FeatureFlag.AccountDeprovisioning]: FALSE,
   [FeatureFlag.NotificationBarAddLoginImprovements]: FALSE,
+  [FeatureFlag.AC2476_DeprecateStripeSourcesAPI]: FALSE,
 } satisfies Record<FeatureFlag, AllowedFeatureFlagTypes>;
 
 export type DefaultFeatureFlagValueType = typeof DefaultFeatureFlagValue;

From 00bdfa1cda9a5741f2450f39825e54cedea9b29a Mon Sep 17 00:00:00 2001
From: Vince Grassia <593223+vgrassia@users.noreply.github.com>
Date: Wed, 28 Aug 2024 13:15:16 -0400
Subject: [PATCH 17/18] Revert "[deps] DevOps: Update crowdin/github-action
 action to v2 (#10596)" (#10775)

This reverts commit b0636bb39d9c231e4047f6b458017def3128f2e0.
---
 .github/workflows/build-browser.yml | 2 +-
 .github/workflows/build-desktop.yml | 2 +-
 .github/workflows/build-web.yml     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/build-browser.yml b/.github/workflows/build-browser.yml
index 22c1680a41d..ae4f2f37ba8 100644
--- a/.github/workflows/build-browser.yml
+++ b/.github/workflows/build-browser.yml
@@ -382,7 +382,7 @@ jobs:
           secrets: "crowdin-api-token"
 
       - name: Upload Sources
-        uses: crowdin/github-action@6ed209d411599a981ccb978df3be9dc9b8a81699 # v2.1.1
+        uses: crowdin/github-action@c953b17499daa6be3e5afbf7a63616fb02d8b18d # v1.19.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}
diff --git a/.github/workflows/build-desktop.yml b/.github/workflows/build-desktop.yml
index 54560cf15dd..a4dcf698faa 100644
--- a/.github/workflows/build-desktop.yml
+++ b/.github/workflows/build-desktop.yml
@@ -1248,7 +1248,7 @@ jobs:
           secrets: "crowdin-api-token"
 
       - name: Upload Sources
-        uses: crowdin/github-action@6ed209d411599a981ccb978df3be9dc9b8a81699 # v2.1.1
+        uses: crowdin/github-action@c953b17499daa6be3e5afbf7a63616fb02d8b18d # v1.19.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}
diff --git a/.github/workflows/build-web.yml b/.github/workflows/build-web.yml
index 6e0f6a3eb89..fbab45ddb72 100644
--- a/.github/workflows/build-web.yml
+++ b/.github/workflows/build-web.yml
@@ -270,7 +270,7 @@ jobs:
           secrets: "crowdin-api-token"
 
       - name: Upload Sources
-        uses: crowdin/github-action@6ed209d411599a981ccb978df3be9dc9b8a81699 # v2.1.1
+        uses: crowdin/github-action@c953b17499daa6be3e5afbf7a63616fb02d8b18d # v1.19.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}

From 37523ca66b6f4394c58d0a7f48e7cd3b3b547f94 Mon Sep 17 00:00:00 2001
From: Justin Baur <19896123+justindbaur@users.noreply.github.com>
Date: Wed, 28 Aug 2024 15:00:47 -0400
Subject: [PATCH 18/18] [PM-1900] Run Process Reload on Firefox (#10149)

* Remove Firefox Exemption

* Do Not Open Sidebar On Install

* Run `chrome.runtime.reload` on All Browsers

* Update Docs & Test Name

* Should Probably Call The Sut In Test

* Update Doc Comment

* Update apps/browser/src/platform/browser/browser-api.ts

Co-authored-by: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>

---------

Co-authored-by: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>
---
 .../browser/src/background/main.background.ts |  6 +----
 .../background/nativeMessaging.background.ts  |  2 +-
 apps/browser/src/manifest.json                |  1 +
 apps/browser/src/manifest.v3.json             |  3 ++-
 .../src/platform/browser/browser-api.spec.ts  | 22 ++-----------------
 .../src/platform/browser/browser-api.ts       | 13 ++---------
 apps/browser/src/popup/app.component.ts       | 11 ----------
 7 files changed, 9 insertions(+), 49 deletions(-)

diff --git a/apps/browser/src/background/main.background.ts b/apps/browser/src/background/main.background.ts
index 5dc5afb4791..cf393e0a44c 100644
--- a/apps/browser/src/background/main.background.ts
+++ b/apps/browser/src/background/main.background.ts
@@ -1028,12 +1028,8 @@ export default class MainBackground {
     );
 
     const systemUtilsServiceReloadCallback = async () => {
-      const forceWindowReload =
-        this.platformUtilsService.isSafari() ||
-        this.platformUtilsService.isFirefox() ||
-        this.platformUtilsService.isOpera();
       await this.taskSchedulerService.clearAllScheduledTasks();
-      BrowserApi.reloadExtension(forceWindowReload ? self : null);
+      BrowserApi.reloadExtension();
     };
 
     this.systemService = new SystemService(
diff --git a/apps/browser/src/background/nativeMessaging.background.ts b/apps/browser/src/background/nativeMessaging.background.ts
index 613fe777efb..8f2cac7915c 100644
--- a/apps/browser/src/background/nativeMessaging.background.ts
+++ b/apps/browser/src/background/nativeMessaging.background.ts
@@ -87,7 +87,7 @@ export class NativeMessagingBackground {
       // Reload extension to activate nativeMessaging
       chrome.permissions.onAdded.addListener((permissions) => {
         if (permissions.permissions?.includes("nativeMessaging")) {
-          BrowserApi.reloadExtension(null);
+          BrowserApi.reloadExtension();
         }
       });
     }
diff --git a/apps/browser/src/manifest.json b/apps/browser/src/manifest.json
index b13a98e7a46..121897b0cef 100644
--- a/apps/browser/src/manifest.json
+++ b/apps/browser/src/manifest.json
@@ -135,6 +135,7 @@
     "default_title": "Bitwarden",
     "default_panel": "popup/index.html?uilocation=sidebar",
     "default_icon": "images/icon19.png",
+    "open_at_install": false,
     "browser_style": false
   },
   "storage": {
diff --git a/apps/browser/src/manifest.v3.json b/apps/browser/src/manifest.v3.json
index c3420e1c6a5..52e21a0936b 100644
--- a/apps/browser/src/manifest.v3.json
+++ b/apps/browser/src/manifest.v3.json
@@ -143,7 +143,8 @@
   "sidebar_action": {
     "default_title": "Bitwarden",
     "default_panel": "popup/index.html?uilocation=sidebar",
-    "default_icon": "images/icon19.png"
+    "default_icon": "images/icon19.png",
+    "open_at_install": false
   },
   "storage": {
     "managed_schema": "managed_schema.json"
diff --git a/apps/browser/src/platform/browser/browser-api.spec.ts b/apps/browser/src/platform/browser/browser-api.spec.ts
index a5948f49596..6e8a0f3002d 100644
--- a/apps/browser/src/platform/browser/browser-api.spec.ts
+++ b/apps/browser/src/platform/browser/browser-api.spec.ts
@@ -276,26 +276,8 @@ describe("BrowserApi", () => {
   });
 
   describe("reloadExtension", () => {
-    it("reloads the window location if the passed globalContext is for the window", () => {
-      const windowMock = mock<Window>({
-        location: { reload: jest.fn() },
-      }) as unknown as Window & typeof globalThis;
-
-      BrowserApi.reloadExtension(windowMock);
-
-      expect(windowMock.location.reload).toHaveBeenCalled();
-    });
-
-    it("reloads the extension runtime if the passed globalContext is not for the window", () => {
-      const globalMock = mock<typeof globalThis>({}) as any;
-      BrowserApi.reloadExtension(globalMock);
-
-      expect(chrome.runtime.reload).toHaveBeenCalled();
-    });
-
-    it("reloads the extension runtime if a null value is passed as the globalContext", () => {
-      BrowserApi.reloadExtension(null);
-
+    it("forwards call to extension runtime", () => {
+      BrowserApi.reloadExtension();
       expect(chrome.runtime.reload).toHaveBeenCalled();
     });
   });
diff --git a/apps/browser/src/platform/browser/browser-api.ts b/apps/browser/src/platform/browser/browser-api.ts
index ee4368eda73..a5ca7a65ff4 100644
--- a/apps/browser/src/platform/browser/browser-api.ts
+++ b/apps/browser/src/platform/browser/browser-api.ts
@@ -412,18 +412,9 @@ export class BrowserApi {
   }
 
   /**
-   * Handles reloading the extension, either by calling the window location
-   * to reload or by calling the extension's runtime to reload.
-   *
-   * @param globalContext - The global context to use for the reload.
+   * Handles reloading the extension using the underlying functionality exposed by the browser API.
    */
-  static reloadExtension(globalContext: (Window & typeof globalThis) | null) {
-    // The passed globalContext might be a ServiceWorkerGlobalScope, as a result
-    // we need to check if the location object exists before calling reload on it.
-    if (typeof globalContext?.location?.reload === "function") {
-      return (globalContext as any).location.reload(true);
-    }
-
+  static reloadExtension() {
     return chrome.runtime.reload();
   }
 
diff --git a/apps/browser/src/popup/app.component.ts b/apps/browser/src/popup/app.component.ts
index 65fed721380..84a9ee264c3 100644
--- a/apps/browser/src/popup/app.component.ts
+++ b/apps/browser/src/popup/app.component.ts
@@ -20,7 +20,6 @@ import {
   ToastService,
 } from "@bitwarden/components";
 
-import { BrowserApi } from "../platform/browser/browser-api";
 import { PopupViewCacheService } from "../platform/popup/view-cache/popup-view-cache.service";
 import { initPopupClosedListener } from "../platform/services/popup-view-cache-background.service";
 import { BrowserSendStateService } from "../tools/popup/services/browser-send-state.service";
@@ -128,16 +127,6 @@ export class AppComponent implements OnInit, OnDestroy {
             this.showNativeMessagingFingerprintDialog(msg);
           } else if (msg.command === "showToast") {
             this.toastService._showToast(msg);
-          } else if (msg.command === "reloadProcess") {
-            const forceWindowReload =
-              this.platformUtilsService.isSafari() ||
-              this.platformUtilsService.isFirefox() ||
-              this.platformUtilsService.isOpera();
-            // Wait to make sure background has reloaded first.
-            window.setTimeout(
-              () => BrowserApi.reloadExtension(forceWindowReload ? window : null),
-              2000,
-            );
           } else if (msg.command === "reloadPopup") {
             // 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