diff --git a/apps/web/src/app/admin-console/organizations/settings/organization-settings.module.ts b/apps/web/src/app/admin-console/organizations/settings/organization-settings.module.ts
index 9b0c3035e98..7065e8e799c 100644
--- a/apps/web/src/app/admin-console/organizations/settings/organization-settings.module.ts
+++ b/apps/web/src/app/admin-console/organizations/settings/organization-settings.module.ts
@@ -1,12 +1,12 @@
 import { NgModule } from "@angular/core";
 
+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { ItemModule } from "@bitwarden/components";
 
 import { DangerZoneComponent } from "../../../auth/settings/account/danger-zone.component";
 import { HeaderModule } from "../../../layouts/header/header.module";
 import { SharedModule } from "../../../shared";
 import { AccountFingerprintComponent } from "../../../shared/components/account-fingerprint/account-fingerprint.component";
-import { PremiumBadgeComponent } from "../../../vault/components/premium-badge.component";
 import { PoliciesModule } from "../../organizations/policies";
 
 import { AccountComponent } from "./account.component";
diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts
index baa0f396fc5..04b549e7f05 100644
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.ts
@@ -3,6 +3,7 @@
 import { Component, Inject, OnInit } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -15,7 +16,6 @@ import {
 } from "@bitwarden/components";
 
 import { SharedModule } from "../../../shared/shared.module";
-import { PremiumBadgeComponent } from "../../../vault/components/premium-badge.component";
 import { EmergencyAccessService } from "../../emergency-access";
 import { EmergencyAccessType } from "../../emergency-access/enums/emergency-access-type";
 
diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts
index 6de647dc5ce..de30205e6fe 100644
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.ts
@@ -3,6 +3,7 @@
 import { Component, OnInit } from "@angular/core";
 import { lastValueFrom, Observable, firstValueFrom, switchMap } from "rxjs";
 
+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
@@ -20,7 +21,6 @@ import { DialogService, ToastService } from "@bitwarden/components";
 
 import { HeaderModule } from "../../../layouts/header/header.module";
 import { SharedModule } from "../../../shared/shared.module";
-import { PremiumBadgeComponent } from "../../../vault/components/premium-badge.component";
 import { EmergencyAccessService } from "../../emergency-access";
 import { EmergencyAccessStatusType } from "../../emergency-access/enums/emergency-access-status-type";
 import { EmergencyAccessType } from "../../emergency-access/enums/emergency-access-type";
diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-setup.component.ts b/apps/web/src/app/auth/settings/two-factor/two-factor-setup.component.ts
index e538e72a77e..043c27998cd 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup.component.ts
@@ -12,6 +12,7 @@ import {
   switchMap,
 } from "rxjs";
 
+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
@@ -35,7 +36,6 @@ import { DialogRef, DialogService, ItemModule } from "@bitwarden/components";
 
 import { HeaderModule } from "../../../layouts/header/header.module";
 import { SharedModule } from "../../../shared/shared.module";
-import { PremiumBadgeComponent } from "../../../vault/components/premium-badge.component";
 
 import { TwoFactorRecoveryComponent } from "./two-factor-recovery.component";
 import { TwoFactorSetupAuthenticatorComponent } from "./two-factor-setup-authenticator.component";
diff --git a/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts b/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
index d6a330b55d7..76951bf9451 100644
--- a/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
+++ b/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
@@ -2,11 +2,11 @@ import { importProvidersFrom } from "@angular/core";
 import { RouterTestingModule } from "@angular/router/testing";
 import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
 
+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { BadgeModule, IconModule } from "@bitwarden/components";
 
 import { PreloadedEnglishI18nModule } from "../../../../core/tests";
-import { PremiumBadgeComponent } from "../../../../vault/components/premium-badge.component";
 import { ReportVariant } from "../models/report-variant";
 
 import { ReportCardComponent } from "./report-card.component";
