diff --git a/.claude/prompts/review-code.md b/.claude/prompts/review-code.md
index 4e5f40b2743..1888b7cd503 100644
--- a/.claude/prompts/review-code.md
+++ b/.claude/prompts/review-code.md
@@ -1,25 +1,57 @@
-Please review this pull request with a focus on:
+# Bitwarden Clients Repo Code Review - Careful Consideration Required
 
-- Code quality and best practices
-- Potential bugs or issues
-- Security implications
-- Performance considerations
+## Think Twice Before Recommending
 
-Note: The PR branch is already checked out in the current working directory.
+Angular has multiple valid patterns. Before suggesting changes:
 
-Provide a comprehensive review including:
+- **Consider the context** - Is this code part of an active modernization effort?
+- **Check for established patterns** - Look for similar implementations in the codebase
+- **Avoid premature optimization** - Don't suggest refactoring stable, working code without clear benefit
+- **Respect incremental progress** - Teams may be modernizing gradually with feature flags
 
-- Summary of changes since last review
-- Critical issues found (be thorough)
-- Suggested improvements (be thorough)
-- Good practices observed (be concise - list only the most notable items without elaboration)
-- Action items for the author
-- Leverage collapsible <details> sections where appropriate for lengthy explanations or code snippets to enhance human readability
+## Angular Modernization - Handle with Care
 
-When reviewing subsequent commits:
+**Control Flow Syntax (@if, @for, @switch):**
 
-- Track status of previously identified issues (fixed/unfixed/reopened)
-- Identify NEW problems introduced since last review
-- Note if fixes introduced new issues
+- When you see legacy structural directives (*ngIf, *ngFor), consider whether modernization is in scope
+- Do not mandate changes to stable code unless part of the PR's objective
+- If suggesting modernization, acknowledge it's optional unless required by PR goals
 
-IMPORTANT: Be comprehensive about issues and improvements. For good practices, be brief - just note what was done well without explaining why or praising excessively.
+**Standalone Components:**
+
+- New components should be standalone whenever feasible, but do not flag existing NgModule components as issues
+- Legacy patterns exist for valid reasons - consider modernization effort vs benefit
+
+**Typed Forms:**
+
+- Recommend typed forms for NEW form code
+- Don't suggest rewriting working untyped forms unless they're being modified
+
+## Tailwind CSS - Critical Pattern
+
+**tw- prefix is mandatory** - This is non-negotiable and should be flagged as ❌ major finding:
+
+- Missing tw- prefix breaks styling completely
+- Check ALL Tailwind classes in modified files
+
+## Rust SDK Adoption - Tread Carefully
+
+When reviewing cipher operations:
+
+- Look for breaking changes in the TypeScript → Rust boundary
+- Verify error handling matches established patterns
+- Don't suggest alternative SDK patterns without strong justification
+
+## Component Library First
+
+Before suggesting custom implementations:
+
+- Check if Bitwarden's component library already provides the functionality
+- Prefer existing components over custom Tailwind styling
+- Don't add UI complexity that the component library already solves
+
+## When in Doubt
+
+- **Ask questions** (💭) rather than making definitive recommendations
+- **Flag for human review** (⚠️) if you're uncertain
+- **Acknowledge alternatives** exist when suggesting improvements
diff --git a/.github/workflows/build-browser.yml b/.github/workflows/build-browser.yml
index 4378b6de786..83e6c2d696e 100644
--- a/.github/workflows/build-browser.yml
+++ b/.github/workflows/build-browser.yml
@@ -548,7 +548,7 @@ jobs:
         uses: bitwarden/gh-actions/azure-logout@main
 
       - name: Upload Sources
-        uses: crowdin/github-action@f214c8723025f41fc55b2ad26e67b60b80b1885d # v2.7.1
+        uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}
diff --git a/.github/workflows/build-desktop.yml b/.github/workflows/build-desktop.yml
index 68fa2ac255e..f651af9dd7d 100644
--- a/.github/workflows/build-desktop.yml
+++ b/.github/workflows/build-desktop.yml
@@ -185,6 +185,13 @@ jobs:
           cache-dependency-path: '**/package-lock.json'
           node-version: ${{ env._NODE_VERSION }}
 
+      - name: Cache Rust dependencies
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
+        with:
+          workspaces: |
+            apps/desktop/desktop_native -> target
+          cache-targets: "true"
+
       - name: Set up environment
         run: |
           sudo apt-get update
@@ -225,7 +232,7 @@ jobs:
           npm link ../sdk-internal
 
       - name: Cache Native Module
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         id: cache
         with:
           path: |
@@ -334,6 +341,13 @@ jobs:
           cache-dependency-path: '**/package-lock.json'
           node-version: ${{ env._NODE_VERSION }}
 
+      - name: Cache Rust dependencies
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
+        with:
+          workspaces: |
+            apps/desktop/desktop_native -> target
+          cache-targets: "true"
+
       - name: Set up environment
         run: |
           sudo apt-get update
@@ -381,7 +395,7 @@ jobs:
           npm link ../sdk-internal
 
       - name: Cache Native Module
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         id: cache
         with:
           path: |
@@ -426,7 +440,7 @@ jobs:
           if-no-files-found: error
 
       - name: Upload tar.gz artifact
-        uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: bitwarden_${{ env._PACKAGE_VERSION }}_arm64.tar.gz
           path: apps/desktop/dist/bitwarden_desktop_arm64.tar.gz
@@ -475,6 +489,13 @@ jobs:
           cache-dependency-path: '**/package-lock.json'
           node-version: ${{ env._NODE_VERSION }}
 
+      - name: Cache Rust dependencies
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
+        with:
+          workspaces: |
+            apps/desktop/desktop_native -> target
+          cache-targets: "true"
+
       - name: Install AST
         run: dotnet tool install --global AzureSignTool --version 4.0.1
 
@@ -537,7 +558,7 @@ jobs:
           npm link ../sdk-internal
 
       - name: Cache Native Module
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         id: cache
         with:
           path: |
@@ -734,6 +755,13 @@ jobs:
           cache-dependency-path: '**/package-lock.json'
           node-version: ${{ env._NODE_VERSION }}
 
+      - name: Cache Rust dependencies
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
+        with:
+          workspaces: |
+            apps/desktop/desktop_native -> target
+          cache-targets: "true"
+
       - name: Install AST
         run: dotnet tool install --global AzureSignTool --version 4.0.1
 
@@ -793,7 +821,7 @@ jobs:
           npm link ../sdk-internal
 
       - name: Cache Native Module
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         id: cache
         with:
           path: |
@@ -971,11 +999,18 @@ jobs:
       - name: Set up Python
         uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
         with:
-          python-version: '3.12'
+          python-version: '3.14'
       
       - name: Set up Node-gyp
         run: python3 -m pip install setuptools
 
+      - name: Cache Rust dependencies
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
+        with:
+          workspaces: |
+            apps/desktop/desktop_native -> target
+          cache-targets: "true"
+
       - name: Print environment
         run: |
           node --version
@@ -986,14 +1021,14 @@ jobs:
 
       - name: Cache Build
         id: build-cache
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: apps/desktop/build
           key: ${{ runner.os }}-${{ github.run_id }}-build
 
       - name: Cache Safari
         id: safari-cache
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: apps/browser/dist/Safari
           key: ${{ runner.os }}-${{ github.run_id }}-safari-extension
@@ -1139,7 +1174,7 @@ jobs:
           npm link ../sdk-internal
 
       - name: Cache Native Module
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         id: cache
         with:
           path: |
@@ -1201,11 +1236,18 @@ jobs:
       - name: Set up Python
         uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
         with:
-          python-version: '3.12'
+          python-version: '3.14'
       
       - name: Set up Node-gyp
         run: python3 -m pip install setuptools
 
+      - name: Cache Rust dependencies
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
+        with:
+          workspaces: |
+            apps/desktop/desktop_native -> target
+          cache-targets: "true"
+
       - name: Print environment
         run: |
           node --version
@@ -1216,14 +1258,14 @@ jobs:
 
       - name: Get Build Cache
         id: build-cache
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: apps/desktop/build
           key: ${{ runner.os }}-${{ github.run_id }}-build
 
       - name: Setup Safari Cache
         id: safari-cache
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: apps/browser/dist/Safari
           key: ${{ runner.os }}-${{ github.run_id }}-safari-extension
@@ -1353,7 +1395,7 @@ jobs:
           npm link ../sdk-internal
 
       - name: Cache Native Module
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         id: cache
         with:
           path: |
@@ -1466,11 +1508,18 @@ jobs:
       - name: Set up Python
         uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
         with:
-          python-version: '3.12'
+          python-version: '3.14'
           
       - name: Set up Node-gyp
         run: python3 -m pip install setuptools
 
+      - name: Cache Rust dependencies
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
+        with:
+          workspaces: |
+            apps/desktop/desktop_native -> target
+          cache-targets: "true"
+
       - name: Print environment
         run: |
           node --version
@@ -1481,14 +1530,14 @@ jobs:
 
       - name: Get Build Cache
         id: build-cache
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: apps/desktop/build
           key: ${{ runner.os }}-${{ github.run_id }}-build
 
       - name: Setup Safari Cache
         id: safari-cache
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: apps/browser/dist/Safari
           key: ${{ runner.os }}-${{ github.run_id }}-safari-extension
@@ -1626,7 +1675,7 @@ jobs:
           npm link ../sdk-internal
 
       - name: Cache Native Module
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         id: cache
         with:
           path: |
@@ -1747,7 +1796,7 @@ jobs:
         if: |
           github.event_name != 'pull_request_target'
           && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/hotfix-rc-desktop')
-        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
+        uses: slackapi/slack-github-action@91efab103c0de0a537f72a35f6b8cda0ee76bf0a # v2.1.1
         with:
           channel-id: C074F5UESQ0
           method: chat.postMessage
@@ -1805,7 +1854,7 @@ jobs:
         uses: bitwarden/gh-actions/azure-logout@main
 
       - name: Upload Sources
-        uses: crowdin/github-action@f214c8723025f41fc55b2ad26e67b60b80b1885d # v2.7.1
+        uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}
diff --git a/.github/workflows/build-web.yml b/.github/workflows/build-web.yml
index 0ea3ad7af78..719063958f7 100644
--- a/.github/workflows/build-web.yml
+++ b/.github/workflows/build-web.yml
@@ -204,7 +204,7 @@ jobs:
 
       ########## Set up Docker ##########
       - name: Set up Docker
-        uses: docker/setup-docker-action@b60f85385d03ac8acfca6d9996982511d8620a19 # v4.3.0
+        uses: docker/setup-docker-action@efe9e3891a4f7307e689f2100b33a155b900a608 # v4.5.0
         with:
           daemon-config: |
             {
@@ -215,10 +215,10 @@ jobs:
             }
 
       - name: Set up QEMU emulators
-        uses: docker/setup-qemu-action@29109295f81e9208d7d86ff1c6c12d2833863392 # v3.6.0
+        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+        uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3.11.1
 
       ########## ACRs ##########
       - name: Log in to Azure
@@ -273,7 +273,7 @@ jobs:
 
       - name: Build Docker image
         id: build-container
-        uses: docker/build-push-action@67a2d409c0a876cbe6b11854e3e25193efe4e62d # v6.12.0
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0
         with:
           build-args: |
             NODE_VERSION=${{ env._NODE_VERSION }}
@@ -315,7 +315,7 @@ jobs:
 
       - name: Install Cosign
         if: github.event_name != 'pull_request_target' && github.ref == 'refs/heads/main'
-        uses: sigstore/cosign-installer@3454372f43399081ed03b604cb2d021dabca52bb # v3.8.2
+        uses: sigstore/cosign-installer@faadad0cce49287aee09b3a48701e75088a2c6ad # v4.0.0
 
       - name: Sign image with Cosign
         if: github.event_name != 'pull_request_target' && github.ref == 'refs/heads/main'
@@ -334,7 +334,7 @@ jobs:
       - name: Scan Docker image
         if: ${{ needs.setup.outputs.has_secrets == 'true' }}
         id: container-scan
-        uses: anchore/scan-action@2c901ab7378897c01b8efaa2d0c9bf519cc64b9e # v6.2.0
+        uses: anchore/scan-action@1638637db639e0ade3258b51db49a9a137574c3e # v6.5.1
         with:
           image: ${{ steps.image-name.outputs.name }}
           fail-build: false
@@ -390,7 +390,7 @@ jobs:
         uses: bitwarden/gh-actions/azure-logout@main
 
       - name: Upload Sources
-        uses: crowdin/github-action@f214c8723025f41fc55b2ad26e67b60b80b1885d # v2.7.1
+        uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index ccac9cb32bb..aa0183ac16f 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -65,7 +65,7 @@ jobs:
 
       - name: Cache NPM
         id: npm-cache
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: "~/.npm"
           key: ${{ runner.os }}-npm-chromatic-${{ hashFiles('**/package-lock.json') }}
