From f7d358444f4918cfd16387be10b7ce717b65e28f Mon Sep 17 00:00:00 2001
From: Jason Ng <jng@bitwarden.com>
Date: Tue, 6 Jan 2026 16:34:52 -0500
Subject: [PATCH] [PM-26516] Archive Vault Updates Non Premium (#18068)

* add callout to vault-items for non premium users, add upgrade premium flow
* add archive badge to item details only for desktop
* update desktop edit item save for unarchive
* updated success toast for edited archive item non premium
---
 apps/browser/src/_locales/en/messages.json    |   3 +
 apps/desktop/src/locales/en/messages.json     |  22 +++-
 .../app/vault/item-footer.component.html      |   4 +-
 .../vault/app/vault/item-footer.component.ts  |   3 +
 .../app/vault/vault-items-v2.component.html   |  15 +++
 .../app/vault/vault-items-v2.component.ts     |  17 ++-
 .../vault/app/vault/vault-v2.component.html   |  11 +-
 .../src/vault/app/vault/vault-v2.component.ts | 101 +++++++++++-----
 .../vault-item-dialog.component.html          |   2 +-
 apps/web/src/locales/en/messages.json         |   6 +
 .../default-cipher-archive.service.spec.ts    |   1 +
 .../default-cipher-archive.service.ts         |  11 +-
 .../components/cipher-form.component.ts       |   4 +-
 .../item-details-section.component.html       |   3 +
 .../item-details-section.component.spec.ts    | 114 ++++++++++++------
 .../item-details-section.component.ts         |  30 +++--
 .../item-details-v2.component.html            |  11 +-
 .../item-details-v2.component.spec.ts         |  32 +++++
 .../item-details/item-details-v2.component.ts |  15 ++-
 19 files changed, 316 insertions(+), 89 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index d70025016ca..ca9dde99a95 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -585,6 +585,9 @@
   "upgradeToUseArchive": {
     "message": "A premium membership is required to use Archive."
   },
+  "itemRestored": {
+    "message": "Item has been restored"
+  },
   "edit": {
     "message": "Edit"
   },
diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
index 3ace5308d27..c47817f3ee4 100644
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -4306,6 +4306,9 @@
   "unArchive": {
     "message": "Unarchive"
   },
+  "archived": {
+    "message": "Archived"
+  },
   "itemsInArchive": {
     "message": "Items in archive"
   },
@@ -4327,6 +4330,21 @@
   "archiveItemConfirmDesc": {
     "message": "Archived items are excluded from general search results and autofill suggestions. Are you sure you want to archive this item?"
   },
+  "unArchiveAndSave": {
+    "message": "Unarchive and save"
+  },
+  "restartPremium": {
+    "message": "Restart Premium"
+  },
+  "premiumSubscriptionEnded": {
+    "message": "Your Premium subscription ended"
+  },
+  "premiumSubscriptionEndedDesc": {
+    "message": "To regain access to your archive, restart your Premium subscription. If you edit details for an archived item before restarting, it’ll be moved back into your vault."
+  },
+  "itemRestored": {
+    "message": "Item has been restored"
+  },
   "zipPostalCodeLabel": {
     "message": "ZIP / Postal code"
   },
@@ -4475,7 +4493,7 @@
     "placeholders": {
       "organization": {
         "content": "$1",
-        "example": "My Org Name"  
+        "example": "My Org Name"
       }
     }
   },
@@ -4484,7 +4502,7 @@
     "placeholders": {
       "organization": {
         "content": "$1",
-        "example": "My Org Name"  
+        "example": "My Org Name"
       }
     }
   },
diff --git a/apps/desktop/src/vault/app/vault/item-footer.component.html b/apps/desktop/src/vault/app/vault/item-footer.component.html
index 9d5b1e5e560..a03f3e96b06 100644
--- a/apps/desktop/src/vault/app/vault/item-footer.component.html
+++ b/apps/desktop/src/vault/app/vault/item-footer.component.html
@@ -7,9 +7,9 @@
       [hidden]="action === 'view'"
       bitButton
       class="primary"
-      appA11yTitle="{{ 'save' | i18n }}"
+      appA11yTitle="{{ submitButtonText() }}"
     >
-      {{ "save" | i18n }}
+      {{ submitButtonText() }}
     </button>
     <button
       type="button"
diff --git a/apps/desktop/src/vault/app/vault/item-footer.component.ts b/apps/desktop/src/vault/app/vault/item-footer.component.ts
index 8873b74932c..c80e4e59ae4 100644
--- a/apps/desktop/src/vault/app/vault/item-footer.component.ts
+++ b/apps/desktop/src/vault/app/vault/item-footer.component.ts
@@ -8,6 +8,7 @@ import {
   ViewChild,
   OnChanges,
   SimpleChanges,
+  input,
 } from "@angular/core";
 import { combineLatest, firstValueFrom, switchMap } from "rxjs";
 
@@ -67,6 +68,8 @@ export class ItemFooterComponent implements OnInit, OnChanges {
   // eslint-disable-next-line @angular-eslint/prefer-signals
   @ViewChild("submitBtn", { static: false }) submitBtn: ButtonComponent | null = null;
 
+  readonly submitButtonText = input<string>(this.i18nService.t("save"));
+
   activeUserId: UserId | null = null;
   passwordReprompted: boolean = false;
 
diff --git a/apps/desktop/src/vault/app/vault/vault-items-v2.component.html b/apps/desktop/src/vault/app/vault/vault-items-v2.component.html
index fc14700a7af..84c0cd8a1fb 100644
--- a/apps/desktop/src/vault/app/vault/vault-items-v2.component.html
+++ b/apps/desktop/src/vault/app/vault/vault-items-v2.component.html
@@ -2,6 +2,21 @@
   <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
 </div>
 <ng-container *ngIf="loaded">
+  @if (showPremiumCallout()) {
+    <div class="tw-m-4">
+      <bit-callout type="default" [title]="'premiumSubscriptionEnded' | i18n">
+        <ng-container>
+          <div>
+            {{ "premiumSubscriptionEndedDesc" | i18n }}
+          </div>
+          <a bitLink href="#" appStopClick (click)="navigateToGetPremium()">
+            {{ "restartPremium" | i18n }}
+          </a>
+        </ng-container>
+      </bit-callout>
+    </div>
+  }
+
   <div class="content">
     <cdk-virtual-scroll-viewport
       itemSize="42"
diff --git a/apps/desktop/src/vault/app/vault/vault-items-v2.component.ts b/apps/desktop/src/vault/app/vault/vault-items-v2.component.ts
index d312d49277a..1ec0bb0b22e 100644
--- a/apps/desktop/src/vault/app/vault/vault-items-v2.component.ts
+++ b/apps/desktop/src/vault/app/vault/vault-items-v2.component.ts
@@ -1,6 +1,6 @@
 import { ScrollingModule } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, input } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { distinctUntilChanged, debounceTime } from "rxjs";
 