diff --git a/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts b/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
index 13523174913..22c7e851bed 100644
--- a/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
+++ b/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
@@ -2,11 +2,11 @@ import { importProvidersFrom } from "@angular/core";
 import { RouterTestingModule } from "@angular/router/testing";
 import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
 
+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { BadgeModule, IconModule } from "@bitwarden/components";
 
 import { PreloadedEnglishI18nModule } from "../../../../core/tests";
-import { PremiumBadgeComponent } from "../../../../vault/components/premium-badge.component";
 import { reports } from "../../reports";
 import { ReportVariant } from "../models/report-variant";
 import { ReportCardComponent } from "../report-card/report-card.component";
diff --git a/apps/web/src/app/tools/send/new-send/new-send-dropdown.component.html b/apps/web/src/app/tools/send/new-send/new-send-dropdown.component.html
index 35e03f370ef..fdfe8eb55ff 100644
--- a/apps/web/src/app/tools/send/new-send/new-send-dropdown.component.html
+++ b/apps/web/src/app/tools/send/new-send/new-send-dropdown.component.html
@@ -9,15 +9,9 @@
   </a>
   <a bitMenuItem (click)="createSend(sendType.File)">
     <i class="bwi bwi-file" slot="start" aria-hidden="true"></i>
-    {{ "sendTypeFile" | i18n }}
-    <button
-      type="button"
-      slot="end"
-      *ngIf="!(canAccessPremium$ | async)"
-      bitBadge
-      variant="success"
-    >
-      {{ "premium" | i18n }}
-    </button>
+    <div class="tw-flex tw-items-center tw-gap-2">
+      {{ "sendTypeFile" | i18n }}
+      <app-premium-badge></app-premium-badge>
+    </div>
   </a>
 </bit-menu>
diff --git a/apps/web/src/app/tools/send/new-send/new-send-dropdown.component.ts b/apps/web/src/app/tools/send/new-send/new-send-dropdown.component.ts
index 64ada8f75d0..bb72ff75a39 100644
--- a/apps/web/src/app/tools/send/new-send/new-send-dropdown.component.ts
+++ b/apps/web/src/app/tools/send/new-send/new-send-dropdown.component.ts
@@ -1,19 +1,19 @@
 import { CommonModule } from "@angular/common";
 import { Component, Input } from "@angular/core";
-import { Router } from "@angular/router";
 import { firstValueFrom, Observable, of, switchMap } from "rxjs";
 
+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
 import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
-import { BadgeModule, ButtonModule, DialogService, MenuModule } from "@bitwarden/components";
+import { ButtonModule, DialogService, MenuModule } from "@bitwarden/components";
 import { DefaultSendFormConfigService, SendAddEditDialogComponent } from "@bitwarden/send-ui";
 
 @Component({
   selector: "tools-new-send-dropdown",
   templateUrl: "new-send-dropdown.component.html",
-  imports: [JslibModule, CommonModule, ButtonModule, MenuModule, BadgeModule],
+  imports: [JslibModule, CommonModule, ButtonModule, MenuModule, PremiumBadgeComponent],
   providers: [DefaultSendFormConfigService],
 })
 /**
@@ -30,7 +30,6 @@ export class NewSendDropdownComponent {
   protected canAccessPremium$: Observable<boolean>;
 
   constructor(
-    private router: Router,
     private billingAccountProfileStateService: BillingAccountProfileStateService,
     private accountService: AccountService,
     private dialogService: DialogService,
@@ -47,16 +46,16 @@ export class NewSendDropdownComponent {
 
   /**
    * Opens the SendAddEditComponent for a new Send with the provided type.
-   * If has user does not have premium access and the type is File, the user will be redirected to the premium settings page.
+   * If has user does not have premium access and the type is File do nothing the PremiumBadgeComponent will handle the flow.
    * @param type The type of Send to create.
    */
   async createSend(type: SendType) {
     if (!(await firstValueFrom(this.canAccessPremium$)) && type === SendType.File) {
-      return await this.router.navigate(["settings/subscription/premium"]);
+      return;
     }
 
     const formConfig = await this.addEditFormConfigService.buildConfig("add", undefined, type);
 
-    await SendAddEditDialogComponent.open(this.dialogService, { formConfig });
+    SendAddEditDialogComponent.open(this.dialogService, { formConfig });
   }
 }
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 b2a57ffb875..6eb9b89b05b 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
@@ -25,17 +25,10 @@
           type="button"
           (click)="openAttachmentsDialog()"
         >
