From 8ad46ac6478fe7c0a984e2af56245dd18a095cf0 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Wed, 1 Apr 2026 13:25:17 -0500
Subject: [PATCH 01/39] when the footer is not present in the dialog remove
 empty div

---
 .../src/dialog/dialog/dialog.component.html   | 21 +++++++++++--------
 .../src/dialog/dialog/dialog.component.ts     |  6 +++++-
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index cb95186b3bd8..8c1f997df8a7 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -69,6 +69,7 @@
       cdkScrollable
       [ngClass]="{
         'tw-py-2 tw-ps-6 tw-pe-6': !disablePadding(),
+        'tw-pb-6': !hasFooter() && !disablePadding(),
         'tw-overflow-y-auto': !loading(),
         'tw-invisible tw-overflow-y-hidden': loading(),
         'tw-py-4': background() === 'alt',
@@ -89,13 +90,15 @@
     }"
     data-chromatic="ignore"
   ></div>
-  <footer
-    class="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-bg-background tw-py-5 tw-ps-6 tw-pe-4"
-    [ngClass]="{
-      'tw-px-6 tw-py-4': isDrawer,
-      'tw-p-4 has-[[biticonbutton]]:tw-pe-2': !isDrawer,
-    }"
-  >
-    <ng-content select="[bitDialogFooter]"></ng-content>
-  </footer>
+  @if (hasFooter()) {
+    <footer
+      class="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-bg-background tw-py-5 tw-ps-6 tw-pe-4"
+      [ngClass]="{
+        'tw-px-6 tw-py-4': isDrawer,
+        'tw-p-4 has-[[biticonbutton]]:tw-pe-2': !isDrawer,
+      }"
+    >
+      <ng-content select="[bitDialogFooter]"></ng-content>
+    </footer>
+  }
 </section>