@@ -9,7 +9,9 @@ import { VaultItemsComponent as BaseVaultItemsComponent } from "@bitwarden/angul
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { uuidAsString } from "@bitwarden/common/platform/abstractions/sdk/sdk.service";
+import { OrganizationId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
 import { SearchService } from "@bitwarden/common/vault/abstractions/search.service";
 import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
 import { SearchTextDebounceInterval } from "@bitwarden/common/vault/services/search.service";
@@ -17,7 +19,7 @@ import {
   CipherViewLike,
   CipherViewLikeUtils,
 } from "@bitwarden/common/vault/utils/cipher-view-like-utils";
-import { MenuModule } from "@bitwarden/components";
+import { CalloutComponent, MenuModule } from "@bitwarden/components";
 
 import { SearchBarService } from "../../../app/layout/search/search-bar.service";
 
@@ -26,10 +28,14 @@ import { SearchBarService } from "../../../app/layout/search/search-bar.service"
 @Component({
   selector: "app-vault-items-v2",
   templateUrl: "vault-items-v2.component.html",
-  imports: [MenuModule, CommonModule, JslibModule, ScrollingModule],
+  imports: [MenuModule, CommonModule, JslibModule, ScrollingModule, CalloutComponent],
 })
 export class VaultItemsV2Component<C extends CipherViewLike> extends BaseVaultItemsComponent<C> {
+  readonly showPremiumCallout = input<boolean>(false);
+  readonly organizationId = input<OrganizationId | undefined>(undefined);
+
   protected CipherViewLikeUtils = CipherViewLikeUtils;
+
   constructor(
     searchService: SearchService,
     private readonly searchBarService: SearchBarService,
@@ -37,6 +43,7 @@ export class VaultItemsV2Component<C extends CipherViewLike> extends BaseVaultIt
     accountService: AccountService,
     restrictedItemTypesService: RestrictedItemTypesService,
     configService: ConfigService,
+    private premiumUpgradePromptService: PremiumUpgradePromptService,
   ) {
     super(searchService, cipherService, accountService, restrictedItemTypesService, configService);
 
@@ -47,6 +54,10 @@ export class VaultItemsV2Component<C extends CipherViewLike> extends BaseVaultIt
       });
   }
 
+  async navigateToGetPremium() {
+    await this.premiumUpgradePromptService.promptForPremium(this.organizationId());
+  }
+
   trackByFn(index: number, c: C): string {
     return uuidAsString(c.id!);
   }
diff --git a/apps/desktop/src/vault/app/vault/vault-v2.component.html b/apps/desktop/src/vault/app/vault/vault-v2.component.html
index 2696dd0d452..d10b3fd85c6 100644
--- a/apps/desktop/src/vault/app/vault/vault-v2.component.html
+++ b/apps/desktop/src/vault/app/vault/vault-v2.component.html
@@ -6,13 +6,15 @@
     (onCipherClicked)="viewCipher($event)"
     (onCipherRightClicked)="viewCipherMenu($event)"
     (onAddCipher)="addCipher($event)"
+    [showPremiumCallout]="showPremiumCallout$ | async"
+    [organizationId]="organizationId"
   >
   </app-vault-items-v2>
   <div class="details" *ngIf="!!action">
     <app-vault-item-footer
       id="footer"
       #footer
-      [cipher]="cipher"
+      [cipher]="cipher()"
       [action]="action"
       (onEdit)="editCipher($event)"
       (onRestore)="restoreCipher()"
@@ -21,11 +23,16 @@
       (onCancel)="cancelCipher($event)"
       (onArchiveToggle)="refreshCurrentCipher()"
       [masterPasswordAlreadyPrompted]="cipherRepromptId === cipherId"
+      [submitButtonText]="submitButtonText()"
     ></app-vault-item-footer>
     <div class="content">
       <div class="inner-content">
         <div class="box">
-          <app-cipher-view *ngIf="action === 'view'" [cipher]="cipher" [collections]="collections">
+          <app-cipher-view
+            *ngIf="action === 'view'"
+            [cipher]="cipher()"
+            [collections]="collections"
+          >
           </app-cipher-view>
           <vault-cipher-form
             #vaultForm
diff --git a/apps/desktop/src/vault/app/vault/vault-v2.component.ts b/apps/desktop/src/vault/app/vault/vault-v2.component.ts
index 730891f6dea..d7cf475036d 100644
--- a/apps/desktop/src/vault/app/vault/vault-v2.component.ts
+++ b/apps/desktop/src/vault/app/vault/vault-v2.component.ts
@@ -2,14 +2,25 @@ import { CommonModule } from "@angular/common";
 import {
   ChangeDetectorRef,
   Component,
+  computed,
   NgZone,
   OnDestroy,
   OnInit,
+  signal,
   ViewChild,
   ViewContainerRef,
 } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-import { firstValueFrom, Subject, takeUntil, switchMap, lastValueFrom, Observable } from "rxjs";
+import {
+  firstValueFrom,
+  Subject,
+  takeUntil,
+  switchMap,
+  lastValueFrom,
+  Observable,
+  BehaviorSubject,
+  combineLatest,
+} from "rxjs";
 import { filter, map, take } from "rxjs/operators";
 
 import { CollectionService, CollectionView } from "@bitwarden/admin-console/common";
