diff --git a/Changelog.md b/Changelog.md
index d7d08209..d7a3c9e3 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+## [3.16.0] - 2026-10-09
+### Added
+- Added Id service credit calculator
+
 ## [3.15.6] - 2026-10-2
 
 ### Changed
diff --git a/package.json b/package.json
index 604ef83f..29fd1fc1 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,12 @@
   "scripts": {
     "serve": "vue-cli-service serve --mode production",
     "dev": "vue-cli-service serve --mode staging",
+    "catalog:cache": "node scripts/cache-kyc-catalog.js",
+    "catalog:refresh": "node scripts/cache-kyc-catalog.js --refresh",
+    "prebuild": "npm run catalog:cache",
     "setEnv": "cp .env.staging .env",
     "build": "vue-cli-service build",
+    "prebuild-stage": "npm run catalog:cache",
     "build-stage": "vue-cli-service build --mode staging",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit",
diff --git a/scripts/cache-kyc-catalog.js b/scripts/cache-kyc-catalog.js
new file mode 100644
index 00000000..090f2c5d
--- /dev/null
+++ b/scripts/cache-kyc-catalog.js
@@ -0,0 +1,57 @@
+const fs = require('fs');
+const https = require('https');
+const path = require('path');
+
+const catalogUrl = 'https://raw.githubusercontent.com/hypersign-protocol/hypersign-credits-middleware/refs/heads/ADR000/src/catalogs/catalog.kyc.json';
+const catalogPath = path.resolve(__dirname, '../src/catalogs/catalog.kyc.json');
+const shouldRefresh = process.argv.includes('--refresh');
+
+function hasValidCache() {
+  if (!fs.existsSync(catalogPath)) return false;
+
+  try {
+    const catalog = JSON.parse(fs.readFileSync(catalogPath, 'utf8'));
+    return Array.isArray(catalog.routes) && catalog.routes.length > 0;
+  } catch (_) {
+    return false;
+  }
+}
+
+if (!shouldRefresh && hasValidCache()) {
+  console.log(`Using cached KYC credit catalog at ${catalogPath}`);
+  process.exit(0);
+}
+
+fs.mkdirSync(path.dirname(catalogPath), { recursive: true });
+
+https.get(catalogUrl, response => {
+  if (response.statusCode >= 300 && response.statusCode < 400 && response.headers.location) {
+    console.error('The KYC catalog URL redirected. Update the pinned catalog URL before building.');
+    process.exit(1);
+  }
+
+  if (response.statusCode !== 200) {
+    console.error(`Unable to download KYC catalog: HTTP ${response.statusCode}`);
+    process.exit(1);
+  }
+
+  let body = '';
+  response.setEncoding('utf8');
+  response.on('data', chunk => { body += chunk; });
+  response.on('end', () => {
+    try {
+      const catalog = JSON.parse(body);
+      if (!Array.isArray(catalog.routes) || catalog.routes.length === 0) {
+        throw new Error('catalog does not contain routes');
+      }
+      fs.writeFileSync(catalogPath, `${JSON.stringify(catalog, null, 2)}\n`);
+      console.log(`Cached KYC credit catalog at ${catalogPath}`);
+    } catch (error) {
+      console.error(`Unable to cache KYC catalog: ${error.message}`);
+      process.exit(1);
+    }
+  });
+}).on('error', error => {
+  console.error(`Unable to download KYC catalog: ${error.message}`);
+  process.exit(1);
+});
diff --git a/src/catalogs/catalog.kyc.json b/src/catalogs/catalog.kyc.json
new file mode 100644
index 00000000..e3414409
--- /dev/null
+++ b/src/catalogs/catalog.kyc.json
@@ -0,0 +1,558 @@
+{
+  "serviceType": "CAVACH_API",
+  "version": "3.23.0",
+  "globalPrefix": "api",
+  "versioning": "URI",
+  "uriVersionPrefix": "v",
+  "defaultVersion": "1",
+  "routes": [
+    {
+      "method": "POST",
+      "path": "/api/v1/aadhaar/face/match",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 8
+        }
+      ]
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/aadhaar/otp/generate",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 2
+        }
+      ]
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/aadhaar/otp/verify",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 5
+        }
+      ]
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/aadhaar/qr/verify",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 7
+        }
+      ]
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/compliance",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/compliance",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 100
+        }
+      ]
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/credit",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/credit",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/credit/:creditId",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/credit/:creditId/activate",
+      "charges": []
+    },
+    {
+      "method": "DELETE",
+      "path": "/api/v1/document/:id",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/document/:id/verification",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 20
+        }
+      ]
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/document/download/:id",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/document/upload",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 10
+        }
+      ]
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyb/verification/company",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyb/verification/company",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 100
+        }
+      ]
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyb/verification/company/:companyId/company-executives",
+      "charges": []
+    },
+    {
+      "method": "PATCH",
+      "path": "/api/v1/e-kyb/verification/company/:companyId/company-executives",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyb/verification/company/:companyId/company-executives",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 1
+        }
+      ]
+    },
+    {
+      "method": "DELETE",
+      "path": "/api/v1/e-kyb/verification/company/:companyId/company-executives/:id",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyb/verification/company/:companyId/company-executives/:id",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyb/verification/company/:companyId/company-executives/resend-mail",
+      "charges": []
+    },
+    {
+      "method": "DELETE",
+      "path": "/api/v1/e-kyb/verification/company/:id",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyb/verification/company/:id",
+      "charges": []
+    },
+    {
+      "method": "PATCH",
+      "path": "/api/v1/e-kyb/verification/company/:id",
+      "charges": []
+    },
+    {
+      "method": "PATCH",
+      "path": "/api/v1/e-kyb/verification/company/:id/status",
+      "charges": []
+    },
+    {
+      "method": "DELETE",
+      "path": "/api/v1/e-kyb/verification/widget-config",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyb/verification/widget-config",
+      "charges": []
+    },
+    {
+      "method": "PATCH",
+      "path": "/api/v1/e-kyb/verification/widget-config",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyb/verification/widget-config",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/analytics/demographic-stats",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/analytics/device-stats",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/analytics/overview",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyc/verification/asset-metadata",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyc/verification/auth",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 1
+        }
+      ]
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyc/verification/doc-ocr",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 30
+        }
+      ]
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyc/verification/doc-ocr/extract",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 30
+        }
+      ]
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/verification/doc-ocr/status/:sessionId",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyc/verification/mobile-flow",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/verification/mobile-flow/:flowId",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 10
+        }
+      ]
+    },
+    {
+      "method": "PATCH",
+      "path": "/api/v1/e-kyc/verification/mobile-flow/:flowId",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/verification/mobile-flow/:flowId/status",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/verification/onchainkyc-config",
+      "charges": []
+    },
+    {
+      "method": "PATCH",
+      "path": "/api/v1/e-kyc/verification/onchainkyc-config",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyc/verification/onchainkyc-config",
+      "charges": []
+    },
+    {
+      "method": "DELETE",
+      "path": "/api/v1/e-kyc/verification/onchainkyc-config/:onchainConfigId",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/verification/onchainkyc-config/:onchainConfigId",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyc/verification/passive-liveliness",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 15
+        }
+      ]
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/verification/passive-liveliness/status/:sessionId",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyc/verification/sbt-mint",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/verification/session",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyc/verification/session",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 4
+        }
+      ]
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/verification/session/:sessionId",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyc/verification/sessions/:sessionId/decision",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 4
+        }
+      ]
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/verification/user-consent",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyc/verification/user-consent",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 5
+        }
+      ]
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/verification/webhook-config",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyc/verification/webhook-config",
+      "charges": []
+    },
+    {
+      "method": "DELETE",
+      "path": "/api/v1/e-kyc/verification/webhook-config/:id",
+      "charges": []
+    },
+    {
+      "method": "PATCH",
+      "path": "/api/v1/e-kyc/verification/webhook-config/:id",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/verification/widget-config",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyc/verification/widget-config",
+      "charges": []
+    },
+    {
+      "method": "DELETE",
+      "path": "/api/v1/e-kyc/verification/widget-config/:widgetConfigId",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/verification/widget-config/:widgetConfigId",
+      "charges": []
+    },
+    {
+      "method": "PATCH",
+      "path": "/api/v1/e-kyc/verification/widget-config/:widgetConfigId",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/e-kyc/verification/widget-config/all",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/e-kyc/verification/zk-proof",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 10
+        }
+      ]
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/mail-client/add-job",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/proof",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/usage",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/usage/detail",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/usage/invoice",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/user",
+      "charges": []
+    },
+    {
+      "method": "GET",
+      "path": "/api/v1/user/:userId",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v1/wallet",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v2/auth/exchange",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 1
+        }
+      ]
+    },
+    {
+      "method": "POST",
+      "path": "/api/v2/biometrics/verify",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 45
+        }
+      ]
+    },
+    {
+      "method": "GET",
+      "path": "/api/v2/claims/consent",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v2/consents",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 5
+        }
+      ]
+    },
+    {
+      "method": "GET",
+      "path": "/api/v2/consents/:sessionId",
+      "charges": []
+    },
+    {
+      "method": "POST",
+      "path": "/api/v2/documents/extract",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 20
+        }
+      ]
+    },
+    {
+      "method": "POST",
+      "path": "/api/v2/session",
+      "charges": [
+        {
+          "id": "api",
+          "creditType": "API_CREDIT",
+          "amount": 4
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/components/credit/KycCreditCalculator.vue b/src/components/credit/KycCreditCalculator.vue
new file mode 100644
index 00000000..866b3210
--- /dev/null
+++ b/src/components/credit/KycCreditCalculator.vue
@@ -0,0 +1,599 @@
+<template>
+  <v-dialog
+    v-model="isOpen"
+    max-width="1040"
+    content-class="kyc-credit-dialog"
+    :retain-focus="true"
+  >
+    <section class="calculator-modal" role="dialog" aria-modal="true" aria-labelledby="credit-calculator-title">
+      <header class="calculator-header">
+        <div>
+          <h2 id="credit-calculator-title">Credit Calculator</h2>
+          <p>See how many verifications your remaining credits can cover.</p>
+        </div>
+        <button class="close-button" type="button" aria-label="Close credit calculator" @click="close">
+          <v-icon>mdi-close</v-icon>
+        </button>
+      </header>
+
+      <div class="calculator-layout">
+        <VerificationFlowConfigurator
+          class="configuration-panel"
+          :value="selection"
+          :flows="flows"
+          :service-cost="serviceCost"
+          :service-cost-multiplier="serviceQuantityMultiplier"
+          :can-increase-service-quantity="canIncreaseServiceQuantity"
+          @input="updateSelection"
+        />
+
+        <aside class="estimate-panel" aria-live="polite">
+          <div class="summary-card credits-card">
+            <span class="summary-icon"><v-icon>mdi-database-outline</v-icon></span>
+            <div>
+              <span>Available Credits</span>
+              <strong>{{ numberFormat(remainingCredits) }}</strong>
+              <small>/ {{ numberFormat(totalCredits) }} credits</small>
+            </div>
+          </div>
+
+          <v-icon class="estimate-arrow">mdi-arrow-down</v-icon>
+
+          <div class="summary-card estimate-card" :class="{ empty: creditsPerVerification === 0 }">
+            <span class="summary-icon"><v-icon>mdi-chart-bar</v-icon></span>
+            <div>
+              <span>Estimated verifications</span>
+              <strong>{{ creditsPerVerification ? numberFormat(estimatedVerifications) : '—' }}</strong>
+              <small v-if="creditsPerVerification">at {{ numberFormat(creditsPerVerification) }} credits per verification</small>
+              <small v-else>Select at least one service</small>
+            </div>
+          </div>
+
+          <div class="estimate-actions">
+            <!--
+            <div class="configuration-summary" :class="{ empty: !creditsPerVerification }">
+              <span class="configuration-summary-icon">
+                <v-icon small>mdi-format-list-checks</v-icon>
+              </span>
+              <div>
+                <span>Configuration summary</span>
+                <strong>{{ configurationSummary.title }}</strong>
+                <small>{{ configurationSummary.detail }}</small>
+              </div>
+            </div>
+            -->
+
+            <button class="got-it-button" type="button" @click="saveConfiguration">
+              <v-icon small>mdi-content-save-outline</v-icon>
+              Save config locally
+            </button>
+          </div>
+        </aside>
+      </div>
+
+    </section>
+  </v-dialog>
+</template>
+
+<script>
+import creditCatalog from '../../catalogs/catalog.kyc.json';
+import VerificationFlowConfigurator from './VerificationFlowConfigurator.vue';
+
+const flows = [
+  {
+    id: 'india',
+    title: 'India Identity Verification',
+    description: 'Verify individuals in India using Aadhaar-based services.',
+    icon: 'mdi-account-outline',
+    services: [
+      {
+        id: 'aadhaar-face-match',
+        title: 'Aadhaar Face Match',
+        description: "Match the user's selfie against their Aadhaar photo.",
+        icon: 'mdi-face-recognition',
+        routes: ['/api/v1/aadhaar/face/match'],
+        defaultSelected: true
+      },
+      {
+        id: 'aadhaar-verification',
+        title: 'Aadhaar Verification',
+        description: 'Verify Aadhaar using OTP or QR.',
+        icon: 'mdi-card-account-details-outline',
+        routes: ['/api/v1/aadhaar/otp/generate', '/api/v1/aadhaar/otp/verify'],
+        defaultSelected: true
+      }
+    ]
+  },
+  {
+    id: 'global',
+    title: 'Global Identity Verification',
+    description: 'Verify individuals internationally using identity documents and biometrics.',
+    icon: 'mdi-earth',
+    lockedMessage: 'Required by UBO Verification',
+    services: [
+      {
+        id: 'verification-session',
+        title: 'Verification Session',
+        description: 'Start and manage a secure verification session.',
+        icon: 'mdi-cellphone-check',
+        routes: ['/api/v2/session', '/api/v1/e-kyc/verification/auth'],
+        defaultSelected: true
+      },
+      {
+        id: 'passive-liveness',
+        title: 'Passive Liveness',
+        description: 'Detect whether the user is a real, live person.',
+        icon: 'mdi-face-recognition',
+        routes: ['/api/v1/e-kyc/verification/passive-liveliness'],
+        defaultSelected: true
+      },
+      {
+        id: 'document-verification',
+        title: 'Document Verification',
+        description: 'Extract and verify information from passports and government-issued IDs.',
+        icon: 'mdi-file-document-check-outline',
+        routes: ['/api/v2/documents/extract', '/api/v2/biometrics/verify'],
+        defaultSelected: true
+      },
+      {
+        id: 'age-verification',
+        title: 'Age Verification',
+        description: 'Verify whether the user meets a required age threshold.',
+        icon: 'mdi-calendar-account-outline',
+        routes: ['/api/v1/e-kyc/verification/zk-proof'],
+        defaultSelected: false
+      },
+      {
+        id: 'consent-capture',
+        title: 'Consent Capture',
+        description: 'Capture user consent for identity verification.',
+        icon: 'mdi-file-sign',
+        routes: ['/api/v2/consents'],
+        defaultSelected: true
+      }
+    ]
+  },
+  {
+    id: 'business',
+    title: 'Business Verification',
+    description: 'Verify companies and their ownership and compliance information.',
+    icon: 'mdi-domain',
+    services: [
+      {
+        id: 'business-data-capture',
+        title: 'Business Data Capture',
+        description: 'Collect company information and business registration documents.',
+        icon: 'mdi-domain-plus',
+        routes: ['/api/v1/e-kyb/verification/company'],
+        defaultSelected: true
+      },
+      {
+        id: 'ubo-verification',
+        title: 'UBO Verification',
+        description: 'Identify and verify ultimate beneficial owners.',
+        note: 'Requires Global Identity Verification for the UBO.',
+        icon: 'mdi-account-group-outline',
+        routes: ['/api/v1/e-kyb/verification/company/:companyId/company-executives'],
+        defaultSelected: true,
+        quantitySelectable: true,
+        defaultQuantity: 1,
+        minQuantity: 1,
+        requiresFlowIds: ['global']
+      },
+      {
+        id: 'aml-screening',
+        title: 'AML Screening',
+        description: 'Screen against sanctions, watchlists, registries and adverse media.',
+        icon: 'mdi-shield-search',
+        routes: ['/api/v1/compliance'],
+        defaultSelected: true
+      }
+    ]
+  }
+];
+
+export default {
+  name: 'KycCreditCalculator',
+  components: { VerificationFlowConfigurator },
+  props: {
+    value: { type: Boolean, default: false },
+    remainingCredits: { type: Number, default: 0 },
+    totalCredits: { type: Number, default: 0 }
+  },
+  data() {
+    return {
+      flows,
+      selectedFlowIds: [],
+      selectedServiceIds: [],
+      serviceQuantities: {}
+    };
+  },
+  computed: {
+    isOpen: {
+      get() { return this.value; },
+      set(value) { this.$emit('input', value); }
+    },
+    selection() {
+      return {
+        selectedFlowIds: this.selectedFlowIds,
+        selectedServiceIds: this.selectedServiceIds,
+        serviceQuantities: this.serviceQuantities
+      };
+    },
+    selectedFlows() {
+      return this.flows.filter(flow => this.selectedFlowIds.includes(flow.id));
+    },
+    selectedServices() {
+      return this.selectedFlows.reduce((services, flow) => {
+        return services.concat(flow.services.filter(service => this.selectedServiceIds.includes(service.id)));
+      }, []);
+    },
+    routeCosts() {
+      return creditCatalog.routes.reduce((costs, route) => {
+        if (route.method !== 'POST') return costs;
+        costs[route.path] = (route.charges || [])
+          .filter(charge => charge.creditType === 'API_CREDIT')
+          .reduce((total, charge) => total + Number(charge.amount || 0), 0);
+        return costs;
+      }, {});
+    },
+    creditsPerVerification() {
+      return this.selectedServices.reduce((total, service) => {
+        return total + (this.serviceCost(service) * this.serviceQuantityMultiplier(service));
+      }, 0);
+    },
+    estimatedVerifications() {
+      if (!this.creditsPerVerification) return 0;
+      return Math.floor(Math.max(this.remainingCredits, 0) / this.creditsPerVerification);
+    },
+    uboQuantity() {
+      if (!this.selectedServiceIds.includes('ubo-verification')) return 0;
+      return Math.max(
+        Math.floor(Number(this.serviceQuantities['ubo-verification']) || 1),
+        1
+      );
+    },
+    configurationSummary() {
+      if (!this.creditsPerVerification) {
+        return {
+          title: 'No configuration selected',
+          detail: 'Select a flow and at least one service to see its coverage.'
+        };
+      }
+
+      const summarizedFlows = this.selectedFlows.filter(flow => {
+        const isUboDependency = flow.id === 'global'
+          && this.selectedFlowIds.includes('business')
+          && this.uboQuantity > 0;
+        return !isUboDependency;
+      });
+      const flowLabels = {
+        india: 'India Identity',
+        global: 'Global Identity',
+        business: 'Business'
+      };
+      const isSingleFlow = summarizedFlows.length === 1;
+      const verificationLabel = isSingleFlow
+        ? `${flowLabels[summarizedFlows[0].id] || summarizedFlows[0].title} verification`
+        : 'combined verification';
+      const title = `Up to ${this.numberFormat(this.estimatedVerifications)} ${verificationLabel}${this.estimatedVerifications === 1 ? '' : 's'}`;
+
+      if (this.uboQuantity) {
+        return {
+          title,
+          detail: `Each business verification includes ${this.numberFormat(this.uboQuantity)} UBO verification${this.uboQuantity === 1 ? '' : 's'}.`
+        };
+      }
+
+      return {
+        title,
+        detail: `${this.selectedServices.length} selected service${this.selectedServices.length === 1 ? '' : 's'} per verification.`
+      };
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(isOpen) {
+        if (isOpen) this.loadSavedConfiguration();
+      }
+    }
+  },
+  methods: {
+    updateSelection(selection) {
+      this.selectedFlowIds = [...selection.selectedFlowIds];
+      this.selectedServiceIds = [...selection.selectedServiceIds];
+      this.serviceQuantities = { ...(selection.serviceQuantities || {}) };
+    },
+    serviceCost(service) {
+      return service.routes.reduce((total, route) => total + Number(this.routeCosts[route] || 0), 0);
+    },
+    serviceQuantityMultiplier(service) {
+      if (!this.selectedServiceIds.includes('ubo-verification')) return 1;
+
+      const quantity = Math.max(
+        Math.floor(Number(this.serviceQuantities['ubo-verification']) || 1),
+        1
+      );
+      const globalFlow = this.flows.find(flow => flow.id === 'global');
+      const globalServiceIds = globalFlow ? globalFlow.services.map(item => item.id) : [];
+
+      return service.id === 'ubo-verification' || globalServiceIds.includes(service.id)
+        ? quantity
+        : 1;
+    },
+    canIncreaseServiceQuantity(service, nextQuantity) {
+      if (service.id !== 'ubo-verification') return true;
+
+      const currentQuantity = Math.max(
+        Math.floor(Number(this.serviceQuantities['ubo-verification']) || 1),
+        1
+      );
+      const globalFlow = this.flows.find(flow => flow.id === 'global');
+      const selectedGlobalCost = globalFlow
+        ? globalFlow.services
+          .filter(item => this.selectedServiceIds.includes(item.id))
+          .reduce((total, item) => total + this.serviceCost(item), 0)
+        : 0;
+      const costPerAdditionalUbo = this.serviceCost(service) + selectedGlobalCost;
+      const additionalUbos = Math.max(Math.floor(Number(nextQuantity) || 1) - currentQuantity, 0);
+      const projectedCost = this.creditsPerVerification + (costPerAdditionalUbo * additionalUbos);
+
+      return projectedCost <= Math.max(Number(this.remainingCredits) || 0, 0);
+    },
+    numberFormat(value) {
+      return new Intl.NumberFormat().format(Number(value || 0));
+    },
+    loadSavedConfiguration() {
+      const saved = this.$store
+        ? this.$store.getters['creditCalculatorStore/getConfiguration']
+        : null;
+      const savedFlowIds = Array.isArray(saved && saved.selectedFlowIds) ? saved.selectedFlowIds : [];
+      const savedServiceIds = Array.isArray(saved && saved.selectedServiceIds) ? saved.selectedServiceIds : [];
+      const savedQuantities = saved && saved.serviceQuantities && typeof saved.serviceQuantities === 'object'
+        ? saved.serviceQuantities
+        : {};
+      const validFlowIds = this.flows.map(flow => flow.id);
+      const restoredFlowIds = savedFlowIds.filter(id => validFlowIds.includes(id));
+
+      if (savedServiceIds.includes('ubo-verification') && !restoredFlowIds.includes('global')) {
+        restoredFlowIds.push('global');
+      }
+
+      this.selectedFlowIds = this.flows
+        .filter(flow => restoredFlowIds.includes(flow.id))
+        .map(flow => flow.id);
+
+      const availableServices = this.selectedFlows.reduce((services, flow) => services.concat(flow.services), []);
+      const validServiceIds = availableServices.map(service => service.id);
+      const restoredServiceIds = savedServiceIds.filter((id, index, ids) => {
+        return validServiceIds.includes(id) && ids.indexOf(id) === index;
+      });
+
+      availableServices.forEach(service => {
+        if (service.required && !restoredServiceIds.includes(service.id)) {
+          restoredServiceIds.push(service.id);
+        }
+      });
+
+      this.selectedServiceIds = restoredServiceIds;
+      this.serviceQuantities = restoredServiceIds.reduce((quantities, serviceId) => {
+        const quantity = Math.max(Math.floor(Number(savedQuantities[serviceId]) || 1), 1);
+        if (serviceId === 'ubo-verification') quantities[serviceId] = quantity;
+        return quantities;
+      }, {});
+    },
+    saveConfiguration() {
+      if (this.$store) {
+        this.$store.commit('creditCalculatorStore/saveConfiguration', {
+          selectedFlowIds: [...this.selectedFlowIds],
+          selectedServiceIds: [...this.selectedServiceIds],
+          serviceQuantities: { ...this.serviceQuantities },
+          creditsPerVerification: this.creditsPerVerification
+        });
+      }
+      this.close();
+    },
+    close() {
+      this.isOpen = false;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.calculator-modal {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: min(760px, calc(100vh - 48px));
+  max-height: 90vh;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 16px;
+  background: #fff;
+  color: #12213d;
+}
+
+.calculator-header {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 28px 32px 16px;
+}
+
+.calculator-header h2 {
+  margin: 0;
+  color: #12213d;
+  font-weight: 700;
+}
+
+.calculator-header h2 { font-size: 1.75rem; }
+.calculator-header p { margin: 3px 0 0; color: #64748b; }
+
+.close-button {
+  display: inline-flex;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+}
+
+.close-button:hover { background: #f1f5f9; }
+
+.calculator-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
+  min-height: 0;
+  flex: 1 1 auto;
+  padding: 0 32px 28px;
+}
+
+.configuration-panel {
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 24px;
+  scrollbar-color: #cbd5e1 transparent;
+  scrollbar-width: thin;
+}
+
+.configuration-panel::-webkit-scrollbar { width: 6px; }
+.configuration-panel::-webkit-scrollbar-thumb { border-radius: 999px; background: #cbd5e1; }
+
+.summary-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.estimate-panel {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  padding: 14px 0 0 24px;
+  border-left: 1px solid #e2e8f0;
+}
+
+.summary-card {
+  display: flex;
+  min-height: 138px;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  border-radius: 12px;
+}
+
+.summary-card .summary-icon { flex: 0 0 48px; width: 48px; height: 48px; }
+.summary-card > div { min-width: 0; }
+.summary-card > div > span { display: block; color: #52627b; font-size: 0.85rem; font-weight: 700; }
+.summary-card strong { display: inline-block; margin-top: 6px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
+.summary-card small { margin-left: 6px; color: #52627b; font-size: 0.76rem; font-weight: 600; }
+
+.credits-card { background: #f8fafc; }
+.credits-card .summary-icon { background: #f1f5f9; }
+.credits-card .summary-icon .v-icon,
+.credits-card strong { color: #495057; }
+
+.estimate-card { background: #eff6ff; }
+.estimate-card .summary-icon { background: #dbeafe; }
+.estimate-card .summary-icon .v-icon,
+.estimate-card strong { color: #405b78; }
+.estimate-card.empty { background: #eff6ff; }
+.estimate-card.empty strong { color: #94a3b8; }
+.estimate-card small { display: block; margin: 8px 0 0; }
+
+.estimate-arrow { align-self: center; margin: 14px 0; color: #52627b; }
+
+.estimate-actions {
+  display: grid;
+  gap: 12px;
+  margin-top: auto;
+}
+
+.configuration-summary {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 14px;
+  border: 1px solid #dbe6f0;
+  border-radius: 10px;
+  background: #f8fafc;
+}
+
+.configuration-summary-icon {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  flex: 0 0 32px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #eaf2f9;
+}
+
+.configuration-summary-icon .v-icon { color: #5b7896; }
+.configuration-summary > div { display: flex; min-width: 0; flex-direction: column; }
+.configuration-summary span { color: #64748b; font-size: 0.72rem; font-weight: 700; }
+.configuration-summary strong { margin-top: 3px; color: #344563; font-size: 0.88rem; line-height: 1.3; }
+.configuration-summary small { margin-top: 4px; color: #64748b; font-size: 0.73rem; line-height: 1.35; }
+.configuration-summary.empty { border-style: dashed; }
+
+.got-it-button {
+  display: inline-flex;
+  width: 100%;
+  min-height: 48px;
+  flex: 0 0 48px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 8px;
+  background: #6c757d;
+  color: #fff;
+  font-weight: 700;
+}
+
+.got-it-button .v-icon { margin-right: 6px; color: #fff; }
+.got-it-button:hover { background: #5a6268; }
+
+@media (max-width: 900px) {
+  .calculator-layout {
+    display: block;
+    overflow-y: auto;
+    padding-bottom: 20px;
+    scrollbar-color: #cbd5e1 transparent;
+    scrollbar-width: thin;
+  }
+  .configuration-panel { min-height: auto; overflow: visible; padding-right: 0; }
+  .estimate-panel { min-height: auto; padding: 22px 0 0; border-top: 1px solid #e2e8f0; border-left: 0; }
+  .estimate-actions { margin-top: 20px; }
+}
+
+@media (max-width: 640px) {
+  .calculator-modal {
+    height: calc(100vh - 24px);
+    max-height: none;
+    border-radius: 12px;
+  }
+  .calculator-header { padding: 20px 18px 10px; }
+  .calculator-header h2 { font-size: 1.35rem; }
+  .calculator-layout { padding: 0 18px 20px; }
+  .summary-card { min-height: 120px; }
+}
+</style>
+
+<style>
+.v-dialog.kyc-credit-dialog { overflow: hidden; }
+
+@media (max-width: 640px) {
+  .v-dialog.kyc-credit-dialog {
+    width: calc(100% - 24px);
+    max-height: calc(100vh - 24px);
+    margin: 12px;
+  }
+}
+</style>
diff --git a/src/components/credit/VerificationFlowConfigurator.vue b/src/components/credit/VerificationFlowConfigurator.vue
new file mode 100644
index 00000000..349d2bdb
--- /dev/null
+++ b/src/components/credit/VerificationFlowConfigurator.vue
@@ -0,0 +1,449 @@
+<template>
+  <div class="verification-flow-configurator">
+    <section class="configurator-step">
+      <h3>{{ flowHeading }}</h3>
+      <p>{{ flowDescription }}</p>
+
+      <div class="flow-grid" role="group" :aria-label="flowHeading">
+        <button
+          v-for="flow in flows"
+          :key="flow.id"
+          type="button"
+          class="flow-card"
+          :class="{ selected: isFlowSelected(flow.id), locked: isFlowLocked(flow.id) }"
+          :aria-pressed="isFlowSelected(flow.id) ? 'true' : 'false'"
+          :disabled="isFlowLocked(flow.id)"
+          @click="toggleFlow(flow.id)"
+        >
+          <span class="flow-icon"><v-icon>{{ flow.icon }}</v-icon></span>
+          <span class="flow-checkbox" aria-hidden="true"><v-icon small>mdi-check</v-icon></span>
+          <strong>{{ flow.title }}</strong>
+          <small>{{ flow.description }}</small>
+          <em v-if="isFlowLocked(flow.id)">{{ flow.lockedMessage || lockedFlowMessage }}</em>
+        </button>
+      </div>
+    </section>
+
+    <section class="configurator-step service-step">
+      <h3>{{ serviceHeading }}</h3>
+      <p>{{ selectedFlows.length ? serviceDescription : emptyServiceDescription }}</p>
+
+      <div v-if="selectedFlows.length" class="selected-flow-services">
+        <section v-for="flow in selectedFlows" :key="flow.id" class="service-group">
+          <div class="service-group-heading">
+            <v-icon small>{{ flow.icon }}</v-icon>
+            <strong>{{ flow.title }}</strong>
+          </div>
+          <div class="service-list">
+            <div
+              v-for="service in flow.services"
+              :key="service.id"
+              class="service-row"
+              :class="{ selected: isServiceSelected(service.id), required: service.required }"
+              @click="toggleService(service)"
+            >
+              <span class="service-toggle">
+                <input
+                  type="checkbox"
+                  :checked="isServiceSelected(service.id)"
+                  :disabled="service.required"
+                  :aria-label="`${service.title}${service.required ? ', required' : ''}`"
+                  @click.stop
+                  @change="toggleService(service)"
+                >
+                <span class="service-check" aria-hidden="true"><v-icon small>mdi-check</v-icon></span>
+              </span>
+              <span class="service-icon"><v-icon>{{ service.icon }}</v-icon></span>
+              <span class="service-copy">
+                <strong>
+                  {{ service.title }}
+                  <span v-if="service.required" class="required-label">Required</span>
+                </strong>
+                <small>{{ service.description }}</small>
+                <em v-if="service.note" @click.stop>
+                  <v-icon x-small>mdi-information-outline</v-icon>{{ service.note }}
+                </em>
+              </span>
+              <span
+                class="service-actions"
+                :class="{ 'has-quantity': service.quantitySelectable && isServiceSelected(service.id) }"
+              >
+                <span v-if="service.quantitySelectable && isServiceSelected(service.id)" class="quantity-stepper" @click.stop>
+                  <button
+                    type="button"
+                    :disabled="serviceQuantity(service) <= minimumQuantity(service)"
+                    :aria-label="`Decrease ${service.title} quantity`"
+                    @click="changeServiceQuantity(service, -1)"
+                  >−</button>
+                  <input
+                    class="quantity-input"
+                    type="number"
+                    inputmode="numeric"
+                    step="1"
+                    :min="minimumQuantity(service)"
+                    :value="serviceQuantity(service)"
+                    :aria-label="`${service.title} quantity`"
+                    @click.stop
+                    @change="setServiceQuantity(service, $event.target.value)"
+                    @keydown.enter="$event.target.blur()"
+                  >
+                  <button
+                    type="button"
+                    :disabled="!canIncreaseServiceQuantity(service, serviceQuantity(service) + 1)"
+                    :aria-label="`Increase ${service.title} quantity`"
+                    @click="changeServiceQuantity(service, 1)"
+                  >+</button>
+                </span>
+                <span v-if="showServiceCosts" class="credit-pill" :title="creditLabel(service)">{{ creditLabel(service) }}</span>
+              </span>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <div v-else class="service-placeholder">
+        <v-icon>mdi-cursor-default-click-outline</v-icon>
+        {{ emptyText }}
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VerificationFlowConfigurator',
+  props: {
+    value: {
+      type: Object,
+      default: () => ({ selectedFlowIds: [], selectedServiceIds: [] })
+    },
+    flows: { type: Array, required: true },
+    serviceCost: { type: Function, default: () => 0 },
+    serviceCostMultiplier: { type: Function, default: () => 1 },
+    canIncreaseServiceQuantity: { type: Function, default: () => true },
+    showServiceCosts: { type: Boolean, default: true },
+    flowHeading: { type: String, default: '1. What do you want to verify?' },
+    flowDescription: { type: String, default: 'Choose one or more verification flows to see their services.' },
+    serviceHeading: { type: String, default: '2. Select services' },
+    serviceDescription: { type: String, default: 'Review the services included in each verification.' },
+    emptyServiceDescription: { type: String, default: 'Select one or more verification flows first.' },
+    emptyText: { type: String, default: 'Choose one or more flows above to configure their services.' },
+    lockedFlowMessage: { type: String, default: 'Required by a selected service' }
+  },
+  computed: {
+    selectedFlowIds() {
+      return Array.isArray(this.value.selectedFlowIds) ? this.value.selectedFlowIds : [];
+    },
+    selectedServiceIds() {
+      return Array.isArray(this.value.selectedServiceIds) ? this.value.selectedServiceIds : [];
+    },
+    serviceQuantities() {
+      return this.value.serviceQuantities && typeof this.value.serviceQuantities === 'object'
+        ? this.value.serviceQuantities
+        : {};
+    },
+    selectedFlows() {
+      return this.flows.filter(flow => this.selectedFlowIds.includes(flow.id));
+    }
+  },
+  methods: {
+    isFlowSelected(flowId) {
+      return this.selectedFlowIds.includes(flowId);
+    },
+    isServiceSelected(serviceId) {
+      return this.selectedServiceIds.includes(serviceId);
+    },
+    isFlowLocked(flowId) {
+      return this.flows.some(flow => flow.services.some(service => {
+        return this.isServiceSelected(service.id)
+          && Array.isArray(service.requiresFlowIds)
+          && service.requiresFlowIds.includes(flowId);
+      }));
+    },
+    toggleFlow(flowId) {
+      if (this.isFlowLocked(flowId)) return;
+      if (this.isFlowSelected(flowId)) this.deselectFlow(flowId);
+      else this.selectFlow(flowId);
+    },
+    selectFlow(flowId) {
+      const selectedFlowIds = [...this.selectedFlowIds];
+      const selectedServiceIds = [...this.selectedServiceIds];
+      const serviceQuantities = { ...this.serviceQuantities };
+      const addFlow = (id) => {
+        const flow = this.flows.find(item => item.id === id);
+        if (!flow) return;
+        if (!selectedFlowIds.includes(id)) selectedFlowIds.push(id);
+
+        flow.services.forEach(service => {
+          if ((service.defaultSelected || service.required) && !selectedServiceIds.includes(service.id)) {
+            selectedServiceIds.push(service.id);
+          }
+          if ((service.defaultSelected || service.required) && service.quantitySelectable && !serviceQuantities[service.id]) {
+            serviceQuantities[service.id] = this.minimumQuantity(service);
+          }
+          if ((service.defaultSelected || service.required) && Array.isArray(service.requiresFlowIds)) {
+            service.requiresFlowIds.forEach(addFlow);
+          }
+        });
+      };
+
+      addFlow(flowId);
+      this.emitSelection(selectedFlowIds, selectedServiceIds, serviceQuantities);
+    },
+    deselectFlow(flowId) {
+      const flow = this.flows.find(item => item.id === flowId);
+      if (!flow) return;
+      const serviceIds = flow.services.map(service => service.id);
+      const serviceQuantities = { ...this.serviceQuantities };
+      serviceIds.forEach(serviceId => delete serviceQuantities[serviceId]);
+      this.emitSelection(
+        this.selectedFlowIds.filter(id => id !== flowId),
+        this.selectedServiceIds.filter(id => !serviceIds.includes(id)),
+        serviceQuantities
+      );
+    },
+    toggleService(service) {
+      if (!service || service.required) return;
+      if (this.isServiceSelected(service.id)) {
+        this.emitSelection(
+          this.selectedFlowIds,
+          this.selectedServiceIds.filter(id => id !== service.id),
+          Object.keys(this.serviceQuantities).reduce((quantities, serviceId) => {
+            if (serviceId !== service.id) quantities[serviceId] = this.serviceQuantities[serviceId];
+            return quantities;
+          }, {})
+        );
+        return;
+      }
+
+      const selectedFlowIds = [...this.selectedFlowIds];
+      const selectedServiceIds = [...this.selectedServiceIds, service.id];
+      const serviceQuantities = { ...this.serviceQuantities };
+      if (service.quantitySelectable) serviceQuantities[service.id] = this.minimumQuantity(service);
+      const requiredFlows = Array.isArray(service.requiresFlowIds) ? service.requiresFlowIds : [];
+      requiredFlows.forEach(flowId => {
+        const flow = this.flows.find(item => item.id === flowId);
+        if (!flow) return;
+        if (!selectedFlowIds.includes(flowId)) selectedFlowIds.push(flowId);
+        flow.services.forEach(item => {
+          if ((item.defaultSelected || item.required) && !selectedServiceIds.includes(item.id)) {
+            selectedServiceIds.push(item.id);
+          }
+          if ((item.defaultSelected || item.required) && item.quantitySelectable && !serviceQuantities[item.id]) {
+            serviceQuantities[item.id] = this.minimumQuantity(item);
+          }
+        });
+      });
+      this.emitSelection(selectedFlowIds, selectedServiceIds, serviceQuantities);
+    },
+    minimumQuantity(service) {
+      return Math.max(Number(service.minQuantity || service.defaultQuantity || 1), 1);
+    },
+    serviceQuantity(service) {
+      const quantity = Number(this.serviceQuantities[service.id]);
+      return Number.isFinite(quantity) && quantity >= this.minimumQuantity(service)
+        ? Math.floor(quantity)
+        : this.minimumQuantity(service);
+    },
+    changeServiceQuantity(service, change) {
+      if (!this.isServiceSelected(service.id)) return;
+      const quantity = Math.max(this.serviceQuantity(service) + change, this.minimumQuantity(service));
+      if (change > 0 && !this.canIncreaseServiceQuantity(service, quantity)) return;
+      this.emitSelection(this.selectedFlowIds, this.selectedServiceIds, {
+        ...this.serviceQuantities,
+        [service.id]: quantity
+      });
+    },
+    setServiceQuantity(service, value) {
+      if (!this.isServiceSelected(service.id)) return;
+
+      const minimum = this.minimumQuantity(service);
+      const numericValue = Number(value);
+      const requestedQuantity = Number.isFinite(numericValue)
+        ? Math.max(Math.floor(numericValue), minimum)
+        : minimum;
+      const currentQuantity = this.serviceQuantity(service);
+      let quantity = requestedQuantity;
+
+      if (quantity > currentQuantity && !this.canIncreaseServiceQuantity(service, quantity)) {
+        let allowedQuantity = currentQuantity;
+        let blockedQuantity = quantity;
+        while (allowedQuantity < blockedQuantity) {
+          const candidate = Math.ceil((allowedQuantity + blockedQuantity) / 2);
+          if (this.canIncreaseServiceQuantity(service, candidate)) allowedQuantity = candidate;
+          else blockedQuantity = candidate - 1;
+        }
+        quantity = allowedQuantity;
+      }
+
+      this.emitSelection(this.selectedFlowIds, this.selectedServiceIds, {
+        ...this.serviceQuantities,
+        [service.id]: quantity
+      });
+    },
+    emitSelection(selectedFlowIds, selectedServiceIds, serviceQuantities = this.serviceQuantities) {
+      const uniqueServiceIds = [...new Set(selectedServiceIds)];
+      const normalizedQuantities = Object.keys(serviceQuantities).reduce((quantities, serviceId) => {
+        if (!uniqueServiceIds.includes(serviceId)) return quantities;
+        const quantity = Math.max(Math.floor(Number(serviceQuantities[serviceId]) || 1), 1);
+        quantities[serviceId] = quantity;
+        return quantities;
+      }, {});
+      const selection = {
+        selectedFlowIds: [...new Set(selectedFlowIds)],
+        selectedServiceIds: uniqueServiceIds,
+        serviceQuantities: normalizedQuantities
+      };
+      this.$emit('input', selection);
+      this.$emit('change', selection);
+    },
+    creditLabel(service) {
+      const baseCost = Number(this.serviceCost(service) || 0);
+      const multiplier = Math.max(Number(this.serviceCostMultiplier(service) || 1), 1);
+      const cost = baseCost * multiplier;
+      const formattedCost = new Intl.NumberFormat().format(cost);
+      return `${formattedCost} ${cost === 1 ? 'credit' : 'credits'}`;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.configurator-step { padding: 14px 0 20px; }
+.configurator-step h3 { margin: 0; color: #12213d; font-size: 1rem; font-weight: 700; }
+.configurator-step > p { margin: 3px 0 0; color: #64748b; font-size: 0.84rem; }
+
+.flow-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.flow-card {
+  position: relative;
+  display: flex;
+  min-height: 176px;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 18px;
+  border: 1px solid #dbe3ef;
+  border-radius: 10px;
+  background: #fff;
+  text-align: left;
+  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
+}
+
+.flow-card:hover { border-color: #b7c9dc; }
+.flow-card.selected { border-color: #9fb8d1; background: #f4f8fc; box-shadow: 0 0 0 1px rgba(159, 184, 209, .2); }
+.flow-card:disabled { cursor: not-allowed; opacity: 1; }
+.flow-card.locked { border-color: #b7c9dc; background: #f4f8fc; }
+
+.flow-icon,
+.service-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.flow-icon { width: 42px; height: 42px; margin-bottom: 14px; background: #eaf2f9; }
+.flow-icon .v-icon { color: #6688ab; }
+.flow-card strong { padding-right: 12px; font-size: 0.93rem; line-height: 1.25; }
+.flow-card small { margin-top: 4px; color: #64748b; font-size: 0.77rem; line-height: 1.35; }
+.flow-card em { margin-top: 7px; color: #6688ab; font-size: 0.67rem; font-style: normal; font-weight: 700; }
+
+.flow-checkbox {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: inline-flex;
+  width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #94a3b8;
+  border-radius: 4px;
+}
+
+.flow-checkbox .v-icon { opacity: 0; color: #fff; }
+.flow-card.selected .flow-checkbox { border-color: #7898b8; background: #7898b8; }
+.flow-card.selected .flow-checkbox .v-icon { opacity: 1; }
+.flow-card.locked .flow-checkbox { border-color: #c4d4e4; background: #e6eef6; }
+.flow-card.locked .flow-checkbox .v-icon { color: #91a8be; }
+
+.service-step { border-top: 1px solid #e2e8f0; }
+.selected-flow-services { display: grid; gap: 18px; margin-top: 16px; }
+.service-group { min-width: 0; }
+.service-group-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: #344563; font-size: 0.78rem; }
+.service-group-heading .v-icon { color: #6688ab; }
+.service-list { display: grid; gap: 8px; }
+
+.service-row {
+  display: grid;
+  width: 100%;
+  min-height: 68px;
+  grid-template-columns: 22px 38px minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  margin: 0;
+  padding: 10px 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #fff;
+  color: #12213d;
+  cursor: pointer;
+  text-align: left;
+}
+
+@media (min-width: 641px) {
+  .service-row { grid-template-columns: 22px 38px minmax(0, 1fr) 204px; }
+  .service-actions { width: 204px; justify-self: end; }
+}
+
+.service-row:not(.required):hover { border-color: #b7c9dc; }
+.service-row.selected { border-color: #a9bfd5; background: #f4f8fc; }
+.service-row.required { cursor: not-allowed; }
+.service-toggle { position: relative; display: inline-flex; width: 21px; height: 21px; }
+.service-toggle input { position: absolute; z-index: 1; inset: 0; width: 21px; height: 21px; margin: 0; cursor: pointer; opacity: 0; }
+.service-toggle input:disabled { cursor: not-allowed; }
+.service-toggle input:focus-visible + .service-check { outline: 3px solid rgba(120, 152, 184, .25); outline-offset: 1px; }
+
+.service-check { display: inline-flex; width: 21px; height: 21px; align-items: center; justify-content: center; border: 1px solid #94a3b8; border-radius: 4px; background: #fff; }
+.service-check .v-icon { opacity: 0; color: #fff; }
+.service-row.selected .service-check { border-color: #7898b8; background: #7898b8; }
+.service-row.selected .service-check .v-icon { opacity: 1; }
+.service-row.required .service-check { border-color: #c4d4e4; background: #e6eef6; }
+.service-row.required .service-check .v-icon { opacity: 1; color: #91a8be; }
+
+.service-icon { width: 38px; height: 38px; background: #f1f5f9; }
+.service-icon .v-icon { color: #344563; }
+.service-copy { display: flex; min-width: 0; flex-direction: column; }
+.service-copy strong { font-size: 0.86rem; }
+.service-copy small { color: #64748b; font-size: 0.75rem; line-height: 1.3; }
+.service-copy em { margin-top: 5px; color: #52627b; cursor: default; font-size: 0.69rem; font-style: normal; }
+.service-copy em .v-icon { margin-right: 4px; color: inherit; }
+
+.required-label { display: inline-block; margin-left: 5px; padding: 2px 6px; border-radius: 999px; background: #e2e8f0; color: #52627b; font-size: 0.58rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; vertical-align: middle; }
+.service-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
+.service-actions.has-quantity { display: grid; width: 204px; grid-template-columns: 100px 96px; }
+.quantity-stepper { display: inline-flex; width: 100px; height: 30px; align-items: center; overflow: hidden; border: 1px solid #b7c9dc; border-radius: 6px; background: #fff; box-sizing: border-box; }
+.quantity-stepper button { width: 28px; height: 28px; flex: 0 0 28px; border: 0; background: #f4f8fc; color: #405b78; font-size: 16px; font-weight: 700; line-height: 1; }
+.quantity-stepper button:hover:not(:disabled) { background: #e6eef6; }
+.quantity-stepper button:disabled { cursor: not-allowed; color: #b5c2cf; }
+.quantity-input { width: 42px; height: 28px; flex: 0 0 42px; border: 0; outline: 0; background: #fff; color: #344563; font: inherit; font-size: 0.75rem; font-variant-numeric: tabular-nums; font-weight: 700; text-align: center; appearance: textfield; }
+.quantity-input::-webkit-inner-spin-button,
+.quantity-input::-webkit-outer-spin-button { margin: 0; appearance: none; }
+.quantity-input:focus { box-shadow: inset 0 0 0 2px rgba(120, 152, 184, .35); }
+.credit-pill { display: inline-flex; width: 96px; height: 28px; align-items: center; justify-content: center; overflow: hidden; padding: 0 7px; border: 0; border-radius: 999px; background: #eaf2f9; box-sizing: border-box; color: #5b7896; font-size: 0.74rem; font-variant-numeric: tabular-nums; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
+.service-actions.has-quantity .credit-pill { justify-self: end; }
+.service-placeholder { display: flex; min-height: 120px; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; border: 1px dashed #cbd5e1; border-radius: 10px; color: #64748b; font-size: 0.84rem; }
+
+@media (max-width: 640px) {
+  .flow-grid { grid-template-columns: 1fr; }
+  .flow-card { min-height: 128px; }
+  .service-row { grid-template-columns: 22px 34px minmax(0, 1fr); }
+  .service-actions { width: auto; grid-column: 3; justify-self: start; flex-wrap: wrap; justify-content: flex-start; }
+  .service-actions.has-quantity { max-width: 100%; }
+}
+</style>
diff --git a/src/store/creditCalculatorStore.js b/src/store/creditCalculatorStore.js
new file mode 100644
index 00000000..14390f23
--- /dev/null
+++ b/src/store/creditCalculatorStore.js
@@ -0,0 +1,49 @@
+const emptyConfiguration = () => ({
+    selectedFlowIds: [],
+    selectedServiceIds: [],
+    serviceQuantities: {},
+    creditsPerVerification: 0,
+    updatedAt: null
+})
+
+const uniqueStrings = (values) => Array.from(new Set(
+    (Array.isArray(values) ? values : []).filter(value => typeof value === 'string')
+))
+
+const creditCalculatorStore = {
+    namespaced: true,
+    state: {
+        configuration: emptyConfiguration()
+    },
+    getters: {
+        getConfiguration: (state) => state.configuration
+    },
+    mutations: {
+        saveConfiguration(state, payload = {}) {
+            const selectedServiceIds = uniqueStrings(payload.selectedServiceIds)
+            const rawQuantities = payload.serviceQuantities && typeof payload.serviceQuantities === 'object'
+                ? payload.serviceQuantities
+                : {}
+            const serviceQuantities = Object.keys(rawQuantities).reduce((quantities, serviceId) => {
+                if (!selectedServiceIds.includes(serviceId)) return quantities
+                quantities[serviceId] = Math.max(Math.floor(Number(rawQuantities[serviceId]) || 1), 1)
+                return quantities
+            }, {})
+
+            state.configuration = {
+                selectedFlowIds: uniqueStrings(payload.selectedFlowIds),
+                selectedServiceIds,
+                serviceQuantities,
+                creditsPerVerification: Number.isFinite(Number(payload.creditsPerVerification))
+                    ? Math.max(Number(payload.creditsPerVerification), 0)
+                    : 0,
+                updatedAt: new Date().toISOString()
+            }
+        },
+        clearConfiguration(state) {
+            state.configuration = emptyConfiguration()
+        }
+    }
+}
+
+export default creditCalculatorStore
diff --git a/src/store/index.js b/src/store/index.js
index b3133679..a649a45a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@ import playgroundStore from './playgroundStore';
 import mainStore from './mainStore';
 import globalStore from './globalStore';
 import walletStore from './walletStore'
+import creditCalculatorStore from './creditCalculatorStore'
 import createPersistedState from 'vuex-persistedstate';
 Vue.use(Vuex)
 
@@ -12,8 +13,8 @@ export default new Vuex.Store({
         playgroundStore,
         mainStore,
         globalStore,
-        walletStore
+        walletStore,
+        creditCalculatorStore
     },
     plugins: [createPersistedState()]
 })
-
diff --git a/src/views/playground/KYCDashboardCredit.vue b/src/views/playground/KYCDashboardCredit.vue
index 7fb2841a..2da95150 100644
--- a/src/views/playground/KYCDashboardCredit.vue
+++ b/src/views/playground/KYCDashboardCredit.vue
@@ -50,7 +50,27 @@
                                     / {{ numberFormat(myKYCCredits.allAvailableCredits) }} Credits
                                 </span>
                             </div>
-                            <p class="approx-inline mt-1 mb-0">upto ~<strong>{{ numberFormat(approxKYCLeftBestCase) }}</strong> ID Verifications</p>
+                            <button type="button" class="calculator-callout mt-3" @click="calculatorOpen = true">
+                                <span class="calculator-callout-icon" aria-hidden="true">
+                                    <v-icon>{{ hasSavedCalculatorConfiguration ? 'mdi-chart-bar' : 'mdi-calculator-variant-outline' }}</v-icon>
+                                </span>
+                                <span class="calculator-callout-copy">
+                                    <template v-if="hasSavedCalculatorConfiguration">
+                                        <strong>{{ numberFormat(savedVerificationEstimate) }} verification flows available</strong>
+                                        <small>
+                                            Based on configurations you saved
+                                        </small>
+                                    </template>
+                                    <template v-else>
+                                        <strong>See how many verifications you can perform</strong>
+                                        <small>Select your verification flow to get an estimate.</small>
+                                    </template>
+                                </span>
+                                <span class="calculator-callout-action">
+                                    {{ hasSavedCalculatorConfiguration ? 'Edit configuration' : 'Calculate now' }}
+                                    <v-icon small>mdi-arrow-right</v-icon>
+                                </span>
+                            </button>
                         </div>
 
                         <div>
@@ -156,6 +176,11 @@
             </v-col>
         </v-row>
         </template>
+        <KycCreditCalculator
+            v-model="calculatorOpen"
+            :remaining-credits="myKYCCredits.allRemainingCredits"
+            :total-credits="myKYCCredits.allAvailableCredits"
+        />
     </b-container>
 </template>
 
@@ -165,10 +190,11 @@ import { mapActions, mapGetters } from "vuex";
 import UtilsMixin from '../../mixins/utils';
 import HfButtons from "../../components/element/HfButtons.vue";
 import AccessDenied from '../AccessDenied.vue';
+import KycCreditCalculator from '../../components/credit/KycCreditCalculator.vue';
 
 export default {
-    name: "SSIDashboardCredit",
-    components: { HfButtons, AccessDenied },
+    name: "KYCDashboardCredit",
+    components: { HfButtons, AccessDenied, KycCreditCalculator },
     mixins: [UtilsMixin],
     data() {
         return {
@@ -180,7 +206,7 @@ export default {
             accessDeniedMsg: '',
             fullPage: true,
             doughNutChartLabel: ['Used', 'Remaining'],
-            analyticsOverview: null,
+            calculatorOpen: false,
         }
     },
     computed: {
@@ -197,23 +223,21 @@ export default {
             return 'color-green';
         },
 
-        // Formula: (1/completionRate) accounts for sessions that don't complete
-        //          + dropOffRate adds waste from abandoned sessions
-        // Example: 70% completion, 24% drop-off → (1/0.7) + 0.24 = 1.67 → ~125 credits/ID
-        costPerKYC() {
-            if (!this.analyticsOverview) return 75; // no data yet: assume best case
-            const completionRate = Math.max((this.analyticsOverview.completionRate || 100), 1) / 100;
-            const dropOff = (this.analyticsOverview.dropOffRate || 0) / 100;
-            const multiplier = Math.min(Math.max((1 / completionRate) + dropOff, 1.0), 2.5);
-            return Math.ceil(75 * multiplier);
+        savedCalculatorConfiguration() {
+            return this.$store.getters['creditCalculatorStore/getConfiguration'] || {};
         },
 
-        approxKYCLeft() {
-            return Math.floor((this.myKYCCredits.allRemainingCredits || 0) / this.costPerKYC);
+        hasSavedCalculatorConfiguration() {
+            const configuration = this.savedCalculatorConfiguration;
+            return Array.isArray(configuration.selectedFlowIds)
+                && configuration.selectedFlowIds.length > 0
+                && Number(configuration.creditsPerVerification) > 0;
         },
 
-        approxKYCLeftBestCase() {
-            return Math.floor((this.myKYCCredits.allRemainingCredits || 0) / 75);
+        savedVerificationEstimate() {
+            const cost = Number(this.savedCalculatorConfiguration.creditsPerVerification || 0);
+            if (!cost) return 0;
+            return Math.floor(Math.max(this.myKYCCredits.allRemainingCredits, 0) / cost);
         },
 
         myKYCCredits() {
@@ -253,18 +277,13 @@ export default {
         this.stopTimer();
     },
     methods: {
-        ...mapActions('mainStore', ['fetchKYCCredits', 'activateCredit', 'fetchAnalyticsOverview']),
+        ...mapActions('mainStore', ['fetchKYCCredits', 'activateCredit']),
 
         async reloadData() {
             try {
                 this.isLoading = true;
                 await this.fetchKYCCredits();
 
-                // Non-blocking: fetch analytics to refine estimate
-                this.fetchAnalyticsOverview({ env: this.$store.getters['mainStore/getSelectedService']?.env || 'prod' })
-                    .then(res => { if (res?.data) this.analyticsOverview = res.data; })
-                    .catch(() => {});
-
                 this.startTimer();
                 this.renderChart();
             } catch (e) {
@@ -458,9 +477,74 @@ export default {
     /* Keeps label close to the value below it */
 }
 
-.approx-inline {
-    font-size: 0.75rem;
-    color: #9ca3af;
+.calculator-callout {
+    display: grid;
+    width: 100%;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: 0.85rem;
+    align-items: center;
+    padding: 0.75rem 0.9rem;
+    border: 1px solid #d5dde7;
+    border-radius: 0.65rem;
+    background: #f8fafc;
+    color: #495057;
+    text-align: left;
+    transition: border-color .15s ease, background-color .15s ease;
+}
+
+.calculator-callout:hover {
+    border-color: #94a3b8;
+    background: #f3f4f5;
+}
+
+.calculator-callout:focus-visible {
+    outline: 3px solid rgba(108, 117, 125, .2);
+    outline-offset: 2px;
+}
+
+.calculator-callout-icon {
+    display: inline-flex;
+    width: 2.5rem;
+    height: 2.5rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: #eceeef;
+}
+
+.calculator-callout-icon .v-icon,
+.calculator-callout-action,
+.calculator-callout-action .v-icon {
+    color: #6c757d;
+}
+
+.calculator-callout-copy {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+}
+
+.calculator-callout-copy strong {
+    color: #253454;
+    font-size: 0.86rem;
+}
+
+.calculator-callout-copy small {
+    margin-top: 0.1rem;
+    color: #64748b;
+    font-size: 0.76rem;
+}
+
+.calculator-callout-action {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.7rem 0.85rem;
+    border-radius: 0.55rem;
+    background: #e4e7e9;
+    font-size: 0.78rem;
+    font-weight: 700;
+    white-space: nowrap;
 }
 
 /* Ensure the button doesn't have extra margin pushing it away from the edge */
@@ -490,4 +574,27 @@ export default {
     vertical-align: middle;
 }
 
-</style>
\ No newline at end of file
+@media (max-width: 767.98px) {
+    .py-3 {
+        width: 100% !important;
+    }
+
+    .calculator-callout {
+        grid-template-columns: auto minmax(0, 1fr);
+    }
+
+    .calculator-callout-action {
+        grid-column: 2;
+        justify-self: start;
+    }
+
+    .usage-table-wrapper {
+        overflow-x: auto;
+    }
+
+    .usage-table {
+        min-width: 760px;
+    }
+}
+
+</style>
diff --git a/tests/unit/KycCreditCalculator.spec.js b/tests/unit/KycCreditCalculator.spec.js
new file mode 100644
index 00000000..8c64ec77
--- /dev/null
+++ b/tests/unit/KycCreditCalculator.spec.js
@@ -0,0 +1,216 @@
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import KycCreditCalculator from '@/components/credit/KycCreditCalculator.vue'
+
+const mountCalculator = (options = {}) => shallowMount(KycCreditCalculator, {
+  propsData: {
+    remainingCredits: 8779,
+    totalCredits: 10100
+  },
+  ...options
+})
+
+describe('KycCreditCalculator.vue', () => {
+  it('selects the India defaults without making either service mandatory', () => {
+    const wrapper = mountCalculator()
+
+    wrapper.vm.updateSelection({
+      selectedFlowIds: ['india'],
+      selectedServiceIds: ['aadhaar-face-match', 'aadhaar-verification']
+    })
+
+    expect(wrapper.vm.selectedFlowIds).to.deep.equal(['india'])
+    expect(wrapper.vm.selectedServiceIds).to.include.members([
+      'aadhaar-face-match',
+      'aadhaar-verification'
+    ])
+    expect(wrapper.vm.flows[0].services.every(service => !service.required)).to.equal(true)
+  })
+
+  it('selects the Global defaults but leaves Age Verification opt-in', () => {
+    const wrapper = mountCalculator()
+
+    wrapper.vm.updateSelection({
+      selectedFlowIds: ['global'],
+      selectedServiceIds: ['verification-session', 'passive-liveness', 'document-verification', 'consent-capture']
+    })
+
+    expect(wrapper.vm.selectedServiceIds).to.include.members([
+      'verification-session',
+      'passive-liveness',
+      'document-verification',
+      'consent-capture'
+    ])
+    expect(wrapper.vm.serviceCost(wrapper.vm.flows[1].services[0])).to.equal(5)
+    expect(wrapper.vm.serviceCost(wrapper.vm.flows[1].services[2])).to.equal(40)
+    expect(wrapper.vm.selectedServiceIds).not.to.include('age-verification')
+  })
+
+  it('selects all Business services and adds the dependent Global defaults for UBO', () => {
+    const wrapper = mountCalculator()
+
+    wrapper.vm.updateSelection({
+      selectedFlowIds: ['global', 'business'],
+      selectedServiceIds: [
+        'verification-session',
+        'passive-liveness',
+        'document-verification',
+        'consent-capture',
+        'business-data-capture',
+        'ubo-verification',
+        'aml-screening'
+      ],
+      serviceQuantities: { 'ubo-verification': 1 }
+    })
+
+    expect(wrapper.vm.selectedFlowIds).to.include.members(['business', 'global'])
+    expect(wrapper.vm.selectedServiceIds).to.include.members([
+      'business-data-capture',
+      'ubo-verification',
+      'aml-screening',
+      'verification-session',
+      'passive-liveness',
+      'document-verification',
+      'consent-capture'
+    ])
+    expect(wrapper.vm.flows[2].services.find(service => service.id === 'ubo-verification').requiresFlowIds).to.include('global')
+    expect(wrapper.vm.creditsPerVerification).to.equal(266)
+    expect(wrapper.vm.estimatedVerifications).to.equal(33)
+  })
+
+  it('multiplies UBO and selected Global services by the UBO quantity', () => {
+    const wrapper = mountCalculator()
+
+    wrapper.vm.updateSelection({
+      selectedFlowIds: ['global', 'business'],
+      selectedServiceIds: [
+        'verification-session',
+        'passive-liveness',
+        'document-verification',
+        'consent-capture',
+        'business-data-capture',
+        'ubo-verification',
+        'aml-screening'
+      ],
+      serviceQuantities: { 'ubo-verification': 3 }
+    })
+
+    expect(wrapper.vm.creditsPerVerification).to.equal(398)
+    expect(wrapper.vm.estimatedVerifications).to.equal(22)
+    expect(wrapper.vm.configurationSummary.title).to.equal('Up to 22 Business verifications')
+    expect(wrapper.vm.configurationSummary.detail).to.equal('Each business verification includes 3 UBO verifications.')
+  })
+
+  it('summarizes a standalone identity flow using its selected services', () => {
+    const wrapper = mountCalculator()
+    wrapper.vm.updateSelection({
+      selectedFlowIds: ['india'],
+      selectedServiceIds: ['aadhaar-verification']
+    })
+
+    expect(wrapper.vm.configurationSummary.title).to.include('India Identity verifications')
+    expect(wrapper.vm.configurationSummary.detail).to.equal('1 selected service per verification.')
+  })
+
+  it('prevents the next UBO quantity from exceeding available credits', () => {
+    const wrapper = mountCalculator({
+      propsData: { remainingCredits: 397, totalCredits: 10100 }
+    })
+    wrapper.vm.updateSelection({
+      selectedFlowIds: ['global', 'business'],
+      selectedServiceIds: [
+        'verification-session',
+        'passive-liveness',
+        'document-verification',
+        'consent-capture',
+        'business-data-capture',
+        'ubo-verification',
+        'aml-screening'
+      ],
+      serviceQuantities: { 'ubo-verification': 2 }
+    })
+    const ubo = wrapper.vm.flows[2].services.find(service => service.id === 'ubo-verification')
+
+    expect(wrapper.vm.creditsPerVerification).to.equal(332)
+    expect(wrapper.vm.canIncreaseServiceQuantity(ubo, 3)).to.equal(false)
+  })
+
+  it('keeps every Business service optional', () => {
+    const wrapper = mountCalculator()
+    const businessServices = wrapper.vm.flows[2].services
+
+    expect(businessServices.every(service => !service.required)).to.equal(true)
+  })
+
+  it('saves the selected configuration to the calculator store', () => {
+    const commits = []
+    const wrapper = mountCalculator({
+      mocks: {
+        $store: {
+          getters: { 'creditCalculatorStore/getConfiguration': null },
+          commit: (type, payload) => commits.push({ type, payload })
+        }
+      }
+    })
+    wrapper.vm.updateSelection({
+      selectedFlowIds: ['india'],
+      selectedServiceIds: ['aadhaar-face-match', 'aadhaar-verification']
+    })
+
+    wrapper.vm.saveConfiguration()
+
+    expect(commits).to.have.length(1)
+    expect(commits[0].type).to.equal('creditCalculatorStore/saveConfiguration')
+    expect(commits[0].payload.selectedFlowIds).to.deep.equal(['india'])
+    expect(commits[0].payload.selectedServiceIds).to.include.members([
+      'aadhaar-face-match',
+      'aadhaar-verification'
+    ])
+    expect(commits[0].payload.serviceQuantities).to.deep.equal({})
+    expect(commits[0].payload.creditsPerVerification).to.equal(wrapper.vm.creditsPerVerification)
+  })
+
+  it('restores an empty Business selection without adding mandatory services', () => {
+    const wrapper = mountCalculator({
+      mocks: {
+        $store: {
+          getters: {
+            'creditCalculatorStore/getConfiguration': {
+              selectedFlowIds: ['business'],
+              selectedServiceIds: []
+            }
+          },
+          commit: () => {}
+        }
+      }
+    })
+
+    wrapper.vm.loadSavedConfiguration()
+
+    expect(wrapper.vm.selectedFlowIds).to.deep.equal(['business'])
+    expect(wrapper.vm.selectedServiceIds).to.deep.equal([])
+  })
+
+  it('restores Global only when the saved UBO service needs it', () => {
+    const wrapper = mountCalculator({
+      mocks: {
+        $store: {
+          getters: {
+            'creditCalculatorStore/getConfiguration': {
+              selectedFlowIds: ['business'],
+              selectedServiceIds: ['ubo-verification'],
+              serviceQuantities: { 'ubo-verification': 4 }
+            }
+          },
+          commit: () => {}
+        }
+      }
+    })
+
+    wrapper.vm.loadSavedConfiguration()
+
+    expect(wrapper.vm.selectedFlowIds).to.deep.equal(['global', 'business'])
+    expect(wrapper.vm.selectedServiceIds).to.deep.equal(['ubo-verification'])
+    expect(wrapper.vm.serviceQuantities).to.deep.equal({ 'ubo-verification': 4 })
+  })
+})
diff --git a/tests/unit/VerificationFlowConfigurator.spec.js b/tests/unit/VerificationFlowConfigurator.spec.js
new file mode 100644
index 00000000..7b23d7cb
--- /dev/null
+++ b/tests/unit/VerificationFlowConfigurator.spec.js
@@ -0,0 +1,131 @@
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import VerificationFlowConfigurator from '@/components/credit/VerificationFlowConfigurator.vue'
+
+const flows = [
+  {
+    id: 'global',
+    title: 'Global',
+    description: 'Global flow',
+    icon: 'mdi-earth',
+    services: [
+      { id: 'session', title: 'Session', description: 'Session', icon: 'mdi-cellphone', required: true },
+      { id: 'document', title: 'Document', description: 'Document', icon: 'mdi-file', defaultSelected: true }
+    ]
+  },
+  {
+    id: 'business',
+    title: 'Business',
+    description: 'Business flow',
+    icon: 'mdi-domain',
+    services: [
+      {
+        id: 'ubo',
+        title: 'UBO',
+        description: 'UBO',
+        icon: 'mdi-account-group',
+        required: true,
+        quantitySelectable: true,
+        defaultQuantity: 1,
+        requiresFlowIds: ['global']
+      }
+    ]
+  }
+]
+
+const mountConfigurator = (value = { selectedFlowIds: [], selectedServiceIds: [] }) => shallowMount(
+  VerificationFlowConfigurator,
+  { propsData: { flows, value } }
+)
+
+describe('VerificationFlowConfigurator.vue', () => {
+  it('emits defaults and dependent flows from configuration data', () => {
+    const wrapper = mountConfigurator()
+
+    wrapper.vm.selectFlow('business')
+
+    const selection = wrapper.emitted('input')[0][0]
+    expect(selection.selectedFlowIds).to.include.members(['business', 'global'])
+    expect(selection.selectedServiceIds).to.include.members(['ubo', 'session', 'document'])
+    expect(selection.serviceQuantities).to.deep.equal({ ubo: 1 })
+  })
+
+  it('increments a selected service quantity and does not decrement below its minimum', () => {
+    const value = {
+      selectedFlowIds: ['global', 'business'],
+      selectedServiceIds: ['session', 'document', 'ubo'],
+      serviceQuantities: { ubo: 1 }
+    }
+    const wrapper = mountConfigurator(value)
+    const ubo = flows[1].services[0]
+
+    wrapper.vm.changeServiceQuantity(ubo, 1)
+    expect(wrapper.emitted('input')[0][0].serviceQuantities).to.deep.equal({ ubo: 2 })
+
+    wrapper.vm.changeServiceQuantity(ubo, -1)
+    expect(wrapper.emitted('input')[1][0].serviceQuantities).to.deep.equal({ ubo: 1 })
+  })
+
+  it('blocks an increment when the configured quantity limit rejects it', () => {
+    const value = {
+      selectedFlowIds: ['global', 'business'],
+      selectedServiceIds: ['session', 'document', 'ubo'],
+      serviceQuantities: { ubo: 2 }
+    }
+    const wrapper = shallowMount(VerificationFlowConfigurator, {
+      propsData: {
+        flows,
+        value,
+        canIncreaseServiceQuantity: (service, quantity) => service.id !== 'ubo' || quantity <= 2
+      }
+    })
+
+    wrapper.vm.changeServiceQuantity(flows[1].services[0], 1)
+    expect(wrapper.emitted('input')).to.equal(undefined)
+  })
+
+  it('accepts a typed quantity and caps it at the highest allowed value', () => {
+    const value = {
+      selectedFlowIds: ['global', 'business'],
+      selectedServiceIds: ['session', 'document', 'ubo'],
+      serviceQuantities: { ubo: 1 }
+    }
+    const wrapper = shallowMount(VerificationFlowConfigurator, {
+      propsData: {
+        flows,
+        value,
+        canIncreaseServiceQuantity: (service, quantity) => service.id !== 'ubo' || quantity <= 3
+      }
+    })
+
+    wrapper.vm.setServiceQuantity(flows[1].services[0], '20')
+    expect(wrapper.emitted('input')[0][0].serviceQuantities).to.deep.equal({ ubo: 3 })
+  })
+
+  it('allows optional services to toggle but rejects required services', () => {
+    const wrapper = mountConfigurator({
+      selectedFlowIds: ['global'],
+      selectedServiceIds: ['session', 'document']
+    })
+
+    wrapper.vm.toggleService(flows[0].services[1])
+    expect(wrapper.emitted('input')[0][0].selectedServiceIds).not.to.include('document')
+
+    wrapper.vm.toggleService(flows[0].services[0])
+    expect(wrapper.emitted('input')).to.have.length(1)
+  })
+
+  it('supports pricing reuse without rendering service costs', () => {
+    const wrapper = shallowMount(VerificationFlowConfigurator, {
+      propsData: {
+        flows,
+        value: { selectedFlowIds: ['global'], selectedServiceIds: ['session'] },
+        showServiceCosts: false,
+        flowHeading: 'Configure your plan'
+      }
+    })
+
+    expect(wrapper.text()).to.include('Configure your plan')
+    expect(wrapper.find('.credit-pill').exists()).to.equal(false)
+  })
+})
diff --git a/tests/unit/creditCalculatorStore.spec.js b/tests/unit/creditCalculatorStore.spec.js
new file mode 100644
index 00000000..9c17a5ac
--- /dev/null
+++ b/tests/unit/creditCalculatorStore.spec.js
@@ -0,0 +1,23 @@
+import { expect } from 'chai'
+import creditCalculatorStore from '@/store/creditCalculatorStore'
+
+describe('creditCalculatorStore', () => {
+  it('stores isolated copies of the calculator selection', () => {
+    const state = { configuration: {} }
+    const payload = {
+      selectedFlowIds: ['india', 'india'],
+      selectedServiceIds: ['aadhaar-verification'],
+      serviceQuantities: { 'aadhaar-verification': 2, ignored: 5 },
+      creditsPerVerification: 12
+    }
+
+    creditCalculatorStore.mutations.saveConfiguration(state, payload)
+    payload.selectedFlowIds.push('global')
+
+    expect(state.configuration.selectedFlowIds).to.deep.equal(['india'])
+    expect(state.configuration.selectedServiceIds).to.deep.equal(['aadhaar-verification'])
+    expect(state.configuration.serviceQuantities).to.deep.equal({ 'aadhaar-verification': 2 })
+    expect(state.configuration.creditsPerVerification).to.equal(12)
+    expect(state.configuration.updatedAt).to.be.a('string')
+  })
+})