@@ -98,7 +98,7 @@ jobs:
         uses: bitwarden/gh-actions/azure-logout@main
 
       - name: Publish to Chromatic
-        uses: chromaui/action@d0795df816d05c4a89c80295303970fddd247cce # v13.1.4
+        uses: chromaui/action@ac86f2ff0a458ffbce7b40698abd44c0fa34d4b6 # v13.3.3
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ steps.get-kv-secrets.outputs.CHROMATIC-PROJECT-TOKEN }}
diff --git a/.github/workflows/crowdin-pull.yml b/.github/workflows/crowdin-pull.yml
index f195afa86da..19532493071 100644
--- a/.github/workflows/crowdin-pull.yml
+++ b/.github/workflows/crowdin-pull.yml
@@ -49,7 +49,7 @@ jobs:
         uses: bitwarden/gh-actions/azure-logout@main
 
       - name: Generate GH App token
-        uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+        uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
         id: app-token
         with:
           app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
diff --git a/.github/workflows/lint-crowdin-config.yml b/.github/workflows/lint-crowdin-config.yml
index ee22a03963c..8d6bf254906 100644
--- a/.github/workflows/lint-crowdin-config.yml
+++ b/.github/workflows/lint-crowdin-config.yml
@@ -45,7 +45,7 @@ jobs:
         uses: bitwarden/gh-actions/azure-logout@main
 
       - name: Lint ${{ matrix.app.name }} config
-        uses: crowdin/github-action@f214c8723025f41fc55b2ad26e67b60b80b1885d # v2.7.1
+        uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CROWDIN_PROJECT_ID: ${{ matrix.app.project_id }}
diff --git a/.github/workflows/publish-desktop.yml b/.github/workflows/publish-desktop.yml
index 2e9ba635e7a..15a0ec77d5b 100644
--- a/.github/workflows/publish-desktop.yml
+++ b/.github/workflows/publish-desktop.yml
@@ -348,9 +348,9 @@ jobs:
         run: wget "https://github.com/bitwarden/clients/releases/download/$_RELEASE_TAG/macos-build-number.json"
 
       - name: Setup Ruby and Install Fastlane
-        uses: ruby/setup-ruby@ca041f971d66735f3e5ff1e21cc13e2d51e7e535 # v1.233.0
+        uses: ruby/setup-ruby@d5126b9b3579e429dd52e51e68624dda2e05be25 # v1.267.0
         with:
-          ruby-version: '3.0'
+          ruby-version: '3.4.7'
           bundler-cache: false
           working-directory: apps/desktop
         
diff --git a/.github/workflows/release-browser.yml b/.github/workflows/release-browser.yml
index 39f54a6e2db..c7faefb2ce9 100644
--- a/.github/workflows/release-browser.yml
+++ b/.github/workflows/release-browser.yml
@@ -140,7 +140,7 @@ jobs:
 
       - name: Create release
         if: ${{ github.event.inputs.release_type != 'Dry Run' }}
-        uses: ncipollo/release-action@cdcc88a9acf3ca41c16c37bb7d21b9ad48560d87 # v1.15.0
+        uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1.20.0
         with:
           artifacts: 'browser-source-${{ needs.setup.outputs.release_version }}.zip,
                       dist-chrome-${{ needs.setup.outputs.release_version }}.zip,
diff --git a/.github/workflows/release-cli.yml b/.github/workflows/release-cli.yml
index d5013770476..4b94939b9dc 100644
--- a/.github/workflows/release-cli.yml
+++ b/.github/workflows/release-cli.yml
@@ -80,7 +80,7 @@ jobs:
 
       - name: Create release
         if: ${{ inputs.release_type != 'Dry Run' }}
-        uses: ncipollo/release-action@cdcc88a9acf3ca41c16c37bb7d21b9ad48560d87 # v1.15.0
+        uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1.20.0
         env:
           PKG_VERSION: ${{ needs.setup.outputs.release_version }}
         with:
diff --git a/.github/workflows/release-desktop.yml b/.github/workflows/release-desktop.yml
index c7bebe86d51..35fc8bed8a9 100644
--- a/.github/workflows/release-desktop.yml
+++ b/.github/workflows/release-desktop.yml
@@ -99,7 +99,7 @@ jobs:
         run: mv "Bitwarden-$PKG_VERSION-universal.pkg" "Bitwarden-$PKG_VERSION-universal.pkg.archive"
 
       - name: Create Release
-        uses: ncipollo/release-action@cdcc88a9acf3ca41c16c37bb7d21b9ad48560d87 # v1.15.0
+        uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1.20.0
         if: ${{ steps.release_channel.outputs.channel == 'latest' && github.event.inputs.release_type != 'Dry Run' }}
         env:
           PKG_VERSION: ${{ steps.version.outputs.version }}
diff --git a/.github/workflows/release-web.yml b/.github/workflows/release-web.yml
index 8c8f8ed86af..59022657398 100644
--- a/.github/workflows/release-web.yml
+++ b/.github/workflows/release-web.yml
@@ -89,7 +89,7 @@ jobs:
 
       - name: Create release
         if: ${{ github.event.inputs.release_type != 'Dry Run' }}
-        uses: ncipollo/release-action@cdcc88a9acf3ca41c16c37bb7d21b9ad48560d87 # v1.15.0
+        uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1.20.0
         with:
           name: "Web v${{ needs.setup.outputs.release_version }}"
           commit: ${{ github.sha }}
diff --git a/.github/workflows/repository-management.yml b/.github/workflows/repository-management.yml
index ce9b70118b2..2a58e2fa828 100644
--- a/.github/workflows/repository-management.yml
+++ b/.github/workflows/repository-management.yml
@@ -97,7 +97,7 @@ jobs:
         uses: bitwarden/gh-actions/azure-logout@main
 
       - name: Generate GH App token
-        uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+        uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
         id: app-token
         with:
           app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
@@ -462,7 +462,7 @@ jobs:
         uses: bitwarden/gh-actions/azure-logout@main
 
       - name: Generate GH App token
-        uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+        uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
         id: app-token
         with:
           app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
diff --git a/.github/workflows/review-code.yml b/.github/workflows/review-code.yml
index 46309af38ea..0e0597fccf0 100644
--- a/.github/workflows/review-code.yml
+++ b/.github/workflows/review-code.yml
@@ -15,6 +15,7 @@ jobs:
       AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
       AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
     permissions:
+      actions: read
       contents: read
       id-token: write
       pull-requests: write
diff --git a/.github/workflows/sdk-breaking-change-check.yml b/.github/workflows/sdk-breaking-change-check.yml
index 29a25181b75..759f2292d2a 100644
--- a/.github/workflows/sdk-breaking-change-check.yml
+++ b/.github/workflows/sdk-breaking-change-check.yml
@@ -53,7 +53,7 @@ jobs:
           secrets: "BW-GHAPP-ID,BW-GHAPP-KEY"
 
       - name: Generate GH App token
-        uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+        uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
         id: app-token
         with:
           app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
diff --git a/.github/workflows/test-browser-interactions.yml b/.github/workflows/test-browser-interactions.yml
index fb31a93d51f..6aca75fa859 100644
--- a/.github/workflows/test-browser-interactions.yml
+++ b/.github/workflows/test-browser-interactions.yml
@@ -49,7 +49,7 @@ jobs:
       uses: bitwarden/gh-actions/azure-logout@main
 
     - name: Generate GH App token
-      uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+      uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
       id: app-token
       with:
         app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index d468ca74ed6..71f8e7c9155 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -62,7 +62,7 @@ jobs:
         run: npm test -- --coverage --maxWorkers=3
 
       - name: Report test results
-        uses: dorny/test-reporter@6e6a65b7a0bd2c9197df7d0ae36ac5cee784230c # v2.0.0
+        uses: dorny/test-reporter@dc3a92680fcc15842eef52e8c4606ea7ce6bd3f3 # v2.1.1
         if: ${{ github.event.pull_request.head.repo.full_name == github.repository && !cancelled() }}
         with:
           name: Test Results
@@ -148,7 +148,7 @@ jobs:
           components: llvm-tools
 
       - name: Cache cargo registry
-        uses: Swatinem/rust-cache@82a92a6e8fbeee089604da2575dc567ae9ddeaab # v2.7.5
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
         with:
           workspaces: "apps/desktop/desktop_native -> target"
 
@@ -190,7 +190,7 @@ jobs:
           path: ./apps/desktop/desktop_native
 
       - name: Upload coverage to codecov.io
-        uses: codecov/codecov-action@ad3126e916f78f00edff4ed0317cf185271ccc2d # v5.4.2
+        uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5.5.1
         with:
           files: |
             ./lcov.info
diff --git a/.github/workflows/version-auto-bump.yml b/.github/workflows/version-auto-bump.yml
index fee34d14e83..9ff252d2fe8 100644
--- a/.github/workflows/version-auto-bump.yml
+++ b/.github/workflows/version-auto-bump.yml
@@ -31,7 +31,7 @@ jobs:
         uses: bitwarden/gh-actions/azure-logout@main
 
       - name: Generate GH App token
-        uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+        uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
         id: app-token
         with:
           app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index cc5c9324d6a..715c1bbcb83 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -5824,6 +5824,12 @@
   "upgradeToPremium": {
     "message": "Upgrade to Premium"
   },
+  "loadingVault": {
+    "message": "Loading vault"
+  },
+  "vaultLoaded": {
+    "message": "Vault loaded"
+  },
   "settingDisabledByPolicy": {
     "message": "This setting is disabled by your organization's policy.",
     "description": "This hint text is displayed when a user setting is disabled due to an organization policy."
diff --git a/apps/browser/src/auth/popup/settings/account-security.component.html b/apps/browser/src/auth/popup/settings/account-security.component.html
index 2babd2a7ef6..37efcee9012 100644
--- a/apps/browser/src/auth/popup/settings/account-security.component.html
+++ b/apps/browser/src/auth/popup/settings/account-security.component.html
@@ -86,12 +86,12 @@
         </bit-section-header>
 
         <bit-card>
-          <auth-vault-timeout-input
+          <bit-session-timeout-input
             [vaultTimeoutOptions]="vaultTimeoutOptions"
             [formControl]="form.controls.vaultTimeout"
             ngDefaultControl
           >
-          </auth-vault-timeout-input>
+          </bit-session-timeout-input>
 
           <bit-form-field disableMargin>
             <bit-label for="vaultTimeoutAction">{{ "vaultTimeoutAction1" | i18n }}</bit-label>
diff --git a/apps/browser/src/auth/popup/settings/account-security.component.ts b/apps/browser/src/auth/popup/settings/account-security.component.ts
index c5423a5f1d1..e6e7be96c08 100644
--- a/apps/browser/src/auth/popup/settings/account-security.component.ts
+++ b/apps/browser/src/auth/popup/settings/account-security.component.ts
@@ -24,7 +24,7 @@ import {
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { NudgesService, NudgeType } from "@bitwarden/angular/vault";
 import { SpotlightComponent } from "@bitwarden/angular/vault/components/spotlight/spotlight.component";
-import { FingerprintDialogComponent, VaultTimeoutInputComponent } from "@bitwarden/auth/angular";
+import { FingerprintDialogComponent } from "@bitwarden/auth/angular";
 import { LockService } from "@bitwarden/auth/common";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
@@ -69,7 +69,10 @@ import {
   BiometricStateService,
   BiometricsStatus,
 } from "@bitwarden/key-management";
-import { SessionTimeoutSettingsComponent } from "@bitwarden/key-management-ui";
+import {
+  SessionTimeoutInputComponent,
+  SessionTimeoutSettingsComponent,
+} from "@bitwarden/key-management-ui";
 
 import { BiometricErrors, BiometricErrorTypes } from "../../../models/biometricErrors";
 import { BrowserApi } from "../../../platform/browser/browser-api";
@@ -106,7 +109,7 @@ import { AwaitDesktopDialogComponent } from "./await-desktop-dialog.component";
     SessionTimeoutSettingsComponent,
     SpotlightComponent,
     TypographyModule,
-    VaultTimeoutInputComponent,
+    SessionTimeoutInputComponent,
   ],
 })
 export class AccountSecurityComponent implements OnInit, OnDestroy {
diff --git a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
index 7c98859070a..fd4d9b60804 100644
--- a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
+++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
@@ -1085,7 +1085,15 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
         pageDetails,
       )
     ) {
-      this.setQualifiedAccountCreationFillType(autofillFieldData);
+      const hasUsernameField = [...this.formFieldElements.values()].some((field) =>
+        this.inlineMenuFieldQualificationService.isUsernameField(field),
+      );
+
+      if (hasUsernameField) {
+        void this.setQualifiedLoginFillType(autofillFieldData);
+      } else {
+        this.setQualifiedAccountCreationFillType(autofillFieldData);
+      }
       return false;
     }
 