@@ -163,7 +174,7 @@ export class VaultV2Component<C extends CipherViewLike>
   type: CipherType | null = null;
   folderId: string | null = null;
   collectionId: string | null = null;
-  organizationId: string | null = null;
+  organizationId: OrganizationId | null = null;
   myVaultOnly = false;
   addType: CipherType | undefined = undefined;
   addOrganizationId: string | null = null;
@@ -172,11 +183,25 @@ export class VaultV2Component<C extends CipherViewLike>
   deleted = false;
   userHasPremiumAccess = false;
   activeFilter: VaultFilter = new VaultFilter();
+  private activeFilterSubject = new BehaviorSubject<VaultFilter>(new VaultFilter());
+  private activeFilter$ = this.activeFilterSubject.asObservable();
+  private userId$ = this.accountService.activeAccount$.pipe(getUserId);
+  showPremiumCallout$ = this.userId$.pipe(
+    switchMap((userId) =>
+      combineLatest([
+        this.activeFilter$,
+        this.cipherArchiveService.showSubscriptionEndedMessaging$(userId),
+      ]).pipe(
+        map(([activeFilter, showMessaging]) => activeFilter.status === "archive" && showMessaging),
+      ),
+    ),
+  );
   activeUserId: UserId | null = null;
   cipherRepromptId: string | null = null;
-  cipher: CipherView | null = new CipherView();
+  readonly cipher = signal<CipherView | null>(null);
   collections: CollectionView[] | null = null;
   config: CipherFormConfig | null = null;
+  readonly userHasPremium = signal<boolean>(false);
 
   /** Tracks the disabled status of the edit cipher form */
   protected formDisabled: boolean = false;
@@ -187,12 +212,13 @@ export class VaultV2Component<C extends CipherViewLike>
     switchMap((id) => this.organizationService.organizations$(id)),
   );
 
-  protected canAccessAttachments$ = this.accountService.activeAccount$.pipe(
-    filter((account): account is Account => !!account),
-    switchMap((account) =>
-      this.billingAccountProfileStateService.hasPremiumFromAnySource$(account.id),
-    ),
-  );
+  protected readonly submitButtonText = computed(() => {
+    return this.cipher()?.isArchived &&
+      !this.userHasPremium() &&
+      this.cipherArchiveService.hasArchiveFlagEnabled$
+      ? this.i18nService.t("unArchiveAndSave")
+      : this.i18nService.t("save");
+  });
 
   private componentIsDestroyed$ = new Subject<boolean>();
   private allOrganizations: Organization[] = [];
@@ -241,6 +267,7 @@ export class VaultV2Component<C extends CipherViewLike>
       )
       .subscribe((canAccessPremium: boolean) => {
         this.userHasPremiumAccess = canAccessPremium;
+        this.userHasPremium.set(canAccessPremium);
       });
 
     this.broadcasterService.subscribe(BroadcasterSubscriptionId, (message: any) => {
@@ -288,30 +315,40 @@ export class VaultV2Component<C extends CipherViewLike>
                 this.showingModal = false;
                 break;
               case "copyUsername": {
-                if (this.cipher?.login?.username) {
-                  this.copyValue(this.cipher, this.cipher?.login?.username, "username", "Username");
+                if (this.cipher()?.login?.username) {
+                  this.copyValue(
+                    this.cipher(),
+                    this.cipher()?.login?.username,
+                    "username",
+                    "Username",
+                  );
                 }
                 break;
               }
               case "copyPassword": {
-                if (this.cipher?.login?.password && this.cipher.viewPassword) {
-                  this.copyValue(this.cipher, this.cipher.login.password, "password", "Password");
+                if (this.cipher()?.login?.password && this.cipher().viewPassword) {
+                  this.copyValue(
+                    this.cipher(),
+                    this.cipher().login.password,
+                    "password",
+                    "Password",
+                  );
                   await this.eventCollectionService
-                    .collect(EventType.Cipher_ClientCopiedPassword, this.cipher.id)
+                    .collect(EventType.Cipher_ClientCopiedPassword, this.cipher().id)
                     .catch(() => {});
                 }
                 break;
               }
               case "copyTotp": {
                 if (
-                  this.cipher?.login?.hasTotp &&
-                  (this.cipher.organizationUseTotp || this.userHasPremiumAccess)
+                  this.cipher()?.login?.hasTotp &&
+                  (this.cipher()?.organizationUseTotp || this.userHasPremiumAccess)
                 ) {
                   const value = await firstValueFrom(
-                    this.totpService.getCode$(this.cipher.login.totp),
+                    this.totpService.getCode$(this.cipher()?.login.totp),
                   ).catch((): any => null);
                   if (value) {
-                    this.copyValue(this.cipher, value.code, "verificationCodeTotp", "TOTP");
+                    this.copyValue(this.cipher(), value.code, "verificationCodeTotp", "TOTP");
                   }
                 }
                 break;
@@ -416,6 +453,7 @@ export class VaultV2Component<C extends CipherViewLike>
       selectedOrganizationId: params.selectedOrganizationId,
       myVaultOnly: params.myVaultOnly ?? false,
     });
+    this.activeFilterSubject.next(this.activeFilter);
     if (this.vaultItemsComponent) {
       await this.vaultItemsComponent.reload(this.activeFilter.buildFilter()).catch(() => {});
     }
@@ -440,7 +478,7 @@ export class VaultV2Component<C extends CipherViewLike>
       return;
     }
     this.cipherId = cipher.id;
-    this.cipher = cipher;
+    this.cipher.set(cipher);
     this.collections =
       this.vaultFilterComponent?.collections?.fullList.filter((c) =>
         cipher.collectionIds.includes(c.id),
@@ -679,7 +717,7 @@ export class VaultV2Component<C extends CipherViewLike>
       return;
     }
     this.cipherId = cipher.id;
-    this.cipher = cipher;
+    this.cipher.set(cipher);
     await this.buildFormConfig("edit");
     if (!cipher.edit && this.config) {
       this.config.mode = "partial-edit";
@@ -693,7 +731,7 @@ export class VaultV2Component<C extends CipherViewLike>
       return;
     }
     this.cipherId = cipher.id;
-    this.cipher = cipher;
+    this.cipher.set(cipher);
     await this.buildFormConfig("clone");
     this.action = "clone";
     await this.go().catch(() => {});
@@ -742,7 +780,7 @@ export class VaultV2Component<C extends CipherViewLike>
       return;
     }
     this.addType = type || this.activeFilter.cipherType;
-    this.cipher = new CipherView();
+    this.cipher.set(new CipherView());
     this.cipherId = null;
     await this.buildFormConfig("add");
     this.action = "add";
@@ -774,14 +812,14 @@ export class VaultV2Component<C extends CipherViewLike>
     );
 
     this.cipherId = cipher.id;