diff --git a/libs/components/src/dialog/dialog/dialog.component.ts b/libs/components/src/dialog/dialog/dialog.component.ts
index 86ba1d24ad9d..cab8acc930f4 100644
--- a/libs/components/src/dialog/dialog/dialog.component.ts
+++ b/libs/components/src/dialog/dialog/dialog.component.ts
@@ -3,6 +3,7 @@ import { CdkScrollable } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
 import {
   Component,
+  contentChild,
   effect,
   inject,
   viewChild,
@@ -31,6 +32,7 @@ import { DialogRef } from "../dialog.service";
 import { DialogCloseDirective } from "../directives/dialog-close.directive";
 import { DialogTitleContainerDirective } from "../directives/dialog-title-container.directive";
 import { DrawerService } from "../drawer.service";
+import { DialogFooterDirective } from "../simple-dialog/simple-dialog.component";
 
 type DialogSize = "small" | "default" | "large";
 
@@ -101,7 +103,6 @@ export class DialogComponent implements AfterViewInit {
 
   protected dialogRef = inject(DialogRef, { optional: true });
   protected bodyHasScrolledFrom = hasScrolledFrom(this.scrollableBody);
-
   private scrollableBody$ = toObservable(this.scrollableBody);
   private scrollBottom$ = toObservable(this.scrollBottom);
 
@@ -111,6 +112,9 @@ export class DialogComponent implements AfterViewInit {
     ),
   );
 
+  private readonly footerDirective = contentChild(DialogFooterDirective);
+  protected readonly hasFooter = computed(() => !!this.footerDirective());
+
   /** Background color */
   readonly background = input<"default" | "alt">("default");
 

From 5c59fe89354a0499d15aa33bfdf901f011cd7302 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Wed, 1 Apr 2026 13:52:47 -0500
Subject: [PATCH 02/39] add new item type feature flag

---
 libs/common/src/enums/feature-flag.enum.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts
index bfb0773de3dd..f92bbc50014c 100644
--- a/libs/common/src/enums/feature-flag.enum.ts
+++ b/libs/common/src/enums/feature-flag.enum.ts
@@ -66,6 +66,7 @@ export enum FeatureFlag {
   AccessIntelligenceNewArchitecture = "pm-31936-access-intelligence-new-architecture",
 
   /* Vault */
+  PM32009NewItemTypes = "pm-32009-new-item-types",
   PM19941MigrateCipherDomainToSdk = "pm-19941-migrate-cipher-domain-to-sdk",
   PM22134SdkCipherListView = "pm-22134-sdk-cipher-list-view",
   PM22136_SdkCipherEncryption = "pm-22136-sdk-cipher-encryption",
@@ -128,6 +129,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.AccessIntelligenceNewArchitecture]: FALSE,
 
   /* Vault */
+  [FeatureFlag.PM32009NewItemTypes]: FALSE,
   [FeatureFlag.CipherKeyEncryption]: FALSE,
   [FeatureFlag.PM19941MigrateCipherDomainToSdk]: FALSE,
   [FeatureFlag.PM22134SdkCipherListView]: FALSE,

From 7313d076250eb0dcf8bea05c7497c12a8aa013c1 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Wed, 1 Apr 2026 14:05:06 -0500
Subject: [PATCH 03/39] add subtitle text to cipher menu items

---
 apps/browser/src/_locales/en/messages.json    | 21 +++++++++++
 apps/desktop/src/locales/en/messages.json     | 21 +++++++++++
 apps/web/src/locales/en/messages.json         | 29 ++++++++++++++-
 .../src/vault/types/cipher-menu-items.ts      | 37 ++++++++++++++++---
 4 files changed, 102 insertions(+), 6 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 0705157b4421..bfc4c2d338bd 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -2102,6 +2102,27 @@
   "typeNote": {
     "message": "Note"
   },
+  "typeLoginSubtitle": {
+    "message": "Website or app"
+  },
+  "typeCardSubtitle": {
+    "message": "Credit or debit card"
+  },
+  "typeIdentitySubtitle": {
+    "message": "Personal info"
+  },
+  "typeNoteSubtitle": {
+    "message": "Important text"
+  },
+  "typeSshKeySubtitle": {
+    "message": "Server login token"
+  },
+  "folderSubtitle": {
+    "message": "Organize your items"
+  },
+  "collectionSubtitle": {
+    "message": "Organize shared items"
+  },
   "newItemHeaderLogin": {
     "message": "New Login",
     "description": "Header for new login item type"
diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
index 8bcb8097a4e8..cd139e578c9b 100644
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -35,6 +35,27 @@
   "typeSshKey": {
     "message": "SSH key"
   },
+  "typeLoginSubtitle": {
+    "message": "Website or app"
+  },
+  "typeCardSubtitle": {
+    "message": "Credit or debit card"
+  },
+  "typeIdentitySubtitle": {
+    "message": "Personal info"
+  },
+  "typeNoteSubtitle": {
+    "message": "Important text"
+  },
+  "typeSshKeySubtitle": {
+    "message": "Server login token"
+  },
+  "folderSubtitle": {
+    "message": "Organize your items"
+  },
+  "collectionSubtitle": {
+    "message": "Organize shared items"
+  },
   "folders": {
     "message": "Folders"
   },
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 543e0f1f4caf..0f18136e3f74 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -985,6 +985,27 @@
   "typeSshKey": {
     "message": "SSH key"
   },
+  "typeLoginSubtitle": {
+    "message": "Website or app"
+  },
+  "typeCardSubtitle": {
+    "message": "Credit or debit card"
+  },
+  "typeIdentitySubtitle": {
+    "message": "Personal info"
+  },
+  "typeNoteSubtitle": {
+    "message": "Important text"
+  },
+  "typeSshKeySubtitle": {
+    "message": "Server login token"
+  },
+  "folderSubtitle": {
+    "message": "Organize your items"
+  },
+  "collectionSubtitle": {
+    "message": "Organize shared items"
+  },
   "typeLoginPlural": {
     "message": "Logins"
   },
@@ -1054,6 +1075,12 @@
   "addItem": {
     "message": "Add item"
   },
+  "chooseItemToAdd": {
+    "message": "Choose item to add"
+  },
+  "chooseItemToAddDesc": {
+    "message": "Select the item type you want to add to your vault."
+  },
   "editItem": {
     "message": "Edit item"
   },
@@ -13179,4 +13206,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/libs/common/src/vault/types/cipher-menu-items.ts b/libs/common/src/vault/types/cipher-menu-items.ts
index 7108d0d0bd68..8c2759da45af 100644
--- a/libs/common/src/vault/types/cipher-menu-items.ts
+++ b/libs/common/src/vault/types/cipher-menu-items.ts
@@ -10,15 +10,42 @@ export type CipherMenuItem = {
   icon: string;
   /** The i18n key for the label text */
   labelKey: string;
+  /** The i18n key for the subtitle text */
+  subtitleKey: string;
 };
 
 /**
  * All available cipher menu items with their associated icons and labels
  */
 export const CIPHER_MENU_ITEMS = Object.freeze([
-  { type: CipherType.Login, icon: "bwi-globe", labelKey: "typeLogin" },
-  { type: CipherType.Card, icon: "bwi-credit-card", labelKey: "typeCard" },
-  { type: CipherType.Identity, icon: "bwi-id-card", labelKey: "typeIdentity" },
-  { type: CipherType.SecureNote, icon: "bwi-sticky-note", labelKey: "typeNote" },
-  { type: CipherType.SshKey, icon: "bwi-key", labelKey: "typeSshKey" },
+  {
+    type: CipherType.Login,
+    icon: "bwi-globe",
+    labelKey: "typeLogin",
+    subtitleKey: "typeLoginSubtitle",
+  },
+  {
+    type: CipherType.Card,
+    icon: "bwi-credit-card",
+    labelKey: "typeCard",
+    subtitleKey: "typeCardSubtitle",
+  },
+  {
+    type: CipherType.Identity,
+    icon: "bwi-id-card",
+    labelKey: "typeIdentity",
+    subtitleKey: "typeIdentitySubtitle",
+  },
+  {
+    type: CipherType.SecureNote,
+    icon: "bwi-sticky-note",
+    labelKey: "typeNote",
+    subtitleKey: "typeNoteSubtitle",
+  },
+  {
+    type: CipherType.SshKey,
+    icon: "bwi-key",
+    labelKey: "typeSshKey",
+    subtitleKey: "typeSshKeySubtitle",
+  },
 ] as const) satisfies readonly CipherMenuItem[];

From 75f1c89c0024f145b0d3be09c3f13aa81a508347 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Wed, 1 Apr 2026 15:26:22 -0500
Subject: [PATCH 04/39] add add item dialog and associated components

---
 .../add-item-dialog.component.html            |  18 ++
 .../add-item-dialog.component.spec.ts         |  88 +++++++++
 .../add-item-dialog.component.ts              |  61 ++++++
 .../add-item-grid.component.html              |  22 +++
 .../add-item-grid.component.spec.ts           | 175 ++++++++++++++++++
 .../add-item-grid/add-item-grid.component.ts  |  77 ++++++++
 .../new-cipher-menu.component.html            |  22 ++-
 .../new-cipher-menu.component.ts              |  19 +-
 libs/vault/src/index.ts                       |   2 +
 9 files changed, 479 insertions(+), 5 deletions(-)
 create mode 100644 libs/vault/src/components/add-item-dialog/add-item-dialog.component.html
 create mode 100644 libs/vault/src/components/add-item-dialog/add-item-dialog.component.spec.ts
 create mode 100644 libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts
 create mode 100644 libs/vault/src/components/add-item-grid/add-item-grid.component.html
 create mode 100644 libs/vault/src/components/add-item-grid/add-item-grid.component.spec.ts
 create mode 100644 libs/vault/src/components/add-item-grid/add-item-grid.component.ts

diff --git a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.html b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.html
new file mode 100644
index 000000000000..e47d690952c6
--- /dev/null
+++ b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.html
@@ -0,0 +1,18 @@
+<bit-dialog dialogSize="large" background="alt">
+  <div bitDialogTitle class="tw-pt-5 tw-pb-3 tw-flex tw-flex-col tw-gap-2">
+    <span>{{ "chooseItemToAdd" | i18n }}</span>
+    <span class="tw-text-muted tw-font-normal tw-text-sm">
+      {{ "chooseItemToAddDesc" | i18n }}
+    </span>
+  </div>
+  <div bitDialogContent>
+    <vault-add-item-grid
+      [canCreateFolder]="data.canCreateFolder"
+      [canCreateCollection]="data.canCreateCollection"
+      [canCreateSshKey]="data.canCreateSshKey"
+      (cipherSelected)="onCipherSelected($event)"
+      (folderSelected)="onFolderSelected()"
+      (collectionSelected)="onCollectionSelected()"
+    />
+  </div>
+</bit-dialog>
diff --git a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.spec.ts b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.spec.ts
new file mode 100644
index 000000000000..131fee44d6a1
--- /dev/null
+++ b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.spec.ts
@@ -0,0 +1,88 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { BehaviorSubject } from "rxjs";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { CipherType } from "@bitwarden/common/vault/enums";
+import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
+import { DIALOG_DATA, DialogRef } from "@bitwarden/components";
+
+import {
+  AddItemDialogComponent,
+  AddItemDialogData,
+  AddItemDialogResult,
+} from "./add-item-dialog.component";
+
+describe("AddItemDialogComponent", () => {
+  let component: AddItemDialogComponent;
+  let fixture: ComponentFixture<AddItemDialogComponent>;
+  let dialogData: AddItemDialogData;
+
+  const close = jest.fn();
+  const dialogRef = { close };
+  const restricted$ = new BehaviorSubject<[]>([]);
+
+  beforeEach(async () => {
+    close.mockClear();
+    restricted$.next([]);
+
+    await TestBed.configureTestingModule({
+      imports: [AddItemDialogComponent, NoopAnimationsModule],
+      providers: [
+        { provide: I18nService, useValue: { t: (key: string) => key } },
+        { provide: DialogRef, useValue: dialogRef },
+        { provide: DIALOG_DATA, useFactory: () => dialogData },
+        {
+          provide: RestrictedItemTypesService,
+          useValue: { restricted$ },
+        },
+      ],
+    }).compileComponents();
+  });
+
+  function createComponent(data: AddItemDialogData) {
+    dialogData = data;
+    fixture = TestBed.createComponent(AddItemDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }
+
+  it("closes with cipher result when onCipherSelected is called", () => {
+    createComponent({
+      canCreateFolder: false,
+      canCreateCollection: false,
+      canCreateSshKey: true,
+    });
+
+    component["onCipherSelected"](CipherType.Login);
+
+    expect(close).toHaveBeenCalledWith({
+      result: AddItemDialogResult.Cipher,
+      cipherType: CipherType.Login,
+    });
+  });
+
+  it("closes with folder result when onFolderSelected is called", () => {
+    createComponent({
+      canCreateFolder: true,
+      canCreateCollection: false,
+      canCreateSshKey: false,
+    });
+
+    component["onFolderSelected"]();
+
+    expect(close).toHaveBeenCalledWith({ result: AddItemDialogResult.Folder });
+  });
+
+  it("closes with collection result when onCollectionSelected is called", () => {
+    createComponent({
+      canCreateFolder: false,
+      canCreateCollection: true,
+      canCreateSshKey: false,
+    });
+
+    component["onCollectionSelected"]();
+
+    expect(close).toHaveBeenCalledWith({ result: AddItemDialogResult.Collection });
+  });
+});
diff --git a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts
new file mode 100644
index 000000000000..421f011a9e32
--- /dev/null
+++ b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts
@@ -0,0 +1,61 @@
+import { ChangeDetectionStrategy, Component, Inject } from "@angular/core";
+
+import { CipherType } from "@bitwarden/common/vault/enums";
+import { UnionOfValues } from "@bitwarden/common/vault/types/union-of-values";
+import { DIALOG_DATA, DialogModule, DialogRef, DialogService } from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
+
+import { AddItemGridComponent } from "../add-item-grid/add-item-grid.component";
+
+export const AddItemDialogResult = Object.freeze({
+  Cipher: "cipher",
+  Folder: "folder",
+  Collection: "collection",
+} as const);
+
+export type AddItemDialogResult = UnionOfValues<typeof AddItemDialogResult>;
+
+export type AddItemDialogCloseResult =
+  | { result: typeof AddItemDialogResult.Cipher; cipherType: CipherType }
+  | { result: typeof AddItemDialogResult.Folder }
+  | { result: typeof AddItemDialogResult.Collection };
+
+export type AddItemDialogData = {
+  canCreateFolder: boolean;
+  canCreateCollection: boolean;
+  canCreateSshKey: boolean;
+};
+
+@Component({
+  selector: "vault-add-item-dialog",
+  templateUrl: "./add-item-dialog.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [DialogModule, I18nPipe, AddItemGridComponent],
+})
+export class AddItemDialogComponent {
+  constructor(
+    private readonly dialogRef: DialogRef<AddItemDialogCloseResult>,
+    @Inject(DIALOG_DATA) readonly data: AddItemDialogData,
+  ) { }
+
+  protected onCipherSelected(cipherType: CipherType): void {
+    this.dialogRef.close({ result: AddItemDialogResult.Cipher, cipherType });
+  }
+
+  protected onFolderSelected(): void {
+    this.dialogRef.close({ result: AddItemDialogResult.Folder });
+  }
+
+  protected onCollectionSelected(): void {
+    this.dialogRef.close({ result: AddItemDialogResult.Collection });
+  }
+
+  static open(
+    dialogService: DialogService,
+    data: AddItemDialogData,
+  ): DialogRef<AddItemDialogCloseResult> {
+    return dialogService.open<AddItemDialogCloseResult, AddItemDialogData>(AddItemDialogComponent, {
+      data,
+    });
+  }
+}
diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.html b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
new file mode 100644
index 000000000000..17015ff986f9
--- /dev/null
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
@@ -0,0 +1,22 @@
+<ul class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-list-none tw-p-0 tw-m-0">
+  @for (item of items(); track item.labelKey) {
+    <li>
+      <button
+        type="button"
+        (click)="item.action()"
+        class="tw-w-full tw-flex tw-items-center tw-gap-4 tw-rounded-xl tw-border tw-border-solid tw-border-border-base tw-bg-bg-primary tw-py-3 tw-px-4 tw-text-left hover:tw-bg-bg-brand-softer hover:tw-border-bg-brand-soft focus-visible:tw-outline-none focus-visible:tw-bg-bg-brand-softer focus-visible:tw-border-border-focus"
+      >
+        <div
+          class="tw-flex tw-size-10 tw-shrink-0 tw-items-center tw-justify-center tw-rounded-lg tw-bg-primary-100"
+        >
+          <bit-icon [name]="item.icon" class="tw-text-xl tw-text-primary-600" />
+        </div>
+        <div class="tw-flex-1">
+          <div class="tw-font-semibold tw-text-main">{{ item.labelKey | i18n }}</div>
+          <div class="tw-text-sm tw-text-muted">{{ item.subtitleKey | i18n }}</div>
+        </div>
+        <bit-icon name="bwi-angle-right" class="tw-text-muted" />
+      </button>
+    </li>
+  }
+</ul>
diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.spec.ts b/libs/vault/src/components/add-item-grid/add-item-grid.component.spec.ts
new file mode 100644
index 000000000000..2f2fdde672ae
--- /dev/null
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.spec.ts
@@ -0,0 +1,175 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { BehaviorSubject } from "rxjs";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { CipherType } from "@bitwarden/common/vault/enums";
+import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
+
+import { AddItemGridComponent } from "./add-item-grid.component";
+
+describe("AddItemComponent", () => {
+  let component: AddItemGridComponent;
+  let fixture: ComponentFixture<AddItemGridComponent>;
+
+  const restricted$ = new BehaviorSubject<any[]>([]);
+
+  beforeEach(async () => {
+    restricted$.next([]);
+
+    await TestBed.configureTestingModule({
+      imports: [AddItemGridComponent, NoopAnimationsModule],
+      providers: [
+        { provide: I18nService, useValue: { t: (key: string) => key } },
+        {
+          provide: RestrictedItemTypesService,
+          useValue: { restricted$ },
+        },
+      ],
+    }).compileComponents();
+  });
+
+  function createComponent(inputs: {
+    canCreateFolder: boolean;
+    canCreateCollection: boolean;
+    canCreateSshKey: boolean;
+  }) {
+    fixture = TestBed.createComponent(AddItemGridComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput("canCreateFolder", inputs.canCreateFolder);
+    fixture.componentRef.setInput("canCreateCollection", inputs.canCreateCollection);
+    fixture.componentRef.setInput("canCreateSshKey", inputs.canCreateSshKey);
+    fixture.detectChanges();
+  }
+
+  it("renders all 5 cipher types when unrestricted and canCreateSshKey=true", () => {
+    createComponent({
+      canCreateFolder: false,
+      canCreateCollection: false,
+      canCreateSshKey: true,
+    });
+
+    const items = component["items"]();
+    expect(items.length).toBe(5);
+    expect(items.map((i) => i.labelKey)).toEqual(
+      expect.arrayContaining(["typeLogin", "typeCard", "typeIdentity", "typeNote", "typeSshKey"]),
+    );
+  });
+
+  it("hides SSH key when canCreateSshKey=false", () => {
+    createComponent({
+      canCreateFolder: false,
+      canCreateCollection: false,
+      canCreateSshKey: false,
+    });
+
+    const items = component["items"]();
+    expect(items.map((i) => i.labelKey)).not.toContain("typeSshKey");
+  });
+
+  it("shows folder when canCreateFolder=true", () => {
+    createComponent({
+      canCreateFolder: true,
+      canCreateCollection: false,
+      canCreateSshKey: false,
+    });
+
+    const items = component["items"]();
+    expect(items.map((i) => i.labelKey)).toContain("folder");
+  });
+
+  it("hides folder when canCreateFolder=false", () => {
+    createComponent({
+      canCreateFolder: false,
+      canCreateCollection: false,
+      canCreateSshKey: false,
+    });
+
+    const items = component["items"]();
+    expect(items.map((i) => i.labelKey)).not.toContain("folder");
+  });
+
+  it("shows collection when canCreateCollection=true", () => {
+    createComponent({
+      canCreateFolder: false,
+      canCreateCollection: true,
+      canCreateSshKey: false,
+    });
+
+    const items = component["items"]();
+    expect(items.map((i) => i.labelKey)).toContain("collection");
+  });
+
+  it("hides collection when canCreateCollection=false", () => {
+    createComponent({
+      canCreateFolder: false,
+      canCreateCollection: false,
+      canCreateSshKey: false,
+    });
+
+    const items = component["items"]();
+    expect(items.map((i) => i.labelKey)).not.toContain("collection");
+  });
+
+  it("excludes restricted cipher types", () => {
+    createComponent({
+      canCreateFolder: false,
+      canCreateCollection: false,
+      canCreateSshKey: true,
+    });
+
+    restricted$.next([{ cipherType: CipherType.Login, allowViewOrgIds: [] } as any]);
+    fixture.detectChanges();
+
+    const items = component["items"]();
+    expect(items.map((i) => i.labelKey)).not.toContain("typeLogin");
+  });
+
+  it("emits cipherSelected when a cipher type is selected", () => {
+    createComponent({
+      canCreateFolder: false,
+      canCreateCollection: false,
+      canCreateSshKey: true,
+    });
+
+    const cipherSelected = jest.fn();
+    component.cipherSelected.subscribe(cipherSelected);
+
+    const loginItem = component["items"]().find((i) => i.labelKey === "typeLogin");
+    loginItem!.action();
+
+    expect(cipherSelected).toHaveBeenCalledWith(CipherType.Login);
+  });
+
+  it("emits folderSelected when folder is selected", () => {
+    createComponent({
+      canCreateFolder: true,
+      canCreateCollection: false,
+      canCreateSshKey: false,
+    });
+
+    const folderSelected = jest.fn();
+    component.folderSelected.subscribe(folderSelected);
+
+    const folderItem = component["items"]().find((i) => i.labelKey === "folder");
+    folderItem!.action();
+
+    expect(folderSelected).toHaveBeenCalled();
+  });
+
+  it("emits collectionSelected when collection is selected", () => {
+    createComponent({
+      canCreateFolder: false,
+      canCreateCollection: true,
+      canCreateSshKey: false,
+    });
+
+    const collectionSelected = jest.fn();
+    component.collectionSelected.subscribe(collectionSelected);
+
+    const collectionItem = component["items"]().find((i) => i.labelKey === "collection");
+    collectionItem!.action();
+
+    expect(collectionSelected).toHaveBeenCalled();
+  });
+});
diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.ts b/libs/vault/src/components/add-item-grid/add-item-grid.component.ts
new file mode 100644
index 000000000000..0782cfde29ed
--- /dev/null
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.ts
@@ -0,0 +1,77 @@
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+import { toSignal } from "@angular/core/rxjs-interop";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { CipherType } from "@bitwarden/common/vault/enums";
+import {
+  RestrictedCipherType,
+  RestrictedItemTypesService,
+} from "@bitwarden/common/vault/services/restricted-item-types.service";
+import { CIPHER_MENU_ITEMS } from "@bitwarden/common/vault/types/cipher-menu-items";
+import { BitwardenIcon, IconComponent, ItemModule } from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
+
+type DialogItem = {
+  icon: BitwardenIcon;
+  labelKey: string;
+  subtitleKey: string;
+  action: () => void;
+};
+
+@Component({
+  selector: "vault-add-item-grid",
+  templateUrl: "./add-item-grid.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, JslibModule, I18nPipe, IconComponent, ItemModule],
+})
+export class AddItemGridComponent {
+  readonly canCreateFolder = input(false);
+  readonly canCreateCollection = input(false);
+  readonly canCreateSshKey = input(false);
+
+  readonly cipherSelected = output<CipherType>();
+  readonly folderSelected = output();
+  readonly collectionSelected = output();
+
+  private readonly restrictedTypes = toSignal(this.restrictedItemTypesService.restricted$, {
+    initialValue: [] as RestrictedCipherType[],
+  });
+
+  protected readonly items = computed<DialogItem[]>(() => {
+    const restrictedTypes = this.restrictedTypes();
+    const items: DialogItem[] = CIPHER_MENU_ITEMS.filter((item) => {
+      if (!this.canCreateSshKey() && item.type === CipherType.SshKey) {
+        return false;
+      }
+      return !restrictedTypes.some((r) => r.cipherType === item.type);
+    }).map((item) => ({
+      icon: item.icon,
+      labelKey: item.labelKey,
+      subtitleKey: item.subtitleKey,
+      action: () => this.cipherSelected.emit(item.type),
+    }));
+
+    if (this.canCreateFolder()) {
+      items.push({
+        icon: "bwi-folder",
+        labelKey: "folder",
+        subtitleKey: "folderSubtitle",
+        action: () => this.folderSelected.emit(),
+      });
+    }
+
+    if (this.canCreateCollection()) {
+      items.push({
+        icon: "bwi-collection-shared",
+        labelKey: "collection",
+        subtitleKey: "collectionSubtitle",
+        action: () => this.collectionSelected.emit(),
+      });
+    }
+
+    return items;
+  });
+
+  constructor(private readonly restrictedItemTypesService: RestrictedItemTypesService) {}
+}
diff --git a/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.html b/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.html
index 5b70b4326568..64f1b111ae17 100644
--- a/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.html
+++ b/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.html
@@ -1,10 +1,26 @@
-<ng-container *ngIf="canCreateCipher() || canCreateCollection() || canCreateFolder()">
+@if (useNewItemDialog() && (canCreateCipher() || canCreateCollection() || canCreateFolder())) {
+  <button
+    bitButton
+    buttonType="primary"
+    type="button"
+    (click)="handleButtonClick()"
+    id="newItemButton"
+    [appA11yTitle]="getButtonLabel() | i18n"
+    [bitPopoverAnchorFor]="coachmarkPopover()"
+    [popoverOpen]="coachmarkPopoverOpen()"
+    [position]="coachmarkPosition()"
+    [spotlight]="!!coachmarkPopover()"
+    startIcon="bwi-plus"
+  >
+    {{ getButtonLabel() | i18n }}
+  </button>
+} @else if (canCreateCipher() || canCreateCollection() || canCreateFolder()) {
   <div>
     <button
       bitButton
       buttonType="primary"
       type="button"
-      [bitMenuTriggerFor]="isOnlyCollectionCreation() ? null : addOptions"
+      [bitMenuTriggerFor]="isOnlyCollectionCreation() ? addOptions : null"
       (click)="handleButtonClick()"
       id="newItemDropdown"
       [appA11yTitle]="getButtonLabel() | i18n"
@@ -40,4 +56,4 @@
       </button>
     </bit-menu>
   </div>
-</ng-container>
+}
diff --git a/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts b/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts
index 76204a131aaf..ea0c122824ec 100644
--- a/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts
+++ b/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts
@@ -1,9 +1,11 @@
 import { CommonModule } from "@angular/common";
 import { Component, input, output } from "@angular/core";
-import { toObservable } from "@angular/core/rxjs-interop";
+import { toObservable, toSignal } from "@angular/core/rxjs-interop";
 import { combineLatest, map, shareReplay } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
 import { CIPHER_MENU_ITEMS } from "@bitwarden/common/vault/types/cipher-menu-items";
@@ -47,8 +49,17 @@ export class NewCipherMenuComponent {
   folderAdded = output();
   collectionAdded = output();
   cipherAdded = output<CipherType>();
+  onAddItemDialog = output();
 
-  constructor(private restrictedItemTypesService: RestrictedItemTypesService) {}
+  protected readonly useNewItemDialog = toSignal(
+    this.configService.getFeatureFlag$(FeatureFlag.PM32009NewItemTypes),
+    { initialValue: false },
+  );
+
+  constructor(
+    private restrictedItemTypesService: RestrictedItemTypesService,
+    private configService: ConfigService,
+  ) { }
 
   /**
    * Returns an observable that emits the cipher menu items, filtered by the restricted types.
@@ -106,6 +117,10 @@ export class NewCipherMenuComponent {
   protected handleButtonClick(): void {
     if (this.isOnlyCollectionCreation()) {
       this.collectionAdded.emit();
+      return;
+    }
+    if (this.useNewItemDialog()) {
+      this.onAddItemDialog.emit();
     }
   }
 }
diff --git a/libs/vault/src/index.ts b/libs/vault/src/index.ts
index 59e354f80fa3..8e4335574e38 100644
--- a/libs/vault/src/index.ts
+++ b/libs/vault/src/index.ts
@@ -27,6 +27,8 @@ export { PasswordHistoryViewComponent } from "./components/password-history-view
 export { DecryptionFailureDialogComponent } from "./components/decryption-failure-dialog/decryption-failure-dialog.component";
 export { openPasswordHistoryDialog } from "./components/password-history/password-history.component";
 export * from "./components/add-edit-folder-dialog/add-edit-folder-dialog.component";
+export * from "./components/add-item-grid/add-item-grid.component";
+export * from "./components/add-item-dialog/add-item-dialog.component";
 export * from "./components/carousel";
 export * from "./components/new-cipher-menu/new-cipher-menu.component";
 export * from "./components/permit-cipher-details-popover/permit-cipher-details-popover.component";

From c6f2e9687864aad12955399732cee935dbf6009d Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Wed, 1 Apr 2026 15:41:25 -0500
Subject: [PATCH 05/39] integrate the new item dialog into web and AC vaults

---
 .../vault-header/vault-header.component.html  |  1 +
 .../vault-header/vault-header.component.ts    | 11 ++++++--
 .../collections/vault.component.html          |  1 +
 .../collections/vault.component.ts            | 26 +++++++++++++++++++
 .../vault-header/vault-header.component.html  |  1 +
 .../vault-header/vault-header.component.ts    | 10 ++++++-
 .../individual-vault/vault.component.html     |  1 +
 .../individual-vault/vault.component.spec.ts  |  8 +++++-
 .../vault/individual-vault/vault.component.ts | 25 ++++++++++++++++++
 9 files changed, 80 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.html b/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.html
index 9c3e607d6eb6..d38d2a78a9f5 100644
--- a/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.html
+++ b/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.html
@@ -114,6 +114,7 @@
       [canCreateCollection]="canCreateCollection"
       (cipherAdded)="addCipher($event)"
       (collectionAdded)="addCollection()"
+      (onAddItemDialog)="openAddItemDialog()"
     />
   </div>
 </app-header>
diff --git a/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.ts b/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.ts
index 1c9ae89f36bd..fdaca3ef5741 100644
--- a/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.ts
+++ b/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.ts
@@ -3,7 +3,7 @@
 // FIXME: rename output bindings and then remove this line
 /* eslint-disable @angular-eslint/no-output-on-prefix */
 import { CommonModule } from "@angular/common";
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Component, EventEmitter, Input, output, Output } from "@angular/core";
 import { Router } from "@angular/router";
 import { firstValueFrom, switchMap } from "rxjs";
 
@@ -109,6 +109,9 @@ export class VaultHeaderComponent {
   // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
   @Output() searchTextChanged = new EventEmitter<string>();
 
+    /** Emits an event when the add item dialog should be opened */
+  onOpenAddItemDialog = output();
+
   protected CollectionDialogTabType = CollectionDialogTabType;
 
   /** The cipher type enum. */
@@ -120,7 +123,7 @@ export class VaultHeaderComponent {
     private collectionAdminService: CollectionAdminService,
     private router: Router,
     private accountService: AccountService,
-  ) {}
+  ) { }
 
   get title() {
     const headerType = this.i18nService.t("collections").toLowerCase();
@@ -218,6 +221,10 @@ export class VaultHeaderComponent {
     this.onAddCipher.emit(cipherType);
   }
 
+  openAddItemDialog(): void {
+    this.onOpenAddItemDialog.emit();
+  }
+
   async addCollection() {
     if (this.organization.productTierType === ProductTierType.Free) {
       const collections = await firstValueFrom(
diff --git a/apps/web/src/app/admin-console/organizations/collections/vault.component.html b/apps/web/src/app/admin-console/organizations/collections/vault.component.html
index 9ea0d8734872..85314c25d69a 100644
--- a/apps/web/src/app/admin-console/organizations/collections/vault.component.html
+++ b/apps/web/src/app/admin-console/organizations/collections/vault.component.html
@@ -27,6 +27,7 @@
       (onEditCollection)="editCollection(selectedCollection?.node, $event.tab, $event.readonly)"
       (onDeleteCollection)="deleteCollection(selectedCollection?.node)"
       (searchTextChanged)="filterSearchText($event)"
+      (onOpenAddItemDialog)="openAddItemDialog()"
     ></app-org-vault-header>
   }
 
diff --git a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
index 60b5b2902849..46247709632f 100644
--- a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
+++ b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
@@ -76,6 +76,9 @@ import {
   ToastService,
 } from "@bitwarden/components";
 import {
+  AddItemDialogCloseResult,
+  AddItemDialogComponent,
+  AddItemDialogResult,
   AttachmentDialogResult,
   AttachmentsV2Component,
   CipherFormConfig,
@@ -837,6 +840,27 @@ export class VaultComponent implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * Opens the add-item type selection dialog and handles the result.
+   */
+  protected async openAddItemDialog(): Promise<void> {
+    const organization = await firstValueFrom(this.organization$);
+    const ref = AddItemDialogComponent.open(this.dialogService, {
+      canCreateFolder: false,
+      canCreateCollection: organization?.canCreateNewCollections ?? false,
+      canCreateSshKey: true,
+    });
+    const result: AddItemDialogCloseResult | undefined = await firstValueFrom(ref.closed);
+    if (!result) {
+      return;
+    }
+    if (result.result === AddItemDialogResult.Cipher) {
+      await this.addCipher(result.cipherType);
+    } else if (result.result === AddItemDialogResult.Collection) {
+      await this.addCollection();
+    }
+  }
+
   /** Opens the Add/Edit Dialog */
   async addCipher(cipherType?: CipherType) {
     const cipherFormConfig = await this.cipherFormConfigService.buildConfig(
@@ -921,6 +945,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     formConfig: CipherFormConfig,
     cipher?: CipherView,
     activeCollectionId?: CollectionId,
+    showBackButton?: boolean,
   ) {
     this.vaultItemDialogRef = VaultItemDialogComponent.open(this.dialogService, {
       mode,
@@ -928,6 +953,7 @@ export class VaultComponent implements OnInit, OnDestroy {
       activeCollectionId,
       isAdminConsoleAction: true,
       restore: this.restore,
+      showBackButton,
     });
 
     const result = await lastValueFrom(this.vaultItemDialogRef.closed);
diff --git a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html
index 0bd03f56ea23..66f7d5516606 100644
--- a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html
@@ -86,6 +86,7 @@
       (cipherAdded)="addCipher($event)"
       (folderAdded)="addFolder()"
       (collectionAdded)="addCollection()"
+      (onAddItemDialog)="openAddItemDialog()"
     />
     <app-coachmark #addItemCoachmark stepId="addItem" />
   </div>
diff --git a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts
index c3d6d4bcff31..1003b85cab35 100644
--- a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts
@@ -7,6 +7,7 @@ import {
   inject,
   Input,
   Output,
+  output,
 } from "@angular/core";
 import { Router } from "@angular/router";
 import { firstValueFrom, switchMap } from "rxjs";
@@ -122,6 +123,9 @@ export class VaultHeaderComponent {
   // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
   @Output() onDeleteCollection = new EventEmitter<void>();
 
+  /** Emits an event when the add item dialog should be opened */
+  readonly onOpenAddItemDialog = output<void>();
+
   constructor(
     private readonly i18nService: I18nService,
     private readonly collectionAdminService: CollectionAdminService,
@@ -129,7 +133,7 @@ export class VaultHeaderComponent {
     private readonly router: Router,
     private readonly configService: ConfigService,
     private readonly accountService: AccountService,
-  ) {}
+  ) { }
 
   /**
    * The id of the organization that is currently being filtered on.
@@ -257,6 +261,10 @@ export class VaultHeaderComponent {
     this.onAddCipher.emit(cipherType);
   }
 
+  protected openAddItemDialog(): void {
+    this.onOpenAddItemDialog.emit();
+  }
+
   async addFolder(): Promise<void> {
     this.onAddFolder.emit();
   }
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.html b/apps/web/src/app/vault/individual-vault/vault.component.html
index 56f0bcc1db7e..c16be6cead85 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault.component.html
@@ -11,6 +11,7 @@
   (onAddFolder)="addFolder()"
   (onEditCollection)="editCollection(selectedCollection.node, $event.tab)"
   (onDeleteCollection)="deleteCollection(selectedCollection.node)"
+  (onOpenAddItemDialog)="openAddItemDialog()"
 ></app-vault-header>
 
 <app-vault-onboarding
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.spec.ts b/apps/web/src/app/vault/individual-vault/vault.component.spec.ts
index 2d2b7ca49e34..6640e0496b2b 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.spec.ts
+++ b/apps/web/src/app/vault/individual-vault/vault.component.spec.ts
@@ -160,7 +160,13 @@ describe("VaultComponent", () => {
         { provide: OrganizationWarningsService, useValue: mock<OrganizationWarningsService>() },
         { provide: PremiumUpgradePromptService, useValue: mock<PremiumUpgradePromptService>() },
         { provide: SyncService, useValue: mock<SyncService>() },
-        { provide: ConfigService, useValue: mock<ConfigService>() },
+        {
+          provide: ConfigService,
+          useValue: {
+            ...mock<ConfigService>(),
+            getFeatureFlag$: jest.fn().mockReturnValue(of(false)),
+          },
+        },
         { provide: DialogService, useValue: mock<DialogService>() },
         { provide: WelcomeDialogService, useValue: mock<WelcomeDialogService>() },
         { provide: OrganizationUserApiService, useValue: mock<OrganizationUserApiService>() },
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.ts b/apps/web/src/app/vault/individual-vault/vault.component.ts
index 0b1c1d117bb7..08a2b566ce5a 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault.component.ts
@@ -80,6 +80,9 @@ import { CipherListView } from "@bitwarden/sdk-internal";
 import {
   AddEditFolderDialogComponent,
   AddEditFolderDialogResult,
+  AddItemDialogCloseResult,
+  AddItemDialogComponent,
+  AddItemDialogResult,
   AttachmentDialogResult,
   AttachmentsV2Component,
   CipherFormConfig,
@@ -951,6 +954,28 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
     );
   }
 
+  /**
+   * Opens the add-item type selection dialog and handles the result.
+   */
+  protected async openAddItemDialog(): Promise<void> {
+    const ref = AddItemDialogComponent.open(this.dialogService, {
+      canCreateFolder: true,
+      canCreateCollection: this.canCreateCollections,
+      canCreateSshKey: true,
+    });
+    const result: AddItemDialogCloseResult | undefined = await firstValueFrom(ref.closed);
+    if (!result) {
+      return;
+    }
+    if (result.result === AddItemDialogResult.Cipher) {
+      await this.addCipher(result.cipherType);
+    } else if (result.result === AddItemDialogResult.Folder) {
+      this.addFolder();
+    } else {
+      await this.addCollection();
+    }
+  }
+
   /**
    * Opens the add cipher dialog.
    * @param cipherType The type of cipher to add.

From e029cdecdce69b7237af214436d227a976105976 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 2 Apr 2026 09:15:11 -0500
Subject: [PATCH 06/39] add dialog header start slot for dialog

---
 libs/components/src/dialog/dialog/dialog.component.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index 8c1f997df8a7..6a684360aab8 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -11,7 +11,7 @@
 >
   @let showHeaderBorder = bodyHasScrolledFrom().top;
   <header
-    class="tw-flex tw-justify-between tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-py-3 tw-ps-6 tw-pe-4"
+    class="tw-flex tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-py-3 tw-ps-6 tw-pe-4"
     [ngClass]="{
       'tw-p-4 has-[[biticonbutton]]:tw-pe-2': !isDrawer,
       'tw-px-6 tw-py-4 has-[[biticonbutton]]:tw-pe-4': isDrawer,
@@ -19,6 +19,7 @@
       'tw-border-transparent': !showHeaderBorder,
     }"
   >
+    <ng-content select="[bitDialogHeaderStart]"></ng-content>
     <h2
       bitDialogTitleContainer
       bitTypography="h3"
@@ -36,7 +37,7 @@
       <ng-content select="[bitDialogTitle]"></ng-content>
     </h2>
 
-    <div class="tw-flex tw-items-center tw-justify-center">
+    <div class="tw-flex tw-items-center tw-justify-center tw-ms-auto">
       <ng-content select="[bitDialogHeaderEnd]"></ng-content>
 
       @if (!this.dialogRef?.disableClose) {

From ab371dd6382e6c66fe4de55cb5e68596a1be3fcc Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 2 Apr 2026 09:21:31 -0500
Subject: [PATCH 07/39] fix menu trigger when feature flag is disabled

---
 .../components/new-cipher-menu/new-cipher-menu.component.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.html b/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.html
index 64f1b111ae17..f58a00ea152c 100644
--- a/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.html
+++ b/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.html
@@ -20,7 +20,7 @@
       bitButton
       buttonType="primary"
       type="button"
-      [bitMenuTriggerFor]="isOnlyCollectionCreation() ? addOptions : null"
+      [bitMenuTriggerFor]="isOnlyCollectionCreation() ? null : addOptions"
       (click)="handleButtonClick()"
       id="newItemDropdown"
       [appA11yTitle]="getButtonLabel() | i18n"

From a56030cb876621fc3e2f0469872dce06cb520946 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 2 Apr 2026 09:23:20 -0500
Subject: [PATCH 08/39] add back button for cipher dialogs

---
 .../collections/vault.component.ts              | 10 +++++-----
 .../vault-item-dialog.component.html            | 14 +++++++++++++-
 .../vault-item-dialog.component.ts              | 17 +++++++++++++++++
 .../vault/individual-vault/vault.component.ts   | 10 ++++++----
 4 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
index 46247709632f..3b88027ac171 100644
--- a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
+++ b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
@@ -855,14 +855,14 @@ export class VaultComponent implements OnInit, OnDestroy {
       return;
     }
     if (result.result === AddItemDialogResult.Cipher) {
-      await this.addCipher(result.cipherType);
+      await this.addCipher(result.cipherType, true);
     } else if (result.result === AddItemDialogResult.Collection) {
       await this.addCollection();
     }
   }
 
   /** Opens the Add/Edit Dialog */
-  async addCipher(cipherType?: CipherType) {
+  async addCipher(cipherType?: CipherType, addItemDialogOnClose?: boolean) {
     const cipherFormConfig = await this.cipherFormConfigService.buildConfig(
       "add",
       undefined,
@@ -877,7 +877,7 @@ export class VaultComponent implements OnInit, OnDestroy {
       collectionIds: collectionId ? [collectionId] : [],
     };
 
-    await this.openVaultItemDialog("form", cipherFormConfig);
+    await this.openVaultItemDialog("form", cipherFormConfig, undefined, undefined, addItemDialogOnClose);
   }
 
   /**
@@ -945,7 +945,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     formConfig: CipherFormConfig,
     cipher?: CipherView,
     activeCollectionId?: CollectionId,
-    showBackButton?: boolean,
+    addItemDialogOnClose?: boolean,
   ) {
     this.vaultItemDialogRef = VaultItemDialogComponent.open(this.dialogService, {
       mode,
@@ -953,7 +953,7 @@ export class VaultComponent implements OnInit, OnDestroy {
       activeCollectionId,
       isAdminConsoleAction: true,
       restore: this.restore,
-      showBackButton,
+      backAction: addItemDialogOnClose ? this.openAddItemDialog : undefined,
     });
 
     const result = await lastValueFrom(this.vaultItemDialogRef.closed);
diff --git a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
index ea0cc76b89c1..e5700bb12962 100644
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
@@ -1,5 +1,17 @@
 <bit-dialog dialogSize="large" background="alt" [loading]="performingInitialLoad">
-  <span bitDialogTitle aria-live="polite">
+  @if (hasBackAction) {
+    <button
+      type="button"
+      bitIconButton="bwi-angle-left"
+      buttonType="primaryGhost"
+      size="default"
+      [label]="'back' | i18n"
+      (click)="invokeBackAction()"
+      class="-tw-ms-3"
+      bitDialogHeaderStart
+    ></button>
+  }
+  <span bitDialogTitle class="tw-flex tw-items-center tw-gap-1" aria-live="polite">
     {{ title }}
   </span>
 
diff --git a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
index cf1312a9f136..ffe2e733be55 100644
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
@@ -43,6 +43,7 @@ import {
   DIALOG_DATA,
   DialogRef,
   AsyncActionsModule,
+  BitIconButtonComponent,
   ButtonModule,
   DialogModule,
   DialogService,
@@ -101,6 +102,12 @@ export interface VaultItemDialogParams {
    * Function to restore a cipher from the trash.
    */
   restore?: (c: CipherViewLike) => Promise<void>;
+
+  /**
+   * When provided, a "Back" button is shown when creating a new cipher (cipher == null),
+   * and the provided method will be invoked.
+   */
+  backAction?: () => void;
 }
 
 export const VaultItemDialogResult = {
@@ -133,6 +140,7 @@ export type VaultItemDialogResult = UnionOfValues<typeof VaultItemDialogResult>;
   selector: "app-vault-item-dialog",
   templateUrl: "vault-item-dialog.component.html",
   imports: [
+    BitIconButtonComponent,
     ButtonModule,
     CipherViewComponent,
     DialogModule,
@@ -279,6 +287,15 @@ export class VaultItemDialogComponent implements OnInit, OnDestroy {
     return this.cipher != undefined && (this.params.mode === "view" || this.loadingForm);
   }
 
+  protected get hasBackAction() {
+    return typeof this.params.backAction === "function";
+  }
+
+  invokeBackAction() {
+    this.params.backAction?.();
+    this.dialogRef.close();
+  }
+
   protected get submitButtonText$(): Observable<string> {
     return this.userHasPremium$.pipe(
       map((hasPremium) =>
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.ts b/apps/web/src/app/vault/individual-vault/vault.component.ts
index 08a2b566ce5a..80787ffcb3ee 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault.component.ts
@@ -325,7 +325,7 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
     private policyService: PolicyService,
     private premiumUpgradePromptService: PremiumUpgradePromptService,
     private webVaultPromptService: WebVaultPromptService,
-  ) {}
+  ) { }
 
   async ngOnInit() {
     this.trashCleanupWarning = this.i18nService.t(
@@ -925,12 +925,14 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
     mode: VaultItemDialogMode,
     formConfig: CipherFormConfig,
     activeCollectionId?: CollectionId,
+    navigateBackToItemDialog?: boolean,
   ) {
     this.vaultItemDialogRef = VaultItemDialogComponent.open(this.dialogService, {
       mode,
       formConfig,
       activeCollectionId,
       restore: this.restore,
+      backAction: navigateBackToItemDialog ? this.openAddItemDialog.bind(this) : undefined,
     });
 
     const result = await lastValueFrom(this.vaultItemDialogRef.closed);
@@ -968,7 +970,7 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
       return;
     }
     if (result.result === AddItemDialogResult.Cipher) {
-      await this.addCipher(result.cipherType);
+      await this.addCipher(result.cipherType, true);
     } else if (result.result === AddItemDialogResult.Folder) {
       this.addFolder();
     } else {
@@ -980,7 +982,7 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
    * Opens the add cipher dialog.
    * @param cipherType The type of cipher to add.
    */
-  async addCipher(cipherType?: CipherType) {
+  async addCipher(cipherType?: CipherType, navigateBackToItemDialog?: boolean) {
     const type = cipherType ?? this.activeFilter.cipherType;
     const cipherFormConfig = await this.cipherFormConfigService.buildConfig("add", undefined, type);
     const collectionId =
@@ -1006,7 +1008,7 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
       folderId: this.activeFilter.folderId,
     };
 
-    await this.openVaultItemDialog("form", cipherFormConfig);
+    await this.openVaultItemDialog("form", cipherFormConfig, undefined, navigateBackToItemDialog);
   }
 
   async editCipher(cipher: CipherView | CipherListView, cloneMode?: boolean) {

From 116d05aae24459d70453a9d5450d6ae1ffff6244 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 2 Apr 2026 09:30:26 -0500
Subject: [PATCH 09/39] bind `this` for back action

---
 .../organizations/collections/vault.component.ts       | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
index 3b88027ac171..0631cd1a7bba 100644
--- a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
+++ b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
@@ -877,7 +877,13 @@ export class VaultComponent implements OnInit, OnDestroy {
       collectionIds: collectionId ? [collectionId] : [],
     };
 
-    await this.openVaultItemDialog("form", cipherFormConfig, undefined, undefined, addItemDialogOnClose);
+    await this.openVaultItemDialog(
+      "form",
+      cipherFormConfig,
+      undefined,
+      undefined,
+      addItemDialogOnClose,
+    );
   }
 
   /**
@@ -953,7 +959,7 @@ export class VaultComponent implements OnInit, OnDestroy {
       activeCollectionId,
       isAdminConsoleAction: true,
       restore: this.restore,
-      backAction: addItemDialogOnClose ? this.openAddItemDialog : undefined,
+      backAction: addItemDialogOnClose ? this.openAddItemDialog.bind(this) : undefined,
     });
 
     const result = await lastValueFrom(this.vaultItemDialogRef.closed);

From eb597c408abd9b6fe5e942ba511c6b4f5cf3d0fd Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 2 Apr 2026 09:51:36 -0500
Subject: [PATCH 10/39] only show back button when a new cipher is being
 created

---
 .../vault-item-dialog/vault-item-dialog.component.html    | 2 +-
 .../vault-item-dialog/vault-item-dialog.component.ts      | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
index e5700bb12962..c4401538ee42 100644
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
@@ -1,5 +1,5 @@
 <bit-dialog dialogSize="large" background="alt" [loading]="performingInitialLoad">
-  @if (hasBackAction) {
+  @if (showBackButton) {
     <button
       type="button"
       bitIconButton="bwi-angle-left"
diff --git a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
index ffe2e733be55..6819a2c6bafa 100644
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
@@ -287,8 +287,12 @@ export class VaultItemDialogComponent implements OnInit, OnDestroy {
     return this.cipher != undefined && (this.params.mode === "view" || this.loadingForm);
   }
 
-  protected get hasBackAction() {
-    return typeof this.params.backAction === "function";
+  protected get showBackButton() {
+    return (
+      typeof this.params.backAction === "function" &&
+      this.params.mode === "form" &&
+      this._originalFormMode === "add"
+    );
   }
 
   invokeBackAction() {

From 7f41b87987fa5ee052551bd1a939456978a1a983 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 2 Apr 2026 09:52:04 -0500
Subject: [PATCH 11/39] fix edit access for new ciphers

---
 .../vault-item-dialog/vault-item-dialog.component.ts        | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
index 6819a2c6bafa..17e4787d1d68 100644
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
@@ -480,6 +480,12 @@ export class VaultItemDialogComponent implements OnInit, OnDestroy {
     // Store the updated cipher so any following edits use the most up to date cipher
     this.formConfig.originalCipher = cipher;
     this._cipherModified = true;
+
+    // Re-evaluate edit permissions now that we have a saved cipher (e.g. after creating a new one)
+    this.canEdit = await firstValueFrom(
+      this.cipherAuthorizationService.canEditCipher$(this.cipher, this.params.isAdminConsoleAction),
+    );
+
     await this.changeMode("view");
   }
 

From a13ef766fb10e9b7d61525c7ae74c1c7b133a59c Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 2 Apr 2026 09:53:23 -0500
Subject: [PATCH 12/39] fix logic for adding a cipher and showing the back
 button

---
 .../vault-item-dialog/vault-item-dialog.component.ts          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
index 17e4787d1d68..0443782f77b3 100644
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
@@ -290,8 +290,8 @@ export class VaultItemDialogComponent implements OnInit, OnDestroy {
   protected get showBackButton() {
     return (
       typeof this.params.backAction === "function" &&
-      this.params.mode === "form" &&
-      this._originalFormMode === "add"
+      this.cipher == null &&
+      this.params.mode === "form"
     );
   }
 

From 116a0072275c93001a874459f447d2d7dd7e40f8 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 2 Apr 2026 10:35:07 -0500
Subject: [PATCH 13/39] add back action to the collection dialog

---
 .../collections/vault.component.ts            |   5 +-
 .../collection-dialog.component.html          |  13 +++
 .../collection-dialog.component.spec.ts       | 104 ++++++++++++++++++
 .../collection-dialog.component.ts            |  15 +++
 .../vault/individual-vault/vault.component.ts |   7 +-
 5 files changed, 139 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.spec.ts

diff --git a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
index 0631cd1a7bba..e82af4962da5 100644
--- a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
+++ b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
@@ -857,7 +857,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     if (result.result === AddItemDialogResult.Cipher) {
       await this.addCipher(result.cipherType, true);
     } else if (result.result === AddItemDialogResult.Collection) {
-      await this.addCollection();
+      await this.addCollection(true);
     }
   }
 
@@ -1295,7 +1295,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     }
   }
 
-  async addCollection(): Promise<void> {
+  async addCollection(navigateBackToItemDialog?: boolean): Promise<void> {
     const organization = await firstValueFrom(this.organization$);
     const selectedCollection = await firstValueFrom(this.selectedCollection$);
     const dialog = openCollectionDialog(this.dialogService, {
@@ -1304,6 +1304,7 @@ export class VaultComponent implements OnInit, OnDestroy {
         parentCollectionId: selectedCollection?.node.id,
         limitNestedCollections: !organization.canEditAnyCollection,
         isAdminConsoleActive: true,
+        backAction: navigateBackToItemDialog ? this.openAddItemDialog.bind(this) : undefined,
       },
     });
 
diff --git a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.html b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.html
index 55cd5f79b34d..459149c31d7f 100644
--- a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.html
+++ b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.html
@@ -1,5 +1,18 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit">
   <bit-dialog [disablePadding]="!loading" dialogSize="large">
+    @if (backAction) {
+      <button
+        type="button"
+        bitIconButton="bwi-angle-left"
+        buttonType="primaryGhost"
+        size="default"
+        [label]="'back' | i18n"
+        (click)="backAction()"
+        class="-tw-ms-3"
+        data-testid="collection-dialog-back-button"
+        bitDialogHeaderStart
+      ></button>
+    }
     <span bitDialogTitle>
       <ng-container *ngIf="editMode">
         {{ (dialogReadonly ? "viewCollection" : "editCollection") | i18n }}
diff --git a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.spec.ts b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.spec.ts
new file mode 100644
index 000000000000..ac8f25f1fcd7
--- /dev/null
+++ b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.spec.ts
@@ -0,0 +1,104 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormBuilder } from "@angular/forms";
+import { By } from "@angular/platform-browser";
+import { mock, MockProxy } from "jest-mock-extended";
+
+import {
+  CollectionAdminService,
+  CollectionService,
+  OrganizationUserApiService,
+} from "@bitwarden/admin-console/common";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { OrganizationId } from "@bitwarden/common/types/guid";
+import { DIALOG_DATA, DialogRef, DialogService, ToastService } from "@bitwarden/components";
+import { newGuid } from "@bitwarden/guid";
+
+import { GroupApiService } from "../../../core";
+
+import {
+  CollectionDialogAction,
+  CollectionDialogComponent,
+  CollectionDialogParams,
+} from "./collection-dialog.component";
+
+describe("CollectionDialogComponent", () => {
+  let fixture: ComponentFixture<CollectionDialogComponent>;
+
+  let mockDialogRef: MockProxy<DialogRef<any>>;
+
+  const mockOrgId = newGuid() as OrganizationId;
+
+  const defaultParams: CollectionDialogParams = {
+    organizationId: mockOrgId,
+  };
+
+  beforeEach(async () => {
+    mockDialogRef = mock<DialogRef<any>>();
+
+    await TestBed.configureTestingModule({
+      imports: [CollectionDialogComponent],
+      providers: [
+        FormBuilder,
+        { provide: DIALOG_DATA, useValue: defaultParams },
+        { provide: OrganizationService, useValue: mock<OrganizationService>() },
+        { provide: GroupApiService, useValue: mock<GroupApiService>() },
+        { provide: CollectionAdminService, useValue: mock<CollectionAdminService>() },
+        { provide: I18nService, useValue: { t: (key: string) => key } },
+        { provide: OrganizationUserApiService, useValue: mock<OrganizationUserApiService>() },
+        { provide: DialogService, useValue: mock<DialogService>() },
+        { provide: AccountService, useValue: mock<AccountService>() },
+        { provide: ToastService, useValue: mock<ToastService>() },
+        { provide: CollectionService, useValue: mock<CollectionService>() },
+        { provide: ConfigService, useValue: mock<ConfigService>() },
+        { provide: DialogRef, useValue: mockDialogRef },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CollectionDialogComponent);
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe("backAction getter", () => {
+    const backButton = () =>
+      fixture.debugElement.query(By.css("[data-testid='collection-dialog-back-button']"));
+
+    it("does not show the back button when no backAction param is provided", async () => {
+      expect(backButton()).toBeNull();
+    });
+
+    describe("when backAction param is provided", () => {
+      let mockBackAction: jest.Mock;
+
+      beforeEach(() => {
+        mockBackAction = jest.fn();
+        defaultParams.backAction = mockBackAction;
+        fixture.detectChanges();
+      });
+
+      afterEach(() => {
+        defaultParams.backAction = undefined;
+      });
+
+      it("calls the provided backAction when invoked", async () => {
+        backButton()?.triggerEventHandler("click", null);
+
+        expect(mockBackAction).toHaveBeenCalledTimes(1);
+      });
+
+      it("closes the dialog with Canceled action when invoked", async () => {
+        backButton()?.triggerEventHandler("click", null);
+        expect(mockDialogRef.close).toHaveBeenCalledWith({
+          action: CollectionDialogAction.Canceled,
+          collection: undefined,
+        });
+      });
+    });
+  });
+});
diff --git a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts
index 2f9ddddd8cb1..17472f549399 100644
--- a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts
+++ b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts
@@ -102,6 +102,10 @@ export interface CollectionDialogParams {
   readonly?: boolean;
   isAddAccessCollection?: boolean;
   isAdminConsoleActive?: boolean;
+  /**
+   * When provided, a "Back" button is shown and the provided method will be invoked.
+   */
+  backAction?: () => void;
 }
 
 export interface CollectionDialogResult {
@@ -345,6 +349,17 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
     return this.formGroup.controls.selectedOrg;
   }
 
+  protected get backAction() {
+    if (!this.params.backAction) {
+      return undefined;
+    }
+
+    return () => {
+      this.params.backAction!();
+      this.close(CollectionDialogAction.Canceled);
+    };
+  }
+
   protected get isExternalIdVisible(): boolean {
     return this.params.isAdminConsoleActive && !!this.formGroup.get("externalId")?.value;
   }
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.ts b/apps/web/src/app/vault/individual-vault/vault.component.ts
index 80787ffcb3ee..327a534ef2c7 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault.component.ts
@@ -325,7 +325,7 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
     private policyService: PolicyService,
     private premiumUpgradePromptService: PremiumUpgradePromptService,
     private webVaultPromptService: WebVaultPromptService,
-  ) { }
+  ) {}
 
   async ngOnInit() {
     this.trashCleanupWarning = this.i18nService.t(
@@ -974,7 +974,7 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
     } else if (result.result === AddItemDialogResult.Folder) {
       this.addFolder();
     } else {
-      await this.addCollection();
+      await this.addCollection(true);
     }
   }
 
@@ -1100,7 +1100,7 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
     );
   }
 
-  async addCollection() {
+  async addCollection(navigateBackToItemDialog?: boolean): Promise<void> {
     const dialog = openCollectionDialog(this.dialogService, {
       data: {
         organizationId: this.allOrganizations
@@ -1109,6 +1109,7 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
         parentCollectionId: this.filter.collectionId,
         showOrgSelector: true,
         limitNestedCollections: true,
+        backAction: navigateBackToItemDialog ? this.openAddItemDialog.bind(this) : undefined,
       },
     });
     const result = await lastValueFrom(dialog.closed);

From 009b342ee24894b65119f5e57cc62b27b0226589 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 2 Apr 2026 10:48:51 -0500
Subject: [PATCH 14/39] add back action to folder dialog

---
 .../vault/individual-vault/vault.component.ts |  8 +++--
 .../add-edit-folder-dialog.component.html     | 13 +++++++
 .../add-edit-folder-dialog.component.spec.ts  | 35 +++++++++++++++++++
 .../add-edit-folder-dialog.component.ts       | 13 +++++++
 4 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/vault/individual-vault/vault.component.ts b/apps/web/src/app/vault/individual-vault/vault.component.ts
index 327a534ef2c7..0075d4136de2 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault.component.ts
@@ -832,8 +832,10 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
     await this.filterComponent()?.filters?.organizationFilter?.action(orgNode);
   }
 
-  addFolder = (): void => {
-    AddEditFolderDialogComponent.open(this.dialogService);
+  addFolder = (navigateToAddItemDialog?: boolean): void => {
+    AddEditFolderDialogComponent.open(this.dialogService, {
+      backAction: navigateToAddItemDialog ? this.openAddItemDialog.bind(this) : undefined,
+    });
   };
 
   editFolder = async (folder: FolderFilter): Promise<void> => {
@@ -972,7 +974,7 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
     if (result.result === AddItemDialogResult.Cipher) {
       await this.addCipher(result.cipherType, true);
     } else if (result.result === AddItemDialogResult.Folder) {
-      this.addFolder();
+      this.addFolder(true);
     } else {
       await this.addCollection(true);
     }
diff --git a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.html b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.html
index 03f32c1b5152..31a869a7266e 100644
--- a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.html
+++ b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.html
@@ -1,4 +1,17 @@
 <form [formGroup]="folderForm" [bitSubmit]="submit" bit-dialog id="add-edit-folder">
+  @if (backAction) {
+    <button
+      type="button"
+      bitIconButton="bwi-angle-left"
+      buttonType="primaryGhost"
+      size="default"
+      [label]="'back' | i18n"
+      (click)="backAction()"
+      class="-tw-ms-3"
+      data-testid="folder-dialog-back-button"
+      bitDialogHeaderStart
+    ></button>
+  }
   <span bitDialogTitle>
     {{ (variant === "add" ? "newFolder" : "editFolder") | i18n }}
   </span>
diff --git a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.spec.ts b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.spec.ts
index a783bdc74068..587b45536211 100644
--- a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.spec.ts
+++ b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.spec.ts
@@ -177,4 +177,39 @@ describe("AddEditFolderDialogComponent", () => {
       expect(close).toHaveBeenCalledWith(AddEditFolderDialogResult.Deleted);
     });
   });
+
+  describe("backAction getter", () => {
+    const backButton = () =>
+      fixture.nativeElement.querySelector("[data-testid='folder-dialog-back-button']");
+
+    it("does not show the back button when no backAction is provided", () => {
+      expect(backButton()).toBeNull();
+    });
+
+    describe("when backAction is provided", () => {
+      const mockBackAction = jest.fn();
+
+      beforeEach(() => {
+        dialogData.backAction = mockBackAction;
+        fixture.detectChanges();
+      });
+
+      afterEach(() => {
+        delete dialogData.backAction;
+        mockBackAction.mockClear();
+      });
+
+      it("calls the provided backAction when clicked", () => {
+        backButton().click();
+
+        expect(mockBackAction).toHaveBeenCalledTimes(1);
+      });
+
+      it("closes the dialog when clicked", () => {
+        backButton().click();
+
+        expect(close).toHaveBeenCalled();
+      });
+    });
+  });
 });
diff --git a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts
index 759277dd4b89..8fa0a1023dca 100644
--- a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts
+++ b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts
@@ -45,6 +45,8 @@ export type AddEditFolderDialogResult = UnionOfValues<typeof AddEditFolderDialog
 export type AddEditFolderDialogData = {
   /** When provided, dialog will display edit folder variant */
   editFolderConfig?: { folder: FolderView };
+  /**  When provided, the dialog will show a back button that will trigger the provided callback. */
+  backAction?: () => void;
 };
 
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
@@ -117,6 +119,17 @@ export class AddEditFolderDialogComponent implements AfterViewInit, OnInit {
     });
   }
 
+  protected get backAction() {
+    if (!this.data?.backAction) {
+      return undefined;
+    }
+
+    return () => {
+      this.data.backAction();
+      this.dialogRef.close();
+    };
+  }
+
   /** Submit the new folder */
   submit = async () => {
     if (this.folderForm.invalid) {

From 0eed04081bda0c5ee7486c94c8bc7f7fadbd0dcd Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 2 Apr 2026 13:56:53 -0500
Subject: [PATCH 15/39] fix formatting and strict types

---
 .../collections/vault-header/vault-header.component.ts        | 4 ++--
 .../add-edit-folder-dialog.component.ts                       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.ts b/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.ts
index fdaca3ef5741..0235979b4067 100644
--- a/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.ts
+++ b/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.ts
@@ -109,7 +109,7 @@ export class VaultHeaderComponent {
   // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
   @Output() searchTextChanged = new EventEmitter<string>();
 
-    /** Emits an event when the add item dialog should be opened */
+  /** Emits an event when the add item dialog should be opened */
   onOpenAddItemDialog = output();
 
   protected CollectionDialogTabType = CollectionDialogTabType;
@@ -123,7 +123,7 @@ export class VaultHeaderComponent {
     private collectionAdminService: CollectionAdminService,
     private router: Router,
     private accountService: AccountService,
-  ) { }
+  ) {}
 
   get title() {
     const headerType = this.i18nService.t("collections").toLowerCase();
diff --git a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts
index 8fa0a1023dca..2635f879be57 100644
--- a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts
+++ b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts
@@ -125,7 +125,7 @@ export class AddEditFolderDialogComponent implements AfterViewInit, OnInit {
     }
 
     return () => {
-      this.data.backAction();
+      this.data?.backAction?.();
       this.dialogRef.close();
     };
   }

From caf356f172ae39c8129c0b48b6dc49c09b96c376 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 2 Apr 2026 13:58:23 -0500
Subject: [PATCH 16/39] update backAction getter for consistency

---
 .../vault-item-dialog.component.html                |  4 ++--
 .../vault-item-dialog.component.ts                  | 13 ++++++-------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
index c4401538ee42..a736dbd74e1e 100644
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
@@ -1,12 +1,12 @@
 <bit-dialog dialogSize="large" background="alt" [loading]="performingInitialLoad">
-  @if (showBackButton) {
+  @if (backAction) {
     <button
       type="button"
       bitIconButton="bwi-angle-left"
       buttonType="primaryGhost"
       size="default"
       [label]="'back' | i18n"
-      (click)="invokeBackAction()"
+      (click)="backAction()"
       class="-tw-ms-3"
       bitDialogHeaderStart
     ></button>
diff --git a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
index 0443782f77b3..989a19a2c7f1 100644
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
@@ -287,17 +287,16 @@ export class VaultItemDialogComponent implements OnInit, OnDestroy {
     return this.cipher != undefined && (this.params.mode === "view" || this.loadingForm);
   }
 
-  protected get showBackButton() {
-    return (
+  protected get backAction() {
+    if (
       typeof this.params.backAction === "function" &&
       this.cipher == null &&
       this.params.mode === "form"
-    );
-  }
+    ) {
+      return this.params.backAction;
+    }
 
-  invokeBackAction() {
-    this.params.backAction?.();
-    this.dialogRef.close();
+    return undefined;
   }
 
   protected get submitButtonText$(): Observable<string> {

From c746672f35517baa5f6e6d4ed1aabb363f635018 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 2 Apr 2026 14:32:23 -0500
Subject: [PATCH 17/39] add story without footer

---
 .../src/dialog/dialog/dialog.component.html   | 22 +++++++++----------
 .../src/dialog/dialog/dialog.stories.ts       | 15 +++++++++++++
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index 6a684360aab8..d6c3ad87ac5e 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -80,18 +80,18 @@
       <div #scrollBottom></div>
     </div>
   </div>
-  @let isScrollable = isScrollable$ | async;
-  @let showFooterBorder =
-    (!bodyHasScrolledFrom().top && isScrollable) || bodyHasScrolledFrom().bottom;
-  <div
-    class="tw-border-0 tw-border-t tw-border-solid"
-    [ngClass]="{
-      'tw-border-transparent': !showFooterBorder,
-      'tw-border-secondary-100': showFooterBorder,
-    }"
-    data-chromatic="ignore"
-  ></div>
   @if (hasFooter()) {
+    @let isScrollable = isScrollable$ | async;
+    @let showFooterBorder =
+      (!bodyHasScrolledFrom().top && isScrollable) || bodyHasScrolledFrom().bottom;
+    <div
+      class="tw-border-0 tw-border-t tw-border-solid"
+      [ngClass]="{
+        'tw-border-transparent': !showFooterBorder,
+        'tw-border-secondary-100': showFooterBorder,
+      }"
+      data-chromatic="ignore"
+    ></div>
     <footer
       class="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-bg-background tw-py-5 tw-ps-6 tw-pe-4"
       [ngClass]="{
diff --git a/libs/components/src/dialog/dialog/dialog.stories.ts b/libs/components/src/dialog/dialog/dialog.stories.ts
index f3321b924fd1..a33f81968e16 100644
--- a/libs/components/src/dialog/dialog/dialog.stories.ts
+++ b/libs/components/src/dialog/dialog/dialog.stories.ts
@@ -290,6 +290,21 @@ export const WithCards: Story = {
   },
 };
 
+export const WithoutFooter: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+      <bit-dialog [dialogSize]="dialogSize" [title]="title" [subtitle]="subtitle" [loading]="loading" [disablePadding]="disablePadding" [disableAnimations]="disableAnimations" background="alt">
+        <ng-container bitDialogContent>Dialog body text goes here.</ng-container>
+      </bit-dialog>
+    `,
+  }),
+  args: {
+    dialogSize: "default",
+    title: "Without Footer",
+  },
+};
+
 export const HeaderEnd: Story = {
   render: (args) => ({
     props: args,

From abd3feb95109502a1a336ce6fb4e9dc011e7a1cd Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 2 Apr 2026 14:46:24 -0500
Subject: [PATCH 18/39] prettier fixes

---
 .../individual-vault/vault-header/vault-header.component.ts     | 2 +-
 .../src/components/add-item-dialog/add-item-dialog.component.ts | 2 +-
 .../src/components/new-cipher-menu/new-cipher-menu.component.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts
index 1003b85cab35..8edb9cb7667c 100644
--- a/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.ts
@@ -133,7 +133,7 @@ export class VaultHeaderComponent {
     private readonly router: Router,
     private readonly configService: ConfigService,
     private readonly accountService: AccountService,
-  ) { }
+  ) {}
 
   /**
    * The id of the organization that is currently being filtered on.
diff --git a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts
index 421f011a9e32..47ad51a27a5e 100644
--- a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts
+++ b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts
@@ -36,7 +36,7 @@ export class AddItemDialogComponent {
   constructor(
     private readonly dialogRef: DialogRef<AddItemDialogCloseResult>,
     @Inject(DIALOG_DATA) readonly data: AddItemDialogData,
-  ) { }
+  ) {}
 
   protected onCipherSelected(cipherType: CipherType): void {
     this.dialogRef.close({ result: AddItemDialogResult.Cipher, cipherType });
diff --git a/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts b/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts
index ea0c122824ec..4e88171684bc 100644
--- a/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts
+++ b/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts
@@ -59,7 +59,7 @@ export class NewCipherMenuComponent {
   constructor(
     private restrictedItemTypesService: RestrictedItemTypesService,
     private configService: ConfigService,
-  ) { }
+  ) {}
 
   /**
    * Returns an observable that emits the cipher menu items, filtered by the restricted types.

From bf5cf609ffa2b79d16e6d595497f10c21d37de67 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 2 Apr 2026 20:55:01 -0500
Subject: [PATCH 19/39] address local claude feedback

---
 .../collection-dialog.component.spec.ts       | 31 ++++++++++++++-----
 .../collection-dialog.component.ts            | 19 +++++-------
 .../vault-item-dialog.component.ts            | 20 +++++-------
 .../add-edit-folder-dialog.component.spec.ts  |  1 +
 .../add-edit-folder-dialog.component.ts       | 21 ++++++-------
 .../add-item-dialog.component.html            |  4 +--
 .../add-item-dialog.component.spec.ts         | 21 ++++++++-----
 .../add-item-grid.component.spec.ts           |  2 +-
 .../new-cipher-menu.component.ts              | 16 +++-------
 9 files changed, 71 insertions(+), 64 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.spec.ts b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.spec.ts
index ac8f25f1fcd7..5cce0ccf63ed 100644
--- a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.spec.ts
+++ b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.spec.ts
@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { FormBuilder } from "@angular/forms";
 import { By } from "@angular/platform-browser";
 import { mock, MockProxy } from "jest-mock-extended";
+import { of } from "rxjs";
 
 import {
   CollectionAdminService,
@@ -9,7 +10,7 @@ import {
   OrganizationUserApiService,
 } from "@bitwarden/admin-console/common";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { OrganizationId } from "@bitwarden/common/types/guid";
@@ -25,9 +26,12 @@ import {
 } from "./collection-dialog.component";
 
 describe("CollectionDialogComponent", () => {
+  let component: CollectionDialogComponent;
   let fixture: ComponentFixture<CollectionDialogComponent>;
 
   let mockDialogRef: MockProxy<DialogRef<any>>;
+  let mockCollectionAdminService: MockProxy<CollectionAdminService>;
+  let mockOrgUserApiService: MockProxy<OrganizationUserApiService>;
 
   const mockOrgId = newGuid() as OrganizationId;
 
@@ -37,27 +41,39 @@ describe("CollectionDialogComponent", () => {
 
   beforeEach(async () => {
     mockDialogRef = mock<DialogRef<any>>();
+    mockCollectionAdminService = mock<CollectionAdminService>();
+    mockCollectionAdminService.collectionAdminViews$.mockReturnValue(of([]));
+    mockOrgUserApiService = mock<OrganizationUserApiService>();
+    mockOrgUserApiService.getAllMiniUserDetails.mockReturnValue(of({ data: [] }) as any);
 
     await TestBed.configureTestingModule({
       imports: [CollectionDialogComponent],
       providers: [
         FormBuilder,
         { provide: DIALOG_DATA, useValue: defaultParams },
-        { provide: OrganizationService, useValue: mock<OrganizationService>() },
+        {
+          provide: OrganizationService,
+          useValue: {
+            organizations$: () =>
+              of([{ canCreateNewCollections: true, name: "Organization 1", id: mockOrgId }]),
+          },
+        },
         { provide: GroupApiService, useValue: mock<GroupApiService>() },
-        { provide: CollectionAdminService, useValue: mock<CollectionAdminService>() },
+        { provide: CollectionAdminService, useValue: mockCollectionAdminService },
         { provide: I18nService, useValue: { t: (key: string) => key } },
-        { provide: OrganizationUserApiService, useValue: mock<OrganizationUserApiService>() },
+        { provide: OrganizationUserApiService, useValue: mockOrgUserApiService },
         { provide: DialogService, useValue: mock<DialogService>() },
-        { provide: AccountService, useValue: mock<AccountService>() },
+        { provide: AccountService, useValue: { activeAccount$: of({ id: newGuid() } as Account) } },
         { provide: ToastService, useValue: mock<ToastService>() },
-        { provide: CollectionService, useValue: mock<CollectionService>() },
+        { provide: CollectionService, useValue: { encryptedCollections$: () => of([]) } },
         { provide: ConfigService, useValue: mock<ConfigService>() },
         { provide: DialogRef, useValue: mockDialogRef },
       ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(CollectionDialogComponent);
+    component = fixture.componentInstance;
+    (component as any).organizations$ = of([]);
     fixture.detectChanges();
   });
 
@@ -76,9 +92,10 @@ describe("CollectionDialogComponent", () => {
     describe("when backAction param is provided", () => {
       let mockBackAction: jest.Mock;
 
-      beforeEach(() => {
+      beforeEach(async () => {
         mockBackAction = jest.fn();
         defaultParams.backAction = mockBackAction;
+        await component.ngOnInit();
         fixture.detectChanges();
       });
 
diff --git a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts
index 17472f549399..5502c426d39f 100644
--- a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts
+++ b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts
@@ -152,6 +152,7 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
   protected showAddAccessWarning = false;
   protected buttonDisplayName: ButtonType = ButtonType.Save;
   protected initialPermission: CollectionPermission;
+  protected backAction: (() => void) | undefined;
   private orgExceedingCollectionLimit!: Organization;
 
   constructor(
@@ -227,6 +228,13 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
         this.organizationSelected.markAsTouched();
         this.formGroup.updateValueAndValidity();
       });
+
+    if (this.params.backAction) {
+      this.backAction = () => {
+        this.params.backAction();
+        this.close(CollectionDialogAction.Canceled);
+      };
+    }
   }
 
   async loadOrg(orgId: string) {
@@ -349,17 +357,6 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
     return this.formGroup.controls.selectedOrg;
   }
 
-  protected get backAction() {
-    if (!this.params.backAction) {
-      return undefined;
-    }
-
-    return () => {
-      this.params.backAction!();
-      this.close(CollectionDialogAction.Canceled);
-    };
-  }
-
   protected get isExternalIdVisible(): boolean {
     return this.params.isAdminConsoleActive && !!this.formGroup.get("externalId")?.value;
   }
diff --git a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
index 989a19a2c7f1..7eae4031ee06 100644
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
@@ -287,18 +287,6 @@ export class VaultItemDialogComponent implements OnInit, OnDestroy {
     return this.cipher != undefined && (this.params.mode === "view" || this.loadingForm);
   }
 
-  protected get backAction() {
-    if (
-      typeof this.params.backAction === "function" &&
-      this.cipher == null &&
-      this.params.mode === "form"
-    ) {
-      return this.params.backAction;
-    }
-
-    return undefined;
-  }
-
   protected get submitButtonText$(): Observable<string> {
     return this.userHasPremium$.pipe(
       map((hasPremium) =>
@@ -347,6 +335,8 @@ export class VaultItemDialogComponent implements OnInit, OnDestroy {
 
   protected confirmedPremiumUpgrade = false;
 
+  protected backAction: (() => void) | undefined;
+
   constructor(
     @Inject(DIALOG_DATA) protected params: VaultItemDialogParams,
     private dialogRef: DialogRef<VaultItemDialogResult>,
@@ -427,6 +417,12 @@ export class VaultItemDialogComponent implements OnInit, OnDestroy {
 
     this.showRestore = await this.canUserRestore();
     this.performingInitialLoad = false;
+    if (typeof this.params.backAction === "function") {
+      this.backAction = () => {
+        this.params.backAction();
+        this.dialogRef.close();
+      };
+    }
   }
 
   ngOnDestroy() {
diff --git a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.spec.ts b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.spec.ts
index 587b45536211..7ac98833e349 100644
--- a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.spec.ts
+++ b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.spec.ts
@@ -191,6 +191,7 @@ describe("AddEditFolderDialogComponent", () => {
 
       beforeEach(() => {
         dialogData.backAction = mockBackAction;
+        component.ngOnInit();
         fixture.detectChanges();
       });
 
diff --git a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts
index 2635f879be57..60220da55bbc 100644
--- a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts
+++ b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts
@@ -77,6 +77,8 @@ export class AddEditFolderDialogComponent implements AfterViewInit, OnInit {
 
   variant: "add" | "edit" = "add";
 
+  protected backAction: (() => void) | undefined;
+
   folderForm = this.formBuilder.group({
     name: ["", Validators.required],
   });
@@ -107,6 +109,14 @@ export class AddEditFolderDialogComponent implements AfterViewInit, OnInit {
       // Create a new folder view
       this.folder = new FolderView();
     }
+
+    // Set up back action when provided
+    if (this.data?.backAction) {
+      this.backAction = () => {
+        this.data.backAction();
+        this.dialogRef.close();
+      };
+    }
   }
 
   ngAfterViewInit(): void {
@@ -119,17 +129,6 @@ export class AddEditFolderDialogComponent implements AfterViewInit, OnInit {
     });
   }
 
-  protected get backAction() {
-    if (!this.data?.backAction) {
-      return undefined;
-    }
-
-    return () => {
-      this.data?.backAction?.();
-      this.dialogRef.close();
-    };
-  }
-
   /** Submit the new folder */
   submit = async () => {
     if (this.folderForm.invalid) {
diff --git a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.html b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.html
index e47d690952c6..b987b35a0b75 100644
--- a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.html
+++ b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.html
@@ -1,10 +1,10 @@
 <bit-dialog dialogSize="large" background="alt">
-  <div bitDialogTitle class="tw-pt-5 tw-pb-3 tw-flex tw-flex-col tw-gap-2">
+  <span bitDialogTitle class="tw-pt-5 tw-pb-3 tw-flex tw-flex-col tw-gap-2">
     <span>{{ "chooseItemToAdd" | i18n }}</span>
     <span class="tw-text-muted tw-font-normal tw-text-sm">
       {{ "chooseItemToAddDesc" | i18n }}
     </span>
-  </div>
+  </span>
   <div bitDialogContent>
     <vault-add-item-grid
       [canCreateFolder]="data.canCreateFolder"
diff --git a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.spec.ts b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.spec.ts
index 131fee44d6a1..739fceed55d1 100644
--- a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.spec.ts
+++ b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.spec.ts
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { BehaviorSubject } from "rxjs";
 
@@ -7,6 +8,8 @@ import { CipherType } from "@bitwarden/common/vault/enums";
 import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
 import { DIALOG_DATA, DialogRef } from "@bitwarden/components";
 
+import { AddItemGridComponent } from "../add-item-grid/add-item-grid.component";
+
 import {
   AddItemDialogComponent,
   AddItemDialogData,
@@ -14,7 +17,6 @@ import {
 } from "./add-item-dialog.component";
 
 describe("AddItemDialogComponent", () => {
-  let component: AddItemDialogComponent;
   let fixture: ComponentFixture<AddItemDialogComponent>;
   let dialogData: AddItemDialogData;
 
@@ -43,18 +45,21 @@ describe("AddItemDialogComponent", () => {
   function createComponent(data: AddItemDialogData) {
     dialogData = data;
     fixture = TestBed.createComponent(AddItemDialogComponent);
-    component = fixture.componentInstance;
     fixture.detectChanges();
   }
 
-  it("closes with cipher result when onCipherSelected is called", () => {
+  function getGrid(): AddItemGridComponent {
+    return fixture.debugElement.query(By.directive(AddItemGridComponent)).componentInstance;
+  }
+
+  it("closes with cipher result when a cipher type is selected", () => {
     createComponent({
       canCreateFolder: false,
       canCreateCollection: false,
       canCreateSshKey: true,
     });
 
-    component["onCipherSelected"](CipherType.Login);
+    getGrid().cipherSelected.emit(CipherType.Login);
 
     expect(close).toHaveBeenCalledWith({
       result: AddItemDialogResult.Cipher,
@@ -62,26 +67,26 @@ describe("AddItemDialogComponent", () => {
     });
   });
 
-  it("closes with folder result when onFolderSelected is called", () => {
+  it("closes with folder result when a folder is selected", () => {
     createComponent({
       canCreateFolder: true,
       canCreateCollection: false,
       canCreateSshKey: false,
     });
 
-    component["onFolderSelected"]();
+    getGrid().folderSelected.emit();
 
     expect(close).toHaveBeenCalledWith({ result: AddItemDialogResult.Folder });
   });
 
-  it("closes with collection result when onCollectionSelected is called", () => {
+  it("closes with collection result when a collection is selected", () => {
     createComponent({
       canCreateFolder: false,
       canCreateCollection: true,
       canCreateSshKey: false,
     });
 
-    component["onCollectionSelected"]();
+    getGrid().collectionSelected.emit();
 
     expect(close).toHaveBeenCalledWith({ result: AddItemDialogResult.Collection });
   });
diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.spec.ts b/libs/vault/src/components/add-item-grid/add-item-grid.component.spec.ts
index 2f2fdde672ae..c6ad6dd3cf57 100644
--- a/libs/vault/src/components/add-item-grid/add-item-grid.component.spec.ts
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.spec.ts
@@ -8,7 +8,7 @@ import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/res
 
 import { AddItemGridComponent } from "./add-item-grid.component";
 
-describe("AddItemComponent", () => {
+describe("AddItemGridComponent", () => {
   let component: AddItemGridComponent;
   let fixture: ComponentFixture<AddItemGridComponent>;
 
diff --git a/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts b/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts
index 4e88171684bc..a00e85f77a65 100644
--- a/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts
+++ b/libs/vault/src/components/new-cipher-menu/new-cipher-menu.component.ts
@@ -26,18 +26,10 @@ import { I18nPipe } from "@bitwarden/ui-common";
   imports: [ButtonModule, CommonModule, MenuModule, PopoverModule, I18nPipe, JslibModule],
 })
 export class NewCipherMenuComponent {
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  canCreateCipher = input(false);
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  canCreateFolder = input(false);
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  canCreateCollection = input(false);
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  canCreateSshKey = input(false);
+  readonly canCreateCipher = input(false);
+  readonly canCreateFolder = input(false);
+  readonly canCreateCollection = input(false);
+  readonly canCreateSshKey = input(false);
 
   /** Optional popover to anchor to the "New" button for coachmark tours */
   readonly coachmarkPopover = input<PopoverComponent>();

From ced61eeff40bb004386381f50ef1e8fc59877aed Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Fri, 3 Apr 2026 10:45:26 -0500
Subject: [PATCH 20/39] update icons on dialog

---
 .../src/vault/types/cipher-menu-items.ts      | 21 +++++++++++++++++++
 .../add-item-grid/add-item-grid.component.ts  |  6 +++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/libs/common/src/vault/types/cipher-menu-items.ts b/libs/common/src/vault/types/cipher-menu-items.ts
index 8c2759da45af..e3bcbba2bde6 100644
--- a/libs/common/src/vault/types/cipher-menu-items.ts
+++ b/libs/common/src/vault/types/cipher-menu-items.ts
@@ -49,3 +49,24 @@ export const CIPHER_MENU_ITEMS = Object.freeze([
     subtitleKey: "typeSshKeySubtitle",
   },
 ] as const) satisfies readonly CipherMenuItem[];
+
+/**
+ * Updated menu items for new item dialog. This list should only be used
+ * when `FeatureFlag.PM32009NewItemTypes` is enabled, otherwise use `CIPHER_MENU_ITEMS`.
+ */
+export const DIALOG_CIPHER_MENU_ITEMS = CIPHER_MENU_ITEMS.map((item) => {
+  if (item.type === CipherType.Login) {
+    return {
+      ...item,
+      icon: "bwi-lock",
+    };
+  }
+
+  if (item.type === CipherType.Identity) {
+    return {
+      ...item,
+      icon: "bwi-user",
+    };
+  }
+  return item;
+});
diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.ts b/libs/vault/src/components/add-item-grid/add-item-grid.component.ts
index 0782cfde29ed..06fbcfc5f98a 100644
--- a/libs/vault/src/components/add-item-grid/add-item-grid.component.ts
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.ts
@@ -8,7 +8,7 @@ import {
   RestrictedCipherType,
   RestrictedItemTypesService,
 } from "@bitwarden/common/vault/services/restricted-item-types.service";
-import { CIPHER_MENU_ITEMS } from "@bitwarden/common/vault/types/cipher-menu-items";
+import { DIALOG_CIPHER_MENU_ITEMS } from "@bitwarden/common/vault/types/cipher-menu-items";
 import { BitwardenIcon, IconComponent, ItemModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
@@ -40,13 +40,13 @@ export class AddItemGridComponent {
 
   protected readonly items = computed<DialogItem[]>(() => {
     const restrictedTypes = this.restrictedTypes();
-    const items: DialogItem[] = CIPHER_MENU_ITEMS.filter((item) => {
+    const items: DialogItem[] = DIALOG_CIPHER_MENU_ITEMS.filter((item) => {
       if (!this.canCreateSshKey() && item.type === CipherType.SshKey) {
         return false;
       }
       return !restrictedTypes.some((r) => r.cipherType === item.type);
     }).map((item) => ({
-      icon: item.icon,
+      icon: item.icon as BitwardenIcon,
       labelKey: item.labelKey,
       subtitleKey: item.subtitleKey,
       action: () => this.cipherSelected.emit(item.type),

From 760d439f40aa0474f23a39a7f90c1c9d5d03ff41 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Fri, 3 Apr 2026 13:05:33 -0500
Subject: [PATCH 21/39] adjust spacing and sizes

---
 .../components/add-item-grid/add-item-grid.component.html   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.html b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
index 17015ff986f9..8a2841a401d5 100644
--- a/libs/vault/src/components/add-item-grid/add-item-grid.component.html
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
@@ -7,12 +7,14 @@
         class="tw-w-full tw-flex tw-items-center tw-gap-4 tw-rounded-xl tw-border tw-border-solid tw-border-border-base tw-bg-bg-primary tw-py-3 tw-px-4 tw-text-left hover:tw-bg-bg-brand-softer hover:tw-border-bg-brand-soft focus-visible:tw-outline-none focus-visible:tw-bg-bg-brand-softer focus-visible:tw-border-border-focus"
       >
         <div
-          class="tw-flex tw-size-10 tw-shrink-0 tw-items-center tw-justify-center tw-rounded-lg tw-bg-primary-100"
+          class="tw-flex tw-size-9 tw-shrink-0 tw-items-center tw-justify-center tw-rounded-lg tw-bg-primary-100"
         >
           <bit-icon [name]="item.icon" class="tw-text-xl tw-text-primary-600" />
         </div>
         <div class="tw-flex-1">
-          <div class="tw-font-semibold tw-text-main">{{ item.labelKey | i18n }}</div>
+          <div class="tw-font-semibold tw-mb-0.5" bitTypography="h6">
+            {{ item.labelKey | i18n }}
+          </div>
           <div class="tw-text-sm tw-text-muted">{{ item.subtitleKey | i18n }}</div>
         </div>
         <bit-icon name="bwi-angle-right" class="tw-text-muted" />

From c314f784a728b3ed20aa682d4159a91132fe412d Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Fri, 3 Apr 2026 13:07:06 -0500
Subject: [PATCH 22/39] fix strict typings

---
 .../add-edit-folder-dialog/add-edit-folder-dialog.component.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts
index 60220da55bbc..1b89fc9c9719 100644
--- a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts
+++ b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts
@@ -113,7 +113,7 @@ export class AddEditFolderDialogComponent implements AfterViewInit, OnInit {
     // Set up back action when provided
     if (this.data?.backAction) {
       this.backAction = () => {
-        this.data.backAction();
+        this.data?.backAction?.();
         this.dialogRef.close();
       };
     }

From 6a7f6b4e9d6c8c611212b701401edacb052a971a Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Fri, 3 Apr 2026 13:11:34 -0500
Subject: [PATCH 23/39] add typography import

---
 .../src/components/add-item-grid/add-item-grid.component.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.ts b/libs/vault/src/components/add-item-grid/add-item-grid.component.ts
index 06fbcfc5f98a..4b2b1e51ee39 100644
--- a/libs/vault/src/components/add-item-grid/add-item-grid.component.ts
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.ts
@@ -9,7 +9,7 @@ import {
   RestrictedItemTypesService,
 } from "@bitwarden/common/vault/services/restricted-item-types.service";
 import { DIALOG_CIPHER_MENU_ITEMS } from "@bitwarden/common/vault/types/cipher-menu-items";
-import { BitwardenIcon, IconComponent, ItemModule } from "@bitwarden/components";
+import { BitwardenIcon, IconComponent, ItemModule, TypographyModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
 type DialogItem = {
@@ -23,7 +23,7 @@ type DialogItem = {
   selector: "vault-add-item-grid",
   templateUrl: "./add-item-grid.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, JslibModule, I18nPipe, IconComponent, ItemModule],
+  imports: [CommonModule, JslibModule, I18nPipe, IconComponent, ItemModule, TypographyModule],
 })
 export class AddItemGridComponent {
   readonly canCreateFolder = input(false);

From ac81e6dea70d032525378413e6a33f36a8efa3e7 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Fri, 3 Apr 2026 13:40:55 -0500
Subject: [PATCH 24/39] design pass after working on other platforms

---
 .../vault-item-dialog/vault-item-dialog.component.ts           | 3 ++-
 .../src/components/add-item-grid/add-item-grid.component.html  | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
index 7eae4031ee06..34237097e5ba 100644
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
@@ -480,7 +480,8 @@ export class VaultItemDialogComponent implements OnInit, OnDestroy {
     this.canEdit = await firstValueFrom(
       this.cipherAuthorizationService.canEditCipher$(this.cipher, this.params.isAdminConsoleAction),
     );
-
+    // Clear the back action to avoid going back to the new item dialog
+    this.backAction = undefined;
     await this.changeMode("view");
   }
 
diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.html b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
index 8a2841a401d5..16b7fffcb0b2 100644
--- a/libs/vault/src/components/add-item-grid/add-item-grid.component.html
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
@@ -12,7 +12,7 @@
           <bit-icon [name]="item.icon" class="tw-text-xl tw-text-primary-600" />
         </div>
         <div class="tw-flex-1">
-          <div class="tw-font-semibold tw-mb-0.5" bitTypography="h6">
+          <div bitTypography="h6" class="tw-font-semibold !tw-mb-0.5">
             {{ item.labelKey | i18n }}
           </div>
           <div class="tw-text-sm tw-text-muted">{{ item.subtitleKey | i18n }}</div>

From 6bbf459f330c3007ebf34b160cec6f7bb24d6eed Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Mon, 6 Apr 2026 12:40:15 -0500
Subject: [PATCH 25/39] update to use the icon tile component

---
 .../add-item-grid/add-item-grid.component.html        |  6 +-----
 .../add-item-grid/add-item-grid.component.ts          | 11 ++++++++---
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.html b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
index 16b7fffcb0b2..5db8aa1d8a5a 100644
--- a/libs/vault/src/components/add-item-grid/add-item-grid.component.html
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
@@ -6,11 +6,7 @@
         (click)="item.action()"
         class="tw-w-full tw-flex tw-items-center tw-gap-4 tw-rounded-xl tw-border tw-border-solid tw-border-border-base tw-bg-bg-primary tw-py-3 tw-px-4 tw-text-left hover:tw-bg-bg-brand-softer hover:tw-border-bg-brand-soft focus-visible:tw-outline-none focus-visible:tw-bg-bg-brand-softer focus-visible:tw-border-border-focus"
       >
-        <div
-          class="tw-flex tw-size-9 tw-shrink-0 tw-items-center tw-justify-center tw-rounded-lg tw-bg-primary-100"
-        >
-          <bit-icon [name]="item.icon" class="tw-text-xl tw-text-primary-600" />
-        </div>
+        <bit-icon-tile [icon]="item.icon" [variant]="'primary'" [size]="'base'"></bit-icon-tile>
         <div class="tw-flex-1">
           <div bitTypography="h6" class="tw-font-semibold !tw-mb-0.5">
             {{ item.labelKey | i18n }}
diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.ts b/libs/vault/src/components/add-item-grid/add-item-grid.component.ts
index 4b2b1e51ee39..523aeb45528a 100644
--- a/libs/vault/src/components/add-item-grid/add-item-grid.component.ts
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.ts
@@ -2,14 +2,19 @@ import { CommonModule } from "@angular/common";
 import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
 import { toSignal } from "@angular/core/rxjs-interop";
 
-import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import {
   RestrictedCipherType,
   RestrictedItemTypesService,
 } from "@bitwarden/common/vault/services/restricted-item-types.service";
 import { DIALOG_CIPHER_MENU_ITEMS } from "@bitwarden/common/vault/types/cipher-menu-items";
-import { BitwardenIcon, IconComponent, ItemModule, TypographyModule } from "@bitwarden/components";
+import {
+  BitwardenIcon,
+  IconComponent,
+  ItemModule,
+  TypographyModule,
+  IconTileComponent,
+} from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
 type DialogItem = {
@@ -23,7 +28,7 @@ type DialogItem = {
   selector: "vault-add-item-grid",
   templateUrl: "./add-item-grid.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, JslibModule, I18nPipe, IconComponent, ItemModule, TypographyModule],
+  imports: [CommonModule, I18nPipe, IconTileComponent, IconComponent, ItemModule, TypographyModule],
 })
 export class AddItemGridComponent {
   readonly canCreateFolder = input(false);

From dc66202da6a2b055e200d0e431c5b0bdd543275e Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Tue, 7 Apr 2026 15:00:06 -0500
Subject: [PATCH 26/39] address feedback from design

---
 .../src/components/add-item-grid/add-item-grid.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.html b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
index 5db8aa1d8a5a..5d1657b254e5 100644
--- a/libs/vault/src/components/add-item-grid/add-item-grid.component.html
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
@@ -8,12 +8,12 @@
       >
         <bit-icon-tile [icon]="item.icon" [variant]="'primary'" [size]="'base'"></bit-icon-tile>
         <div class="tw-flex-1">
-          <div bitTypography="h6" class="tw-font-semibold !tw-mb-0.5">
+          <div bitTypography="h6" class="!tw-mb-0.5">
             {{ item.labelKey | i18n }}
           </div>
           <div class="tw-text-sm tw-text-muted">{{ item.subtitleKey | i18n }}</div>
         </div>
-        <bit-icon name="bwi-angle-right" class="tw-text-muted" />
+        <bit-icon name="bwi-angle-right" class="tw-text-main bwi-lg" />
       </button>
     </li>
   }

From 2a839d2ca17f237bdb4b6601695897d0849fffc2 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 9 Apr 2026 10:05:21 -0500
Subject: [PATCH 27/39] update grid to use bit item

---
 .../add-item-grid.component.html              | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.html b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
index 5d1657b254e5..352719d2eab7 100644
--- a/libs/vault/src/components/add-item-grid/add-item-grid.component.html
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
@@ -1,20 +1,28 @@
 <ul class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-list-none tw-p-0 tw-m-0">
   @for (item of items(); track item.labelKey) {
     <li>
-      <button
-        type="button"
-        (click)="item.action()"
-        class="tw-w-full tw-flex tw-items-center tw-gap-4 tw-rounded-xl tw-border tw-border-solid tw-border-border-base tw-bg-bg-primary tw-py-3 tw-px-4 tw-text-left hover:tw-bg-bg-brand-softer hover:tw-border-bg-brand-soft focus-visible:tw-outline-none focus-visible:tw-bg-bg-brand-softer focus-visible:tw-border-border-focus"
-      >
-        <bit-icon-tile [icon]="item.icon" [variant]="'primary'" [size]="'base'"></bit-icon-tile>
-        <div class="tw-flex-1">
+      <bit-item>
+        <button
+          type="button"
+          (click)="item.action()"
+          bit-item-content
+          class="tw-w-full tw-flex tw-items-center tw-gap-4"
+        >
+          <bit-icon-tile
+            slot="start"
+            [icon]="item.icon"
+            [variant]="'primary'"
+            [size]="'base'"
+          ></bit-icon-tile>
           <div bitTypography="h6" class="!tw-mb-0.5">
             {{ item.labelKey | i18n }}
           </div>
           <div class="tw-text-sm tw-text-muted">{{ item.subtitleKey | i18n }}</div>
-        </div>
-        <bit-icon name="bwi-angle-right" class="tw-text-main bwi-lg" />
-      </button>
+        </button>
+        <ng-container slot="end">
+          <bit-icon name="bwi-angle-right" class="tw-text-main bwi-lg" />
+        </ng-container>
+      </bit-item>
     </li>
   }
 </ul>

From 73fec8b4f570be8df4333e494dc1d0bb533b343a Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 9 Apr 2026 10:17:37 -0500
Subject: [PATCH 28/39] remove dialog description

---
 apps/web/src/locales/en/messages.json                      | 3 ---
 .../add-item-dialog/add-item-dialog.component.html         | 7 ++-----
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index c56d6b80bf30..cbda5b63aa2e 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -1081,9 +1081,6 @@
   "chooseItemToAdd": {
     "message": "Choose item to add"
   },
-  "chooseItemToAddDesc": {
-    "message": "Select the item type you want to add to your vault."
-  },
   "editItem": {
     "message": "Edit item"
   },
diff --git a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.html b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.html
index b987b35a0b75..a790f8b49872 100644
--- a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.html
+++ b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.html
@@ -1,9 +1,6 @@
 <bit-dialog dialogSize="large" background="alt">
-  <span bitDialogTitle class="tw-pt-5 tw-pb-3 tw-flex tw-flex-col tw-gap-2">
-    <span>{{ "chooseItemToAdd" | i18n }}</span>
-    <span class="tw-text-muted tw-font-normal tw-text-sm">
-      {{ "chooseItemToAddDesc" | i18n }}
-    </span>
+  <span bitDialogTitle>
+    {{ "chooseItemToAdd" | i18n }}
   </span>
   <div bitDialogContent>
     <vault-add-item-grid

From d3e9fc1c7b9001e6edbcb657f6f272c383eb7ea6 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 9 Apr 2026 10:54:01 -0500
Subject: [PATCH 29/39] update to single column when less than 6 items

---
 .../components/add-item-grid/add-item-grid.component.html | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.html b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
index 352719d2eab7..10e06909c165 100644
--- a/libs/vault/src/components/add-item-grid/add-item-grid.component.html
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
@@ -1,5 +1,9 @@
-<ul class="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-list-none tw-p-0 tw-m-0">
-  @for (item of items(); track item.labelKey) {
+@let allItems = items();
+<ul
+  class="tw-grid tw-grid-cols-1 tw-gap-x-4 tw-gap-y-0.5 tw-list-none tw-p-0 tw-m-0"
+  [ngClass]="{ 'md:tw-grid-cols-2': allItems.length >= 6 }"
+>
+  @for (item of allItems; track item.labelKey) {
     <li>
       <bit-item>
         <button

From 07b99d24e4d5c42787861ca1af0f94cd9d2fa60d Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 9 Apr 2026 14:25:10 -0500
Subject: [PATCH 30/39] Revert "add dialog header start slot for dialog"

This reverts commit e029cdecdce69b7237af214436d227a976105976.
---
 libs/components/src/dialog/dialog/dialog.component.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index d6c3ad87ac5e..67386d7a548b 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -11,7 +11,7 @@
 >
   @let showHeaderBorder = bodyHasScrolledFrom().top;
   <header
-    class="tw-flex tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-py-3 tw-ps-6 tw-pe-4"
+    class="tw-flex tw-justify-between tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-py-3 tw-ps-6 tw-pe-4"
     [ngClass]="{
       'tw-p-4 has-[[biticonbutton]]:tw-pe-2': !isDrawer,
       'tw-px-6 tw-py-4 has-[[biticonbutton]]:tw-pe-4': isDrawer,
@@ -19,7 +19,6 @@
       'tw-border-transparent': !showHeaderBorder,
     }"
   >
-    <ng-content select="[bitDialogHeaderStart]"></ng-content>
     <h2
       bitDialogTitleContainer
       bitTypography="h3"
@@ -37,7 +36,7 @@
       <ng-content select="[bitDialogTitle]"></ng-content>
     </h2>
 
-    <div class="tw-flex tw-items-center tw-justify-center tw-ms-auto">
+    <div class="tw-flex tw-items-center tw-justify-center">
       <ng-content select="[bitDialogHeaderEnd]"></ng-content>
 
       @if (!this.dialogRef?.disableClose) {

From 7fc9c8a49c6ac63752792f03a8e79ca0fb95671a Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 9 Apr 2026 14:39:59 -0500
Subject: [PATCH 31/39] remove back action for new cipher dialog

---
 .../collections/vault.component.ts            | 19 +++++------------
 .../collection-dialog.component.html          | 13 ------------
 .../collection-dialog.component.ts            | 12 -----------
 .../vault-item-dialog.component.html          | 12 -----------
 .../vault-item-dialog.component.ts            | 17 ---------------
 .../vault/individual-vault/vault.component.ts | 21 +++++++------------
 .../add-edit-folder-dialog.component.html     | 13 ------------
 .../add-edit-folder-dialog.component.ts       | 12 -----------
 8 files changed, 13 insertions(+), 106 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
index e82af4962da5..4f100ff692ef 100644
--- a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
+++ b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
@@ -855,14 +855,14 @@ export class VaultComponent implements OnInit, OnDestroy {
       return;
     }
     if (result.result === AddItemDialogResult.Cipher) {
-      await this.addCipher(result.cipherType, true);
+      await this.addCipher(result.cipherType);
     } else if (result.result === AddItemDialogResult.Collection) {
-      await this.addCollection(true);
+      await this.addCollection();
     }
   }
 
   /** Opens the Add/Edit Dialog */
-  async addCipher(cipherType?: CipherType, addItemDialogOnClose?: boolean) {
+  async addCipher(cipherType?: CipherType) {
     const cipherFormConfig = await this.cipherFormConfigService.buildConfig(
       "add",
       undefined,
@@ -877,13 +877,7 @@ export class VaultComponent implements OnInit, OnDestroy {
       collectionIds: collectionId ? [collectionId] : [],
     };
 
-    await this.openVaultItemDialog(
-      "form",
-      cipherFormConfig,
-      undefined,
-      undefined,
-      addItemDialogOnClose,
-    );
+    await this.openVaultItemDialog("form", cipherFormConfig);
   }
 
   /**
@@ -951,7 +945,6 @@ export class VaultComponent implements OnInit, OnDestroy {
     formConfig: CipherFormConfig,
     cipher?: CipherView,
     activeCollectionId?: CollectionId,
-    addItemDialogOnClose?: boolean,
   ) {
     this.vaultItemDialogRef = VaultItemDialogComponent.open(this.dialogService, {
       mode,
@@ -959,7 +952,6 @@ export class VaultComponent implements OnInit, OnDestroy {
       activeCollectionId,
       isAdminConsoleAction: true,
       restore: this.restore,
-      backAction: addItemDialogOnClose ? this.openAddItemDialog.bind(this) : undefined,
     });
 
     const result = await lastValueFrom(this.vaultItemDialogRef.closed);
@@ -1295,7 +1287,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     }
   }
 
-  async addCollection(navigateBackToItemDialog?: boolean): Promise<void> {
+  async addCollection(): Promise<void> {
     const organization = await firstValueFrom(this.organization$);
     const selectedCollection = await firstValueFrom(this.selectedCollection$);
     const dialog = openCollectionDialog(this.dialogService, {
@@ -1304,7 +1296,6 @@ export class VaultComponent implements OnInit, OnDestroy {
         parentCollectionId: selectedCollection?.node.id,
         limitNestedCollections: !organization.canEditAnyCollection,
         isAdminConsoleActive: true,
-        backAction: navigateBackToItemDialog ? this.openAddItemDialog.bind(this) : undefined,
       },
     });
 
diff --git a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.html b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.html
index 459149c31d7f..55cd5f79b34d 100644
--- a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.html
+++ b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.html
@@ -1,18 +1,5 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit">
   <bit-dialog [disablePadding]="!loading" dialogSize="large">
-    @if (backAction) {
-      <button
-        type="button"
-        bitIconButton="bwi-angle-left"
-        buttonType="primaryGhost"
-        size="default"
-        [label]="'back' | i18n"
-        (click)="backAction()"
-        class="-tw-ms-3"
-        data-testid="collection-dialog-back-button"
-        bitDialogHeaderStart
-      ></button>
-    }
     <span bitDialogTitle>
       <ng-container *ngIf="editMode">
         {{ (dialogReadonly ? "viewCollection" : "editCollection") | i18n }}
diff --git a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts
index 5502c426d39f..2f9ddddd8cb1 100644
--- a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts
+++ b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.ts
@@ -102,10 +102,6 @@ export interface CollectionDialogParams {
   readonly?: boolean;
   isAddAccessCollection?: boolean;
   isAdminConsoleActive?: boolean;
-  /**
-   * When provided, a "Back" button is shown and the provided method will be invoked.
-   */
-  backAction?: () => void;
 }
 
 export interface CollectionDialogResult {
@@ -152,7 +148,6 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
   protected showAddAccessWarning = false;
   protected buttonDisplayName: ButtonType = ButtonType.Save;
   protected initialPermission: CollectionPermission;
-  protected backAction: (() => void) | undefined;
   private orgExceedingCollectionLimit!: Organization;
 
   constructor(
@@ -228,13 +223,6 @@ export class CollectionDialogComponent implements OnInit, OnDestroy {
         this.organizationSelected.markAsTouched();
         this.formGroup.updateValueAndValidity();
       });
-
-    if (this.params.backAction) {
-      this.backAction = () => {
-        this.params.backAction();
-        this.close(CollectionDialogAction.Canceled);
-      };
-    }
   }
 
   async loadOrg(orgId: string) {
diff --git a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
index a736dbd74e1e..faa54406e8c1 100644
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.html
@@ -1,16 +1,4 @@
 <bit-dialog dialogSize="large" background="alt" [loading]="performingInitialLoad">
-  @if (backAction) {
-    <button
-      type="button"
-      bitIconButton="bwi-angle-left"
-      buttonType="primaryGhost"
-      size="default"
-      [label]="'back' | i18n"
-      (click)="backAction()"
-      class="-tw-ms-3"
-      bitDialogHeaderStart
-    ></button>
-  }
   <span bitDialogTitle class="tw-flex tw-items-center tw-gap-1" aria-live="polite">
     {{ title }}
   </span>
diff --git a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
index e49bfe948747..9f04cda703be 100644
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
@@ -102,12 +102,6 @@ export interface VaultItemDialogParams {
    * Function to restore a cipher from the trash.
    */
   restore?: (c: CipherViewLike) => Promise<void>;
-
-  /**
-   * When provided, a "Back" button is shown when creating a new cipher (cipher == null),
-   * and the provided method will be invoked.
-   */
-  backAction?: () => void;
 }
 
 export const VaultItemDialogResult = {
@@ -335,8 +329,6 @@ export class VaultItemDialogComponent implements OnInit, OnDestroy {
 
   protected confirmedPremiumUpgrade = false;
 
-  protected backAction: (() => void) | undefined;
-
   constructor(
     @Inject(DIALOG_DATA) protected params: VaultItemDialogParams,
     private dialogRef: DialogRef<VaultItemDialogResult>,
@@ -417,12 +409,6 @@ export class VaultItemDialogComponent implements OnInit, OnDestroy {
 
     this.showRestore = await this.canUserRestore();
     this.performingInitialLoad = false;
-    if (typeof this.params.backAction === "function") {
-      this.backAction = () => {
-        this.params.backAction();
-        this.dialogRef.close();
-      };
-    }
   }
 
   ngOnDestroy() {
@@ -476,9 +462,6 @@ export class VaultItemDialogComponent implements OnInit, OnDestroy {
     this.formConfig.originalCipher = cipher;
     this._cipherModified = true;
 
-    // Clear the back action to avoid going back to the new item dialog
-    this.backAction = undefined;
-
     // Update canEdit based on the saved cipher (important for newly created items where canEdit was never set)
     this.canEdit = await firstValueFrom(
       this.cipherAuthorizationService.canEditCipher$(this.cipher, this.params.isAdminConsoleAction),
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.ts b/apps/web/src/app/vault/individual-vault/vault.component.ts
index 0075d4136de2..94455221fb5d 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault.component.ts
@@ -832,10 +832,8 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
     await this.filterComponent()?.filters?.organizationFilter?.action(orgNode);
   }
 
-  addFolder = (navigateToAddItemDialog?: boolean): void => {
-    AddEditFolderDialogComponent.open(this.dialogService, {
-      backAction: navigateToAddItemDialog ? this.openAddItemDialog.bind(this) : undefined,
-    });
+  addFolder = (): void => {
+    AddEditFolderDialogComponent.open(this.dialogService);
   };
 
   editFolder = async (folder: FolderFilter): Promise<void> => {
@@ -927,14 +925,12 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
     mode: VaultItemDialogMode,
     formConfig: CipherFormConfig,
     activeCollectionId?: CollectionId,
-    navigateBackToItemDialog?: boolean,
   ) {
     this.vaultItemDialogRef = VaultItemDialogComponent.open(this.dialogService, {
       mode,
       formConfig,
       activeCollectionId,
       restore: this.restore,
-      backAction: navigateBackToItemDialog ? this.openAddItemDialog.bind(this) : undefined,
     });
 
     const result = await lastValueFrom(this.vaultItemDialogRef.closed);
@@ -972,11 +968,11 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
       return;
     }
     if (result.result === AddItemDialogResult.Cipher) {
-      await this.addCipher(result.cipherType, true);
+      await this.addCipher(result.cipherType);
     } else if (result.result === AddItemDialogResult.Folder) {
-      this.addFolder(true);
+      this.addFolder();
     } else {
-      await this.addCollection(true);
+      await this.addCollection();
     }
   }
 
@@ -984,7 +980,7 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
    * Opens the add cipher dialog.
    * @param cipherType The type of cipher to add.
    */
-  async addCipher(cipherType?: CipherType, navigateBackToItemDialog?: boolean) {
+  async addCipher(cipherType?: CipherType) {
     const type = cipherType ?? this.activeFilter.cipherType;
     const cipherFormConfig = await this.cipherFormConfigService.buildConfig("add", undefined, type);
     const collectionId =
@@ -1010,7 +1006,7 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
       folderId: this.activeFilter.folderId,
     };
 
-    await this.openVaultItemDialog("form", cipherFormConfig, undefined, navigateBackToItemDialog);
+    await this.openVaultItemDialog("form", cipherFormConfig);
   }
 
   async editCipher(cipher: CipherView | CipherListView, cloneMode?: boolean) {
@@ -1102,7 +1098,7 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
     );
   }
 
-  async addCollection(navigateBackToItemDialog?: boolean): Promise<void> {
+  async addCollection(): Promise<void> {
     const dialog = openCollectionDialog(this.dialogService, {
       data: {
         organizationId: this.allOrganizations
@@ -1111,7 +1107,6 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
         parentCollectionId: this.filter.collectionId,
         showOrgSelector: true,
         limitNestedCollections: true,
-        backAction: navigateBackToItemDialog ? this.openAddItemDialog.bind(this) : undefined,
       },
     });
     const result = await lastValueFrom(dialog.closed);
diff --git a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.html b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.html
index 31a869a7266e..03f32c1b5152 100644
--- a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.html
+++ b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.html
@@ -1,17 +1,4 @@
 <form [formGroup]="folderForm" [bitSubmit]="submit" bit-dialog id="add-edit-folder">
-  @if (backAction) {
-    <button
-      type="button"
-      bitIconButton="bwi-angle-left"
-      buttonType="primaryGhost"
-      size="default"
-      [label]="'back' | i18n"
-      (click)="backAction()"
-      class="-tw-ms-3"
-      data-testid="folder-dialog-back-button"
-      bitDialogHeaderStart
-    ></button>
-  }
   <span bitDialogTitle>
     {{ (variant === "add" ? "newFolder" : "editFolder") | i18n }}
   </span>
diff --git a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts
index 1b89fc9c9719..759277dd4b89 100644
--- a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts
+++ b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.ts
@@ -45,8 +45,6 @@ export type AddEditFolderDialogResult = UnionOfValues<typeof AddEditFolderDialog
 export type AddEditFolderDialogData = {
   /** When provided, dialog will display edit folder variant */
   editFolderConfig?: { folder: FolderView };
-  /**  When provided, the dialog will show a back button that will trigger the provided callback. */
-  backAction?: () => void;
 };
 
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
@@ -77,8 +75,6 @@ export class AddEditFolderDialogComponent implements AfterViewInit, OnInit {
 
   variant: "add" | "edit" = "add";
 
-  protected backAction: (() => void) | undefined;
-
   folderForm = this.formBuilder.group({
     name: ["", Validators.required],
   });
@@ -109,14 +105,6 @@ export class AddEditFolderDialogComponent implements AfterViewInit, OnInit {
       // Create a new folder view
       this.folder = new FolderView();
     }
-
-    // Set up back action when provided
-    if (this.data?.backAction) {
-      this.backAction = () => {
-        this.data?.backAction?.();
-        this.dialogRef.close();
-      };
-    }
   }
 
   ngAfterViewInit(): void {

From 02b85c73390cd64507fd380e60ac367aa6301143 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 9 Apr 2026 14:41:45 -0500
Subject: [PATCH 32/39] match padding-top of dialog when there is no footer

---
 libs/components/src/dialog/dialog/dialog.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index 67386d7a548b..eacc2f43042f 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -69,7 +69,7 @@
       cdkScrollable
       [ngClass]="{
         'tw-py-2 tw-ps-6 tw-pe-6': !disablePadding(),
-        'tw-pb-6': !hasFooter() && !disablePadding(),
+        'tw-pb-4': !hasFooter() && !disablePadding(),
         'tw-overflow-y-auto': !loading(),
         'tw-invisible tw-overflow-y-hidden': loading(),
         'tw-py-4': background() === 'alt',

From 79989248a4927783743d8c9530bf973474f5cb2f Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 9 Apr 2026 14:54:34 -0500
Subject: [PATCH 33/39] fix alignment of carrot

---
 .../components/add-item-grid/add-item-grid.component.html | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.html b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
index 10e06909c165..74a29b5f007e 100644
--- a/libs/vault/src/components/add-item-grid/add-item-grid.component.html
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
@@ -1,11 +1,11 @@
 @let allItems = items();
 <ul
-  class="tw-grid tw-grid-cols-1 tw-gap-x-4 tw-gap-y-0.5 tw-list-none tw-p-0 tw-m-0"
+  class="tw-grid tw-grid-cols-1 tw-gap-x-4 tw-gap-y-2 tw-list-none tw-p-0 tw-m-0"
   [ngClass]="{ 'md:tw-grid-cols-2': allItems.length >= 6 }"
 >
   @for (item of allItems; track item.labelKey) {
     <li>
-      <bit-item>
+      <bit-item class="tw-mb-0">
         <button
           type="button"
           (click)="item.action()"
@@ -22,10 +22,8 @@
             {{ item.labelKey | i18n }}
           </div>
           <div class="tw-text-sm tw-text-muted">{{ item.subtitleKey | i18n }}</div>
+          <bit-icon slot="end" name="bwi-angle-right" class="tw-text-main bwi-lg" />
         </button>
-        <ng-container slot="end">
-          <bit-icon name="bwi-angle-right" class="tw-text-main bwi-lg" />
-        </ng-container>
       </bit-item>
     </li>
   }

From 7b316051c799a80e5577f2bfa01390d7136bc4e1 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Thu, 9 Apr 2026 16:31:34 -0500
Subject: [PATCH 34/39] remove tests associated back action

---
 .../collection-dialog.component.spec.ts       | 121 ------------------
 .../add-edit-folder-dialog.component.spec.ts  |  36 ------
 2 files changed, 157 deletions(-)
 delete mode 100644 apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.spec.ts

diff --git a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.spec.ts b/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.spec.ts
deleted file mode 100644
index 5cce0ccf63ed..000000000000
--- a/apps/web/src/app/admin-console/organizations/shared/components/collection-dialog/collection-dialog.component.spec.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { FormBuilder } from "@angular/forms";
-import { By } from "@angular/platform-browser";
-import { mock, MockProxy } from "jest-mock-extended";
-import { of } from "rxjs";
-
-import {
-  CollectionAdminService,
-  CollectionService,
-  OrganizationUserApiService,
-} from "@bitwarden/admin-console/common";
-import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
-import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { OrganizationId } from "@bitwarden/common/types/guid";
-import { DIALOG_DATA, DialogRef, DialogService, ToastService } from "@bitwarden/components";
-import { newGuid } from "@bitwarden/guid";
-
-import { GroupApiService } from "../../../core";
-
-import {
-  CollectionDialogAction,
-  CollectionDialogComponent,
-  CollectionDialogParams,
-} from "./collection-dialog.component";
-
-describe("CollectionDialogComponent", () => {
-  let component: CollectionDialogComponent;
-  let fixture: ComponentFixture<CollectionDialogComponent>;
-
-  let mockDialogRef: MockProxy<DialogRef<any>>;
-  let mockCollectionAdminService: MockProxy<CollectionAdminService>;
-  let mockOrgUserApiService: MockProxy<OrganizationUserApiService>;
-
-  const mockOrgId = newGuid() as OrganizationId;
-
-  const defaultParams: CollectionDialogParams = {
-    organizationId: mockOrgId,
-  };
-
-  beforeEach(async () => {
-    mockDialogRef = mock<DialogRef<any>>();
-    mockCollectionAdminService = mock<CollectionAdminService>();
-    mockCollectionAdminService.collectionAdminViews$.mockReturnValue(of([]));
-    mockOrgUserApiService = mock<OrganizationUserApiService>();
-    mockOrgUserApiService.getAllMiniUserDetails.mockReturnValue(of({ data: [] }) as any);
-
-    await TestBed.configureTestingModule({
-      imports: [CollectionDialogComponent],
-      providers: [
-        FormBuilder,
-        { provide: DIALOG_DATA, useValue: defaultParams },
-        {
-          provide: OrganizationService,
-          useValue: {
-            organizations$: () =>
-              of([{ canCreateNewCollections: true, name: "Organization 1", id: mockOrgId }]),
-          },
-        },
-        { provide: GroupApiService, useValue: mock<GroupApiService>() },
-        { provide: CollectionAdminService, useValue: mockCollectionAdminService },
-        { provide: I18nService, useValue: { t: (key: string) => key } },
-        { provide: OrganizationUserApiService, useValue: mockOrgUserApiService },
-        { provide: DialogService, useValue: mock<DialogService>() },
-        { provide: AccountService, useValue: { activeAccount$: of({ id: newGuid() } as Account) } },
-        { provide: ToastService, useValue: mock<ToastService>() },
-        { provide: CollectionService, useValue: { encryptedCollections$: () => of([]) } },
-        { provide: ConfigService, useValue: mock<ConfigService>() },
-        { provide: DialogRef, useValue: mockDialogRef },
-      ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(CollectionDialogComponent);
-    component = fixture.componentInstance;
-    (component as any).organizations$ = of([]);
-    fixture.detectChanges();
-  });
-
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-
-  describe("backAction getter", () => {
-    const backButton = () =>
-      fixture.debugElement.query(By.css("[data-testid='collection-dialog-back-button']"));
-
-    it("does not show the back button when no backAction param is provided", async () => {
-      expect(backButton()).toBeNull();
-    });
-
-    describe("when backAction param is provided", () => {
-      let mockBackAction: jest.Mock;
-
-      beforeEach(async () => {
-        mockBackAction = jest.fn();
-        defaultParams.backAction = mockBackAction;
-        await component.ngOnInit();
-        fixture.detectChanges();
-      });
-
-      afterEach(() => {
-        defaultParams.backAction = undefined;
-      });
-
-      it("calls the provided backAction when invoked", async () => {
-        backButton()?.triggerEventHandler("click", null);
-
-        expect(mockBackAction).toHaveBeenCalledTimes(1);
-      });
-
-      it("closes the dialog with Canceled action when invoked", async () => {
-        backButton()?.triggerEventHandler("click", null);
-        expect(mockDialogRef.close).toHaveBeenCalledWith({
-          action: CollectionDialogAction.Canceled,
-          collection: undefined,
-        });
-      });
-    });
-  });
-});
diff --git a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.spec.ts b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.spec.ts
index 7ac98833e349..a783bdc74068 100644
--- a/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.spec.ts
+++ b/libs/vault/src/components/add-edit-folder-dialog/add-edit-folder-dialog.component.spec.ts
@@ -177,40 +177,4 @@ describe("AddEditFolderDialogComponent", () => {
       expect(close).toHaveBeenCalledWith(AddEditFolderDialogResult.Deleted);
     });
   });
-
-  describe("backAction getter", () => {
-    const backButton = () =>
-      fixture.nativeElement.querySelector("[data-testid='folder-dialog-back-button']");
-
-    it("does not show the back button when no backAction is provided", () => {
-      expect(backButton()).toBeNull();
-    });
-
-    describe("when backAction is provided", () => {
-      const mockBackAction = jest.fn();
-
-      beforeEach(() => {
-        dialogData.backAction = mockBackAction;
-        component.ngOnInit();
-        fixture.detectChanges();
-      });
-
-      afterEach(() => {
-        delete dialogData.backAction;
-        mockBackAction.mockClear();
-      });
-
-      it("calls the provided backAction when clicked", () => {
-        backButton().click();
-
-        expect(mockBackAction).toHaveBeenCalledTimes(1);
-      });
-
-      it("closes the dialog when clicked", () => {
-        backButton().click();
-
-        expect(close).toHaveBeenCalled();
-      });
-    });
-  });
 });

From 406b199b587801b15502a93bb4cd66cf12a48a43 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Fri, 10 Apr 2026 12:55:15 -0500
Subject: [PATCH 35/39] use default bit-item styles for typography

---
 .../components/add-item-grid/add-item-grid.component.html   | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.html b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
index 74a29b5f007e..589b056ca2ac 100644
--- a/libs/vault/src/components/add-item-grid/add-item-grid.component.html
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
@@ -18,10 +18,8 @@
             [variant]="'primary'"
             [size]="'base'"
           ></bit-icon-tile>
-          <div bitTypography="h6" class="!tw-mb-0.5">
-            {{ item.labelKey | i18n }}
-          </div>
-          <div class="tw-text-sm tw-text-muted">{{ item.subtitleKey | i18n }}</div>
+          {{ item.labelKey | i18n }}
+          <div slot="secondary">{{ item.subtitleKey | i18n }}</div>
           <bit-icon slot="end" name="bwi-angle-right" class="tw-text-main bwi-lg" />
         </button>
       </bit-item>

From 4d99067b58dea41b93958357d1f98f8ad9618d51 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Fri, 10 Apr 2026 13:02:45 -0500
Subject: [PATCH 36/39] reduce margin of bit-item

---
 .../src/components/add-item-grid/add-item-grid.component.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.html b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
index 589b056ca2ac..3d2d0f89ec7b 100644
--- a/libs/vault/src/components/add-item-grid/add-item-grid.component.html
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.html
@@ -5,7 +5,7 @@
 >
   @for (item of allItems; track item.labelKey) {
     <li>
-      <bit-item class="tw-mb-0">
+      <bit-item class="!tw-mb-0">
         <button
           type="button"
           (click)="item.action()"

From ea3d9c245e75f87587dd736e47ca2c9fd80ca952 Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Tue, 14 Apr 2026 11:00:07 -0500
Subject: [PATCH 37/39] prefer `inject` function

---
 .../add-item-dialog/add-item-dialog.component.ts          | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts
index 47ad51a27a5e..2768b3156680 100644
--- a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts
+++ b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
 
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { UnionOfValues } from "@bitwarden/common/vault/types/union-of-values";
@@ -33,10 +33,8 @@ export type AddItemDialogData = {
   imports: [DialogModule, I18nPipe, AddItemGridComponent],
 })
 export class AddItemDialogComponent {
-  constructor(
-    private readonly dialogRef: DialogRef<AddItemDialogCloseResult>,
-    @Inject(DIALOG_DATA) readonly data: AddItemDialogData,
-  ) {}
+  protected readonly dialogRef = inject<DialogRef<AddItemDialogCloseResult>>(DialogRef);
+  protected readonly data = inject<AddItemDialogData>(DIALOG_DATA);
 
   protected onCipherSelected(cipherType: CipherType): void {
     this.dialogRef.close({ result: AddItemDialogResult.Cipher, cipherType });

From 6383f6380688ee23fc6f48132fd80c2b93d18e3e Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Tue, 14 Apr 2026 11:03:03 -0500
Subject: [PATCH 38/39] add readonly and protected

---
 .../collections/vault-header/vault-header.component.ts        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.ts b/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.ts
index 0235979b4067..5305c526c130 100644
--- a/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.ts
+++ b/apps/web/src/app/admin-console/organizations/collections/vault-header/vault-header.component.ts
@@ -110,7 +110,7 @@ export class VaultHeaderComponent {
   @Output() searchTextChanged = new EventEmitter<string>();
 
   /** Emits an event when the add item dialog should be opened */
-  onOpenAddItemDialog = output();
+  readonly onOpenAddItemDialog = output();
 
   protected CollectionDialogTabType = CollectionDialogTabType;
 
@@ -221,7 +221,7 @@ export class VaultHeaderComponent {
     this.onAddCipher.emit(cipherType);
   }
 
-  openAddItemDialog(): void {
+  protected openAddItemDialog(): void {
     this.onOpenAddItemDialog.emit();
   }
 

From 5cb3243dddafbe0351fad6d4fe53805e53afa5fb Mon Sep 17 00:00:00 2001
From: Nick Krantz <nick@livefront.com>
Date: Tue, 14 Apr 2026 11:38:19 -0500
Subject: [PATCH 39/39] move types into the grid component to streamline the
 api integration

---
 .../add-item-dialog.component.html            |  4 +--
 .../add-item-dialog.component.spec.ts         |  9 ++++--
 .../add-item-dialog.component.ts              | 30 ++++---------------
 .../add-item-grid.component.spec.ts           | 29 ++++++++++--------
 .../add-item-grid/add-item-grid.component.ts  | 28 +++++++++++------
 5 files changed, 47 insertions(+), 53 deletions(-)

diff --git a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.html b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.html
index a790f8b49872..26eb6d47bb15 100644
--- a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.html
+++ b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.html
@@ -7,9 +7,7 @@
       [canCreateFolder]="data.canCreateFolder"
       [canCreateCollection]="data.canCreateCollection"
       [canCreateSshKey]="data.canCreateSshKey"
-      (cipherSelected)="onCipherSelected($event)"
-      (folderSelected)="onFolderSelected()"
-      (collectionSelected)="onCollectionSelected()"
+      (itemSelected)="onItemSelected($event)"
     />
   </div>
 </bit-dialog>
diff --git a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.spec.ts b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.spec.ts
index 739fceed55d1..b619dbbe0557 100644
--- a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.spec.ts
+++ b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.spec.ts
@@ -59,7 +59,10 @@ describe("AddItemDialogComponent", () => {
       canCreateSshKey: true,
     });
 
-    getGrid().cipherSelected.emit(CipherType.Login);
+    getGrid().itemSelected.emit({
+      result: AddItemDialogResult.Cipher,
+      cipherType: CipherType.Login,
+    });
 
     expect(close).toHaveBeenCalledWith({
       result: AddItemDialogResult.Cipher,
@@ -74,7 +77,7 @@ describe("AddItemDialogComponent", () => {
       canCreateSshKey: false,
     });
 
-    getGrid().folderSelected.emit();
+    getGrid().itemSelected.emit({ result: AddItemDialogResult.Folder });
 
     expect(close).toHaveBeenCalledWith({ result: AddItemDialogResult.Folder });
   });
@@ -86,7 +89,7 @@ describe("AddItemDialogComponent", () => {
       canCreateSshKey: false,
     });
 
-    getGrid().collectionSelected.emit();
+    getGrid().itemSelected.emit({ result: AddItemDialogResult.Collection });
 
     expect(close).toHaveBeenCalledWith({ result: AddItemDialogResult.Collection });
   });
diff --git a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts
index 2768b3156680..c410b5a132be 100644
--- a/libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts
+++ b/libs/vault/src/components/add-item-dialog/add-item-dialog.component.ts
@@ -1,24 +1,12 @@
 import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
 
-import { CipherType } from "@bitwarden/common/vault/enums";
-import { UnionOfValues } from "@bitwarden/common/vault/types/union-of-values";
 import { DIALOG_DATA, DialogModule, DialogRef, DialogService } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
-import { AddItemGridComponent } from "../add-item-grid/add-item-grid.component";
+import { AddItemGridComponent, AddItemGridResult } from "../add-item-grid/add-item-grid.component";
 
-export const AddItemDialogResult = Object.freeze({
-  Cipher: "cipher",
-  Folder: "folder",
-  Collection: "collection",
-} as const);
-
-export type AddItemDialogResult = UnionOfValues<typeof AddItemDialogResult>;
-
-export type AddItemDialogCloseResult =
-  | { result: typeof AddItemDialogResult.Cipher; cipherType: CipherType }
-  | { result: typeof AddItemDialogResult.Folder }
-  | { result: typeof AddItemDialogResult.Collection };
+export { AddItemGridResult as AddItemDialogResult } from "../add-item-grid/add-item-grid.component";
+export type AddItemDialogCloseResult = AddItemGridResult;
 
 export type AddItemDialogData = {
   canCreateFolder: boolean;
@@ -36,16 +24,8 @@ export class AddItemDialogComponent {
   protected readonly dialogRef = inject<DialogRef<AddItemDialogCloseResult>>(DialogRef);
   protected readonly data = inject<AddItemDialogData>(DIALOG_DATA);
 
-  protected onCipherSelected(cipherType: CipherType): void {
-    this.dialogRef.close({ result: AddItemDialogResult.Cipher, cipherType });
-  }
-
-  protected onFolderSelected(): void {
-    this.dialogRef.close({ result: AddItemDialogResult.Folder });
-  }
-
-  protected onCollectionSelected(): void {
-    this.dialogRef.close({ result: AddItemDialogResult.Collection });
+  protected onItemSelected(closeResult: AddItemDialogCloseResult): void {
+    this.dialogRef.close(closeResult);
   }
 
   static open(
diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.spec.ts b/libs/vault/src/components/add-item-grid/add-item-grid.component.spec.ts
index c6ad6dd3cf57..c53948c22ac1 100644
--- a/libs/vault/src/components/add-item-grid/add-item-grid.component.spec.ts
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.spec.ts
@@ -6,7 +6,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
 
-import { AddItemGridComponent } from "./add-item-grid.component";
+import { AddItemGridComponent, AddItemGridResult } from "./add-item-grid.component";
 
 describe("AddItemGridComponent", () => {
   let component: AddItemGridComponent;
@@ -125,51 +125,54 @@ describe("AddItemGridComponent", () => {
     expect(items.map((i) => i.labelKey)).not.toContain("typeLogin");
   });
 
-  it("emits cipherSelected when a cipher type is selected", () => {
+  it("emits itemSelected with cipher result when a cipher type is selected", () => {
     createComponent({
       canCreateFolder: false,
       canCreateCollection: false,
       canCreateSshKey: true,
     });
 
-    const cipherSelected = jest.fn();
-    component.cipherSelected.subscribe(cipherSelected);
+    const itemSelected = jest.fn();
+    component.itemSelected.subscribe(itemSelected);
 
     const loginItem = component["items"]().find((i) => i.labelKey === "typeLogin");
     loginItem!.action();
 
-    expect(cipherSelected).toHaveBeenCalledWith(CipherType.Login);
+    expect(itemSelected).toHaveBeenCalledWith({
+      result: AddItemGridResult.Cipher,
+      cipherType: CipherType.Login,
+    });
   });
 
-  it("emits folderSelected when folder is selected", () => {
+  it("emits itemSelected with folder result when folder is selected", () => {
     createComponent({
       canCreateFolder: true,
       canCreateCollection: false,
       canCreateSshKey: false,
     });
 
-    const folderSelected = jest.fn();
-    component.folderSelected.subscribe(folderSelected);
+    const itemSelected = jest.fn();
+    component.itemSelected.subscribe(itemSelected);
 
     const folderItem = component["items"]().find((i) => i.labelKey === "folder");
     folderItem!.action();
 
-    expect(folderSelected).toHaveBeenCalled();
+    expect(itemSelected).toHaveBeenCalledWith({ result: AddItemGridResult.Folder });
   });
 
-  it("emits collectionSelected when collection is selected", () => {
+  it("emits itemSelected with collection result when collection is selected", () => {
     createComponent({
       canCreateFolder: false,
       canCreateCollection: true,
       canCreateSshKey: false,
     });
 
-    const collectionSelected = jest.fn();
-    component.collectionSelected.subscribe(collectionSelected);
+    const itemSelected = jest.fn();
+    component.itemSelected.subscribe(itemSelected);
 
     const collectionItem = component["items"]().find((i) => i.labelKey === "collection");
     collectionItem!.action();
 
-    expect(collectionSelected).toHaveBeenCalled();
+    expect(itemSelected).toHaveBeenCalledWith({ result: AddItemGridResult.Collection });
   });
 });
diff --git a/libs/vault/src/components/add-item-grid/add-item-grid.component.ts b/libs/vault/src/components/add-item-grid/add-item-grid.component.ts
index 523aeb45528a..1fc345ab4b43 100644
--- a/libs/vault/src/components/add-item-grid/add-item-grid.component.ts
+++ b/libs/vault/src/components/add-item-grid/add-item-grid.component.ts
@@ -17,7 +17,18 @@ import {
 } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
-type DialogItem = {
+export const AddItemGridResult = Object.freeze({
+  Cipher: "cipher",
+  Folder: "folder",
+  Collection: "collection",
+} as const);
+
+export type AddItemGridResult =
+  | { result: typeof AddItemGridResult.Cipher; cipherType: CipherType }
+  | { result: typeof AddItemGridResult.Folder }
+  | { result: typeof AddItemGridResult.Collection };
+
+type GridItem = {
   icon: BitwardenIcon;
   labelKey: string;
   subtitleKey: string;
@@ -35,17 +46,15 @@ export class AddItemGridComponent {
   readonly canCreateCollection = input(false);
   readonly canCreateSshKey = input(false);
 
-  readonly cipherSelected = output<CipherType>();
-  readonly folderSelected = output();
-  readonly collectionSelected = output();
+  readonly itemSelected = output<AddItemGridResult>();
 
   private readonly restrictedTypes = toSignal(this.restrictedItemTypesService.restricted$, {
     initialValue: [] as RestrictedCipherType[],
   });
 
-  protected readonly items = computed<DialogItem[]>(() => {
+  protected readonly items = computed<GridItem[]>(() => {
     const restrictedTypes = this.restrictedTypes();
-    const items: DialogItem[] = DIALOG_CIPHER_MENU_ITEMS.filter((item) => {
+    const items: GridItem[] = DIALOG_CIPHER_MENU_ITEMS.filter((item) => {
       if (!this.canCreateSshKey() && item.type === CipherType.SshKey) {
         return false;
       }
@@ -54,7 +63,8 @@ export class AddItemGridComponent {
       icon: item.icon as BitwardenIcon,
       labelKey: item.labelKey,
       subtitleKey: item.subtitleKey,
-      action: () => this.cipherSelected.emit(item.type),
+      action: () =>
+        this.itemSelected.emit({ result: AddItemGridResult.Cipher, cipherType: item.type }),
     }));
 
     if (this.canCreateFolder()) {
@@ -62,7 +72,7 @@ export class AddItemGridComponent {
         icon: "bwi-folder",
         labelKey: "folder",
         subtitleKey: "folderSubtitle",
-        action: () => this.folderSelected.emit(),
+        action: () => this.itemSelected.emit({ result: AddItemGridResult.Folder }),
       });
     }
 
@@ -71,7 +81,7 @@ export class AddItemGridComponent {
         icon: "bwi-collection-shared",
         labelKey: "collection",
         subtitleKey: "collectionSubtitle",
-        action: () => this.collectionSelected.emit(),
+        action: () => this.itemSelected.emit({ result: AddItemGridResult.Collection }),
       });
     }