diff --git a/apps/browser/src/platform/popup/layout/popup-page.component.html b/apps/browser/src/platform/popup/layout/popup-page.component.html
index a9184a9dd54..828d9947373 100644
--- a/apps/browser/src/platform/popup/layout/popup-page.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-page.component.html
@@ -27,10 +27,10 @@
     data-testid="popup-layout-scroll-region"
     (scroll)="handleScroll($event)"
     [ngClass]="{
-      'tw-overflow-hidden': hideOverflow(),
+      '!tw-overflow-hidden': hideOverflow(),
       'tw-overflow-y-auto': !hideOverflow(),
       'tw-invisible': loading(),
-      'tw-py-3 bit-compact:tw-py-2 tw-px-[max(0.75rem,calc((100%-(var(--tw-sm-breakpoint)))/2))] bit-compact:tw-px-[max(0.5rem,calc((100%-(var(--tw-sm-breakpoint)))/2))]':
+      'tw-relative tw-py-3 bit-compact:tw-py-2 tw-px-[max(0.75rem,calc((100%-(var(--tw-sm-breakpoint)))/2))] bit-compact:tw-px-[max(0.5rem,calc((100%-(var(--tw-sm-breakpoint)))/2))]':
         !disablePadding(),
     }"
     bitScrollLayoutHost