-          <p class="tw-m-0">
+          <div class="tw-flex tw-items-center tw-gap-2">
             {{ "attachments" | i18n }}
-            <span
-              *ngIf="!(canAccessAttachments$ | async)"
-              bitBadge
-              variant="success"
-              class="tw-ml-2"
-            >
-              {{ "premium" | i18n }}
-            </span>
-          </p>
+            <app-premium-badge></app-premium-badge>
+          </div>
           <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
         </button>
       </bit-item>
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 871ee900e38..8462e801de0 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
@@ -7,6 +7,7 @@ import { firstValueFrom, Subject, switchMap } from "rxjs";
 import { map } from "rxjs/operators";
 
 import { CollectionView } from "@bitwarden/admin-console/common";
+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { VaultViewPasswordHistoryService } from "@bitwarden/angular/services/view-password-history.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
@@ -131,6 +132,7 @@ export type VaultItemDialogResult = UnionOfValues<typeof VaultItemDialogResult>;
     CipherFormModule,
     AsyncActionsModule,
     ItemModule,
+    PremiumBadgeComponent,
   ],
   providers: [
     { provide: PremiumUpgradePromptService, useClass: WebVaultPremiumUpgradePromptService },
diff --git a/libs/angular/src/billing/components/premium-badge/index.ts b/libs/angular/src/billing/components/premium-badge/index.ts
new file mode 100644
index 00000000000..aba6ecc961b
--- /dev/null
+++ b/libs/angular/src/billing/components/premium-badge/index.ts
@@ -0,0 +1 @@
+export * from "./premium-badge.component";
diff --git a/apps/web/src/app/vault/components/premium-badge.component.ts b/libs/angular/src/billing/components/premium-badge/premium-badge.component.ts
similarity index 91%
rename from apps/web/src/app/vault/components/premium-badge.component.ts
rename to libs/angular/src/billing/components/premium-badge/premium-badge.component.ts
index 4f1d1142f91..9aa5769d7e6 100644
--- a/apps/web/src/app/vault/components/premium-badge.component.ts
+++ b/libs/angular/src/billing/components/premium-badge/premium-badge.component.ts
@@ -6,12 +6,13 @@ import { BadgeModule } from "@bitwarden/components";
 
 @Component({
   selector: "app-premium-badge",
+  standalone: true,
   template: `
     <button type="button" *appNotPremium bitBadge variant="success" (click)="premiumRequired()">
       {{ "premium" | i18n }}
     </button>
   `,
-  imports: [JslibModule, BadgeModule],
+  imports: [BadgeModule, JslibModule],
 })
 export class PremiumBadgeComponent {
   constructor(private messagingService: MessagingService) {}
diff --git a/apps/web/src/app/vault/components/premium-badge.stories.ts b/libs/angular/src/billing/components/premium-badge/premium-badge.stories.ts
similarity index 98%
rename from apps/web/src/app/vault/components/premium-badge.stories.ts
rename to libs/angular/src/billing/components/premium-badge/premium-badge.stories.ts
index 331f72fd0ac..79efa6f772c 100644
--- a/apps/web/src/app/vault/components/premium-badge.stories.ts
+++ b/libs/angular/src/billing/components/premium-badge/premium-badge.stories.ts
@@ -17,7 +17,7 @@ class MockMessagingService implements MessageSender {
 }
 
 export default {
-  title: "Web/Premium Badge",
+  title: "Billing/Premium Badge",
   component: PremiumBadgeComponent,
   decorators: [
     moduleMetadata({
diff --git a/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html b/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html
index 4e57869425c..1d5629cfd48 100644
--- a/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html
+++ b/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html
@@ -16,10 +16,10 @@
     [routerLink]="buildRouterLink(sendType.File)"
     [queryParams]="buildQueryParams(sendType.File)"
   >
-    <i class="bwi bwi-file" slot="start" aria-hidden="true"></i>
-    {{ "sendTypeFile" | i18n }}
-    <button type="button" slot="end" *ngIf="hasNoPremium" bitBadge variant="success">
-      {{ "premium" | i18n }}
-    </button>
+    <div class="tw-flex tw-items-center tw-gap-2">
+      <i class="bwi bwi-file" slot="start" aria-hidden="true"></i>
+      {{ "sendTypeFile" | i18n }}
+      <app-premium-badge></app-premium-badge>
+    </div>
   </a>
 </bit-menu>
diff --git a/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.ts b/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.ts
index ba5176e5db5..b553a343cdd 100644
--- a/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.ts
+++ b/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.ts
@@ -1,18 +1,19 @@
 import { CommonModule } from "@angular/common";
 import { Component, Input, OnInit } from "@angular/core";
-import { Router, RouterLink } from "@angular/router";
+import { RouterLink } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
 import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
-import { BadgeModule, ButtonModule, ButtonType, MenuModule } from "@bitwarden/components";
+import { ButtonModule, ButtonType, MenuModule } from "@bitwarden/components";
 
 @Component({
   selector: "tools-new-send-dropdown",
   templateUrl: "new-send-dropdown.component.html",
-  imports: [JslibModule, CommonModule, ButtonModule, RouterLink, MenuModule, BadgeModule],
+  imports: [JslibModule, CommonModule, ButtonModule, RouterLink, MenuModule, PremiumBadgeComponent],
 })
 export class NewSendDropdownComponent implements OnInit {
   @Input() hideIcon: boolean = false;
@@ -23,7 +24,6 @@ export class NewSendDropdownComponent implements OnInit {
   hasNoPremium = false;
 
   constructor(
-    private router: Router,
     private billingAccountProfileStateService: BillingAccountProfileStateService,
     private accountService: AccountService,
   ) {}
diff --git a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
index 53fcab70506..bc10c6f7014 100644
--- a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
+++ b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
@@ -121,18 +121,11 @@
       />
     </bit-form-field>
     <bit-form-field *ngIf="cipher.login.totp">
-      <bit-label [appTextDrag]="totpCodeCopyObj?.totpCode"
-        >{{ "verificationCodeTotp" | i18n }}
-        <span
-          *ngIf="!(isPremium$ | async)"
-          bitBadge
-          variant="success"
-          class="tw-ml-2 tw-cursor-pointer"
-          (click)="getPremium(cipher.organizationId)"
-          slot="end"
-        >
-          {{ "premium" | i18n }}
-        </span>
+      <bit-label [appTextDrag]="totpCodeCopyObj?.totpCode">
+        <div class="tw-flex tw-items-center tw-gap-3">
+          {{ "verificationCodeTotp" | i18n }}
+          <app-premium-badge></app-premium-badge>
+        </div>
       </bit-label>
       <input
         id="totp"
diff --git a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
index 9a40caf031b..5938343a6ad 100644
--- a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
+++ b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
@@ -14,6 +14,7 @@ import {
 } from "@angular/core";
 import { Observable, switchMap } from "rxjs";
 
+import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
@@ -56,6 +57,7 @@ type TotpCodeValues = {
     BitTotpCountdownComponent,
     ReadOnlyCipherCardComponent,
     LinkModule,
+    PremiumBadgeComponent,
   ],
 })
 export class LoginCredentialsViewComponent implements OnChanges {