-    this.cipher = cipher;
+    this.cipher.set(cipher);
     await this.go().catch(() => {});
     await this.vaultItemsComponent?.refresh().catch(() => {});
   }
 
   async deleteCipher() {
     this.cipherId = null;
-    this.cipher = null;
+    this.cipher.set(null);
     this.action = null;
     await this.go().catch(() => {});
     await this.vaultItemsComponent?.refresh().catch(() => {});
@@ -796,7 +834,7 @@ export class VaultV2Component<C extends CipherViewLike>
 
   async cancelCipher(cipher: CipherView) {
     this.cipherId = cipher.id;
-    this.cipher = cipher;
+    this.cipher.set(cipher);
     this.action = this.cipherId ? "view" : null;
     await this.go().catch(() => {});
   }
@@ -806,6 +844,7 @@ export class VaultV2Component<C extends CipherViewLike>
       this.i18nService.t(this.calculateSearchBarLocalizationString(vaultFilter)),
     );
     this.activeFilter = vaultFilter;
+    this.activeFilterSubject.next(vaultFilter);
     await this.vaultItemsComponent
       ?.reload(
         this.activeFilter.buildFilter(),
@@ -887,14 +926,16 @@ export class VaultV2Component<C extends CipherViewLike>
 
   /** Refresh the current cipher object */
   protected async refreshCurrentCipher() {
-    if (!this.cipher) {
+    if (!this.cipher()) {
       return;
     }
 
-    this.cipher = await firstValueFrom(
-      this.cipherService.cipherViews$(this.activeUserId!).pipe(
-        filter((c) => !!c),
-        map((ciphers) => ciphers.find((c) => c.id === this.cipherId) ?? null),
+    this.cipher.set(
+      await firstValueFrom(
+        this.cipherService.cipherViews$(this.activeUserId!).pipe(
+          filter((c) => !!c),
+          map((ciphers) => ciphers.find((c) => c.id === this.cipherId) ?? null),
+        ),
       ),
     );
   }
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 3aa2f4b3bc1..16256ab875a 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
@@ -3,7 +3,7 @@
     {{ title }}
   </span>
   @if (cipherIsArchived) {
-    <span bitBadge bitDialogHeaderEnd> {{ "archiveNoun" | i18n }} </span>
+    <span bitBadge bitDialogHeaderEnd> {{ "archived" | i18n }} </span>
   }
 
   <div bitDialogContent #dialogContent>
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 98f847e1d36..57ea900fa69 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -3146,6 +3146,9 @@
   "premiumSubscriptionEndedDesc": {
     "message": "To regain access to your archive, restart your Premium subscription. If you edit details for an archived item before restarting, it'll be moved back into your vault."
   },
+  "itemRestored": {
+    "message": "Item has been restored"
+  },
   "restartPremium": {
     "message": "Restart Premium"
   },
@@ -11613,6 +11616,9 @@
   "unArchive": {
     "message": "Unarchive"
   },
+  "archived": {
+    "message": "Archived"
+  },
   "unArchiveAndSave": {
     "message": "Unarchive and save"
   },
diff --git a/libs/common/src/vault/services/default-cipher-archive.service.spec.ts b/libs/common/src/vault/services/default-cipher-archive.service.spec.ts
index 2f5e69d65ed..2078d1f29ea 100644
--- a/libs/common/src/vault/services/default-cipher-archive.service.spec.ts
+++ b/libs/common/src/vault/services/default-cipher-archive.service.spec.ts
@@ -165,6 +165,7 @@ describe("DefaultCipherArchiveService", () => {
 
       mockCipherService.cipherListViews$.mockReturnValue(of(mockCiphers));
       mockBillingAccountProfileStateService.hasPremiumFromAnySource$.mockReturnValue(of(false));
+      featureFlag.next(true);
 
       const result = await firstValueFrom(service.showSubscriptionEndedMessaging$(userId));
 
diff --git a/libs/common/src/vault/services/default-cipher-archive.service.ts b/libs/common/src/vault/services/default-cipher-archive.service.ts
index c1daade0dad..12d67ab07f9 100644
--- a/libs/common/src/vault/services/default-cipher-archive.service.ts
+++ b/libs/common/src/vault/services/default-cipher-archive.service.ts
@@ -71,8 +71,15 @@ export class DefaultCipherArchiveService implements CipherArchiveService {
 
   /** Returns true when the user has previously archived ciphers but lost their premium membership. */
   showSubscriptionEndedMessaging$(userId: UserId): Observable<boolean> {
-    return combineLatest([this.archivedCiphers$(userId), this.userHasPremium$(userId)]).pipe(
-      map(([archivedCiphers, hasPremium]) => archivedCiphers.length > 0 && !hasPremium),
+    return combineLatest([
+      this.archivedCiphers$(userId),
+      this.userHasPremium$(userId),
+      this.hasArchiveFlagEnabled$,
+    ]).pipe(
+      map(
+        ([archivedCiphers, hasPremium, flagEnabled]) =>
+          flagEnabled && archivedCiphers.length > 0 && !hasPremium,
+      ),
       shareReplay({ refCount: true, bufferSize: 1 }),
     );
   }
diff --git a/libs/vault/src/cipher-form/components/cipher-form.component.ts b/libs/vault/src/cipher-form/components/cipher-form.component.ts
index c9e867f8d3a..c0df34fadb2 100644
--- a/libs/vault/src/cipher-form/components/cipher-form.component.ts
+++ b/libs/vault/src/cipher-form/components/cipher-form.component.ts
@@ -358,6 +358,7 @@ export class CipherFormComponent implements AfterViewInit, OnInit, OnChanges, Ci
   }
 
   submit = async () => {
+    let successToast: string = "editedItem";
     if (this.cipherForm.invalid) {
       this.cipherForm.markAllAsTouched();
 
@@ -392,6 +393,7 @@ export class CipherFormComponent implements AfterViewInit, OnInit, OnChanges, Ci
     // If the item is archived but user has lost archive permissions, unarchive the item.
     if (!userCanArchive && this.updatedCipherView.archivedDate) {
       this.updatedCipherView.archivedDate = null;
+      successToast = "itemRestored";
     }
 
     const savedCipher = await this.addEditFormService.saveCipher(
@@ -407,7 +409,7 @@ export class CipherFormComponent implements AfterViewInit, OnInit, OnChanges, Ci
       title: null,
       message: this.i18nService.t(
         this.config.mode === "edit" || this.config.mode === "partial-edit"
-          ? "editedItem"
+          ? successToast
           : "addedItem",
       ),
     });
diff --git a/libs/vault/src/cipher-form/components/item-details/item-details-section.component.html b/libs/vault/src/cipher-form/components/item-details/item-details-section.component.html
index 9bf6dc32758..6e6bd70ec3f 100644
--- a/libs/vault/src/cipher-form/components/item-details/item-details-section.component.html
+++ b/libs/vault/src/cipher-form/components/item-details/item-details-section.component.html
@@ -1,6 +1,9 @@
 <section [formGroup]="itemDetailsForm" class="tw-mb-5 bit-compact:tw-mb-4">
   <bit-section-header>
     <h2 bitTypography="h6">{{ "itemDetails" | i18n }}</h2>
+    @if (showArchiveBadge()) {
+      <span bitBadge> {{ "archived" | i18n }} </span>
+    }
     <button
       *ngIf="!config.hideIndividualVaultFields"
       slot="end"
diff --git a/libs/vault/src/cipher-form/components/item-details/item-details-section.component.spec.ts b/libs/vault/src/cipher-form/components/item-details/item-details-section.component.spec.ts
index e40231ce801..62f23e77ec2 100644
--- a/libs/vault/src/cipher-form/components/item-details/item-details-section.component.spec.ts
+++ b/libs/vault/src/cipher-form/components/item-details/item-details-section.component.spec.ts
@@ -8,13 +8,16 @@ import { BehaviorSubject, of } from "rxjs";
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
 import { CollectionType, CollectionTypes, CollectionView } from "@bitwarden/admin-console/common";
+import { ClientType } from "@bitwarden/client-type";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 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 { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { CollectionId, OrganizationId } from "@bitwarden/common/types/guid";
+import { CipherArchiveService } from "@bitwarden/common/vault/abstractions/cipher-archive.service";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { SelectComponent } from "@bitwarden/components";
@@ -62,6 +65,8 @@ describe("ItemDetailsSectionComponent", () => {
   let i18nService: MockProxy<I18nService>;
   let mockConfigService: MockProxy<ConfigService>;
   let mockPolicyService: MockProxy<PolicyService>;
+  let mockPlatformUtilsService: MockProxy<PlatformUtilsService>;
+  let mockCipherArchiveService: MockProxy<CipherArchiveService>;
 
   const activeAccount$ = new BehaviorSubject<{ email: string }>({ email: "test@example.com" });
   const getInitialCipherView = jest.fn<CipherView | null, []>(() => null);
@@ -90,6 +95,8 @@ describe("ItemDetailsSectionComponent", () => {
     mockConfigService.getFeatureFlag$.mockReturnValue(of(true));
     mockPolicyService = mock<PolicyService>();
     mockPolicyService.policiesByType$.mockReturnValue(of([]));
+    mockPlatformUtilsService = mock<PlatformUtilsService>();
+    mockCipherArchiveService = mock<CipherArchiveService>();
 
     await TestBed.configureTestingModule({
       imports: [ItemDetailsSectionComponent, CommonModule, ReactiveFormsModule],
@@ -99,6 +106,8 @@ describe("ItemDetailsSectionComponent", () => {
         { provide: AccountService, useValue: { activeAccount$ } },
         { provide: ConfigService, useValue: mockConfigService },
         { provide: PolicyService, useValue: mockPolicyService },
+        { provide: PlatformUtilsService, useValue: mockPlatformUtilsService },
+        { provide: CipherArchiveService, useValue: mockCipherArchiveService },
       ],
     }).compileComponents();
 
@@ -209,9 +218,10 @@ describe("ItemDetailsSectionComponent", () => {
   describe("allowOwnershipChange", () => {
     it("should not allow ownership change if in edit mode and the cipher is owned by an organization", () => {
       component.config.mode = "edit";
-      component.originalCipherView = {
+      fixture.componentRef.setInput("originalCipherView", {
         organizationId: "org1",
-      } as CipherView;
+      } as CipherView);
+
       expect(component.allowOwnershipChange).toBe(false);
     });
 
@@ -251,7 +261,7 @@ describe("ItemDetailsSectionComponent", () => {
     it("should show organization data ownership when the configuration allows", () => {
       component.config.mode = "edit";
       component.config.organizationDataOwnershipDisabled = true;
-      component.originalCipherView = {} as CipherView;
+      fixture.componentRef.setInput("originalCipherView", {} as CipherView);
       component.config.organizations = [{ id: "134-433-22" } as Organization];
       fixture.detectChanges();
 
@@ -265,7 +275,7 @@ describe("ItemDetailsSectionComponent", () => {
     it("should show organization data ownership when the control is disabled", async () => {
       component.config.mode = "edit";
       component.config.organizationDataOwnershipDisabled = false;
-      component.originalCipherView = {} as CipherView;
+      fixture.componentRef.setInput("originalCipherView", {} as CipherView);
       component.config.organizations = [{ id: "134-433-22" } as Organization];
       await component.ngOnInit();
       fixture.detectChanges();
@@ -360,18 +370,20 @@ describe("ItemDetailsSectionComponent", () => {
     });
 
     it("should select the first organization if organization data ownership is enabled", async () => {
-      component.config.organizationDataOwnershipDisabled = false;
-      component.config.organizations = [
-        { id: "org1", name: "org1" } as Organization,
-        { id: "org2", name: "org2" } as Organization,
-      ];
-      component.originalCipherView = {
+      const updatedCipher = {
         name: "cipher1",
         organizationId: null,
         folderId: null,
         collectionIds: [],
         favorite: false,
       } as CipherView;
+      component.config.organizationDataOwnershipDisabled = false;
+      component.config.organizations = [
+        { id: "org1", name: "org1" } as Organization,
+        { id: "org2", name: "org2" } as Organization,
+      ];
+
+      fixture.componentRef.setInput("originalCipherView", updatedCipher);
 
       await component.ngOnInit();
 
@@ -469,20 +481,17 @@ describe("ItemDetailsSectionComponent", () => {
 
     it("should show readonly hint if readonly collections are present", async () => {
       component.config.mode = "edit";
-      getInitialCipherView.mockReturnValueOnce({
-        name: "cipher1",
-        organizationId: "org1",
-        folderId: "folder1",
-        collectionIds: ["col1", "col2", "col3"],
-        favorite: true,
-      } as CipherView);
-      component.originalCipherView = {
+      const updatedCipher = {
         name: "cipher1",
         organizationId: "org1",
         folderId: "folder1",
         collectionIds: ["col1", "col2", "col3"],
         favorite: true,
       } as CipherView;
+      getInitialCipherView.mockReturnValueOnce(updatedCipher);
+
+      fixture.componentRef.setInput("originalCipherView", updatedCipher);
+
       component.config.organizations = [{ id: "org1" } as Organization];
       component.config.collections = [
         createMockCollection("col1", "Collection 1", "org1", true, false) as CollectionView,
@@ -539,13 +548,16 @@ describe("ItemDetailsSectionComponent", () => {
               i < 4 ? CollectionTypes.SharedCollection : CollectionTypes.DefaultUserCollection,
             ) as CollectionView,
         );
-      component.originalCipherView = {
+      const updatedCipher = {
         name: "cipher1",
         organizationId: "org1",
         folderId: "folder1",
         collectionIds: ["col2", "col3"],
         favorite: true,
       } as CipherView;
+
+      fixture.componentRef.setInput("originalCipherView", updatedCipher);
+
       fixture.detectChanges();
       await fixture.whenStable();
 
@@ -567,7 +579,8 @@ describe("ItemDetailsSectionComponent", () => {
         createMockCollection("col2", "Collection 2", "org1", false, true) as CollectionView,
         createMockCollection("col3", "Collection 3", "org1", true, false) as CollectionView,
       ];
-      component.originalCipherView = {
+
+      const currentCipher = {
         name: "cipher1",
         organizationId: "org1",
         folderId: "folder1",
@@ -575,7 +588,9 @@ describe("ItemDetailsSectionComponent", () => {
         favorite: true,
       } as CipherView;
 
-      getInitialCipherView.mockReturnValue(component.originalCipherView);
+      fixture.componentRef.setInput("originalCipherView", currentCipher);
+
+      getInitialCipherView.mockReturnValue(component.originalCipherView());
 
       component.config.organizations = [{ id: "org1" } as Organization];
     });
@@ -604,7 +619,8 @@ describe("ItemDetailsSectionComponent", () => {
         { id: "org2", name: "org2" } as Organization,
         { id: "org1", name: "org1" } as Organization,
       ];
-      component.originalCipherView = {} as CipherView;
+
+      fixture.componentRef.setInput("originalCipherView", {} as CipherView);
 
       await component.ngOnInit();
       fixture.detectChanges();
@@ -684,13 +700,16 @@ describe("ItemDetailsSectionComponent", () => {
     beforeEach(() => {
       component.config.mode = "edit";
       component.config.originalCipher = new Cipher();
-      component.originalCipherView = {
+
+      const updatedCipher = {
         name: "cipher1",
         organizationId: null,
         folderId: "folder1",
         collectionIds: ["col1", "col2", "col3"],
         favorite: true,
       } as unknown as CipherView;
+
+      fixture.componentRef.setInput("originalCipherView", updatedCipher);
     });
 
     describe("when personal ownership is not allowed", () => {
@@ -701,7 +720,7 @@ describe("ItemDetailsSectionComponent", () => {
 
       describe("cipher does not belong to an organization", () => {
         beforeEach(() => {
-          getInitialCipherView.mockReturnValue(component.originalCipherView!);
+          getInitialCipherView.mockReturnValue(component.originalCipherView()!);
         });
 
         it("enables organizationId", async () => {
@@ -720,8 +739,11 @@ describe("ItemDetailsSectionComponent", () => {
 
       describe("cipher belongs to an organization", () => {
         beforeEach(() => {
-          component.originalCipherView.organizationId = "org-id";
-          getInitialCipherView.mockReturnValue(component.originalCipherView);
+          fixture.componentRef.setInput("originalCipherView", {
+            ...component.originalCipherView(),
+            organizationId: "org-id",
+          } as CipherView);
+          getInitialCipherView.mockReturnValue(component.originalCipherView());
         });
 
         it("enables the rest of the form", async () => {
@@ -734,8 +756,8 @@ describe("ItemDetailsSectionComponent", () => {
 
       describe("setFormState behavior with null/undefined", () => {
         it("calls disableFormFields when organizationId value is null", async () => {
-          component.originalCipherView.organizationId = null as any;
-          getInitialCipherView.mockReturnValue(component.originalCipherView);
+          component.originalCipherView().organizationId = null as any;
+          getInitialCipherView.mockReturnValue(component.originalCipherView());
 
           await component.ngOnInit();
 
@@ -743,8 +765,8 @@ describe("ItemDetailsSectionComponent", () => {
         });
 
         it("calls disableFormFields when organizationId value is undefined", async () => {
-          component.originalCipherView.organizationId = undefined;
-          getInitialCipherView.mockReturnValue(component.originalCipherView);
+          component.originalCipherView().organizationId = undefined;
+          getInitialCipherView.mockReturnValue(component.originalCipherView());
 
           await component.ngOnInit();
 
@@ -752,8 +774,8 @@ describe("ItemDetailsSectionComponent", () => {
         });
 
         it("calls enableFormFields when organizationId has a string value", async () => {
-          component.originalCipherView.organizationId = "org-id" as any;
-          getInitialCipherView.mockReturnValue(component.originalCipherView);
+          component.originalCipherView().organizationId = "org-id" as any;
+          getInitialCipherView.mockReturnValue(component.originalCipherView());
 
           await component.ngOnInit();
 
@@ -765,11 +787,11 @@ describe("ItemDetailsSectionComponent", () => {
     describe("when an ownership change is not allowed", () => {
       beforeEach(() => {
         component.config.organizationDataOwnershipDisabled = true; // allow personal ownership
-        component.originalCipherView!.organizationId = undefined;
+        component.originalCipherView()!.organizationId = undefined;
       });
 
       it("disables organizationId when the cipher is owned by an organization", async () => {
-        component.originalCipherView!.organizationId = "orgId";
+        component.originalCipherView()!.organizationId = "orgId";
 
         await component.ngOnInit();
 
@@ -785,4 +807,28 @@ describe("ItemDetailsSectionComponent", () => {
       });
     });
   });
+
+  describe("showArchiveBadge", () => {
+    it("should set showArchiveBadge to true when cipher is archived and client is Desktop", async () => {
+      component.config.organizations = [{ id: "org1" } as Organization];
+
+      const archivedCipher = {
+        name: "archived cipher",
+        organizationId: null,
+        folderId: null,
+        collectionIds: [],
+        favorite: false,
+        isArchived: true,
+      } as unknown as CipherView;
+
+      fixture.componentRef.setInput("originalCipherView", archivedCipher);
+
+      getInitialCipherView.mockReturnValueOnce(archivedCipher);
+      mockPlatformUtilsService.getClientType.mockReturnValue(ClientType.Desktop);
+
+      await component.ngOnInit();
+
+      expect(component["showArchiveBadge"]()).toBe(true);
+    });
+  });
 });
diff --git a/libs/vault/src/cipher-form/components/item-details/item-details-section.component.ts b/libs/vault/src/cipher-form/components/item-details/item-details-section.component.ts
index ad61c0f216f..6dd2dafe5e8 100644
--- a/libs/vault/src/cipher-form/components/item-details/item-details-section.component.ts
+++ b/libs/vault/src/cipher-form/components/item-details/item-details-section.component.ts
@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { CommonModule } from "@angular/common";
-import { Component, DestroyRef, Input, OnInit } from "@angular/core";
+import { Component, computed, DestroyRef, input, Input, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
 import { concatMap, distinctUntilChanged, firstValueFrom, map } from "rxjs";
@@ -10,16 +10,20 @@ import { concatMap, distinctUntilChanged, firstValueFrom, map } from "rxjs";
 // eslint-disable-next-line no-restricted-imports
 import { CollectionTypes, CollectionView } from "@bitwarden/admin-console/common";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ClientType } from "@bitwarden/client-type";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { OrganizationUserType, PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { CollectionId, OrganizationId, UserId } from "@bitwarden/common/types/guid";
+import { CipherArchiveService } from "@bitwarden/common/vault/abstractions/cipher-archive.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import {
+  BadgeComponent,
   CardComponent,
   FormFieldModule,
   IconButtonModule,
@@ -50,6 +54,7 @@ import { CipherFormContainer } from "../../cipher-form-container";
     IconButtonModule,
     JslibModule,
     CommonModule,
+    BadgeComponent,
   ],
 })
 export class ItemDetailsSectionComponent implements OnInit {
@@ -61,6 +66,14 @@ export class ItemDetailsSectionComponent implements OnInit {
     favorite: [false],
   });
 
+  protected readonly showArchiveBadge = computed(() => {
+    return (
+      this.cipherArchiveService.hasArchiveFlagEnabled$ &&
+      this.originalCipherView()?.isArchived &&
+      this.platformUtilsService.getClientType() === ClientType.Desktop
+    );
+  });
+
   /**
    * Collection options available for the selected organization.
    * @protected
@@ -89,10 +102,7 @@ export class ItemDetailsSectionComponent implements OnInit {
   @Input({ required: true })
   config: CipherFormConfig;
 
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input()
-  originalCipherView: CipherView;
+  readonly originalCipherView = input<CipherView>();
 
   get readOnlyCollectionsNames(): string[] {
     return this.readOnlyCollections.map((c) => c.name);
@@ -140,6 +150,8 @@ export class ItemDetailsSectionComponent implements OnInit {
     private destroyRef: DestroyRef,
     private accountService: AccountService,
     private policyService: PolicyService,
+    private platformUtilsService: PlatformUtilsService,
+    private cipherArchiveService: CipherArchiveService,
   ) {
     this.cipherFormContainer.registerChildForm("itemDetails", this.itemDetailsForm);
     this.itemDetailsForm.valueChanges
@@ -175,7 +187,7 @@ export class ItemDetailsSectionComponent implements OnInit {
 
   get allowOwnershipChange() {
     // Do not allow ownership change in edit mode and the cipher is owned by an organization
-    if (this.config.mode === "edit" && this.originalCipherView?.organizationId != null) {
+    if (this.config.mode === "edit" && this.originalCipherView()?.organizationId != null) {
       return false;
     }
 
@@ -349,7 +361,7 @@ export class ItemDetailsSectionComponent implements OnInit {
           (c) =>
             c.organizationId === orgId &&
             c.readOnly &&
-            this.originalCipherView.collectionIds.includes(c.id as CollectionId),
+            this.originalCipherView().collectionIds.includes(c.id as CollectionId),
         );
       }
     }
@@ -406,8 +418,8 @@ export class ItemDetailsSectionComponent implements OnInit {
      * Note: `.every` will return true for an empty array
      */
     const cipherIsOnlyInOrgCollections =
-      (this.originalCipherView?.collectionIds ?? []).length > 0 &&
-      this.originalCipherView.collectionIds.every(
+      (this.originalCipherView()?.collectionIds ?? []).length > 0 &&
+      this.originalCipherView().collectionIds.every(
         (cId) =>
           this.collections.find((c) => c.id === cId)?.type === CollectionTypes.SharedCollection,
       );
diff --git a/libs/vault/src/cipher-view/item-details/item-details-v2.component.html b/libs/vault/src/cipher-view/item-details/item-details-v2.component.html
index 52e850dd09b..edf17f0921c 100644
--- a/libs/vault/src/cipher-view/item-details/item-details-v2.component.html
+++ b/libs/vault/src/cipher-view/item-details/item-details-v2.component.html
@@ -1,7 +1,7 @@
 <section class="tw-mb-5 bit-compact:tw-mb-4">
   <bit-card>
     <div
-      class="tw-flex tw-place-items-center"
+      class="tw-flex tw-place-items-center tw-w-full"
       [ngClass]="{
         'tw-mb-2': allItems.length > 0,
       }"
@@ -10,9 +10,16 @@
       <div class="tw-flex tw-items-center tw-justify-center" style="width: 40px; height: 40px">
         <app-vault-icon [cipher]="cipher()" [coloredIcon]="true"></app-vault-icon>
       </div>
-      <h2 bitTypography="h4" class="tw-ml-2 tw-mt-2 tw-select-auto" data-testid="item-name">
+      <h2
+        bitTypography="h4"
+        class="tw-ml-2 tw-mt-2 tw-select-auto tw-flex-1"
+        data-testid="item-name"
+      >
         {{ cipher().name }}
       </h2>
+      @if (showArchiveBadge()) {
+        <span bitBadge> {{ "archived" | i18n }} </span>
+      }
     </div>
     <ng-container>
       <div class="tw-flex tw-flex-col tw-mt-2 md:tw-flex-row md:tw-flex-wrap">
diff --git a/libs/vault/src/cipher-view/item-details/item-details-v2.component.spec.ts b/libs/vault/src/cipher-view/item-details/item-details-v2.component.spec.ts
index ead2979fac7..ae78c49bdb4 100644
--- a/libs/vault/src/cipher-view/item-details/item-details-v2.component.spec.ts
+++ b/libs/vault/src/cipher-view/item-details/item-details-v2.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentRef } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
+import { mock, MockProxy } from "jest-mock-extended";
 import { of } from "rxjs";
 
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
@@ -21,6 +22,7 @@ describe("ItemDetailsV2Component", () => {
   let component: ItemDetailsV2Component;
   let fixture: ComponentFixture<ItemDetailsV2Component>;
   let componentRef: ComponentRef<ItemDetailsV2Component>;
+  let mockPlatformUtilsService: MockProxy<PlatformUtilsService>;
 
   const cipher = {
     id: "cipher1",
@@ -51,6 +53,8 @@ describe("ItemDetailsV2Component", () => {
   } as FolderView;
 
   beforeEach(async () => {
+    mockPlatformUtilsService = mock<PlatformUtilsService>();
+
     await TestBed.configureTestingModule({
       imports: [ItemDetailsV2Component],
       providers: [
@@ -61,6 +65,7 @@ describe("ItemDetailsV2Component", () => {
           useValue: { environment$: of({ getIconsUrl: () => "https://icons.example.com" }) },
         },
         { provide: DomainSettingsService, useValue: { showFavicons$: of(true) } },
+        { provide: PlatformUtilsService, useValue: mockPlatformUtilsService },
       ],
     }).compileComponents();
   });
@@ -98,4 +103,31 @@ describe("ItemDetailsV2Component", () => {
     const owner = fixture.debugElement.query(By.css('[data-testid="owner"]'));
     expect(owner).toBeNull();
   });
+
+  it("should show archive badge when cipher is archived and client is Desktop", () => {
+    jest.spyOn(mockPlatformUtilsService, "getClientType").mockReturnValue(ClientType.Desktop);
+
+    const archivedCipher = { ...cipher, isArchived: true };
+    componentRef.setInput("cipher", archivedCipher);
+
+    expect((component as any).showArchiveBadge()).toBe(true);
+  });
+
+  it("should not show archive badge when cipher is not archived", () => {
+    jest.spyOn(mockPlatformUtilsService, "getClientType").mockReturnValue(ClientType.Desktop);
+
+    const unarchivedCipher = { ...cipher, isArchived: false };
+    componentRef.setInput("cipher", unarchivedCipher);
+
+    expect((component as any).showArchiveBadge()).toBe(false);
+  });
+
+  it("should not show archive badge when client is not Desktop", () => {
+    jest.spyOn(mockPlatformUtilsService, "getClientType").mockReturnValue(ClientType.Web);
+
+    const archivedCipher = { ...cipher, isArchived: true };
+    componentRef.setInput("cipher", archivedCipher);
+
+    expect((component as any).showArchiveBadge()).toBe(false);
+  });
 });
diff --git a/libs/vault/src/cipher-view/item-details/item-details-v2.component.ts b/libs/vault/src/cipher-view/item-details/item-details-v2.component.ts
index 2c310daad76..8132780ccf4 100644
--- a/libs/vault/src/cipher-view/item-details/item-details-v2.component.ts
+++ b/libs/vault/src/cipher-view/item-details/item-details-v2.component.ts
@@ -9,11 +9,14 @@ import { fromEvent, map, startWith } from "rxjs";
 // eslint-disable-next-line no-restricted-imports
 import { CollectionTypes, CollectionView } from "@bitwarden/admin-console/common";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ClientType } from "@bitwarden/client-type";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
 import {
+  BadgeModule,
   ButtonLinkDirective,
   CardComponent,
   FormFieldModule,
@@ -35,6 +38,7 @@ import { OrgIconDirective } from "../../components/org-icon.directive";
     OrgIconDirective,
     FormFieldModule,
     ButtonLinkDirective,
+    BadgeModule,
   ],
 })
 export class ItemDetailsV2Component {
@@ -85,7 +89,16 @@ export class ItemDetailsV2Component {
     }
   });
 
-  constructor(private i18nService: I18nService) {}
+  protected readonly showArchiveBadge = computed(() => {
+    return (
+      this.cipher().isArchived && this.platformUtilsService.getClientType() === ClientType.Desktop
+    );
+  });
+
+  constructor(
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService,
+  ) {}
 
   toggleShowMore() {
     this.showAllDetails.update((value) => !value);