diff --git a/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.html b/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.html
new file mode 100644
index 00000000000..c83c1ab85c4
--- /dev/null
+++ b/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.html
@@ -0,0 +1,6 @@
+<!-- tw-p-3 matches the padding of the popup-page -->
+<div
+  class="tw-absolute tw-left-0 tw-top-0 tw-size-full tw-p-3 tw-overflow-hidden tw-bg-background-alt"
+>
+  <ng-content></ng-content>
+</div>
diff --git a/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.ts b/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.ts
new file mode 100644
index 00000000000..2426153ad68
--- /dev/null
+++ b/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.ts
@@ -0,0 +1,20 @@
+import { animate, style, transition, trigger } from "@angular/animations";
+import { ChangeDetectionStrategy, Component, HostBinding } from "@angular/core";
+
+@Component({
+  selector: "vault-fade-in-out-skeleton",
+  templateUrl: "./vault-fade-in-out-skeleton.component.html",
+  animations: [
+    trigger("fadeInOut", [
+      transition(":enter", [
+        style({ opacity: 0 }),
+        animate("100ms ease-in", style({ opacity: 1 })),
+      ]),
+      transition(":leave", [animate("300ms ease-out", style({ opacity: 0 }))]),
+    ]),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class VaultFadeInOutSkeletonComponent {
+  @HostBinding("@fadeInOut") fadeInOut = true;
+}
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-header/vault-header-v2.component.spec.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-header/vault-header-v2.component.spec.ts
index 9564aeadc09..2e822d82855 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-header/vault-header-v2.component.spec.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-header/vault-header-v2.component.spec.ts
@@ -10,6 +10,7 @@ import { CollectionService } from "@bitwarden/admin-console/common";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.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 { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -28,6 +29,7 @@ import {
   PopupListFilter,
   VaultPopupListFiltersService,
 } from "../../../../../vault/popup/services/vault-popup-list-filters.service";
+import { VaultPopupLoadingService } from "../../../services/vault-popup-loading.service";
 
 import { VaultHeaderV2Component } from "./vault-header-v2.component";
 
@@ -75,6 +77,10 @@ describe("VaultHeaderV2Component", () => {
         { provide: MessageSender, useValue: mock<MessageSender>() },
         { provide: AccountService, useValue: mock<AccountService>() },
         { provide: LogService, useValue: mock<LogService>() },
+        {
+          provide: ConfigService,
+          useValue: { getFeatureFlag$: jest.fn(() => new BehaviorSubject(true)) },
+        },
         {
           provide: VaultPopupItemsService,
           useValue: mock<VaultPopupItemsService>({ searchText$: new BehaviorSubject("") }),
@@ -99,6 +105,10 @@ describe("VaultHeaderV2Component", () => {
           provide: StateProvider,
           useValue: { getGlobal: () => ({ state$, update }) },
         },
+        {
+          provide: VaultPopupLoadingService,
+          useValue: { loading$: new BehaviorSubject(false) },
+        },
       ],
     }).compileComponents();
 
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.spec.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.spec.ts
new file mode 100644
index 00000000000..37c4804e600
--- /dev/null
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.spec.ts
@@ -0,0 +1,160 @@
+import { CommonModule } from "@angular/common";
+import { ComponentFixture, fakeAsync, TestBed, tick } from "@angular/core/testing";
+import { FormsModule } from "@angular/forms";
+import { BehaviorSubject } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { SearchTextDebounceInterval } from "@bitwarden/common/vault/services/search.service";
+import { SearchModule } from "@bitwarden/components";
+
+import { VaultPopupItemsService } from "../../../services/vault-popup-items.service";
+import { VaultPopupLoadingService } from "../../../services/vault-popup-loading.service";
+
+import { VaultV2SearchComponent } from "./vault-v2-search.component";
+
+describe("VaultV2SearchComponent", () => {
+  let component: VaultV2SearchComponent;
+  let fixture: ComponentFixture<VaultV2SearchComponent>;
+
+  const searchText$ = new BehaviorSubject("");
+  const loading$ = new BehaviorSubject(false);
+  const featureFlag$ = new BehaviorSubject(true);
+  const applyFilter = jest.fn();
+
+  const createComponent = () => {
+    fixture = TestBed.createComponent(VaultV2SearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  };
+
+  beforeEach(async () => {
+    applyFilter.mockClear();
+    featureFlag$.next(true);
+
+    await TestBed.configureTestingModule({
+      imports: [VaultV2SearchComponent, CommonModule, SearchModule, JslibModule, FormsModule],
+      providers: [
+        {
+          provide: VaultPopupItemsService,
+          useValue: {
+            searchText$,
+            applyFilter,
+          },
+        },
+        {
+          provide: VaultPopupLoadingService,
+          useValue: {
+            loading$,
+          },
+        },
+        {
+          provide: ConfigService,
+          useValue: {
+            getFeatureFlag$: jest.fn(() => featureFlag$),
+          },
+        },
+        { provide: I18nService, useValue: { t: (key: string) => key } },
+      ],
+    }).compileComponents();
+  });
+
+  it("subscribes to search text from service", () => {
+    createComponent();
+
+    searchText$.next("test search");
+    fixture.detectChanges();
+
+    expect(component.searchText).toBe("test search");
+  });
+
+  describe("debouncing behavior", () => {
+    describe("when feature flag is enabled", () => {
+      beforeEach(() => {
+        featureFlag$.next(true);
+        createComponent();
+      });
+
+      it("debounces search text changes when not loading", fakeAsync(() => {
+        loading$.next(false);
+
+        component.searchText = "test";
+        component.onSearchTextChanged();
+
+        expect(applyFilter).not.toHaveBeenCalled();
+
+        tick(SearchTextDebounceInterval);
+
+        expect(applyFilter).toHaveBeenCalledWith("test");
+        expect(applyFilter).toHaveBeenCalledTimes(1);
+      }));
+
+      it("should not debounce search text changes when loading", fakeAsync(() => {
+        loading$.next(true);
+
+        component.searchText = "test";
+        component.onSearchTextChanged();
+
+        tick(0);
+
+        expect(applyFilter).toHaveBeenCalledWith("test");
+        expect(applyFilter).toHaveBeenCalledTimes(1);
+      }));
+
+      it("cancels previous debounce when new text is entered", fakeAsync(() => {
+        loading$.next(false);
+
+        component.searchText = "test";
+        component.onSearchTextChanged();
+
+        tick(SearchTextDebounceInterval / 2);
+
+        component.searchText = "test2";
+        component.onSearchTextChanged();
+
+        tick(SearchTextDebounceInterval / 2);
+
+        expect(applyFilter).not.toHaveBeenCalled();
+
+        tick(SearchTextDebounceInterval / 2);
+
+        expect(applyFilter).toHaveBeenCalledWith("test2");
+        expect(applyFilter).toHaveBeenCalledTimes(1);
+      }));
+    });
+
+    describe("when feature flag is disabled", () => {
+      beforeEach(() => {
+        featureFlag$.next(false);
+        createComponent();
+      });
+
+      it("debounces search text changes", fakeAsync(() => {
+        component.searchText = "test";
+        component.onSearchTextChanged();
+
+        expect(applyFilter).not.toHaveBeenCalled();
+
+        tick(SearchTextDebounceInterval);
+
+        expect(applyFilter).toHaveBeenCalledWith("test");
+        expect(applyFilter).toHaveBeenCalledTimes(1);
+      }));
+
+      it("ignores loading state and always debounces", fakeAsync(() => {
+        loading$.next(true);
+
+        component.searchText = "test";
+        component.onSearchTextChanged();
+
+        expect(applyFilter).not.toHaveBeenCalled();
+
+        tick(SearchTextDebounceInterval);
+
+        expect(applyFilter).toHaveBeenCalledWith("test");
+        expect(applyFilter).toHaveBeenCalledTimes(1);
+      }));
+    });
+  });
+});
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.ts
index c254c290915..154cd49c5a3 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.ts
@@ -2,13 +2,27 @@ import { CommonModule } from "@angular/common";
 import { Component, NgZone } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormsModule } from "@angular/forms";
-import { Subject, Subscription, debounceTime, distinctUntilChanged, filter } from "rxjs";
+import {
+  Subject,
+  Subscription,
+  combineLatest,
+  debounce,
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  map,
+  switchMap,
+  timer,
+} 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 { SearchTextDebounceInterval } from "@bitwarden/common/vault/services/search.service";
 import { SearchModule } from "@bitwarden/components";
 
 import { VaultPopupItemsService } from "../../../services/vault-popup-items.service";
+import { VaultPopupLoadingService } from "../../../services/vault-popup-loading.service";
 
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@@ -22,8 +36,11 @@ export class VaultV2SearchComponent {
 
   private searchText$ = new Subject<string>();
 
+  protected loading$ = this.vaultPopupLoadingService.loading$;
   constructor(
     private vaultPopupItemsService: VaultPopupItemsService,
+    private vaultPopupLoadingService: VaultPopupLoadingService,
+    private configService: ConfigService,
     private ngZone: NgZone,
   ) {
     this.subscribeToLatestSearchText();
@@ -45,13 +62,38 @@ export class VaultV2SearchComponent {
       });
   }
 
-  subscribeToApplyFilter(): Subscription {
-    return this.searchText$
-      .pipe(debounceTime(SearchTextDebounceInterval), distinctUntilChanged(), takeUntilDestroyed())
-      .subscribe((data) => {
+  subscribeToApplyFilter(): void {
+    this.configService
+      .getFeatureFlag$(FeatureFlag.VaultLoadingSkeletons)
+      .pipe(
+        switchMap((enabled) => {
+          if (!enabled) {
+            return this.searchText$.pipe(
+              debounceTime(SearchTextDebounceInterval),
+              distinctUntilChanged(),
+            );
+          }
+
+          return combineLatest([this.searchText$, this.loading$]).pipe(
+            debounce(([_, isLoading]) => {
+              // If loading apply immediately to avoid stale searches.
+              // After loading completes, debounce to avoid excessive searches.
+              const delayTime = isLoading ? 0 : SearchTextDebounceInterval;
+              return timer(delayTime);
+            }),
+            distinctUntilChanged(
+              ([prevText, prevLoading], [newText, newLoading]) =>
+                prevText === newText && prevLoading === newLoading,
+            ),
+            map(([text, _]) => text),
+          );
+        }),
+        takeUntilDestroyed(),
+      )
+      .subscribe((text) => {
         this.ngZone.runOutsideAngular(() => {
           this.ngZone.run(() => {
-            this.vaultPopupItemsService.applyFilter(data);
+            this.vaultPopupItemsService.applyFilter(text);
           });
         });
       });
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
index 07d3f042e60..5bca9cddd4f 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
@@ -1,4 +1,4 @@
-<popup-page [loading]="loading$ | async">
+<popup-page [loading]="showSpinnerLoaders$ | async" [hideOverflow]="showSkeletonsLoaders$ | async">
   <popup-header slot="header" [pageTitle]="'vault' | i18n">
     <ng-container slot="end">
       <app-new-item-dropdown [initialValues]="newItemItemValues$ | async"></app-new-item-dropdown>
@@ -103,4 +103,10 @@
       ></app-vault-list-items-container>
     </ng-container>
   </ng-container>
+
+  @if (showSkeletonsLoaders$ | async) {
+    <vault-fade-in-out-skeleton>
+      <vault-loading-skeleton></vault-loading-skeleton>
+    </vault-fade-in-out-skeleton>
+  }
 </popup-page>
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
index 2dd6c1a0ce1..e55a702d350 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
@@ -1,3 +1,4 @@
+import { LiveAnnouncer } from "@angular/cdk/a11y";
 import { CdkVirtualScrollableElement, ScrollingModule } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
 import { AfterViewInit, Component, DestroyRef, OnDestroy, OnInit, ViewChild } from "@angular/core";
@@ -5,14 +6,15 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Router, RouterModule } from "@angular/router";
 import {
   combineLatest,
+  distinctUntilChanged,
   filter,
   firstValueFrom,
   map,
   Observable,
   shareReplay,
-  startWith,
   switchMap,
   take,
+  tap,
 } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -22,6 +24,8 @@ import { DeactivatedOrg, NoResults, VaultOpen } from "@bitwarden/assets/svg";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CipherId, CollectionId, OrganizationId, UserId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
@@ -41,11 +45,13 @@ import { PopOutComponent } from "../../../../platform/popup/components/pop-out.c
 import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
 import { IntroCarouselService } from "../../services/intro-carousel.service";
-import { VaultPopupCopyButtonsService } from "../../services/vault-popup-copy-buttons.service";
 import { VaultPopupItemsService } from "../../services/vault-popup-items.service";
 import { VaultPopupListFiltersService } from "../../services/vault-popup-list-filters.service";
+import { VaultPopupLoadingService } from "../../services/vault-popup-loading.service";
 import { VaultPopupScrollPositionService } from "../../services/vault-popup-scroll-position.service";
 import { AtRiskPasswordCalloutComponent } from "../at-risk-callout/at-risk-password-callout.component";
+import { VaultFadeInOutSkeletonComponent } from "../vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component";
+import { VaultLoadingSkeletonComponent } from "../vault-loading-skeleton/vault-loading-skeleton.component";
 
 import { BlockedInjectionBanner } from "./blocked-injection-banner/blocked-injection-banner.component";
 import {
@@ -88,6 +94,8 @@ type VaultState = UnionOfValues<typeof VaultState>;
     SpotlightComponent,
     RouterModule,
     TypographyModule,
+    VaultLoadingSkeletonComponent,
+    VaultFadeInOutSkeletonComponent,
   ],
 })
 export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
@@ -108,19 +116,30 @@ export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
   );
 
   activeUserId: UserId | null = null;
+
+  private loading$ = this.vaultPopupLoadingService.loading$.pipe(
+    distinctUntilChanged(),
+    tap((loading) => {
+      const key = loading ? "loadingVault" : "vaultLoaded";
+      void this.liveAnnouncer.announce(this.i18nService.translate(key), "polite");
+    }),
+  );
+  private skeletonFeatureFlag$ = this.configService.getFeatureFlag$(
+    FeatureFlag.VaultLoadingSkeletons,
+  );
+
   protected favoriteCiphers$ = this.vaultPopupItemsService.favoriteCiphers$;
   protected remainingCiphers$ = this.vaultPopupItemsService.remainingCiphers$;
   protected allFilters$ = this.vaultPopupListFiltersService.allFilters$;
 
-  protected loading$ = combineLatest([
-    this.vaultPopupItemsService.loading$,
-    this.allFilters$,
-    // Added as a dependency to avoid flashing the copyActions on slower devices
-    this.vaultCopyButtonsService.showQuickCopyActions$,
-  ]).pipe(
-    map(([itemsLoading, filters]) => itemsLoading || !filters),
-    shareReplay({ bufferSize: 1, refCount: true }),
-    startWith(true),
+  /** When true, show spinner loading state */
+  protected showSpinnerLoaders$ = combineLatest([this.loading$, this.skeletonFeatureFlag$]).pipe(
+    map(([loading, skeletonsEnabled]) => loading && !skeletonsEnabled),
+  );
+
+  /** When true, show skeleton loading state */
+  protected showSkeletonsLoaders$ = combineLatest([this.loading$, this.skeletonFeatureFlag$]).pipe(
+    map(([loading, skeletonsEnabled]) => loading && skeletonsEnabled),
   );
 
   protected newItemItemValues$: Observable<NewItemInitialValues> =
@@ -150,14 +169,17 @@ export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
     private vaultPopupItemsService: VaultPopupItemsService,
     private vaultPopupListFiltersService: VaultPopupListFiltersService,
     private vaultScrollPositionService: VaultPopupScrollPositionService,
+    private vaultPopupLoadingService: VaultPopupLoadingService,
     private accountService: AccountService,
     private destroyRef: DestroyRef,
     private cipherService: CipherService,
     private dialogService: DialogService,
-    private vaultCopyButtonsService: VaultPopupCopyButtonsService,
     private introCarouselService: IntroCarouselService,
     private nudgesService: NudgesService,
     private router: Router,
+    private liveAnnouncer: LiveAnnouncer,
+    private i18nService: I18nService,
+    private configService: ConfigService,
   ) {
     combineLatest([
       this.vaultPopupItemsService.emptyVault$,
diff --git a/apps/browser/src/vault/popup/services/vault-popup-loading.service.spec.ts b/apps/browser/src/vault/popup/services/vault-popup-loading.service.spec.ts
new file mode 100644
index 00000000000..4b9c284b3b7
--- /dev/null
+++ b/apps/browser/src/vault/popup/services/vault-popup-loading.service.spec.ts
@@ -0,0 +1,72 @@
+import { TestBed } from "@angular/core/testing";
+import { firstValueFrom, skip, Subject } from "rxjs";
+
+import { VaultPopupCopyButtonsService } from "./vault-popup-copy-buttons.service";
+import { VaultPopupItemsService } from "./vault-popup-items.service";
+import { VaultPopupListFiltersService } from "./vault-popup-list-filters.service";
+import { VaultPopupLoadingService } from "./vault-popup-loading.service";
+
+describe("VaultPopupLoadingService", () => {
+  let service: VaultPopupLoadingService;
+  let itemsLoading$: Subject<boolean>;
+  let allFilters$: Subject<any>;
+  let showQuickCopyActions$: Subject<boolean>;
+
+  beforeEach(() => {
+    itemsLoading$ = new Subject<boolean>();
+    allFilters$ = new Subject<any>();
+    showQuickCopyActions$ = new Subject<boolean>();
+
+    TestBed.configureTestingModule({
+      providers: [
+        VaultPopupLoadingService,
+        { provide: VaultPopupItemsService, useValue: { loading$: itemsLoading$ } },
+        { provide: VaultPopupListFiltersService, useValue: { allFilters$: allFilters$ } },
+        {
+          provide: VaultPopupCopyButtonsService,
+          useValue: { showQuickCopyActions$: showQuickCopyActions$ },
+        },
+      ],
+    });
+
+    service = TestBed.inject(VaultPopupLoadingService);
+  });
+
+  it("emits true initially", async () => {
+    const loading = await firstValueFrom(service.loading$);
+
+    expect(loading).toBe(true);
+  });
+
+  it("emits false when items are loaded and filters are available", async () => {
+    const loadingPromise = firstValueFrom(service.loading$.pipe(skip(1)));
+
+    itemsLoading$.next(false);
+    allFilters$.next({});
+    showQuickCopyActions$.next(true);
+
+    expect(await loadingPromise).toBe(false);
+  });
+
+  it("emits true when filters are not available", async () => {
+    const loadingPromise = firstValueFrom(service.loading$.pipe(skip(2)));
+
+    itemsLoading$.next(false);
+    allFilters$.next({});
+    showQuickCopyActions$.next(true);
+    allFilters$.next(null);
+
+    expect(await loadingPromise).toBe(true);
+  });
+
+  it("emits true when items are loading", async () => {
+    const loadingPromise = firstValueFrom(service.loading$.pipe(skip(2)));
+
+    itemsLoading$.next(false);
+    allFilters$.next({});
+    showQuickCopyActions$.next(true);
+    itemsLoading$.next(true);
+
+    expect(await loadingPromise).toBe(true);
+  });
+});
diff --git a/apps/browser/src/vault/popup/services/vault-popup-loading.service.ts b/apps/browser/src/vault/popup/services/vault-popup-loading.service.ts
new file mode 100644
index 00000000000..f56f2b8d8ee
--- /dev/null
+++ b/apps/browser/src/vault/popup/services/vault-popup-loading.service.ts
@@ -0,0 +1,27 @@
+import { inject, Injectable } from "@angular/core";
+import { combineLatest, map, shareReplay, startWith } from "rxjs";
+
+import { VaultPopupCopyButtonsService } from "./vault-popup-copy-buttons.service";
+import { VaultPopupItemsService } from "./vault-popup-items.service";
+import { VaultPopupListFiltersService } from "./vault-popup-list-filters.service";
+
+@Injectable({
+  providedIn: "root",
+})
+export class VaultPopupLoadingService {
+  private vaultPopupItemsService = inject(VaultPopupItemsService);
+  private vaultPopupListFiltersService = inject(VaultPopupListFiltersService);
+  private vaultCopyButtonsService = inject(VaultPopupCopyButtonsService);
+
+  /** Loading state of the vault */
+  loading$ = combineLatest([
+    this.vaultPopupItemsService.loading$,
+    this.vaultPopupListFiltersService.allFilters$,
+    // Added as a dependency to avoid flashing the copyActions on slower devices
+    this.vaultCopyButtonsService.showQuickCopyActions$,
+  ]).pipe(
+    map(([itemsLoading, filters]) => itemsLoading || !filters),
+    shareReplay({ bufferSize: 1, refCount: true }),
+    startWith(true),
+  );
+}
diff --git a/apps/desktop/src/app/accounts/settings.component.html b/apps/desktop/src/app/accounts/settings.component.html
index 79e21480a76..bf3c46a311f 100644
--- a/apps/desktop/src/app/accounts/settings.component.html
+++ b/apps/desktop/src/app/accounts/settings.component.html
@@ -44,12 +44,12 @@
                     <h2 bitTypography="h6">{{ "vaultTimeoutHeader" | i18n }}</h2>
                   </bit-section-header>
 
-                  <auth-vault-timeout-input
+                  <bit-session-timeout-input
                     [vaultTimeoutOptions]="vaultTimeoutOptions"
                     [formControl]="form.controls.vaultTimeout"
                     ngDefaultControl
                   >
-                  </auth-vault-timeout-input>
+                  </bit-session-timeout-input>
 
                   <bit-form-field disableMargin>
                     <bit-label for="vaultTimeoutAction">{{
diff --git a/apps/desktop/src/app/accounts/settings.component.ts b/apps/desktop/src/app/accounts/settings.component.ts
index 3db6c08a6c8..c0798f1bdf0 100644
--- a/apps/desktop/src/app/accounts/settings.component.ts
+++ b/apps/desktop/src/app/accounts/settings.component.ts
@@ -9,7 +9,6 @@ import { concatMap, map, pairwise, startWith, switchMap, takeUntil, timeout } fr
 
 import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { VaultTimeoutInputComponent } from "@bitwarden/auth/angular";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { getFirstPolicy } from "@bitwarden/common/admin-console/services/policy/default-policy.service";
@@ -55,7 +54,10 @@ import {
   TypographyModule,
 } from "@bitwarden/components";
 import { KeyService, BiometricStateService, BiometricsStatus } from "@bitwarden/key-management";
-import { SessionTimeoutSettingsComponent } from "@bitwarden/key-management-ui";
+import {
+  SessionTimeoutInputComponent,
+  SessionTimeoutSettingsComponent,
+} from "@bitwarden/key-management-ui";
 import { PermitCipherDetailsPopoverComponent } from "@bitwarden/vault";
 
 import { SetPinComponent } from "../../auth/components/set-pin.component";
@@ -95,7 +97,7 @@ import { NativeMessagingManifestService } from "../services/native-messaging-man
     SectionHeaderComponent,
     SelectModule,
     TypographyModule,
-    VaultTimeoutInputComponent,
+    SessionTimeoutInputComponent,
     SessionTimeoutSettingsComponent,
     PermitCipherDetailsPopoverComponent,
     PremiumBadgeComponent,
@@ -837,22 +839,6 @@ export class SettingsComponent implements OnInit, OnDestroy {
       ipc.platform.allowBrowserintegrationOverride || ipc.platform.isDev;
 
     if (!skipSupportedPlatformCheck) {
-      if (
-        ipc.platform.deviceType === DeviceType.MacOsDesktop &&
-        !this.platformUtilsService.isMacAppStore()
-      ) {
-        await this.dialogService.openSimpleDialog({
-          title: { key: "browserIntegrationUnsupportedTitle" },
-          content: { key: "browserIntegrationMasOnlyDesc" },
-          acceptButtonText: { key: "ok" },
-          cancelButtonText: null,
-          type: "warning",
-        });
-
-        this.form.controls.enableBrowserIntegration.setValue(false);
-        return;
-      }
-
       if (ipc.platform.isWindowsStore) {
         await this.dialogService.openSimpleDialog({
           title: { key: "browserIntegrationUnsupportedTitle" },
diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
index 2ea6d4553b9..5c7f3034597 100644
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -2168,9 +2168,6 @@
   "browserIntegrationErrorDesc": {
     "message": "An error has occurred while enabling browser integration."
   },
-  "browserIntegrationMasOnlyDesc": {
-    "message": "Unfortunately browser integration is only supported in the Mac App Store version for now."
-  },
   "browserIntegrationWindowsStoreDesc": {
     "message": "Unfortunately browser integration is currently not supported in the Microsoft Store version."
   },
diff --git a/apps/desktop/src/utils.ts b/apps/desktop/src/utils.ts
index 552bc136392..0f186060aae 100644
--- a/apps/desktop/src/utils.ts
+++ b/apps/desktop/src/utils.ts
@@ -70,8 +70,7 @@ export function isWindowsPortable() {
 }
 
 /**
- * We block the browser integration on some unsupported platforms, which also
- * blocks partially supported platforms (mac .dmg in dev builds) / prevents
+ * We block the browser integration on some unsupported platforms prevents
  * experimenting with the feature for QA. So this env var allows overriding
  * the block.
  */
diff --git a/apps/web/package.json b/apps/web/package.json
index ddcf1576743..b95d3e6aba5 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bitwarden/web-vault",
-  "version": "2025.11.0",
+  "version": "2025.11.2",
   "scripts": {
     "build:oss": "webpack",
     "build:bit": "webpack -c ../../bitwarden_license/bit-web/webpack.config.js",
diff --git a/apps/web/src/app/billing/individual/user-subscription.component.html b/apps/web/src/app/billing/individual/user-subscription.component.html
index e801237467a..b7e490cdf2e 100644
--- a/apps/web/src/app/billing/individual/user-subscription.component.html
+++ b/apps/web/src/app/billing/individual/user-subscription.component.html
@@ -37,41 +37,63 @@
     <dd *ngIf="sub.expiration">{{ sub.expiration | date: "mediumDate" }}</dd>
     <dd *ngIf="!sub.expiration">{{ "neverExpires" | i18n }}</dd>
   </dl>
-  <div class="tw-flex tw-w-full" *ngIf="!selfHosted">
-    <div class="tw-w-1/3">
-      <dl>
-        <dt>{{ "status" | i18n }}</dt>
-        <dd>
+  <div class="tw-flex tw-max-w-[1340px] tw-pt-6" *ngIf="!selfHosted">
+    <div class="tw-flex tw-gap-16 tw-justify-between tw-w-full">
+      <div class="tw-flex tw-flex-col">
+        <div class="tw-font-semibold tw-mb-2">{{ "plan" | i18n }}</div>
+        <div>{{ "premiumMembership" | i18n }}</div>
+      </div>
+      <div class="tw-flex tw-flex-col">
+        <div class="tw-font-semibold tw-mb-2">{{ "status" | i18n }}</div>
+        <div>
           <span class="tw-capitalize">{{ (subscription && subscriptionStatus) || "-" }}</span>
-          <span bitBadge variant="warning" *ngIf="subscriptionMarkedForCancel">{{
-            "pendingCancellation" | i18n
-          }}</span>
-        </dd>
-        <dt>{{ "nextCharge" | i18n }}</dt>
-        <dd>
-          {{
-            nextInvoice
-              ? (sub.subscription.periodEndDate | date: "mediumDate") +
-                ", " +
-                (nextInvoice.amount | currency: "$")
-              : "-"
-          }}
-        </dd>
-      </dl>
-    </div>
-    <div class="tw-w-2/3" *ngIf="subscription">
-      <strong class="!tw-block tw-mb-1">{{ "details" | i18n }}</strong>
-      <bit-table>
-        <ng-template body>
-          <tr *ngFor="let i of subscription.items">
-            <td bitCell>
-              {{ i.name }} {{ i.quantity > 1 ? "&times;" + i.quantity : "" }} &#64;
-              {{ i.amount | currency: "$" }}
-            </td>
-            <td bitCell>{{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }}</td>
-          </tr>
-        </ng-template>
-      </bit-table>
+          <span
+            bitBadge
+            variant="warning"
+            *ngIf="subscriptionMarkedForCancel"
+            class="tw-mt-2 tw-block"
+            >{{ "pendingCancellation" | i18n }}</span
+          >
+        </div>
+      </div>
+      <div class="tw-flex tw-flex-col">
+        <div class="tw-font-semibold tw-mb-2 tw-text-right">{{ "nextChargeHeader" | i18n }}</div>
+        <div>
+          <ng-container *ngIf="subscription">
+            <ng-container *ngIf="enableDiscountDisplay$ | async as enableDiscount; else noDiscount">
+              <div class="tw-flex tw-items-center tw-gap-2 tw-flex-wrap tw-justify-end">
+                <span [attr.aria-label]="'nextChargeDateAndAmount' | i18n">
+                  {{
+                    (sub.subscription.periodEndDate | date: "MMM d, y") +
+                      ", " +
+                      (discountedSubscriptionAmount | currency: "$")
+                  }}
+                </span>
+                <billing-discount-badge
+                  [discount]="getDiscountInfo(sub?.customerDiscount)"
+                ></billing-discount-badge>
+              </div>
+            </ng-container>
+            <ng-template #noDiscount>
+              <div class="tw-flex tw-items-center tw-gap-2 tw-flex-wrap tw-justify-end">
+                <span [attr.aria-label]="'nextChargeDateAndAmount' | i18n">
+                  {{
+                    (sub.subscription.periodEndDate | date: "MMM d, y") +
+                      ", " +
+                      (subscriptionAmount | currency: "$")
+                  }}
+                </span>
+              </div>
+            </ng-template>
+          </ng-container>
+          <span
+            *ngIf="!subscription"
+            class="tw-block tw-text-right"
+            [attr.aria-label]="'noChargeScheduled' | i18n"
+            >-</span
+          >
+        </div>
+      </div>
     </div>
   </div>
   <ng-container *ngIf="selfHosted">
@@ -90,8 +112,27 @@
       </a>
     </div>
   </ng-container>
-  <ng-container *ngIf="!selfHosted">
-    <div class="tw-flex tw-justify-between">
+  <div class="tw-max-w-[1340px]" *ngIf="!selfHosted">
+    <h3 bitTypography="h3" class="tw-mt-8">{{ "storage" | i18n }}</h3>
+    <p bitTypography="body1">
+      {{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}
+    </p>
+    <bit-progress [barWidth]="storagePercentage" bgColor="success" size="default"></bit-progress>
+    <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
+      <div class="tw-mt-3">
+        <div class="tw-flex tw-gap-4">
+          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(true)">
+            {{ "addStorage" | i18n }}
+          </button>
+          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(false)">
+            {{ "removeStorage" | i18n }}
+          </button>
+        </div>
+      </div>
+    </ng-container>
+    <h3 bitTypography="h3" class="tw-mt-16">{{ "additionalOptions" | i18n }}</h3>
+    <p bitTypography="body1" class="tw-mt-3">{{ "additionalOptionsDesc" | i18n }}</p>
+    <div class="tw-flex tw-gap-4 tw-mt-3">
       <button
         bitButton
         type="button"
@@ -106,7 +147,6 @@
         #cancelBtn
         type="button"
         buttonType="danger"
-        class="tw-ml-auto"
         (click)="cancelSubscription()"
         [appApiAction]="cancelPromise"
         [disabled]="$any(cancelBtn).loading()"
@@ -115,22 +155,5 @@
         {{ "cancelSubscription" | i18n }}
       </button>
     </div>
-    <h3 bitTypography="h3" class="tw-mt-16">{{ "storage" | i18n }}</h3>
-    <p bitTypography="body1">
-      {{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}
-    </p>
-    <bit-progress [barWidth]="storagePercentage" bgColor="success" size="default"></bit-progress>
-    <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
-      <div class="tw-mt-3">
-        <div class="tw-flex tw-gap-1">
-          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(true)">
-            {{ "addStorage" | i18n }}
-          </button>
-          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(false)">
-            {{ "removeStorage" | i18n }}
-          </button>
-        </div>
-      </div>
-    </ng-container>
-  </ng-container>
+  </div>
 </ng-container>
diff --git a/apps/web/src/app/billing/individual/user-subscription.component.ts b/apps/web/src/app/billing/individual/user-subscription.component.ts
index 19db9ec8e61..c39b5d153b1 100644
--- a/apps/web/src/app/billing/individual/user-subscription.component.ts
+++ b/apps/web/src/app/billing/individual/user-subscription.component.ts
@@ -7,13 +7,17 @@ import { firstValueFrom, lastValueFrom } from "rxjs";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
+import { BillingCustomerDiscount } from "@bitwarden/common/billing/models/response/organization-subscription.response";
 import { SubscriptionResponse } from "@bitwarden/common/billing/models/response/subscription.response";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { DialogService, ToastService } from "@bitwarden/components";
+import { DiscountInfo } from "@bitwarden/pricing";
 
 import {
   AdjustStorageDialogComponent,
@@ -42,6 +46,10 @@ export class UserSubscriptionComponent implements OnInit {
   cancelPromise: Promise<any>;
   reinstatePromise: Promise<any>;
 
+  protected enableDiscountDisplay$ = this.configService.getFeatureFlag$(
+    FeatureFlag.PM23341_Milestone_2,
+  );
+
   constructor(
     private apiService: ApiService,
     private platformUtilsService: PlatformUtilsService,
@@ -54,6 +62,7 @@ export class UserSubscriptionComponent implements OnInit {
     private billingAccountProfileStateService: BillingAccountProfileStateService,
     private toastService: ToastService,
     private accountService: AccountService,
+    private configService: ConfigService,
   ) {
     this.selfHosted = this.platformUtilsService.isSelfHost();
   }
@@ -187,6 +196,28 @@ export class UserSubscriptionComponent implements OnInit {
     return this.sub != null ? this.sub.upcomingInvoice : null;
   }
 
+  get subscriptionAmount(): number {
+    if (!this.subscription?.items || this.subscription.items.length === 0) {
+      return 0;
+    }
+
+    return this.subscription.items.reduce(
+      (sum, item) => sum + (item.amount || 0) * (item.quantity || 0),
+      0,
+    );
+  }
+
+  get discountedSubscriptionAmount(): number {
+    // Use the upcoming invoice amount from the server as it already includes discounts,
+    // taxes, prorations, and all other adjustments. Fall back to subscription amount
+    // if upcoming invoice is not available.
+    if (this.nextInvoice?.amount != null) {
+      return this.nextInvoice.amount;
+    }
+
+    return this.subscriptionAmount;
+  }
+
   get storagePercentage() {
     return this.sub != null && this.sub.maxStorageGb
       ? +(100 * (this.sub.storageGb / this.sub.maxStorageGb)).toFixed(2)
@@ -217,4 +248,15 @@ export class UserSubscriptionComponent implements OnInit {
       return this.subscription.status;
     }
   }
+
+  getDiscountInfo(discount: BillingCustomerDiscount | null): DiscountInfo | null {
+    if (!discount) {
+      return null;
+    }
+    return {
+      active: discount.active,
+      percentOff: discount.percentOff,
+      amountOff: discount.amountOff,
+    };
+  }
 }
diff --git a/apps/web/src/app/billing/shared/billing-shared.module.ts b/apps/web/src/app/billing/shared/billing-shared.module.ts
index fb593b39328..12792cd781a 100644
--- a/apps/web/src/app/billing/shared/billing-shared.module.ts
+++ b/apps/web/src/app/billing/shared/billing-shared.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from "@angular/core";
 
 import { BannerModule } from "@bitwarden/components";
+import { DiscountBadgeComponent } from "@bitwarden/pricing";
 import {
   EnterBillingAddressComponent,
   EnterPaymentMethodComponent,
@@ -28,6 +29,7 @@ import { UpdateLicenseComponent } from "./update-license.component";
     BannerModule,
     EnterPaymentMethodComponent,
     EnterBillingAddressComponent,
+    DiscountBadgeComponent,
   ],
   declarations: [
     BillingHistoryComponent,
@@ -51,6 +53,7 @@ import { UpdateLicenseComponent } from "./update-license.component";
     OffboardingSurveyComponent,
     IndividualSelfHostingLicenseUploaderComponent,
     OrganizationSelfHostingLicenseUploaderComponent,
+    DiscountBadgeComponent,
   ],
 })
 export class BillingSharedModule {}
diff --git a/apps/web/src/app/settings/preferences.component.html b/apps/web/src/app/settings/preferences.component.html
index 4af7e51b800..a2e90dd5889 100644
--- a/apps/web/src/app/settings/preferences.component.html
+++ b/apps/web/src/app/settings/preferences.component.html
@@ -17,12 +17,12 @@
         {{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }}
       </span>
     </bit-callout>
-    <auth-vault-timeout-input
+    <bit-session-timeout-input
       [vaultTimeoutOptions]="vaultTimeoutOptions"
       [formControl]="form.controls.vaultTimeout"
       ngDefaultControl
     >
-    </auth-vault-timeout-input>
+    </bit-session-timeout-input>
     <ng-container *ngIf="availableVaultTimeoutActions$ | async as availableVaultTimeoutActions">
       <bit-radio-group
         formControlName="vaultTimeoutAction"
diff --git a/apps/web/src/app/settings/preferences.component.ts b/apps/web/src/app/settings/preferences.component.ts
index cbabce16186..4b63e346ea8 100644
--- a/apps/web/src/app/settings/preferences.component.ts
+++ b/apps/web/src/app/settings/preferences.component.ts
@@ -14,7 +14,6 @@ import {
   tap,
 } from "rxjs";
 
-import { VaultTimeoutInputComponent } from "@bitwarden/auth/angular";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { getFirstPolicy } from "@bitwarden/common/admin-console/services/policy/default-policy.service";
@@ -34,6 +33,7 @@ import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
 import { DialogService } from "@bitwarden/components";
+import { SessionTimeoutInputComponent } from "@bitwarden/key-management-ui";
 import { PermitCipherDetailsPopoverComponent } from "@bitwarden/vault";
 
 import { HeaderModule } from "../layouts/header/header.module";
@@ -52,7 +52,7 @@ import { SharedModule } from "../shared";
   imports: [
     SharedModule,
     HeaderModule,
-    VaultTimeoutInputComponent,
+    SessionTimeoutInputComponent,
     PermitCipherDetailsPopoverComponent,
   ],
 })
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 6ace81d605b..2fd4e7de70c 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -3250,9 +3250,18 @@
   "nextCharge": {
     "message": "Next charge"
   },
+  "nextChargeHeader": {
+    "message": "Next Charge"
+  },
+   "plan": {
+    "message": "Plan"
+  },
   "details": {
     "message": "Details"
   },
+  "discount": {
+    "message": "discount"
+  },
   "downloadLicense": {
     "message": "Download license"
   },
diff --git a/libs/auth/src/angular/index.ts b/libs/auth/src/angular/index.ts
index 454a9091c25..2bce4f52f5d 100644
--- a/libs/auth/src/angular/index.ts
+++ b/libs/auth/src/angular/index.ts
@@ -43,9 +43,6 @@ export * from "./user-verification/user-verification-dialog.component";
 export * from "./user-verification/user-verification-dialog.types";
 export * from "./user-verification/user-verification-form-input.component";
 
-// vault timeout
-export * from "./vault-timeout-input/vault-timeout-input.component";
-
 // sso
 export * from "./sso/sso.component";
 export * from "./sso/sso-component.service";
diff --git a/libs/common/src/billing/models/response/organization-subscription.response.ts b/libs/common/src/billing/models/response/organization-subscription.response.ts
index 6e56eda68c6..f5fdaaba9b2 100644
--- a/libs/common/src/billing/models/response/organization-subscription.response.ts
+++ b/libs/common/src/billing/models/response/organization-subscription.response.ts
@@ -40,6 +40,7 @@ export class BillingCustomerDiscount extends BaseResponse {
   id: string;
   active: boolean;
   percentOff?: number;
+  amountOff?: number;
   appliesTo: string[];
 
   constructor(response: any) {
@@ -47,6 +48,7 @@ export class BillingCustomerDiscount extends BaseResponse {
     this.id = this.getResponseProperty("Id");
     this.active = this.getResponseProperty("Active");
     this.percentOff = this.getResponseProperty("PercentOff");
-    this.appliesTo = this.getResponseProperty("AppliesTo");
+    this.amountOff = this.getResponseProperty("AmountOff");
+    this.appliesTo = this.getResponseProperty("AppliesTo") || [];
   }
 }
diff --git a/libs/common/src/billing/models/response/subscription.response.ts b/libs/common/src/billing/models/response/subscription.response.ts
index 3bc7d42651c..01ace1ef10a 100644
--- a/libs/common/src/billing/models/response/subscription.response.ts
+++ b/libs/common/src/billing/models/response/subscription.response.ts
@@ -2,12 +2,15 @@
 // @ts-strict-ignore
 import { BaseResponse } from "../../../models/response/base.response";
 
+import { BillingCustomerDiscount } from "./organization-subscription.response";
+
 export class SubscriptionResponse extends BaseResponse {
   storageName: string;
   storageGb: number;
   maxStorageGb: number;
   subscription: BillingSubscriptionResponse;
   upcomingInvoice: BillingSubscriptionUpcomingInvoiceResponse;
+  customerDiscount: BillingCustomerDiscount;
   license: any;
   expiration: string;
 
@@ -20,11 +23,14 @@ export class SubscriptionResponse extends BaseResponse {
     this.expiration = this.getResponseProperty("Expiration");
     const subscription = this.getResponseProperty("Subscription");
     const upcomingInvoice = this.getResponseProperty("UpcomingInvoice");
+    const customerDiscount = this.getResponseProperty("CustomerDiscount");
     this.subscription = subscription == null ? null : new BillingSubscriptionResponse(subscription);
     this.upcomingInvoice =
       upcomingInvoice == null
         ? null
         : new BillingSubscriptionUpcomingInvoiceResponse(upcomingInvoice);
+    this.customerDiscount =
+      customerDiscount == null ? null : new BillingCustomerDiscount(customerDiscount);
   }
 }
 
diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts
index 2d071259aba..7d2d831bfb3 100644
--- a/libs/common/src/enums/feature-flag.enum.ts
+++ b/libs/common/src/enums/feature-flag.enum.ts
@@ -33,6 +33,7 @@ export enum FeatureFlag {
   PM26793_FetchPremiumPriceFromPricingService = "pm-26793-fetch-premium-price-from-pricing-service",
   PM23713_PremiumBadgeOpensNewPremiumUpgradeDialog = "pm-23713-premium-badge-opens-new-premium-upgrade-dialog",
   PM26462_Milestone_3 = "pm-26462-milestone-3",
+  PM23341_Milestone_2 = "pm-23341-milestone-2",
 
   /* Key Management */
   PrivateKeyRegeneration = "pm-12241-private-key-regeneration",
@@ -129,6 +130,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.PM26793_FetchPremiumPriceFromPricingService]: FALSE,
   [FeatureFlag.PM23713_PremiumBadgeOpensNewPremiumUpgradeDialog]: FALSE,
   [FeatureFlag.PM26462_Milestone_3]: FALSE,
+  [FeatureFlag.PM23341_Milestone_2]: FALSE,
 
   /* Key Management */
   [FeatureFlag.PrivateKeyRegeneration]: FALSE,
diff --git a/libs/components/src/badge-list/badge-list.component.html b/libs/components/src/badge-list/badge-list.component.html
index 18365cba268..d976b2d2cc4 100644
--- a/libs/components/src/badge-list/badge-list.component.html
+++ b/libs/components/src/badge-list/badge-list.component.html
@@ -1,15 +1,15 @@
 <div class="tw-inline-flex tw-flex-wrap tw-gap-2">
-  @for (item of filteredItems; track item; let last = $last) {
+  @for (item of filteredItems(); track item; let last = $last) {
     <span bitBadge [variant]="variant()" [truncate]="truncate()">
       {{ item }}
     </span>
-    @if (!last || isFiltered) {
+    @if (!last || isFiltered()) {
       <span class="tw-sr-only">, </span>
     }
   }
-  @if (isFiltered) {
+  @if (isFiltered()) {
     <span bitBadge [variant]="variant()">
-      {{ "plusNMore" | i18n: (items().length - filteredItems.length).toString() }}
+      {{ "plusNMore" | i18n: (items().length - filteredItems().length).toString() }}
     </span>
   }
 </div>
diff --git a/libs/components/src/badge-list/badge-list.component.ts b/libs/components/src/badge-list/badge-list.component.ts
index e3d1403be43..a5b306c12fc 100644
--- a/libs/components/src/badge-list/badge-list.component.ts
+++ b/libs/components/src/badge-list/badge-list.component.ts
@@ -1,38 +1,60 @@
-import { Component, OnChanges, input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
 
 import { I18nPipe } from "@bitwarden/ui-common";
 
 import { BadgeModule, BadgeVariant } from "../badge";
 
 function transformMaxItems(value: number | undefined) {
-  return value == undefined ? undefined : Math.max(1, value);
+  return value == null ? undefined : Math.max(1, value);
 }
 
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+/**
+ * Displays a collection of badges in a horizontal, wrapping layout.
+ *
+ * The component automatically handles overflow by showing a limited number of badges
+ * followed by a "+N more" badge when `maxItems` is specified and exceeded.
+ *
+ * Each badge inherits the `variant` and `truncate` settings, ensuring visual consistency
+ * across the list. Badges are separated by commas for screen readers to improve accessibility.
+ */
 @Component({
   selector: "bit-badge-list",
   templateUrl: "badge-list.component.html",
   imports: [BadgeModule, I18nPipe],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BadgeListComponent implements OnChanges {
-  protected filteredItems: string[] = [];
-  protected isFiltered = false;
-
+export class BadgeListComponent {
+  /**
+   * The visual variant to apply to all badges in the list.
+   */
   readonly variant = input<BadgeVariant>("primary");
+
+  /**
+   * Items to display as badges.
+   */
   readonly items = input<string[]>([]);
+
+  /**
+   * Whether to truncate long badge text with ellipsis.
+   */
   readonly truncate = input(true);
 
+  /**
+   * Maximum number of badges to display before showing a "+N more" badge.
+   */
   readonly maxItems = input(undefined, { transform: transformMaxItems });
 
-  ngOnChanges() {
+  protected readonly filteredItems = computed(() => {
     const maxItems = this.maxItems();
+    const items = this.items();
 
-    if (maxItems == undefined || this.items().length <= maxItems) {
-      this.filteredItems = this.items();
-    } else {
-      this.filteredItems = this.items().slice(0, maxItems - 1);
+    if (maxItems == null || items.length <= maxItems) {
+      return items;
     }
-    this.isFiltered = this.items().length > this.filteredItems.length;
-  }
+    return items.slice(0, maxItems - 1);
+  });
+
+  protected readonly isFiltered = computed(() => {
+    return this.items().length > this.filteredItems().length;
+  });
 }
diff --git a/libs/components/src/badge/badge.component.ts b/libs/components/src/badge/badge.component.ts
index 8a953b30226..55d7b719ccd 100644
--- a/libs/components/src/badge/badge.component.ts
+++ b/libs/components/src/badge/badge.component.ts
@@ -1,5 +1,12 @@
 import { CommonModule } from "@angular/common";
-import { Component, ElementRef, HostBinding, input } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  input,
+} from "@angular/core";
 
 import { FocusableElement } from "../shared/focusable-element";
 
@@ -44,27 +51,56 @@ const hoverStyles: Record<BadgeVariant, string[]> = {
   ],
 };
 /**
-  * Badges are primarily used as labels, counters, and small buttons.
-
-  * Typically Badges are only used with text set to `text-xs`. If additional sizes are needed, the component configurations may be reviewed and adjusted.
-
-  * The Badge directive can be used on a `<span>` (non clickable events), or an `<a>` or `<button>` tag
-
-  * > `NOTE:` The Focus and Hover states only apply to badges used for interactive events.
-  *
-  * > `NOTE:` The `disabled` state only applies to buttons.
-  *
-*/
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+ * Badges are primarily used as labels, counters, and small buttons.
+ * Typically Badges are only used with text set to `text-xs`. If additional sizes are needed, the component configurations may be reviewed and adjusted.
+ *
+ * The Badge directive can be used on a `<span>` (non clickable events), or an `<a>` or `<button>` tag
+ *
+ * > `NOTE:` The Focus and Hover states only apply to badges used for interactive events.
+ *
+ * > `NOTE:` The `disabled` state only applies to buttons.
+ */
 @Component({
   selector: "span[bitBadge], a[bitBadge], button[bitBadge]",
   providers: [{ provide: FocusableElement, useExisting: BadgeComponent }],
   imports: [CommonModule],
   templateUrl: "badge.component.html",
+  host: {
+    "[class]": "classList()",
+    "[attr.title]": "titleAttr()",
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BadgeComponent implements FocusableElement {
-  @HostBinding("class") get classList() {
+  private readonly el = inject(ElementRef<HTMLElement>);
+
+  private readonly hasHoverEffects = this.el.nativeElement.nodeName !== "SPAN";
+
+  /**
+   * Optional override for the automatic badge title attribute when truncating.
+   * When truncating is enabled and this is not provided, the badge will automatically
+   * use its text content as the title.
+   */
+  readonly title = input<string>();
+
+  /**
+   * Visual variant that determines the badge's color scheme.
+   */
+  readonly variant = input<BadgeVariant>("primary");
+
+  /**
+   * Whether to truncate long text with ellipsis when it exceeds maxWidthClass.
+   * When enabled, a title attribute is automatically added for accessibility.
+   */
+  readonly truncate = input(true);
+
+  /**
+   * Tailwind max-width class to apply when truncating is enabled.
+   * Must be a valid Tailwind max-width utility class (e.g., "tw-max-w-40", "tw-max-w-xs").
+   */
+  readonly maxWidthClass = input<`tw-max-w-${string}`>("tw-max-w-40");
+
+  protected readonly classList = computed(() => {
     return [
       "tw-inline-block",
       "tw-py-1",
@@ -94,39 +130,17 @@ export class BadgeComponent implements FocusableElement {
       .concat(styles[this.variant()])
       .concat(this.hasHoverEffects ? [...hoverStyles[this.variant()], "tw-min-w-10"] : [])
       .concat(this.truncate() ? this.maxWidthClass() : []);
-  }
-  @HostBinding("attr.title") get titleAttr() {
+  });
+
+  protected readonly titleAttr = computed(() => {
     const title = this.title();
     if (title !== undefined) {
       return title;
     }
-    return this.truncate() ? this?.el?.nativeElement?.textContent?.trim() : null;
-  }
-
-  /**
-   * Optional override for the automatic badge title when truncating.
-   */
-  readonly title = input<string>();
-
-  /**
-   * Variant, sets the background color of the badge.
-   */
-  readonly variant = input<BadgeVariant>("primary");
-
-  /**
-   * Truncate long text
-   */
-  readonly truncate = input(true);
-
-  readonly maxWidthClass = input<`tw-max-w-${string}`>("tw-max-w-40");
+    return this.truncate() ? this.el.nativeElement?.textContent?.trim() : null;
+  });
 
   getFocusTarget() {
     return this.el.nativeElement;
   }
-
-  private hasHoverEffects = false;
-
-  constructor(private el: ElementRef<HTMLElement>) {
-    this.hasHoverEffects = el?.nativeElement?.nodeName != "SPAN";
-  }
 }
diff --git a/libs/key-management-ui/src/index.ts b/libs/key-management-ui/src/index.ts
index fee3b3250e4..d681d469123 100644
--- a/libs/key-management-ui/src/index.ts
+++ b/libs/key-management-ui/src/index.ts
@@ -11,3 +11,4 @@ export { RemovePasswordComponent } from "./key-connector/remove-password.compone
 export { ConfirmKeyConnectorDomainComponent } from "./key-connector/confirm-key-connector-domain.component";
 export { SessionTimeoutSettingsComponent } from "./session-timeout/components/session-timeout-settings.component";
 export { SessionTimeoutSettingsComponentService } from "./session-timeout/services/session-timeout-settings-component.service";
+export { SessionTimeoutInputComponent } from "./session-timeout/components/session-timeout-input.component";
diff --git a/libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.html b/libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.html
similarity index 100%
rename from libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.html
rename to libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.html
diff --git a/libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.spec.ts b/libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.spec.ts
similarity index 89%
rename from libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.spec.ts
rename to libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.spec.ts
index 05bb97dde26..ca9b1230beb 100644
--- a/libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.spec.ts
+++ b/libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.spec.ts
@@ -12,11 +12,11 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { mockAccountServiceWith } from "@bitwarden/common/spec";
 import { UserId } from "@bitwarden/common/types/guid";
 
-import { VaultTimeoutInputComponent } from "./vault-timeout-input.component";
+import { SessionTimeoutInputComponent } from "./session-timeout-input.component";
 
-describe("VaultTimeoutInputComponent", () => {
-  let component: VaultTimeoutInputComponent;
-  let fixture: ComponentFixture<VaultTimeoutInputComponent>;
+describe("SessionTimeoutInputComponent", () => {
+  let component: SessionTimeoutInputComponent;
+  let fixture: ComponentFixture<SessionTimeoutInputComponent>;
   const policiesByType$ = jest.fn().mockReturnValue(new BehaviorSubject({}));
   const availableVaultTimeoutActions$ = jest.fn().mockReturnValue(new BehaviorSubject([]));
   const mockUserId = Utils.newGuid() as UserId;
@@ -24,7 +24,7 @@ describe("VaultTimeoutInputComponent", () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [VaultTimeoutInputComponent],
+      imports: [SessionTimeoutInputComponent],
       providers: [
         { provide: PolicyService, useValue: { policiesByType$ } },
         { provide: AccountService, useValue: accountService },
@@ -33,7 +33,7 @@ describe("VaultTimeoutInputComponent", () => {
       ],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(VaultTimeoutInputComponent);
+    fixture = TestBed.createComponent(SessionTimeoutInputComponent);
     component = fixture.componentInstance;
     component.vaultTimeoutOptions = [
       { name: "oneMinute", value: 1 },
diff --git a/libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.ts b/libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.ts
similarity index 88%
rename from libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.ts
rename to libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.ts
index 2335de34c21..e9a5722ff4e 100644
--- a/libs/auth/src/angular/vault-timeout-input/vault-timeout-input.component.ts
+++ b/libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.ts
@@ -30,8 +30,6 @@ import {
   VaultTimeoutSettingsService,
 } from "@bitwarden/common/key-management/vault-timeout";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-// 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 { FormFieldModule, SelectModule } from "@bitwarden/components";
 
 type VaultTimeoutForm = FormGroup<{
@@ -47,34 +45,66 @@ type VaultTimeoutFormValue = VaultTimeoutForm["value"];
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
-  selector: "auth-vault-timeout-input",
-  templateUrl: "vault-timeout-input.component.html",
+  selector: "bit-session-timeout-input",
+  templateUrl: "session-timeout-input.component.html",
   imports: [CommonModule, JslibModule, ReactiveFormsModule, FormFieldModule, SelectModule],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       multi: true,
-      useExisting: VaultTimeoutInputComponent,
+      useExisting: SessionTimeoutInputComponent,
     },
     {
       provide: NG_VALIDATORS,
       multi: true,
-      useExisting: VaultTimeoutInputComponent,
+      useExisting: SessionTimeoutInputComponent,
     },
   ],
 })
-export class VaultTimeoutInputComponent
+export class SessionTimeoutInputComponent
   implements ControlValueAccessor, Validator, OnInit, OnDestroy, OnChanges
 {
+  static CUSTOM_VALUE = -100;
+  static MIN_CUSTOM_MINUTES = 0;
+  form: VaultTimeoutForm = this.formBuilder.group({
+    vaultTimeout: [null],
+    custom: this.formBuilder.group({
+      hours: [null],
+      minutes: [null],
+    }),
+  });
+
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input() vaultTimeoutOptions: VaultTimeoutOption[];
+
+  vaultTimeoutPolicy: Policy;
+  vaultTimeoutPolicyHours: number;
+  vaultTimeoutPolicyMinutes: number;
+
   protected readonly VaultTimeoutAction = VaultTimeoutAction;
 
+  protected canLockVault$: Observable<boolean>;
+  private onChange: (vaultTimeout: VaultTimeout) => void;
+  private validatorChange: () => void;
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private policyService: PolicyService,
+    private vaultTimeoutSettingsService: VaultTimeoutSettingsService,
+    private i18nService: I18nService,
+    private accountService: AccountService,
+  ) {}
+
   get showCustom() {
-    return this.form.get("vaultTimeout").value === VaultTimeoutInputComponent.CUSTOM_VALUE;
+    return this.form.get("vaultTimeout").value === SessionTimeoutInputComponent.CUSTOM_VALUE;
   }
 
   get exceedsMinimumTimeout(): boolean {
     return (
-      !this.showCustom || this.customTimeInMinutes() > VaultTimeoutInputComponent.MIN_CUSTOM_MINUTES
+      !this.showCustom ||
+      this.customTimeInMinutes() > SessionTimeoutInputComponent.MIN_CUSTOM_MINUTES
     );
   }
 
@@ -101,39 +131,6 @@ export class VaultTimeoutInputComponent
     });
   }
 
-  static CUSTOM_VALUE = -100;
-  static MIN_CUSTOM_MINUTES = 0;
-
-  form: VaultTimeoutForm = this.formBuilder.group({
-    vaultTimeout: [null],
-    custom: this.formBuilder.group({
-      hours: [null],
-      minutes: [null],
-    }),
-  });
-
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() vaultTimeoutOptions: VaultTimeoutOption[];
-
-  vaultTimeoutPolicy: Policy;
-  vaultTimeoutPolicyHours: number;
-  vaultTimeoutPolicyMinutes: number;
-
-  protected canLockVault$: Observable<boolean>;
-
-  private onChange: (vaultTimeout: VaultTimeout) => void;
-  private validatorChange: () => void;
-  private destroy$ = new Subject<void>();
-
-  constructor(
-    private formBuilder: FormBuilder,
-    private policyService: PolicyService,
-    private vaultTimeoutSettingsService: VaultTimeoutSettingsService,
-    private i18nService: I18nService,
-    private accountService: AccountService,
-  ) {}
-
   async ngOnInit() {
     this.accountService.activeAccount$
       .pipe(
@@ -163,7 +160,7 @@ export class VaultTimeoutInputComponent
     // ex: user picks 5 min, goes to custom, we want to show 0 hr, 5 min in the custom fields
     this.form.controls.vaultTimeout.valueChanges
       .pipe(
-        filter((value) => value !== VaultTimeoutInputComponent.CUSTOM_VALUE),
+        filter((value) => value !== SessionTimeoutInputComponent.CUSTOM_VALUE),
         takeUntil(this.destroy$),
       )
       .subscribe((value) => {
@@ -195,17 +192,17 @@ export class VaultTimeoutInputComponent
 
   ngOnChanges() {
     if (
-      !this.vaultTimeoutOptions.find((p) => p.value === VaultTimeoutInputComponent.CUSTOM_VALUE)
+      !this.vaultTimeoutOptions.find((p) => p.value === SessionTimeoutInputComponent.CUSTOM_VALUE)
     ) {
       this.vaultTimeoutOptions.push({
         name: this.i18nService.t("custom"),
-        value: VaultTimeoutInputComponent.CUSTOM_VALUE,
+        value: SessionTimeoutInputComponent.CUSTOM_VALUE,
       });
     }
   }
 
   getVaultTimeout(value: VaultTimeoutFormValue) {
-    if (value.vaultTimeout !== VaultTimeoutInputComponent.CUSTOM_VALUE) {
+    if (value.vaultTimeout !== SessionTimeoutInputComponent.CUSTOM_VALUE) {
       return value.vaultTimeout;
     }
 
@@ -219,7 +216,7 @@ export class VaultTimeoutInputComponent
 
     if (this.vaultTimeoutOptions.every((p) => p.value !== value)) {
       this.form.setValue({
-        vaultTimeout: VaultTimeoutInputComponent.CUSTOM_VALUE,
+        vaultTimeout: SessionTimeoutInputComponent.CUSTOM_VALUE,
         custom: {
           hours: Math.floor(value / 60),
           minutes: value % 60,
@@ -271,7 +268,7 @@ export class VaultTimeoutInputComponent
 
     this.vaultTimeoutOptions = this.vaultTimeoutOptions.filter((vaultTimeoutOption) => {
       // Always include the custom option
-      if (vaultTimeoutOption.value === VaultTimeoutInputComponent.CUSTOM_VALUE) {
+      if (vaultTimeoutOption.value === SessionTimeoutInputComponent.CUSTOM_VALUE) {
         return true;
       }
 
diff --git a/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.html b/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.html
index 467a51ee1b0..4d607ce5d7b 100644
--- a/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.html
+++ b/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.html
@@ -1,10 +1,10 @@
 <div [formGroup]="formGroup">
-  <auth-vault-timeout-input
+  <bit-session-timeout-input
     [vaultTimeoutOptions]="availableTimeoutOptions$ | async"
     [formControl]="formGroup.controls.timeout"
     ngDefaultControl
   >
-  </auth-vault-timeout-input>
+  </bit-session-timeout-input>
 
   <bit-form-field [disableMargin]="true">
     <bit-label>{{ "sessionTimeoutSettingsAction" | i18n }}</bit-label>
diff --git a/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.spec.ts b/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.spec.ts
index 379a2c982c8..4c3f41d738c 100644
--- a/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.spec.ts
+++ b/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.spec.ts
@@ -4,7 +4,6 @@ import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { mock, MockProxy } from "jest-mock-extended";
 import { BehaviorSubject, filter, firstValueFrom, of } from "rxjs";
 
-import { VaultTimeoutInputComponent } from "@bitwarden/auth/angular";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
@@ -22,6 +21,7 @@ import { UserId } from "@bitwarden/common/types/guid";
 import { DialogService, ToastService } from "@bitwarden/components";
 import { LogService } from "@bitwarden/logging";
 
+import { SessionTimeoutInputComponent } from "../components/session-timeout-input.component";
 import { SessionTimeoutSettingsComponentService } from "../services/session-timeout-settings-component.service";
 
 import { SessionTimeoutSettingsComponent } from "./session-timeout-settings.component";
@@ -87,7 +87,7 @@ describe("SessionTimeoutSettingsComponent", () => {
       imports: [
         SessionTimeoutSettingsComponent,
         ReactiveFormsModule,
-        VaultTimeoutInputComponent,
+        SessionTimeoutInputComponent,
         NoopAnimationsModule,
       ],
       providers: [
diff --git a/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.ts b/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.ts
index 7124e3f14c5..ecdd0ee89ad 100644
--- a/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.ts
+++ b/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.ts
@@ -25,7 +25,6 @@ import {
 } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { VaultTimeoutInputComponent } from "@bitwarden/auth/angular";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { getFirstPolicy } from "@bitwarden/common/admin-console/services/policy/default-policy.service";
@@ -56,6 +55,8 @@ import { LogService } from "@bitwarden/logging";
 
 import { SessionTimeoutSettingsComponentService } from "../services/session-timeout-settings-component.service";
 
+import { SessionTimeoutInputComponent } from "./session-timeout-input.component";
+
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
@@ -74,7 +75,7 @@ import { SessionTimeoutSettingsComponentService } from "../services/session-time
     RouterModule,
     SelectModule,
     TypographyModule,
-    VaultTimeoutInputComponent,
+    SessionTimeoutInputComponent,
   ],
 })
 export class SessionTimeoutSettingsComponent implements OnInit {
diff --git a/libs/pricing/src/components/discount-badge/discount-badge.component.html b/libs/pricing/src/components/discount-badge/discount-badge.component.html
new file mode 100644
index 00000000000..e79fbabf355
--- /dev/null
+++ b/libs/pricing/src/components/discount-badge/discount-badge.component.html
@@ -0,0 +1,10 @@
+<span
+  *ngIf="hasDiscount()"
+  bitBadge
+  variant="success"
+  class="tw-w-fit"
+  role="status"
+  [attr.aria-label]="getDiscountText()"
+>
+  {{ getDiscountText() }}
+</span>
diff --git a/libs/pricing/src/components/discount-badge/discount-badge.component.mdx b/libs/pricing/src/components/discount-badge/discount-badge.component.mdx
new file mode 100644
index 00000000000..d3df2dcf0f6
--- /dev/null
+++ b/libs/pricing/src/components/discount-badge/discount-badge.component.mdx
@@ -0,0 +1,67 @@
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import * as DiscountBadgeStories from "./discount-badge.component.stories";
+
+<Meta of={DiscountBadgeStories} />
+
+# Discount Badge
+
+A reusable UI component for displaying discount information (percentage or fixed amount) in a badge
+format.
+
+<Canvas of={DiscountBadgeStories.PercentDiscount} />
+
+## Usage
+
+The discount badge component is designed to be used in billing and subscription interfaces to
+display discount information.
+
+```ts
+import { DiscountBadgeComponent, DiscountInfo } from "@bitwarden/pricing";
+```
+
+```html
+<billing-discount-badge [discount]="discountInfo"></billing-discount-badge>
+```
+
+## API
+
+### Inputs
+
+| Input      | Type                   | Description                                                                      |
+| ---------- | ---------------------- | -------------------------------------------------------------------------------- |
+| `discount` | `DiscountInfo \| null` | **Optional.** Discount information object. If null or inactive, badge is hidden. |
+
+### DiscountInfo Interface
+
+```ts
+interface DiscountInfo {
+  /** Whether the discount is currently active */
+  active: boolean;
+  /** Percentage discount (0-100 or 0-1 scale) */
+  percentOff?: number;
+  /** Fixed amount discount in the base currency */
+  amountOff?: number;
+}
+```
+
+## Behavior
+
+- The badge is only displayed when `discount` is provided, `active` is `true`, and either
+  `percentOff` or `amountOff` is greater than 0.
+- If both `percentOff` and `amountOff` are provided, `percentOff` takes precedence.
+- Percentage values can be provided as 0-100 (e.g., `20` for 20%) or 0-1 (e.g., `0.2` for 20%).
+- Amount values are formatted as currency (USD) with 2 decimal places.
+
+## Examples
+
+### Percentage Discount
+
+<Canvas of={DiscountBadgeStories.PercentDiscount} />
+
+### Amount Discount
+
+<Canvas of={DiscountBadgeStories.AmountDiscount} />
+
+### Inactive Discount
+
+<Canvas of={DiscountBadgeStories.InactiveDiscount} />
diff --git a/libs/pricing/src/components/discount-badge/discount-badge.component.spec.ts b/libs/pricing/src/components/discount-badge/discount-badge.component.spec.ts
new file mode 100644
index 00000000000..8ccfc5e5d8b
--- /dev/null
+++ b/libs/pricing/src/components/discount-badge/discount-badge.component.spec.ts
@@ -0,0 +1,108 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+import { DiscountBadgeComponent } from "./discount-badge.component";
+
+describe("DiscountBadgeComponent", () => {
+  let component: DiscountBadgeComponent;
+  let fixture: ComponentFixture<DiscountBadgeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DiscountBadgeComponent],
+      providers: [
+        {
+          provide: I18nService,
+          useValue: {
+            t: (key: string) => key,
+          },
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DiscountBadgeComponent);
+    component = fixture.componentInstance;
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe("hasDiscount", () => {
+    it("should return false when discount is null", () => {
+      fixture.componentRef.setInput("discount", null);
+      fixture.detectChanges();
+      expect(component.hasDiscount()).toBe(false);
+    });
+
+    it("should return false when discount is inactive", () => {
+      fixture.componentRef.setInput("discount", { active: false, percentOff: 20 });
+      fixture.detectChanges();
+      expect(component.hasDiscount()).toBe(false);
+    });
+
+    it("should return true when discount is active with percentOff", () => {
+      fixture.componentRef.setInput("discount", { active: true, percentOff: 20 });
+      fixture.detectChanges();
+      expect(component.hasDiscount()).toBe(true);
+    });
+
+    it("should return true when discount is active with amountOff", () => {
+      fixture.componentRef.setInput("discount", { active: true, amountOff: 10.99 });
+      fixture.detectChanges();
+      expect(component.hasDiscount()).toBe(true);
+    });
+
+    it("should return false when percentOff is 0", () => {
+      fixture.componentRef.setInput("discount", { active: true, percentOff: 0 });
+      fixture.detectChanges();
+      expect(component.hasDiscount()).toBe(false);
+    });
+
+    it("should return false when amountOff is 0", () => {
+      fixture.componentRef.setInput("discount", { active: true, amountOff: 0 });
+      fixture.detectChanges();
+      expect(component.hasDiscount()).toBe(false);
+    });
+  });
+
+  describe("getDiscountText", () => {
+    it("should return null when discount is null", () => {
+      fixture.componentRef.setInput("discount", null);
+      fixture.detectChanges();
+      expect(component.getDiscountText()).toBeNull();
+    });
+
+    it("should return percentage text when percentOff is provided", () => {
+      fixture.componentRef.setInput("discount", { active: true, percentOff: 20 });
+      fixture.detectChanges();
+      const text = component.getDiscountText();
+      expect(text).toContain("20%");
+      expect(text).toContain("discount");
+    });
+
+    it("should convert decimal percentOff to percentage", () => {
+      fixture.componentRef.setInput("discount", { active: true, percentOff: 0.15 });
+      fixture.detectChanges();
+      const text = component.getDiscountText();
+      expect(text).toContain("15%");
+    });
+
+    it("should return amount text when amountOff is provided", () => {
+      fixture.componentRef.setInput("discount", { active: true, amountOff: 10.99 });
+      fixture.detectChanges();
+      const text = component.getDiscountText();
+      expect(text).toContain("$10.99");
+      expect(text).toContain("discount");
+    });
+
+    it("should prefer percentOff over amountOff", () => {
+      fixture.componentRef.setInput("discount", { active: true, percentOff: 25, amountOff: 10.99 });
+      fixture.detectChanges();
+      const text = component.getDiscountText();
+      expect(text).toContain("25%");
+      expect(text).not.toContain("$10.99");
+    });
+  });
+});
diff --git a/libs/pricing/src/components/discount-badge/discount-badge.component.stories.ts b/libs/pricing/src/components/discount-badge/discount-badge.component.stories.ts
new file mode 100644
index 00000000000..02631a6b940
--- /dev/null
+++ b/libs/pricing/src/components/discount-badge/discount-badge.component.stories.ts
@@ -0,0 +1,123 @@
+import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { BadgeModule } from "@bitwarden/components";
+
+import { DiscountBadgeComponent, DiscountInfo } from "./discount-badge.component";
+
+export default {
+  title: "Billing/Discount Badge",
+  component: DiscountBadgeComponent,
+  description: "A badge component that displays discount information (percentage or fixed amount).",
+  decorators: [
+    moduleMetadata({
+      imports: [BadgeModule],
+      providers: [
+        {
+          provide: I18nService,
+          useValue: {
+            t: (key: string) => {
+              switch (key) {
+                case "discount":
+                  return "discount";
+                default:
+                  return key;
+              }
+            },
+          },
+        },
+      ],
+    }),
+  ],
+} as Meta<DiscountBadgeComponent>;
+
+type Story = StoryObj<DiscountBadgeComponent>;
+
+export const PercentDiscount: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: true,
+      percentOff: 20,
+    } as DiscountInfo,
+  },
+};
+
+export const PercentDiscountDecimal: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: true,
+      percentOff: 0.15, // 15% in decimal format
+    } as DiscountInfo,
+  },
+};
+
+export const AmountDiscount: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: true,
+      amountOff: 10.99,
+    } as DiscountInfo,
+  },
+};
+
+export const LargeAmountDiscount: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: true,
+      amountOff: 99.99,
+    } as DiscountInfo,
+  },
+};
+
+export const InactiveDiscount: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: false,
+      percentOff: 20,
+    } as DiscountInfo,
+  },
+};
+
+export const NoDiscount: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: null,
+  },
+};
+
+export const PercentAndAmountPreferPercent: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: true,
+      percentOff: 25,
+      amountOff: 10.99,
+    } as DiscountInfo,
+  },
+};
diff --git a/libs/pricing/src/components/discount-badge/discount-badge.component.ts b/libs/pricing/src/components/discount-badge/discount-badge.component.ts
new file mode 100644
index 00000000000..6057a4573e9
--- /dev/null
+++ b/libs/pricing/src/components/discount-badge/discount-badge.component.ts
@@ -0,0 +1,70 @@
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { BadgeModule } from "@bitwarden/components";
+
+/**
+ * Interface for discount information that can be displayed in the discount badge.
+ * This is abstracted from the response class to avoid tight coupling.
+ */
+export interface DiscountInfo {
+  /** Whether the discount is currently active */
+  active: boolean;
+  /** Percentage discount (0-100 or 0-1 scale) */
+  percentOff?: number;
+  /** Fixed amount discount in the base currency */
+  amountOff?: number;
+}
+
+@Component({
+  selector: "billing-discount-badge",
+  templateUrl: "./discount-badge.component.html",
+  standalone: true,
+  imports: [CommonModule, BadgeModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DiscountBadgeComponent {
+  readonly discount = input<DiscountInfo | null>(null);
+
+  private i18nService = inject(I18nService);
+
+  getDiscountText(): string | null {
+    const discount = this.discount();
+    if (!discount) {
+      return null;
+    }
+
+    if (discount.percentOff != null && discount.percentOff > 0) {
+      const percentValue =
+        discount.percentOff < 1 ? discount.percentOff * 100 : discount.percentOff;
+      return `${Math.round(percentValue)}% ${this.i18nService.t("discount")}`;
+    }
+
+    if (discount.amountOff != null && discount.amountOff > 0) {
+      const formattedAmount = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      }).format(discount.amountOff);
+      return `${formattedAmount} ${this.i18nService.t("discount")}`;
+    }
+
+    return null;
+  }
+
+  hasDiscount(): boolean {
+    const discount = this.discount();
+    if (!discount) {
+      return false;
+    }
+    if (!discount.active) {
+      return false;
+    }
+    return (
+      (discount.percentOff != null && discount.percentOff > 0) ||
+      (discount.amountOff != null && discount.amountOff > 0)
+    );
+  }
+}
diff --git a/libs/pricing/src/index.ts b/libs/pricing/src/index.ts
index d7c7772bfcb..3405044529e 100644
--- a/libs/pricing/src/index.ts
+++ b/libs/pricing/src/index.ts
@@ -1,3 +1,4 @@
 // Components
 export * from "./components/pricing-card/pricing-card.component";
 export * from "./components/cart-summary/cart-summary.component";
+export * from "./components/discount-badge/discount-badge.component";
diff --git a/package-lock.json b/package-lock.json
index f0c3f2ace93..30565bc6ab8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -294,7 +294,7 @@
     },
     "apps/web": {
       "name": "@bitwarden/web-vault",
-      "version": "2025.11.0"
+      "version": "2025.11.2"
     },
     "libs/admin-console": {
       "name": "@bitwarden/admin-console",