From 37ac15f42c856d489ac52a335eae767c2c229dab Mon Sep 17 00:00:00 2001
From: Nitesh Yadav <ny313863@gmail.com>
Date: Tue, 19 May 2026 14:21:52 +0530
Subject: [PATCH] fixed current, rd, fd account preview page styling

---
 angular.json                                  |    4 +-
 .../search-journal-entry.component.html       |   17 +-
 .../search-journal-entry.component.scss       |    4 +-
 src/app/core/shell/shell.component.scss       |    1 +
 ...current-product-general-tab.component.html | 1231 ++++++++-------
 ...current-product-general-tab.component.scss |  441 +++++-
 .../current-product-general-tab.component.ts  |    1 +
 .../fixed-deposit-general-tab.component.html  | 1058 +++++++------
 .../fixed-deposit-general-tab.component.scss  |  418 ++++-
 .../fixed-deposit-general-tab.component.ts    |   26 +
 .../general-tab/general-tab.component.html    |    1 -
 ...curring-deposit-general-tab.component.html | 1371 +++++++++--------
 ...curring-deposit-general-tab.component.scss |  538 ++++++-
 ...recurring-deposit-general-tab.component.ts |   21 +-
 14 files changed, 3329 insertions(+), 1803 deletions(-)

diff --git a/angular.json b/angular.json
index b4daea670..1fe5293cf 100644
--- a/angular.json
+++ b/angular.json
@@ -69,8 +69,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "12mb",
-                  "maximumError": "12mb"
+                  "maximumWarning": "13mb",
+                  "maximumError": "14mb"
                 },
                 {
                   "type": "anyComponentStyle",
diff --git a/src/app/accounting/search-journal-entry/search-journal-entry.component.html b/src/app/accounting/search-journal-entry/search-journal-entry.component.html
index e2a190b5a..c7ad57bac 100644
--- a/src/app/accounting/search-journal-entry/search-journal-entry.component.html
+++ b/src/app/accounting/search-journal-entry/search-journal-entry.component.html
@@ -702,17 +702,16 @@
         [class.gl-data-row--cr]="row.entryType?.value === 'CREDIT'"
         class="gl-data-row"
       ></mat-row>
-      <tr class="mat-row" *matNoDataRow>
-        <td class="mat-cell" [attr.colspan]="displayedColumns.length">
-          <div class="gl-empty">
-            <div class="gl-empty__icon"><fa-icon icon="search"></fa-icon></div>
-            <div class="gl-empty__title">No entries found</div>
-            <div class="gl-empty__sub">Try adjusting your filters or date range</div>
-          </div>
-        </td>
-      </tr>
     </mat-table>
 
+    @if (totalEntries === 0) {
+      <div class="gl-empty">
+        <div class="gl-empty__icon"><fa-icon icon="search"></fa-icon></div>
+        <div class="gl-empty__title">No entries found</div>
+        <div class="gl-empty__sub">Try adjusting your filters or date range</div>
+      </div>
+    }
+
     <div class="gl-pager-wrap">
       <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
     </div>
diff --git a/src/app/accounting/search-journal-entry/search-journal-entry.component.scss b/src/app/accounting/search-journal-entry/search-journal-entry.component.scss
index 8f7ad4359..9a243ba18 100644
--- a/src/app/accounting/search-journal-entry/search-journal-entry.component.scss
+++ b/src/app/accounting/search-journal-entry/search-journal-entry.component.scss
@@ -1444,9 +1444,11 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: 300px;
+  min-height: 340px;
   width: 100%;
   text-align: center;
+  padding: 0 16px;
+  box-sizing: border-box;
 
   &__icon {
     font-size: 2.5rem;
diff --git a/src/app/core/shell/shell.component.scss b/src/app/core/shell/shell.component.scss
index 926d3abfa..3e6eb1510 100644
--- a/src/app/core/shell/shell.component.scss
+++ b/src/app/core/shell/shell.component.scss
@@ -98,6 +98,7 @@ $color: #e2e4ec;
     max-width: 100%;
     overflow-x: hidden;
     box-sizing: border-box;
+    padding: 16px 28px;
   }
 }
 
diff --git a/src/app/products/current-products/view-current-product/current-product-general-tab/current-product-general-tab.component.html b/src/app/products/current-products/view-current-product/current-product-general-tab/current-product-general-tab.component.html
index b1159bcaf..c2904dd05 100644
--- a/src/app/products/current-products/view-current-product/current-product-general-tab/current-product-general-tab.component.html
+++ b/src/app/products/current-products/view-current-product/current-product-general-tab/current-product-general-tab.component.html
@@ -6,448 +6,560 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<div class="pv-root">
+<div class="vsp-root">
   <!-- HERO -->
-  <div class="pv-hero">
-    <div class="pv-hero-left">
-      <div class="pv-hero-icon"><fa-icon icon="money-bill"></fa-icon></div>
-      <div class="pv-hero-text">
-        <div class="pv-hero-eyebrow">Current-Account Product</div>
-        <h2 class="pv-hero-title">{{ currentProduct.name }}</h2>
-        <div class="pv-hero-meta">
-          <span class="pv-pill pv-pill--code">{{ currentProduct.shortName }}</span>
+  <div class="vsp-hero">
+    <div class="vsp-hero-left">
+      <div class="vsp-hero-icon"><fa-icon icon="building-columns"></fa-icon></div>
+      <div class="vsp-hero-text">
+        <div class="vsp-hero-eyebrow">Current Account Product</div>
+        <h2 class="vsp-hero-title">{{ currentProduct.name }}</h2>
+        <div class="vsp-hero-meta">
+          <span class="vsp-pill vsp-pill--code">{{ currentProduct.shortName }}</span>
           @if (currentProduct.currency?.code) {
-            <span class="pv-pill pv-pill--teal">{{ currentProduct.currency.code }}</span>
+            <span class="vsp-pill vsp-pill--teal">{{ currentProduct.currency.code }}</span>
           }
+          @if (currentProduct.accountType) {
+            <span class="vsp-pill vsp-pill--blue">{{ currentProduct.accountType }}</span>
+          }
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="!currentProduct.endDate"
+            [class.vsp-pill--amber]="currentProduct.endDate"
+          >
+            <fa-icon [icon]="currentProduct.endDate ? 'times-circle' : 'check-circle'"></fa-icon>
+            {{ currentProduct.endDate ? 'Inactive' : 'Active' }}
+          </span>
         </div>
         @if (currentProduct.description) {
-          <p class="pv-hero-desc">{{ currentProduct.description }}</p>
+          <p class="vsp-hero-desc">{{ currentProduct.description }}</p>
         }
       </div>
     </div>
-    <button class="pv-edit-btn" type="button" [routerLink]="['../edit']" *mifosxHasPermission="'UPDATE_CURRENTPRODUCT'">
-      <fa-icon icon="edit"></fa-icon><span>{{ 'labels.buttons.Edit' | translate }}</span>
+    <button
+      type="button"
+      class="vsp-edit-btn"
+      [routerLink]="['../edit']"
+      *mifosxHasPermission="'UPDATE_CURRENTPRODUCT'"
+    >
+      <fa-icon icon="edit"></fa-icon>
+      <span>{{ 'labels.buttons.Edit' | translate }}</span>
     </button>
   </div>
 
-  <div class="pv-legacy">
-    <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Details' | translate }}</h3>
-
-    <mat-divider class="flex-100"></mat-divider>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Short Name' | translate }}:</span>
-      <span class="flex-60">{{ currentProduct.shortName }}</span>
+  <!-- DETAILS -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--blue"><fa-icon icon="info-circle"></fa-icon></div>
+      <h3>{{ 'labels.inputs.Details' | translate }}</h3>
     </div>
-
-    @if (currentProduct.description) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
-        <span class="flex-60">{{ currentProduct.description }}</span>
+    <div class="vsp-grid">
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Short Name' | translate }}</span>
+        <span class="vsp-v"
+          ><strong>{{ currentProduct.shortName }}</strong></span
+        >
       </div>
-    }
-
-    @if (
-      currentProduct.accountType ||
-      currentProduct.customerSegment ||
-      currentProduct.glAccountId ||
-      currentProduct.effectiveDate ||
-      currentProduct.effectiveTo ||
-      currentProduct.endDate ||
-      currentProduct.introducerRequired !== undefined ||
-      currentProduct.shareLinkingEnabled !== undefined
-    ) {
-      <h3 class="mat-h3 flex-100">Product Classification</h3>
-
-      <mat-divider class="flex-100"></mat-divider>
-
-      @if (currentProduct.accountType) {
-        <div class="flex-100 layout-row">
-          <span class="flex-40">Account Type:</span>
-          <span class="flex-60">{{ currentProduct.accountType }}</span>
+      @if (currentProduct.description) {
+        <div class="vsp-kv vsp-kv--span">
+          <span class="vsp-k">{{ 'labels.inputs.Description' | translate }}</span>
+          <span class="vsp-v">{{ currentProduct.description }}</span>
         </div>
       }
+    </div>
+  </section>
 
-      @if (currentProduct.customerSegment) {
-        <div class="flex-100 layout-row">
-          <span class="flex-40">Customer Segment:</span>
-          <span class="flex-60">{{ currentProduct.customerSegment }}</span>
+  <!-- PRODUCT CLASSIFICATION -->
+  @if (
+    currentProduct.accountType ||
+    currentProduct.customerSegment ||
+    currentProduct.glAccountId ||
+    currentProduct.effectiveDate ||
+    currentProduct.effectiveTo ||
+    currentProduct.endDate ||
+    currentProduct.introducerRequired !== undefined ||
+    currentProduct.shareLinkingEnabled !== undefined
+  ) {
+    <section class="vsp-section">
+      <div class="vsp-section-h">
+        <div class="vsp-section-ic vsp-section-ic--purple"><fa-icon icon="layer-group"></fa-icon></div>
+        <h3>Product Classification</h3>
+      </div>
+      <div class="vsp-grid">
+        @if (currentProduct.accountType) {
+          <div class="vsp-kv">
+            <span class="vsp-k">Account Type</span>
+            <span class="vsp-v">{{ currentProduct.accountType }}</span>
+          </div>
+        }
+        @if (currentProduct.customerSegment) {
+          <div class="vsp-kv">
+            <span class="vsp-k">Customer Segment</span>
+            <span class="vsp-v">{{ currentProduct.customerSegment }}</span>
+          </div>
+        }
+        @if (currentProduct.glAccountId) {
+          <div class="vsp-kv">
+            <span class="vsp-k">GL Account (Liability)</span>
+            <span class="vsp-v">{{ currentProduct.glAccountName || currentProduct.glAccountId }}</span>
+          </div>
+        }
+        @if (currentProduct.effectiveDate) {
+          <div class="vsp-kv">
+            <span class="vsp-k">Effective Date</span>
+            <span class="vsp-v">{{ currentProduct.effectiveDate | dateFormat }}</span>
+          </div>
+        }
+        @if (currentProduct.effectiveTo) {
+          <div class="vsp-kv">
+            <span class="vsp-k">Effective To</span>
+            <span class="vsp-v">{{ currentProduct.effectiveTo | dateFormat }}</span>
+          </div>
+        }
+        @if (currentProduct.endDate) {
+          <div class="vsp-kv">
+            <span class="vsp-k">End Date</span>
+            <span class="vsp-v">{{ currentProduct.endDate | dateFormat }}</span>
+          </div>
+        }
+        @if (currentProduct.introducerRequired !== undefined) {
+          <div class="vsp-kv">
+            <span class="vsp-k">Introducer Required</span>
+            <span class="vsp-v">
+              <span
+                class="vsp-pill"
+                [class.vsp-pill--green]="
+                  currentProduct.introducerRequired === true || currentProduct.introducerRequired === 'Yes'
+                "
+                [class.vsp-pill--gray]="
+                  !(currentProduct.introducerRequired === true || currentProduct.introducerRequired === 'Yes')
+                "
+              >
+                {{
+                  currentProduct.introducerRequired === true || currentProduct.introducerRequired === 'Yes'
+                    ? 'Yes'
+                    : 'No'
+                }}
+              </span>
+            </span>
+          </div>
+        }
+        @if (currentProduct.shareLinkingEnabled !== undefined) {
+          <div class="vsp-kv">
+            <span class="vsp-k">Share Linking Enabled</span>
+            <span class="vsp-v">
+              <span
+                class="vsp-pill"
+                [class.vsp-pill--green]="currentProduct.shareLinkingEnabled"
+                [class.vsp-pill--gray]="!currentProduct.shareLinkingEnabled"
+              >
+                {{ currentProduct.shareLinkingEnabled | yesNo }}
+              </span>
+            </span>
+          </div>
+        }
+      </div>
+    </section>
+  }
+
+  <!-- CURRENCY -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--teal"><fa-icon icon="coins"></fa-icon></div>
+      <h3>{{ 'labels.inputs.Currency' | translate }}</h3>
+    </div>
+    <div class="vsp-grid">
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Currency' | translate }}</span>
+        <span class="vsp-v"
+          ><strong>{{ currentProduct.currency.name }}</strong></span
+        >
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Decimal Places' | translate }}</span>
+        <span class="vsp-v">{{ currentProduct.currency.decimalPlaces }}</span>
+      </div>
+      @if (currentProduct.currency.inMultiplesOf !== undefined && currentProduct.currency.inMultiplesOf !== null) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Currency in multiples of' | translate }}</span>
+          <span class="vsp-v">{{ currentProduct.currency.inMultiplesOf }}</span>
         </div>
       }
-
-      @if (currentProduct.glAccountId) {
-        <div class="flex-100 layout-row">
-          <span class="flex-40">GL Account (Liability):</span>
-          <span class="flex-60">{{ currentProduct.glAccountName || currentProduct.glAccountId }}</span>
+      @if (currentProduct.dormancyAlert !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Dormancy Alert</span>
+          <span class="vsp-v">{{ currentProduct.dormancyAlert | yesNo }}</span>
         </div>
       }
-
-      @if (currentProduct.effectiveDate) {
-        <div class="flex-100 layout-row">
-          <span class="flex-40">Effective Date:</span>
-          <span class="flex-60">{{ currentProduct.effectiveDate | dateFormat }}</span>
+      @if (currentProduct.nominationFacility !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Nomination Facility</span>
+          <span class="vsp-v">{{ currentProduct.nominationFacility | yesNo }}</span>
         </div>
       }
-
-      @if (currentProduct.effectiveTo) {
-        <div class="flex-100 layout-row">
-          <span class="flex-40">Effective To:</span>
-          <span class="flex-60">{{ currentProduct.effectiveTo | dateFormat }}</span>
+      @if (currentProduct.balanceSwapOption !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Balance Swap Option</span>
+          <span class="vsp-v">{{ currentProduct.balanceSwapOption | yesNo }}</span>
         </div>
       }
-
-      @if (currentProduct.endDate) {
-        <div class="flex-100 layout-row">
-          <span class="flex-40">End Date:</span>
-          <span class="flex-60">{{ currentProduct.endDate | dateFormat }}</span>
+      @if (currentProduct.msme !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">MSME</span>
+          <span class="vsp-v">{{ currentProduct.msme | yesNo }}</span>
         </div>
       }
+      @if (currentProduct.autoDebitFacility !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Auto Debit Facility</span>
+          <span class="vsp-v">{{ currentProduct.autoDebitFacility | yesNo }}</span>
+        </div>
+      }
+    </div>
+  </section>
 
-      @if (currentProduct.introducerRequired !== undefined) {
-        <div class="flex-100 layout-row">
-          <span class="flex-40">Introducer Required:</span>
-          <span class="flex-60">{{
-            currentProduct.introducerRequired === true || currentProduct.introducerRequired === 'Yes' ? 'Yes' : 'No'
+  <!-- INTEREST ON OD -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--amber"><fa-icon icon="percentage"></fa-icon></div>
+      <h3>Interest On OD</h3>
+    </div>
+    <div class="vsp-grid">
+      @if (currentProduct.interestPostingPeriodType?.value) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Interest Posting Period' | translate }}</span>
+          <span class="vsp-v">{{ currentProduct.interestPostingPeriodType.value | translateKey: 'catalogs' }}</span>
+        </div>
+      }
+      @if (currentProduct.interestCalculateSelector) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Interest Calculate</span>
+          <span class="vsp-v">{{ currentProduct.interestCalculateSelector }}</span>
+        </div>
+      }
+      @if (currentProduct.averagePeriod) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Average Period</span>
+          <span class="vsp-v">{{ currentProduct.averagePeriod }}</span>
+        </div>
+      }
+      @if (currentProduct.autoPost !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Auto Post</span>
+          <span class="vsp-v">
+            <span
+              class="vsp-pill"
+              [class.vsp-pill--green]="currentProduct.autoPost"
+              [class.vsp-pill--gray]="!currentProduct.autoPost"
+            >
+              {{ currentProduct.autoPost | yesNo }}
+            </span>
+          </span>
+        </div>
+      }
+      @if (currentProduct.frequencyFixDay) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Frequency Fix Day</span>
+          <span class="vsp-v">{{ currentProduct.frequencyFixDay }}</span>
+        </div>
+      }
+      @if (currentProduct.lastInterestDate) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Last Interest Date</span>
+          <span class="vsp-v">{{ currentProduct.lastInterestDate | dateFormat }}</span>
+        </div>
+      }
+    </div>
+  </section>
+
+  <!-- SETTINGS -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--indigo"><fa-icon icon="sliders-h"></fa-icon></div>
+      <h3>{{ 'labels.inputs.Settings' | translate }}</h3>
+    </div>
+    <div class="vsp-grid">
+      @if (currentProduct.minRequiredOpeningBalance) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Minimum Opening Balance' | translate }}</span>
+          <span class="vsp-v">{{ currentProduct.minRequiredOpeningBalance | formatNumber }}</span>
+        </div>
+      }
+      @if (currentProduct.lockinPeriodFrequency) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Lock-in Period' | translate }}</span>
+          <span class="vsp-v">{{
+            currentProduct.lockinPeriodFrequency +
+              ' ' +
+              (currentProduct.lockinPeriodFrequencyType?.value || currentProduct.lockinPeriodFrequencyType?.code || '')
           }}</span>
         </div>
       }
-
-      @if (currentProduct.shareLinkingEnabled !== undefined) {
-        <div class="flex-100 layout-row">
-          <span class="flex-40">Share Linking Enabled:</span>
-          <span class="flex-60">{{ currentProduct.shareLinkingEnabled | yesNo }}</span>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="currentProduct.withdrawalFeeForTransfers"
+            [class.vsp-pill--gray]="!currentProduct.withdrawalFeeForTransfers"
+          >
+            {{ currentProduct.withdrawalFeeForTransfers | yesNo }}
+          </span>
+        </span>
+      </div>
+      @if (currentProduct.balanceFrequency) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Balance Frequency</span>
+          <span class="vsp-v">{{ currentProduct.balanceFrequency }}</span>
         </div>
       }
-    }
-
-    <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Currency' | translate }}</h3>
-
-    <mat-divider class="flex-100"></mat-divider>
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}:</span>
-      <span class="flex-60">{{ currentProduct.currency.name }}</span>
-    </div>
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
-      <span class="flex-60">{{ currentProduct.currency.decimalPlaces }}</span>
-    </div>
-
-    @if (currentProduct.currency.inMultiplesOf !== undefined && currentProduct.currency.inMultiplesOf !== null) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
-        <span class="flex-60">{{ currentProduct.currency.inMultiplesOf }}</span>
+      <div class="vsp-kv">
+        <span class="vsp-k">Enable Lock-in Period</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="currentProduct.enableLockinPeriod"
+            [class.vsp-pill--gray]="!currentProduct.enableLockinPeriod"
+          >
+            {{ currentProduct.enableLockinPeriod | yesNo }}
+          </span>
+        </span>
       </div>
-    }
-
-    @if (currentProduct.dormancyAlert !== undefined) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Dormancy Alert:</span>
-        <span class="flex-60">{{ currentProduct.dormancyAlert | yesNo }}</span>
-      </div>
-    }
-
-    @if (currentProduct.nominationFacility !== undefined) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Nomination Facility:</span>
-        <span class="flex-60">{{ currentProduct.nominationFacility | yesNo }}</span>
-      </div>
-    }
-
-    @if (currentProduct.balanceSwapOption !== undefined) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Balance Swap Option:</span>
-        <span class="flex-60">{{ currentProduct.balanceSwapOption | yesNo }}</span>
-      </div>
-    }
-
-    @if (currentProduct.msme !== undefined) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">MSME:</span>
-        <span class="flex-60">{{ currentProduct.msme | yesNo }}</span>
-      </div>
-    }
-
-    @if (currentProduct.autoDebitFacility !== undefined) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Auto Debit Facility:</span>
-        <span class="flex-60">{{ currentProduct.autoDebitFacility | yesNo }}</span>
-      </div>
-    }
-
-    <h3 class="mat-h3 flex-100">Interest On OD</h3>
-
-    <mat-divider class="flex-100"></mat-divider>
-
-    @if (currentProduct.interestPostingPeriodType?.value) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
-        <span class="flex-60">{{ currentProduct.interestPostingPeriodType.value | translateKey: 'catalogs' }}</span>
-      </div>
-    }
-
-    @if (currentProduct.interestCalculateSelector) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Interest Calculate:</span>
-        <span class="flex-60">{{ currentProduct.interestCalculateSelector }}</span>
-      </div>
-    }
-
-    @if (currentProduct.averagePeriod) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Average Period:</span>
-        <span class="flex-60">{{ currentProduct.averagePeriod }}</span>
-      </div>
-    }
-
-    @if (currentProduct.autoPost !== undefined) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Auto Post:</span>
-        <span class="flex-60">{{ currentProduct.autoPost | yesNo }}</span>
-      </div>
-    }
-
-    @if (currentProduct.frequencyFixDay) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Frequency Fix Day:</span>
-        <span class="flex-60">{{ currentProduct.frequencyFixDay }}</span>
-      </div>
-    }
-
-    @if (currentProduct.lastInterestDate) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Last Interest Date:</span>
-        <span class="flex-60">{{ currentProduct.lastInterestDate | dateFormat }}</span>
-      </div>
-    }
-
-    <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Settings' | translate }}</h3>
-
-    <mat-divider class="flex-100"></mat-divider>
-
-    @if (currentProduct.minRequiredOpeningBalance) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Minimum Opening Balance' | translate }}:</span>
-        <span class="flex-60">{{ currentProduct.minRequiredOpeningBalance | formatNumber }}</span>
-      </div>
-    }
-
-    @if (currentProduct.lockinPeriodFrequency) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
-        <span class="flex-60">{{
-          currentProduct.lockinPeriodFrequency +
-            ' ' +
-            (currentProduct.lockinPeriodFrequencyType?.value || currentProduct.lockinPeriodFrequencyType?.code || '')
-        }}</span>
-      </div>
-    }
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}:</span>
-      <span class="flex-60">{{ currentProduct.withdrawalFeeForTransfers | yesNo }}</span>
-    </div>
-
-    @if (currentProduct.balanceFrequency) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Balance Frequency:</span>
-        <span class="flex-60">{{ currentProduct.balanceFrequency }}</span>
-      </div>
-    }
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Enable Lock-in Period:</span>
-      <span class="flex-60">{{ currentProduct.enableLockinPeriod | yesNo }}</span>
-    </div>
-
-    @if (currentProduct.minBalanceForInterestCalculation) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}:</span>
-        <span class="flex-60">{{ currentProduct.minBalanceForInterestCalculation | formatNumber }}</span>
-      </div>
-    }
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}:</span>
-      <span class="flex-60">{{ currentProduct.enforceMinRequiredBalance | yesNo }}</span>
-    </div>
-
-    @if (currentProduct.minRequiredBalance) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Minimum Balance' | translate }}:</span>
-        <span class="flex-60">{{ currentProduct.minRequiredBalance | formatNumber }}</span>
-      </div>
-    }
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
-      <span class="flex-60">{{ currentProduct.withHoldTax | yesNo }}</span>
-    </div>
-
-    @if (currentProduct.withHoldTax) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Tax Group' | translate }}:</span>
-        <span class="flex-60">{{ currentProduct.taxGroup.name }}</span>
-      </div>
-    }
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}:</span>
-      <span class="flex-60">{{ currentProduct.allowOverdraft | yesNo }}</span>
-    </div>
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Account Closed Zero Balance in Day Closing:</span>
-      <span class="flex-60">{{ currentProduct.accountClosedZeroBalanceInDayClosing | yesNo }}</span>
-    </div>
-
-    @if (currentProduct.minOverdraftForInterestCalculation) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40"
-          >{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}:</span
-        >
-        <span class="flex-60">{{ currentProduct.minOverdraftForInterestCalculation | formatNumber }}</span>
-      </div>
-    }
-
-    @if (currentProduct.nominalAnnualInterestRateOverdraft) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}:</span>
-        <span class="flex-60">{{ currentProduct.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
-      </div>
-    }
-
-    @if (currentProduct.overdraftLimit) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}:</span>
-        <span class="flex-60">{{ currentProduct.overdraftLimit | formatNumber }}</span>
-      </div>
-    }
-
-    @if (currentProduct.allowOverdraft) {
-      @if (currentProduct.avgBalanceCalcPeriod) {
-        <div class="flex-100 layout-row">
-          <span class="flex-40">Average Balance Calculation Period:</span>
-          <span class="flex-60">{{ currentProduct.avgBalanceCalcPeriod }}</span>
+      @if (currentProduct.minBalanceForInterestCalculation) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</span>
+          <span class="vsp-v">{{ currentProduct.minBalanceForInterestCalculation | formatNumber }}</span>
         </div>
       }
-
-      @if (currentProduct.validForPeriod) {
-        <div class="flex-100 layout-row">
-          <span class="flex-40">Valid for Period:</span>
-          <span class="flex-60">{{ currentProduct.validForPeriod }}</span>
-        </div>
-      }
-
-      @if (currentProduct.odAccountClosedZeroBalanceInDayClosing !== undefined) {
-        <div class="flex-100 layout-row">
-          <span class="flex-40">OD Account Closed with Zero Balance in Day Closing:</span>
-          <span class="flex-60">{{ currentProduct.odAccountClosedZeroBalanceInDayClosing | yesNo }}</span>
-        </div>
-      }
-    }
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Enable Dormancy Tracking' | translate }}:</span>
-      <span class="flex-60">{{ currentProduct.isDormancyTrackingActive | yesNo }}</span>
-    </div>
-
-    @if (currentProduct.isDormancyTrackingActive) {
-      <div class="layout-row-wrap responsive-column flex-100">
-        <span class="flex-40">{{ 'labels.inputs.Number of Days to Inactive sub-status' | translate }}:</span>
-        <span class="flex-60">{{ currentProduct.daysToInactive }}</span>
-        <span class="flex-40">{{ 'labels.inputs.Number of Days to Dormant sub-status' | translate }}:</span>
-        <span class="flex-60">{{ currentProduct.daysToDormancy }}</span>
-        <span class="flex-40">{{ 'labels.inputs.Number of Days to Escheat' | translate }}:</span>
-        <span class="flex-60">{{ currentProduct.daysToEscheat }}</span>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="currentProduct.enforceMinRequiredBalance"
+            [class.vsp-pill--gray]="!currentProduct.enforceMinRequiredBalance"
+          >
+            {{ currentProduct.enforceMinRequiredBalance | yesNo }}
+          </span>
+        </span>
       </div>
-    }
-
-    <h3 class="mat-h3 flex-100">Account Facilities</h3>
-
-    <mat-divider class="flex-100"></mat-divider>
-    @if (currentProduct.accountFacilityConfig) {
-      <div class="layout-row-wrap responsive-column flex-100">
-        @for (feature of accountFacilityFeatureItems; track feature.key) {
-          @if (currentProduct.accountFacilityConfig[feature.key] !== undefined) {
-            <div class="flex-100 layout-row">
-              <span class="flex-40">{{ feature.label }}:</span>
-              <span class="flex-60">{{ currentProduct.accountFacilityConfig[feature.key] | yesNo }}</span>
-            </div>
-          }
+      @if (currentProduct.minRequiredBalance) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Minimum Balance' | translate }}</span>
+          <span class="vsp-v">{{ currentProduct.minRequiredBalance | formatNumber }}</span>
+        </div>
+      }
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="currentProduct.withHoldTax"
+            [class.vsp-pill--gray]="!currentProduct.withHoldTax"
+          >
+            {{ currentProduct.withHoldTax | yesNo }}
+          </span>
+        </span>
+      </div>
+      @if (currentProduct.withHoldTax) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Tax Group' | translate }}</span>
+          <span class="vsp-v">{{ currentProduct.taxGroup.name }}</span>
+        </div>
+      }
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="currentProduct.allowOverdraft"
+            [class.vsp-pill--gray]="!currentProduct.allowOverdraft"
+          >
+            {{ currentProduct.allowOverdraft | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Account Closed Zero Balance in Day Closing</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="currentProduct.accountClosedZeroBalanceInDayClosing"
+            [class.vsp-pill--gray]="!currentProduct.accountClosedZeroBalanceInDayClosing"
+          >
+            {{ currentProduct.accountClosedZeroBalanceInDayClosing | yesNo }}
+          </span>
+        </span>
+      </div>
+      @if (currentProduct.minOverdraftForInterestCalculation) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{
+            'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate
+          }}</span>
+          <span class="vsp-v">{{ currentProduct.minOverdraftForInterestCalculation | formatNumber }}</span>
+        </div>
+      }
+      @if (currentProduct.nominalAnnualInterestRateOverdraft) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}</span>
+          <span class="vsp-v">{{ currentProduct.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
+        </div>
+      }
+      @if (currentProduct.overdraftLimit) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}</span>
+          <span class="vsp-v">{{ currentProduct.overdraftLimit | formatNumber }}</span>
+        </div>
+      }
+      @if (currentProduct.allowOverdraft) {
+        @if (currentProduct.avgBalanceCalcPeriod) {
+          <div class="vsp-kv">
+            <span class="vsp-k">Average Balance Calculation Period</span>
+            <span class="vsp-v">{{ currentProduct.avgBalanceCalcPeriod }}</span>
+          </div>
         }
-      </div>
-    }
-
-    @if (currentProduct.accountFacilityLimits?.length) {
-      <div class="layout-row-wrap responsive-column flex-100">
-        <h4 class="mat-h4 flex-100">Account Facility Limits</h4>
-        <mat-divider class="flex-100"></mat-divider>
-        <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="currentProduct.accountFacilityLimits">
-          <ng-container matColumnDef="limitType">
-            <th mat-header-cell *matHeaderCellDef>Limit Type</th>
-            <td mat-cell *matCellDef="let row">{{ row.limitType }}</td>
-          </ng-container>
-          <ng-container matColumnDef="generalLimit">
-            <th mat-header-cell *matHeaderCellDef>General Limit</th>
-            <td mat-cell *matCellDef="let row">{{ row.generalLimit }}</td>
-          </ng-container>
-          <ng-container matColumnDef="minorAccountLimit">
-            <th mat-header-cell *matHeaderCellDef>Minor Account Limit</th>
-            <td mat-cell *matCellDef="let row">{{ row.minorAccountLimit }}</td>
-          </ng-container>
-          <ng-container matColumnDef="smallSavingLimit">
-            <th mat-header-cell *matHeaderCellDef>Small Saving Limit</th>
-            <td mat-cell *matCellDef="let row">{{ row.smallSavingLimit }}</td>
-          </ng-container>
-          <tr
-            mat-header-row
-            *matHeaderRowDef="['limitType', 'generalLimit', 'minorAccountLimit', 'smallSavingLimit']"
-          ></tr>
-          <tr
-            mat-row
-            *matRowDef="let row; columns: ['limitType', 'generalLimit', 'minorAccountLimit', 'smallSavingLimit']"
-          ></tr>
-        </table>
-      </div>
-    }
-
-    @if (currentProduct.depositLimitKyc) {
-      <div class="layout-row-wrap responsive-column flex-100">
-        <h4 class="mat-h4 flex-100">Deposit Limit (KYC)</h4>
-        <div class="flex-100 layout-row">
-          <span class="flex-40">General:</span>
-          <span class="flex-60"
-            >{{ currentProduct.depositLimitKyc.general.kycType }} -
-            {{ currentProduct.depositLimitKyc.general.limit }}</span
+        @if (currentProduct.validForPeriod) {
+          <div class="vsp-kv">
+            <span class="vsp-k">Valid for Period</span>
+            <span class="vsp-v">{{ currentProduct.validForPeriod }}</span>
+          </div>
+        }
+        @if (currentProduct.odAccountClosedZeroBalanceInDayClosing !== undefined) {
+          <div class="vsp-kv">
+            <span class="vsp-k">OD Account Closed with Zero Balance in Day Closing</span>
+            <span class="vsp-v">{{ currentProduct.odAccountClosedZeroBalanceInDayClosing | yesNo }}</span>
+          </div>
+        }
+      }
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Enable Dormancy Tracking' | translate }}</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="currentProduct.isDormancyTrackingActive"
+            [class.vsp-pill--gray]="!currentProduct.isDormancyTrackingActive"
           >
-        </div>
-        <div class="flex-100 layout-row">
-          <span class="flex-40">Minor:</span>
-          <span class="flex-60"
-            >{{ currentProduct.depositLimitKyc.minor.kycType }} - {{ currentProduct.depositLimitKyc.minor.limit }}</span
-          >
-        </div>
-        <div class="flex-100 layout-row">
-          <span class="flex-40">Small Saving:</span>
-          <span class="flex-60"
-            >{{ currentProduct.depositLimitKyc.smallSaving.kycType }} -
-            {{ currentProduct.depositLimitKyc.smallSaving.limit }}</span
-          >
-        </div>
+            {{ currentProduct.isDormancyTrackingActive | yesNo }}
+          </span>
+        </span>
       </div>
-    }
+      @if (currentProduct.isDormancyTrackingActive) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Number of Days to Inactive sub-status' | translate }}</span>
+          <span class="vsp-v">{{ currentProduct.daysToInactive }}</span>
+        </div>
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Number of Days to Dormant sub-status' | translate }}</span>
+          <span class="vsp-v">{{ currentProduct.daysToDormancy }}</span>
+        </div>
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Number of Days to Escheat' | translate }}</span>
+          <span class="vsp-v">{{ currentProduct.daysToEscheat }}</span>
+        </div>
+      }
+    </div>
+  </section>
 
-    @if (currentProduct.charges.length) {
-      <div class="layout-row-wrap responsive-column flex-100">
-        <h3 class="mat-h3 flex-100">{{ 'labels.heading.Charges' | translate }}</h3>
-        <mat-divider class="flex-100"></mat-divider>
-        <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="currentProduct.charges">
+  <!-- ACCOUNT FACILITIES -->
+  @if (
+    currentProduct.accountFacilityConfig ||
+    currentProduct.accountFacilityLimits?.length ||
+    currentProduct.depositLimitKyc
+  ) {
+    <section class="vsp-section">
+      <div class="vsp-section-h">
+        <div class="vsp-section-ic vsp-section-ic--pink"><fa-icon icon="th-large"></fa-icon></div>
+        <h3>Account Facilities</h3>
+      </div>
+
+      @if (currentProduct.accountFacilityConfig) {
+        <div class="vsp-grid vsp-grid--3">
+          @for (feature of accountFacilityFeatureItems; track feature.key) {
+            @if (currentProduct.accountFacilityConfig[feature.key] !== undefined) {
+              <div class="vsp-feature" [class.is-on]="currentProduct.accountFacilityConfig[feature.key]">
+                <fa-icon
+                  [icon]="currentProduct.accountFacilityConfig[feature.key] ? 'check-circle' : 'times-circle'"
+                ></fa-icon>
+                <span>{{ feature.label }}</span>
+              </div>
+            }
+          }
+        </div>
+      }
+
+      @if (currentProduct.accountFacilityLimits?.length) {
+        <h4 class="vsp-sub-h">Account Facility Limits</h4>
+        <div class="vsp-table-wrap">
+          <table class="vsp-table" mat-table [dataSource]="currentProduct.accountFacilityLimits">
+            <ng-container matColumnDef="limitType">
+              <th mat-header-cell *matHeaderCellDef>Limit Type</th>
+              <td mat-cell *matCellDef="let row">{{ row.limitType }}</td>
+            </ng-container>
+            <ng-container matColumnDef="generalLimit">
+              <th mat-header-cell *matHeaderCellDef>General Limit</th>
+              <td mat-cell *matCellDef="let row">{{ row.generalLimit }}</td>
+            </ng-container>
+            <ng-container matColumnDef="minorAccountLimit">
+              <th mat-header-cell *matHeaderCellDef>Minor Account Limit</th>
+              <td mat-cell *matCellDef="let row">{{ row.minorAccountLimit }}</td>
+            </ng-container>
+            <ng-container matColumnDef="smallSavingLimit">
+              <th mat-header-cell *matHeaderCellDef>Small Saving Limit</th>
+              <td mat-cell *matCellDef="let row">{{ row.smallSavingLimit }}</td>
+            </ng-container>
+            <tr
+              mat-header-row
+              *matHeaderRowDef="['limitType', 'generalLimit', 'minorAccountLimit', 'smallSavingLimit']"
+            ></tr>
+            <tr
+              mat-row
+              *matRowDef="let row; columns: ['limitType', 'generalLimit', 'minorAccountLimit', 'smallSavingLimit']"
+            ></tr>
+          </table>
+        </div>
+      }
+
+      @if (currentProduct.depositLimitKyc) {
+        <h4 class="vsp-sub-h">Deposit Limit (KYC)</h4>
+        <div class="vsp-grid">
+          <div class="vsp-kv">
+            <span class="vsp-k">General</span>
+            <span class="vsp-v"
+              >{{ currentProduct.depositLimitKyc.general.kycType }} ·
+              {{ currentProduct.depositLimitKyc.general.limit }}</span
+            >
+          </div>
+          <div class="vsp-kv">
+            <span class="vsp-k">Minor</span>
+            <span class="vsp-v"
+              >{{ currentProduct.depositLimitKyc.minor.kycType }} ·
+              {{ currentProduct.depositLimitKyc.minor.limit }}</span
+            >
+          </div>
+          <div class="vsp-kv">
+            <span class="vsp-k">Small Saving</span>
+            <span class="vsp-v"
+              >{{ currentProduct.depositLimitKyc.smallSaving.kycType }} ·
+              {{ currentProduct.depositLimitKyc.smallSaving.limit }}</span
+            >
+          </div>
+        </div>
+      }
+    </section>
+  }
+
+  <!-- CHARGES -->
+  @if (currentProduct.charges.length) {
+    <section class="vsp-section">
+      <div class="vsp-section-h">
+        <div class="vsp-section-ic vsp-section-ic--red"><fa-icon icon="receipt"></fa-icon></div>
+        <h3>{{ 'labels.heading.Charges' | translate }}</h3>
+      </div>
+      <div class="vsp-table-wrap">
+        <table class="vsp-table" mat-table [dataSource]="currentProduct.charges">
           <ng-container matColumnDef="name">
             <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
-            <td mat-cell *matCellDef="let charge">
-              {{ charge.name + ', ' + charge.currency.displaySymbol }}
-            </td>
+            <td mat-cell *matCellDef="let charge">{{ charge.name + ', ' + charge.currency.displaySymbol }}</td>
           </ng-container>
           <ng-container matColumnDef="chargeCalculationType">
             <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
@@ -457,186 +569,173 @@
           </ng-container>
           <ng-container matColumnDef="amount">
             <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
-            <td mat-cell *matCellDef="let charge">
-              {{ charge.amount | formatNumber }}
-            </td>
+            <td mat-cell *matCellDef="let charge">{{ charge.amount | formatNumber }}</td>
           </ng-container>
           <ng-container matColumnDef="chargeTimeType">
             <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
-            <td mat-cell *matCellDef="let charge">
-              {{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
-            </td>
+            <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType.value | translateKey: 'catalogs' }}</td>
           </ng-container>
           <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
         </table>
       </div>
-    }
-
-    <h3 class="mat-h3 flex-100">{{ 'labels.heading.Accounting' | translate }}</h3>
-
-    <mat-divider class="flex-100"></mat-divider>
+    </section>
+  }
 
+  <!-- ACCOUNTING -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--green"><fa-icon icon="book"></fa-icon></div>
+      <h3>{{ 'labels.heading.Accounting' | translate }}</h3>
+    </div>
     <mifosx-view-savings-accounting-details
-      class="flex-100"
       [accountingRule]="currentProduct.accountingRule"
       [accountingMappings]="currentProduct.accountingMappings"
-    >
-    </mifosx-view-savings-accounting-details>
+    ></mifosx-view-savings-accounting-details>
+  </section>
 
-    @if (currentProduct.otherGlMappingsMap) {
-      <div class="flex-100 layout-row-wrap responsive-column">
-        <h3 class="mat-h3 flex-100">Other GL Mappings</h3>
-        <mat-divider class="flex-100"></mat-divider>
-
-        @if (currentProduct.otherGlMappingsMap.assets?.length) {
-          <h4 class="mat-h4 flex-100">Assets</h4>
-          <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="currentProduct.otherGlMappingsMap.assets">
-            <ng-container matColumnDef="accountName">
-              <th mat-header-cell *matHeaderCellDef>Account Name</th>
-              <td mat-cell *matCellDef="let row">{{ row.accountName }}</td>
-            </ng-container>
-            <ng-container matColumnDef="glAccountId">
-              <th mat-header-cell *matHeaderCellDef>GL Account</th>
-              <td mat-cell *matCellDef="let row">{{ row.glCode || row.glAccountId }}</td>
-            </ng-container>
-            <tr mat-header-row *matHeaderRowDef="['accountName', 'glAccountId']"></tr>
-            <tr mat-row *matRowDef="let row; columns: ['accountName', 'glAccountId']"></tr>
-          </table>
-        }
-
-        @if (currentProduct.otherGlMappingsMap.liabilities?.length) {
-          <h4 class="mat-h4 flex-100">Liabilities</h4>
-          <table
-            class="flex-100 mat-elevation-z1"
-            mat-table
-            [dataSource]="currentProduct.otherGlMappingsMap.liabilities"
-          >
-            <ng-container matColumnDef="accountName">
-              <th mat-header-cell *matHeaderCellDef>Account Name</th>
-              <td mat-cell *matCellDef="let row">{{ row.accountName }}</td>
-            </ng-container>
-            <ng-container matColumnDef="glAccountId">
-              <th mat-header-cell *matHeaderCellDef>GL Account</th>
-              <td mat-cell *matCellDef="let row">{{ row.glCode || row.glAccountId }}</td>
-            </ng-container>
-            <tr mat-header-row *matHeaderRowDef="['accountName', 'glAccountId']"></tr>
-            <tr mat-row *matRowDef="let row; columns: ['accountName', 'glAccountId']"></tr>
-          </table>
-        }
-
-        @if (currentProduct.otherGlMappingsMap.expenses?.length) {
-          <h4 class="mat-h4 flex-100">Expenses</h4>
-          <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="currentProduct.otherGlMappingsMap.expenses">
-            <ng-container matColumnDef="accountName">
-              <th mat-header-cell *matHeaderCellDef>Account Name</th>
-              <td mat-cell *matCellDef="let row">{{ row.accountName }}</td>
-            </ng-container>
-            <ng-container matColumnDef="glAccountId">
-              <th mat-header-cell *matHeaderCellDef>GL Account</th>
-              <td mat-cell *matCellDef="let row">{{ row.glCode || row.glAccountId }}</td>
-            </ng-container>
-            <tr mat-header-row *matHeaderRowDef="['accountName', 'glAccountId']"></tr>
-            <tr mat-row *matRowDef="let row; columns: ['accountName', 'glAccountId']"></tr>
-          </table>
-        }
-
-        @if (currentProduct.otherGlMappingsMap.income?.length) {
-          <h4 class="mat-h4 flex-100">Income</h4>
-          <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="currentProduct.otherGlMappingsMap.income">
-            <ng-container matColumnDef="accountName">
-              <th mat-header-cell *matHeaderCellDef>Account Name</th>
-              <td mat-cell *matCellDef="let row">{{ row.accountName }}</td>
-            </ng-container>
-            <ng-container matColumnDef="glAccountId">
-              <th mat-header-cell *matHeaderCellDef>GL Account</th>
-              <td mat-cell *matCellDef="let row">{{ row.glCode || row.glAccountId }}</td>
-            </ng-container>
-            <tr mat-header-row *matHeaderRowDef="['accountName', 'glAccountId']"></tr>
-            <tr mat-row *matRowDef="let row; columns: ['accountName', 'glAccountId']"></tr>
-          </table>
-        }
+  <!-- OTHER GL MAPPINGS -->
+  @if (currentProduct.otherGlMappingsMap) {
+    <section class="vsp-section">
+      <div class="vsp-section-h">
+        <div class="vsp-section-ic vsp-section-ic--blue"><fa-icon icon="project-diagram"></fa-icon></div>
+        <h3>Other GL Mappings</h3>
       </div>
-    }
 
-    @if (
-      currentProduct.paymentChannelToFundSourceMappings?.length ||
-      currentProduct.feeToIncomeAccountMappings?.length ||
-      currentProduct.penaltyToIncomeAccountMappings?.length
-    ) {
-      <div class="flex-100 layout-row-wrap responsive-column">
-        <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Advanced Accounting Rules' | translate }}</h3>
-        <mat-divider class="flex-100"></mat-divider>
-        @if (currentProduct.paymentChannelToFundSourceMappings?.length) {
-          <div class="flex-100 layout-row-wrap responsive-column">
-            <h4 class="mat-h4 flex-100">{{ 'labels.inputs.Fund Sources for Payment Channels' | translate }}</h4>
-            <table
-              class="mat-elevation-z1 flex-100"
-              mat-table
-              [dataSource]="currentProduct.paymentChannelToFundSourceMappings"
-            >
-              <ng-container matColumnDef="paymentTypeId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Type' | translate }}</th>
-                <td mat-cell *matCellDef="let paymentFundSource">
-                  {{ paymentFundSource.paymentType.name }}
-                </td>
-              </ng-container>
-              <ng-container matColumnDef="fundSourceAccountId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
-                <td mat-cell *matCellDef="let paymentFundSource">
-                  ({{ paymentFundSource.fundSourceAccount.glCode }}) {{ paymentFundSource.fundSourceAccount.name }}
-                </td>
-              </ng-container>
-              <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
-            </table>
-          </div>
-        }
-        @if (currentProduct.feeToIncomeAccountMappings?.length) {
-          <div class="flex-100 layout-row-wrap responsive-column">
-            <h4 class="mat-h4 flex-100">{{ 'labels.inputs.Fees to Specific Income Accounts' | translate }}</h4>
-            <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="currentProduct.feeToIncomeAccountMappings">
-              <ng-container matColumnDef="chargeId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fee/Charge' | translate }}</th>
-                <td mat-cell *matCellDef="let fee">
-                  {{ fee.charge.name }}
-                </td>
-              </ng-container>
-              <ng-container matColumnDef="incomeAccountId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
-                <td mat-cell *matCellDef="let fee">({{ fee.incomeAccount.glCode }}) {{ fee.incomeAccount.name }}</td>
-              </ng-container>
-              <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
-            </table>
-          </div>
-        }
-        @if (currentProduct.penaltyToIncomeAccountMappings?.length) {
-          <div class="flex-100 layout-row-wrap responsive-column">
-            <h4 class="mat-h4 flex-100">{{ 'labels.inputs.Penalties to Specific Income Accounts' | translate }}</h4>
-            <table
-              class="flex-100 mat-elevation-z1"
-              mat-table
-              [dataSource]="currentProduct.penaltyToIncomeAccountMappings"
-            >
-              <ng-container matColumnDef="chargeId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
-                <td mat-cell *matCellDef="let penalty">
-                  {{ penalty.charge.name }}
-                </td>
-              </ng-container>
-              <ng-container matColumnDef="incomeAccountId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
-                <td mat-cell *matCellDef="let penalty">
-                  ({{ penalty.incomeAccount.glCode }}) {{ penalty.incomeAccount.name }}
-                </td>
-              </ng-container>
-              <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
-            </table>
-          </div>
-        }
+      @if (currentProduct.otherGlMappingsMap.assets?.length) {
+        <h4 class="vsp-sub-h">Assets</h4>
+        <div class="vsp-table-wrap">
+          <table class="vsp-table" mat-table [dataSource]="currentProduct.otherGlMappingsMap.assets">
+            <ng-container matColumnDef="accountName">
+              <th mat-header-cell *matHeaderCellDef>Account Name</th>
+              <td mat-cell *matCellDef="let row">{{ row.accountName }}</td>
+            </ng-container>
+            <ng-container matColumnDef="glAccountId">
+              <th mat-header-cell *matHeaderCellDef>GL Account</th>
+              <td mat-cell *matCellDef="let row">{{ row.glCode || row.glAccountId }}</td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="['accountName', 'glAccountId']"></tr>
+            <tr mat-row *matRowDef="let row; columns: ['accountName', 'glAccountId']"></tr>
+          </table>
+        </div>
+      }
+      @if (currentProduct.otherGlMappingsMap.liabilities?.length) {
+        <h4 class="vsp-sub-h">Liabilities</h4>
+        <div class="vsp-table-wrap">
+          <table class="vsp-table" mat-table [dataSource]="currentProduct.otherGlMappingsMap.liabilities">
+            <ng-container matColumnDef="accountName">
+              <th mat-header-cell *matHeaderCellDef>Account Name</th>
+              <td mat-cell *matCellDef="let row">{{ row.accountName }}</td>
+            </ng-container>
+            <ng-container matColumnDef="glAccountId">
+              <th mat-header-cell *matHeaderCellDef>GL Account</th>
+              <td mat-cell *matCellDef="let row">{{ row.glCode || row.glAccountId }}</td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="['accountName', 'glAccountId']"></tr>
+            <tr mat-row *matRowDef="let row; columns: ['accountName', 'glAccountId']"></tr>
+          </table>
+        </div>
+      }
+      @if (currentProduct.otherGlMappingsMap.expenses?.length) {
+        <h4 class="vsp-sub-h">Expenses</h4>
+        <div class="vsp-table-wrap">
+          <table class="vsp-table" mat-table [dataSource]="currentProduct.otherGlMappingsMap.expenses">
+            <ng-container matColumnDef="accountName">
+              <th mat-header-cell *matHeaderCellDef>Account Name</th>
+              <td mat-cell *matCellDef="let row">{{ row.accountName }}</td>
+            </ng-container>
+            <ng-container matColumnDef="glAccountId">
+              <th mat-header-cell *matHeaderCellDef>GL Account</th>
+              <td mat-cell *matCellDef="let row">{{ row.glCode || row.glAccountId }}</td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="['accountName', 'glAccountId']"></tr>
+            <tr mat-row *matRowDef="let row; columns: ['accountName', 'glAccountId']"></tr>
+          </table>
+        </div>
+      }
+      @if (currentProduct.otherGlMappingsMap.income?.length) {
+        <h4 class="vsp-sub-h">Income</h4>
+        <div class="vsp-table-wrap">
+          <table class="vsp-table" mat-table [dataSource]="currentProduct.otherGlMappingsMap.income">
+            <ng-container matColumnDef="accountName">
+              <th mat-header-cell *matHeaderCellDef>Account Name</th>
+              <td mat-cell *matCellDef="let row">{{ row.accountName }}</td>
+            </ng-container>
+            <ng-container matColumnDef="glAccountId">
+              <th mat-header-cell *matHeaderCellDef>GL Account</th>
+              <td mat-cell *matCellDef="let row">{{ row.glCode || row.glAccountId }}</td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="['accountName', 'glAccountId']"></tr>
+            <tr mat-row *matRowDef="let row; columns: ['accountName', 'glAccountId']"></tr>
+          </table>
+        </div>
+      }
+    </section>
+  }
+
+  <!-- ADVANCED ACCOUNTING RULES -->
+  @if (
+    currentProduct.paymentChannelToFundSourceMappings?.length ||
+    currentProduct.feeToIncomeAccountMappings?.length ||
+    currentProduct.penaltyToIncomeAccountMappings?.length
+  ) {
+    <section class="vsp-section">
+      <div class="vsp-section-h">
+        <div class="vsp-section-ic vsp-section-ic--purple"><fa-icon icon="sitemap"></fa-icon></div>
+        <h3>{{ 'labels.inputs.Advanced Accounting Rules' | translate }}</h3>
       </div>
-    }
-  </div>
+
+      @if (currentProduct.paymentChannelToFundSourceMappings?.length) {
+        <h4 class="vsp-sub-h">{{ 'labels.inputs.Fund Sources for Payment Channels' | translate }}</h4>
+        <div class="vsp-table-wrap">
+          <table class="vsp-table" mat-table [dataSource]="currentProduct.paymentChannelToFundSourceMappings">
+            <ng-container matColumnDef="paymentTypeId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Type' | translate }}</th>
+              <td mat-cell *matCellDef="let p">{{ p.paymentType.name }}</td>
+            </ng-container>
+            <ng-container matColumnDef="fundSourceAccountId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
+              <td mat-cell *matCellDef="let p">({{ p.fundSourceAccount.glCode }}) {{ p.fundSourceAccount.name }}</td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
+          </table>
+        </div>
+      }
+      @if (currentProduct.feeToIncomeAccountMappings?.length) {
+        <h4 class="vsp-sub-h">{{ 'labels.inputs.Fees to Specific Income Accounts' | translate }}</h4>
+        <div class="vsp-table-wrap">
+          <table class="vsp-table" mat-table [dataSource]="currentProduct.feeToIncomeAccountMappings">
+            <ng-container matColumnDef="chargeId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fee/Charge' | translate }}</th>
+              <td mat-cell *matCellDef="let f">{{ f.charge.name }}</td>
+            </ng-container>
+            <ng-container matColumnDef="incomeAccountId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
+              <td mat-cell *matCellDef="let f">({{ f.incomeAccount.glCode }}) {{ f.incomeAccount.name }}</td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
+          </table>
+        </div>
+      }
+      @if (currentProduct.penaltyToIncomeAccountMappings?.length) {
+        <h4 class="vsp-sub-h">{{ 'labels.inputs.Penalties to Specific Income Accounts' | translate }}</h4>
+        <div class="vsp-table-wrap">
+          <table class="vsp-table" mat-table [dataSource]="currentProduct.penaltyToIncomeAccountMappings">
+            <ng-container matColumnDef="chargeId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
+              <td mat-cell *matCellDef="let p">{{ p.charge.name }}</td>
+            </ng-container>
+            <ng-container matColumnDef="incomeAccountId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
+              <td mat-cell *matCellDef="let p">({{ p.incomeAccount.glCode }}) {{ p.incomeAccount.name }}</td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
+          </table>
+        </div>
+      }
+    </section>
+  }
 </div>
diff --git a/src/app/products/current-products/view-current-product/current-product-general-tab/current-product-general-tab.component.scss b/src/app/products/current-products/view-current-product/current-product-general-tab/current-product-general-tab.component.scss
index 367f0cc1d..cf3013549 100644
--- a/src/app/products/current-products/view-current-product/current-product-general-tab/current-product-general-tab.component.scss
+++ b/src/app/products/current-products/view-current-product/current-product-general-tab/current-product-general-tab.component.scss
@@ -6,48 +6,429 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-@use 'assets/styles/helper';
-@use 'assets/styles/colours' as *;
-@use 'assets/styles/product-view' as pv;
-
-@include pv.product-view-styles;
-
-/* Current-account-specific green accent */
 :host {
-  --pv-accent: #15803d;
-  --pv-accent-l: #dcfce7;
+  --vsp-navy: #0b1e3d;
+  --vsp-blue: #1d4ed8;
+  --vsp-blue-l: #eff6ff;
+  --vsp-teal: #0e7e6b;
+  --vsp-teal-l: #ccfbf1;
+  --vsp-purple: #6d28d9;
+  --vsp-purple-l: #ede9fe;
+  --vsp-indigo: #3730a3;
+  --vsp-indigo-l: #e0e7ff;
+  --vsp-amber: #b45309;
+  --vsp-amber-l: #fef3c7;
+  --vsp-green: #15803d;
+  --vsp-green-l: #dcfce7;
+  --vsp-red: #c0392b;
+  --vsp-red-l: #fee2e2;
+  --vsp-pink: #be185d;
+  --vsp-pink-l: #fce7f3;
+  --vsp-g50: #f8fafc;
+  --vsp-g100: #f1f5f9;
+  --vsp-g200: #e2e8f0;
+  --vsp-g500: #64748b;
+  --vsp-g700: #334155;
+  --vsp-g900: #0f172a;
+
+  display: block;
+  font-family:
+    'DM Sans',
+    system-ui,
+    -apple-system,
+    sans-serif;
+  color: var(--vsp-g900);
+  font-size: 13.5px;
 }
 
-.tab-container {
-  padding: 1%;
-  margin: 1%;
+.vsp-root {
+  padding: 4px 4px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
 
-.mat-h3 {
-  margin-top: 10px !important;
-  font-weight: 300;
-  color: $status-approved;
+/* ───────── HERO ───────── */
+.vsp-hero {
+  background: linear-gradient(135deg, var(--vsp-navy) 0%, var(--vsp-blue) 100%);
+  border-radius: 14px;
+  padding: 22px 22px 22px 18px;
+  display: flex;
+  align-items: flex-start;
+  gap: 18px;
+  box-shadow:
+    0 10px 24px rgb(11 30 61 / 18%),
+    0 4px 10px rgb(11 30 61 / 12%);
+  color: #fff;
+  position: relative;
+  overflow: hidden;
 }
 
-h2,
-h3,
-h4 {
-  margin: 0;
+.vsp-hero::before {
+  content: '';
+  position: absolute;
+  top: -60px;
+  right: -60px;
+  width: 240px;
+  height: 240px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgb(255 255 255 / 8%) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.vsp-hero-left {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  flex: 1;
+  min-width: 0;
+}
+
+.vsp-hero-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  background: rgb(255 255 255 / 16%);
+  border: 1px solid rgb(255 255 255 / 22%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.vsp-hero-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.vsp-hero-eyebrow {
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: rgb(255 255 255 / 70%);
+  margin-bottom: 4px;
+}
+
+.vsp-hero-title {
+  margin: 0 0 10px;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  color: #fff;
+  line-height: 1.2;
+}
+
+.vsp-hero-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.vsp-hero-desc {
+  margin: 12px 0 0;
+  font-size: 13px;
+  color: rgb(255 255 255 / 82%);
+  line-height: 1.5;
+  max-width: 720px;
+}
+
+.vsp-edit-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 38px;
+  padding: 0 16px;
+  border-radius: 10px;
+  background: rgb(255 255 255 / 14%);
+  color: #fff;
+  border: 1px solid rgb(255 255 255 / 28%);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  font-family: inherit;
+  flex-shrink: 0;
+  transition: all 0.16s ease;
+
+  fa-icon {
+    font-size: 12px;
+  }
+
+  &:hover {
+    background: rgb(255 255 255 / 24%);
+    border-color: rgb(255 255 255 / 50%);
+  }
+}
+
+/* ───────── PILLS ───────── */
+.vsp-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-family: inherit;
+
+  fa-icon {
+    font-size: 9.5px;
+  }
+
+  &--code {
+    background: rgb(255 255 255 / 18%);
+    color: #fff;
+    border: 1px solid rgb(255 255 255 / 24%);
+    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
+  }
+
+  &--teal {
+    background: var(--vsp-teal-l);
+    color: var(--vsp-teal);
+    border: 1px solid #99f6e4;
+  }
+
+  &--blue {
+    background: var(--vsp-blue-l);
+    color: var(--vsp-blue);
+    border: 1px solid #dbeafe;
+  }
+
+  &--green {
+    background: var(--vsp-green-l);
+    color: var(--vsp-green);
+    border: 1px solid #bbf7d0;
+  }
+
+  &--amber {
+    background: var(--vsp-amber-l);
+    color: var(--vsp-amber);
+    border: 1px solid #fde68a;
+  }
+
+  &--red {
+    background: var(--vsp-red-l);
+    color: var(--vsp-red);
+    border: 1px solid #fecaca;
+  }
+
+  &--gray {
+    background: var(--vsp-g100);
+    color: var(--vsp-g700);
+    border: 1px solid var(--vsp-g200);
+  }
+}
+
+/* ───────── SECTION ───────── */
+.vsp-section {
+  background: #fff;
+  border: 1px solid var(--vsp-g200);
+  border-radius: 12px;
+  padding: 16px 20px;
+  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
+}
+
+.vsp-section-h {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px dashed var(--vsp-g200);
+
+  h3 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--vsp-g900);
+    letter-spacing: 0.02em;
+  }
+}
+
+.vsp-section-ic {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  flex-shrink: 0;
+
+  &--blue {
+    background: var(--vsp-blue-l);
+    color: var(--vsp-blue);
+  }
+
+  &--teal {
+    background: var(--vsp-teal-l);
+    color: var(--vsp-teal);
+  }
+
+  &--purple {
+    background: var(--vsp-purple-l);
+    color: var(--vsp-purple);
+  }
+
+  &--indigo {
+    background: var(--vsp-indigo-l);
+    color: var(--vsp-indigo);
+  }
+
+  &--amber {
+    background: var(--vsp-amber-l);
+    color: var(--vsp-amber);
+  }
+
+  &--green {
+    background: var(--vsp-green-l);
+    color: var(--vsp-green);
+  }
+
+  &--red {
+    background: var(--vsp-red-l);
+    color: var(--vsp-red);
+  }
+
+  &--pink {
+    background: var(--vsp-pink-l);
+    color: var(--vsp-pink);
+  }
+}
+
+.vsp-sub-h {
+  margin: 16px 0 10px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--vsp-g700);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+/* ───────── KEY/VALUE GRID ───────── */
+.vsp-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px 24px;
+}
+
+.vsp-grid--3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+@media (width <= 900px) {
+  .vsp-grid,
+  .vsp-grid--3 {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (width <= 600px) {
+  .vsp-grid,
+  .vsp-grid--3 {
+    grid-template-columns: 1fr;
+  }
+}
+
+.vsp-kv {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--vsp-g100);
+
+  &--span {
+    grid-column: 1 / -1;
+  }
+}
+
+.vsp-k {
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--vsp-g500);
+}
+
+.vsp-v {
+  font-size: 13.5px;
+  color: var(--vsp-g900);
   font-weight: 500;
+  word-break: break-word;
+
+  strong {
+    font-weight: 700;
+  }
 }
 
-table {
+/* ───────── FEATURE GRID (account facilities) ───────── */
+.vsp-feature {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: var(--vsp-g50);
+  border: 1px solid var(--vsp-g200);
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--vsp-g700);
+
+  fa-icon {
+    font-size: 12px;
+    color: var(--vsp-g500);
+  }
+
+  &.is-on {
+    background: var(--vsp-green-l);
+    border-color: #bbf7d0;
+    color: var(--vsp-green);
+
+    fa-icon {
+      color: var(--vsp-green);
+    }
+  }
+}
+
+/* ───────── TABLES ───────── */
+.vsp-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--vsp-g200);
+  border-radius: 10px;
+  margin-top: 4px;
+}
+
+.vsp-table {
   width: 100%;
-}
+  background: #fff;
 
-.mat-elevation-z1 {
-  margin: 1em 0 1.5em;
-}
+  th.mat-mdc-header-cell {
+    background: var(--vsp-g50);
+    color: var(--vsp-g700);
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 11px 14px;
+    border-bottom: 1px solid var(--vsp-g200);
+    white-space: nowrap;
+  }
 
-span {
-  margin: 0.5em 0;
-}
+  td.mat-mdc-cell {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--vsp-g100);
+    font-size: 12.5px;
+    color: var(--vsp-g900);
+  }
 
-mat-divider {
-  margin: 0 0 0.5em;
+  tbody tr:last-child td.mat-mdc-cell {
+    border-bottom: 0;
+  }
 }
diff --git a/src/app/products/current-products/view-current-product/current-product-general-tab/current-product-general-tab.component.ts b/src/app/products/current-products/view-current-product/current-product-general-tab/current-product-general-tab.component.ts
index ecc8e2eb5..64299416c 100644
--- a/src/app/products/current-products/view-current-product/current-product-general-tab/current-product-general-tab.component.ts
+++ b/src/app/products/current-products/view-current-product/current-product-general-tab/current-product-general-tab.component.ts
@@ -34,6 +34,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   styleUrls: ['./current-product-general-tab.component.scss'],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
+    RouterLink,
     FaIconComponent,
     MatDivider,
     MatTable,
diff --git a/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.html b/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.html
index 85726f0f4..cb3324ea9 100644
--- a/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.html
+++ b/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.html
@@ -6,524 +6,608 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<div class="pv-root">
+<div class="vsp-root">
   <!-- HERO -->
-  <div class="pv-hero">
-    <div class="pv-hero-left">
-      <div class="pv-hero-icon"><fa-icon icon="piggy-bank"></fa-icon></div>
-      <div class="pv-hero-text">
-        <div class="pv-hero-eyebrow">Fixed Deposit Product</div>
-        <h2 class="pv-hero-title">{{ fixedDepositProductData.name }}</h2>
-        <div class="pv-hero-meta">
-          <span class="pv-pill pv-pill--code">{{ fixedDepositProductData.shortName }}</span>
+  <div class="vsp-hero">
+    <div class="vsp-hero-left">
+      <div class="vsp-hero-icon"><fa-icon icon="piggy-bank"></fa-icon></div>
+      <div class="vsp-hero-text">
+        <div class="vsp-hero-eyebrow">Fixed Deposit Product</div>
+        <h2 class="vsp-hero-title">{{ fixedDepositProductData.name }}</h2>
+        <div class="vsp-hero-meta">
+          <span class="vsp-pill vsp-pill--code">{{ fixedDepositProductData.shortName }}</span>
           @if (fixedDepositProductData.currency?.code) {
-            <span class="pv-pill pv-pill--teal">{{ fixedDepositProductData.currency.code }}</span>
+            <span class="vsp-pill vsp-pill--teal">{{ fixedDepositProductData.currency.code }}</span>
           }
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="!fixedDepositProductData.endDate"
+            [class.vsp-pill--amber]="fixedDepositProductData.endDate"
+          >
+            <fa-icon [icon]="fixedDepositProductData.endDate ? 'times-circle' : 'check-circle'"></fa-icon>
+            {{ fixedDepositProductData.endDate ? 'Inactive' : 'Active' }}
+          </span>
         </div>
         @if (fixedDepositProductData.description) {
-          <p class="pv-hero-desc">{{ fixedDepositProductData.description }}</p>
+          <p class="vsp-hero-desc">{{ fixedDepositProductData.description }}</p>
         }
       </div>
     </div>
-    <button class="pv-edit-btn" type="button" [routerLink]="['../edit']" *mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'">
-      <fa-icon icon="edit"></fa-icon><span>{{ 'labels.buttons.Edit' | translate }}</span>
+    <button
+      class="vsp-edit-btn"
+      type="button"
+      [routerLink]="['../edit']"
+      *mifosxHasPermission="'UPDATE_SAVINGSPRODUCT'"
+    >
+      <fa-icon icon="edit"></fa-icon>
+      <span>{{ 'labels.buttons.Edit' | translate }}</span>
     </button>
   </div>
 
-  <div class="pv-legacy">
-    <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Details' | translate }}</h3>
-
-    <mat-divider [inset]="true"></mat-divider>
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Short Name' | translate }}:</span>
-      <span class="flex-60">{{ fixedDepositProductData.shortName }}</span>
+  <!-- DETAILS -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--blue"><fa-icon icon="info-circle"></fa-icon></div>
+      <h3>{{ 'labels.inputs.Details' | translate }}</h3>
     </div>
-
-    @if (fixedDepositProductData.description) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
-        <span class="flex-60">{{ fixedDepositProductData.description }}</span>
-      </div>
-    }
-
-    <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Currency' | translate }}</h3>
-
-    <mat-divider [inset]="true"></mat-divider>
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.heading.Currency' | translate }}:</span>
-      <span class="flex-60"
-        >({{ fixedDepositProductData.currency.code }}) {{ fixedDepositProductData.currency.name }}</span
-      >
-    </div>
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
-      <span class="flex-60">{{ fixedDepositProductData.currency.decimalPlaces }}</span>
-    </div>
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Currency in multiples of' | translate }}:</span>
-      <span class="flex-60">{{ fixedDepositProductData.currency.inMultiplesOf | formatNumber }}</span>
-    </div>
-
-    <h3 class="mat-h3 flex-100">{{ 'labels.heading.Terms' | translate }}</h3>
-
-    <mat-divider [inset]="true"></mat-divider>
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Deposit Amount' | translate }}:</span>
-      <span class="flex-60">{{
-        fixedDepositProductData.depositAmount +
-          ' (Min: ' +
-          (fixedDepositProductData.minDepositAmount
-            ? fixedDepositProductData.minDepositAmount
-            : fixedDepositProductData.depositAmount) +
-          ', Max: ' +
-          (fixedDepositProductData.maxDepositAmount
-            ? fixedDepositProductData.maxDepositAmount
-            : fixedDepositProductData.depositAmount) +
-          ')'
-      }}</span>
-    </div>
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
-      <span class="flex-60">{{ fixedDepositProductData.interestCompoundingPeriodType.value }}</span>
-    </div>
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
-      <span class="flex-60">{{ fixedDepositProductData.interestPostingPeriodType.value }}</span>
-    </div>
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Interest Calculated Using' | translate }}:</span>
-      <span class="flex-60">{{ fixedDepositProductData.interestCalculationType.value }}</span>
-    </div>
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Days in Year' | translate }}:</span>
-      <span class="flex-60">{{ fixedDepositProductData.interestCalculationDaysInYearType.value }}</span>
-    </div>
-
-    <h3 class="mat-h3 flex-100">{{ 'labels.heading.Settings' | translate }}</h3>
-
-    <mat-divider [inset]="true"></mat-divider>
-
-    @if (fixedDepositProductData.lockinPeriodFrequency) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
-        <span class="flex-60">
-          {{ fixedDepositProductData.lockinPeriodFrequency }}
-          {{ fixedDepositProductData.lockinPeriodFrequencyType.value }}</span
+    <div class="vsp-grid">
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Short Name' | translate }}</span>
+        <span class="vsp-v"
+          ><strong>{{ fixedDepositProductData.shortName }}</strong></span
         >
       </div>
-    }
-
-    @if (fixedDepositProductData.minDepositTerm) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
-        @if (fixedDepositProductData.minDepositTerm !== undefined) {
-          <span class="flex-60"
-            >{{ fixedDepositProductData.minDepositTerm }}
-            &nbsp;
-            {{ fixedDepositProductData.minDepositTermType.value }}</span
-          >
-        }
-      </div>
-    }
-
-    @if (fixedDepositProductData.maxDepositTerm) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Maximum Deposit Term' | translate }}:</span>
-        @if (fixedDepositProductData.maxDepositTerm !== undefined) {
-          <span class="flex-60"
-            >{{ fixedDepositProductData.maxDepositTerm }}
-            &nbsp;
-            {{ fixedDepositProductData.maxDepositTermType.value }}</span
-          >
-        }
-      </div>
-    }
-
-    @if (fixedDepositProductData.inMultiplesOfDepositTerm) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Deposit Term In multiple of' | translate }}:</span>
-        <span class="flex-60"
-          >{{ fixedDepositProductData.inMultiplesOfDepositTerm }}
-          -
-          {{ fixedDepositProductData.inMultiplesOfDepositTermType.value }}</span
-        >
-      </div>
-    }
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Apply Penal Interest (less)' | translate }}:</span>
-      <span class="flex-60">{{ fixedDepositProductData.preClosurePenalApplicable | yesNo }}</span>
-    </div>
-
-    @if (fixedDepositProductData.preClosurePenalApplicable) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Penal Interest' | translate }} (%):</span>
-        <span class="flex-60"
-          >{{ fixedDepositProductData.preClosurePenalInterest }} &nbsp; &nbsp; % &nbsp; &nbsp; On &nbsp;&nbsp;
-          {{ fixedDepositProductData.preClosurePenalInterestOnType.value }}</span
-        >
-      </div>
-    }
-
-    @if (fixedDepositProductData.minBalanceForInterestCalculation) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}:</span>
-        <span class="flex-60">{{ fixedDepositProductData.minBalanceForInterestCalculation | formatNumber }}</span>
-      </div>
-    }
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
-      <span class="flex-60">{{ fixedDepositProductData.withHoldTax | yesNo }}</span>
-    </div>
-
-    @if (fixedDepositProductData.withHoldTax) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Withhold Tax group' | translate }}:</span>
-        <span class="flex-60">{{ fixedDepositProductData.taxGroup.name }}</span>
-      </div>
-    }
-
-    @if (fixedDepositProductData.activeChart) {
-      <div class="responsive-column flex-100">
-        <h3 class="mat-h3 flex-100">{{ 'labels.heading.Interest Rate Chart' | translate }}</h3>
-        <mat-divider [inset]="true"></mat-divider>
-        <div class="responsive-column flex-100">
-          @if (fixedDepositProductData.activeChart.name) {
-            <div class="flex-100 layout-row">
-              <span class="flex-40">{{ 'labels.inputs.Name' | translate }}:</span>
-              <span class="flex-60">{{ fixedDepositProductData.activeChart.name }}</span>
-            </div>
-          }
-          @if (fixedDepositProductData.activeChart.description) {
-            <div class="flex-100 layout-row">
-              <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
-              <span class="flex-60">{{ fixedDepositProductData.activeChart.description }}</span>
-            </div>
-          }
-          <div class="flex-100 layout-row">
-            <span class="flex-40">{{ 'labels.inputs.From Date' | translate }}:</span>
-            <span class="flex-60">{{ fixedDepositProductData.activeChart.fromDate | dateFormat }}</span>
-          </div>
-          @if (fixedDepositProductData.activeChart.endDate) {
-            <div class="flex-100 layout-row">
-              <span class="flex-40">{{ 'labels.inputs.End Date' | translate }}:</span>
-              <span class="flex-60">{{ fixedDepositProductData.activeChart.endDate | dateFormat }}</span>
-            </div>
-          }
-          <div class="flex-100 layout-row">
-            <span class="flex-40">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
-            <span class="flex-60">{{ fixedDepositProductData.activeChart.isPrimaryGroupingByAmount | yesNo }}</span>
-          </div>
-          <table
-            class="mat-elevation-z1 flex-100"
-            mat-table
-            [dataSource]="fixedDepositProductData.activeChart.chartSlabs"
-            multiTemplateDataRows
-          >
-            <ng-container matColumnDef="period">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
-              <td mat-cell *matCellDef="let chartSlab">
-                @if (chartSlab.fromPeriod !== undefined) {
-                  <div>{{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }} {{ chartSlab.periodType.value }}</div>
-                }
-                @if (chartSlab.fromPeriod === undefined) {
-                  <div>&nbsp;</div>
-                }
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="amountRange">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
-              <td mat-cell *matCellDef="let chartSlab">
-                @if (chartSlab.amountRangeFrom !== undefined) {
-                  <div>{{ chartSlab.amountRangeFrom }} - {{ chartSlab.amountRangeTo }}</div>
-                }
-                @if (chartSlab.amountRangeFrom === undefined) {
-                  <div>&nbsp;</div>
-                }
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="annualInterestRate">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
-              <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate }} %</td>
-            </ng-container>
-            <ng-container matColumnDef="description">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
-              <td mat-cell *matCellDef="let chartSlab">
-                {{ chartSlab.description }}
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
-              <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-                <button
-                  mat-button
-                  color="primary"
-                  (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
-                >
-                  @if (expandChartSlabIndex !== chartSlabIndex) {
-                    <span>
-                      <fa-icon icon="eye" class="m-r-10"></fa-icon>
-                      {{ 'labels.buttons.View Incentives' | translate }}
-                    </span>
-                  }
-                  @if (expandChartSlabIndex === chartSlabIndex) {
-                    <span>
-                      <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
-                      {{ 'labels.buttons.Hide Incentives' | translate }}
-                    </span>
-                  }
-                </button>
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="incentives">
-              <td
-                mat-cell
-                *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
-                [attr.colspan]="chartSlabsDisplayedColumns.length"
-              >
-                <div
-                  class="incentives flex-100 layout-row-wrap"
-                  [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
-                >
-                  <mat-card class="layout-row-wrap flex-100">
-                    <h4 class="mat-h4 flex-23">
-                      {{ 'labels.heading.Incentives' | translate }}
-                    </h4>
-                    <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
-                      <ng-container matColumnDef="entityType">
-                        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
-                        <td mat-cell *matCellDef="let incentive">
-                          {{
-                            incentive.entityType
-                              | find: fixedDepositProductsTemplate.chartTemplate.entityTypeOptions : 'id' : 'value'
-                          }}
-                        </td>
-                      </ng-container>
-                      <ng-container matColumnDef="attributeName">
-                        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
-                        <td mat-cell *matCellDef="let incentive">
-                          {{
-                            incentive.attributeName
-                              | find: fixedDepositProductsTemplate.chartTemplate.attributeNameOptions : 'id' : 'value'
-                          }}
-                        </td>
-                      </ng-container>
-                      <ng-container matColumnDef="conditionType">
-                        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
-                        <td mat-cell *matCellDef="let incentive">
-                          {{
-                            incentive.conditionType
-                              | find: fixedDepositProductsTemplate.chartTemplate.conditionTypeOptions : 'id' : 'value'
-                          }}
-                        </td>
-                      </ng-container>
-                      <ng-container matColumnDef="attributeValue">
-                        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
-                        <td mat-cell *matCellDef="let incentive">
-                          @switch (incentive.attributeName) {
-                            @case (2) {
-                              <span>{{
-                                incentive.attributeValue
-                                  | find: fixedDepositProductsTemplate.chartTemplate.genderOptions : 'id' : 'name'
-                              }}</span>
-                            }
-                            @case (3) {
-                              <span>{{ incentive.attributeValue }}</span>
-                            }
-                            @case (4) {
-                              <span>{{
-                                incentive.attributeValue
-                                  | find: fixedDepositProductsTemplate.chartTemplate.clientTypeOptions : 'id' : 'name'
-                              }}</span>
-                            }
-                            @case (5) {
-                              <span>{{
-                                incentive.attributeValue
-                                  | find
-                                    : fixedDepositProductsTemplate.chartTemplate.clientClassificationOptions
-                                    : 'id'
-                                    : 'name'
-                              }}</span>
-                            }
-                          }
-                        </td>
-                      </ng-container>
-                      <ng-container matColumnDef="incentiveType">
-                        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
-                        <td mat-cell *matCellDef="let incentive">
-                          {{
-                            incentive.incentiveType
-                              | find: fixedDepositProductsTemplate.chartTemplate.incentiveTypeOptions : 'id' : 'value'
-                          }}
-                        </td>
-                      </ng-container>
-                      <ng-container matColumnDef="amount">
-                        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
-                        <td mat-cell *matCellDef="let incentive">
-                          {{ incentive.amount | formatNumber }}
-                        </td>
-                      </ng-container>
-                      <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                      <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
-                    </table>
-                  </mat-card>
-                </div>
-              </td>
-            </ng-container>
-            <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
-          </table>
+      @if (fixedDepositProductData.description) {
+        <div class="vsp-kv vsp-kv--span">
+          <span class="vsp-k">{{ 'labels.inputs.Description' | translate }}</span>
+          <span class="vsp-v">{{ fixedDepositProductData.description }}</span>
         </div>
-      </div>
-    }
+      }
+    </div>
+  </section>
 
-    @if (fixedDepositProductData.charges.length) {
-      <div class="layout-row-wrap responsive-column flex-100">
-        <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Charges' | translate }}</h3>
-        <mat-divider class="flex-100"></mat-divider>
-        <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="fixedDepositProductData.charges">
+  <!-- PRODUCT CLASSIFICATION -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--purple"><fa-icon icon="layer-group"></fa-icon></div>
+      <h3>Product Classification</h3>
+    </div>
+    <div class="vsp-grid">
+      @if (fixedDepositProductData.accountType) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Account Type' | translate }}</span>
+          <span class="vsp-v">{{ fixedDepositProductData.accountType }}</span>
+        </div>
+      }
+      @if (fixedDepositProductData.fdType) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.FD Type' | translate }}</span>
+          <span class="vsp-v">{{ fixedDepositProductData.fdType }}</span>
+        </div>
+      }
+      @if (fixedDepositProductData.glAccountName || fixedDepositProductData.glAccountId) {
+        <div class="vsp-kv">
+          <span class="vsp-k">GL Account (Liability)</span>
+          <span class="vsp-v">{{ fixedDepositProductData.glAccountName || fixedDepositProductData.glAccountId }}</span>
+        </div>
+      }
+      @if (fixedDepositProductData.effectiveTo) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Effective To</span>
+          <span class="vsp-v">{{ fixedDepositProductData.effectiveTo | dateFormat }}</span>
+        </div>
+      }
+      @if (fixedDepositProductData.endDate) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.End Date' | translate }}</span>
+          <span class="vsp-v">{{ fixedDepositProductData.endDate | dateFormat }}</span>
+        </div>
+      }
+      @if (fixedDepositProductData.shareLinkingEnabled !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Share Linking Enabled' | translate }}</span>
+          <span class="vsp-v">
+            <span
+              class="vsp-pill"
+              [class.vsp-pill--green]="fixedDepositProductData.shareLinkingEnabled"
+              [class.vsp-pill--gray]="!fixedDepositProductData.shareLinkingEnabled"
+            >
+              {{ fixedDepositProductData.shareLinkingEnabled | yesNo }}
+            </span>
+          </span>
+        </div>
+      }
+    </div>
+  </section>
+
+  <!-- CURRENCY -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--teal"><fa-icon icon="coins"></fa-icon></div>
+      <h3>{{ 'labels.inputs.Currency' | translate }}</h3>
+    </div>
+    <div class="vsp-grid">
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.heading.Currency' | translate }}</span>
+        <span class="vsp-v"
+          ><strong
+            >({{ fixedDepositProductData.currency.code }}) {{ fixedDepositProductData.currency.name }}</strong
+          ></span
+        >
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Decimal Places' | translate }}</span>
+        <span class="vsp-v">{{ fixedDepositProductData.currency.decimalPlaces }}</span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Currency in multiples of' | translate }}</span>
+        <span class="vsp-v">{{ fixedDepositProductData.currency.inMultiplesOf | formatNumber }}</span>
+      </div>
+      @if (fixedDepositProductData.dormancyAlert !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Dormancy Alert</span>
+          <span class="vsp-v">{{ fixedDepositProductData.dormancyAlert | yesNo }}</span>
+        </div>
+      }
+      @if (fixedDepositProductData.dormancyAlert) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Days to Inactive</span>
+          <span class="vsp-v">{{ fixedDepositProductData.daysToInactive }}</span>
+        </div>
+        <div class="vsp-kv">
+          <span class="vsp-k">Days to Dormancy</span>
+          <span class="vsp-v">{{ fixedDepositProductData.daysToDormancy }}</span>
+        </div>
+        <div class="vsp-kv">
+          <span class="vsp-k">Days to Escheat</span>
+          <span class="vsp-v">{{ fixedDepositProductData.daysToEscheat }}</span>
+        </div>
+      }
+      @if (fixedDepositProductData.nominationFacility !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Nomination Facility' | translate }}</span>
+          <span class="vsp-v">{{ fixedDepositProductData.nominationFacility | yesNo }}</span>
+        </div>
+      }
+      @if (fixedDepositProductData.autoDebitFacility !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Auto Debit Facility' | translate }}</span>
+          <span class="vsp-v">{{ fixedDepositProductData.autoDebitFacility | yesNo }}</span>
+        </div>
+      }
+    </div>
+  </section>
+
+  <!-- DEPOSIT AMOUNT -->
+  @if (
+    fixedDepositProductData.minDepositAmount !== undefined || fixedDepositProductData.maxDepositAmount !== undefined
+  ) {
+    <section class="vsp-section">
+      <div class="vsp-section-h">
+        <div class="vsp-section-ic vsp-section-ic--teal"><fa-icon icon="money-bill-alt"></fa-icon></div>
+        <h3>Deposit Amount</h3>
+      </div>
+      <div class="vsp-grid">
+        @if (fixedDepositProductData.minDepositAmount !== undefined) {
+          <div class="vsp-kv">
+            <span class="vsp-k">Minimum</span>
+            <span class="vsp-v">{{ fixedDepositProductData.minDepositAmount | formatNumber }}</span>
+          </div>
+        }
+        @if (fixedDepositProductData.maxDepositAmount !== undefined) {
+          <div class="vsp-kv">
+            <span class="vsp-k">Maximum</span>
+            <span class="vsp-v">{{ fixedDepositProductData.maxDepositAmount | formatNumber }}</span>
+          </div>
+        }
+      </div>
+    </section>
+  }
+
+  <!-- TERMS -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--amber"><fa-icon icon="percentage"></fa-icon></div>
+      <h3>{{ 'labels.heading.Terms' | translate }}</h3>
+    </div>
+    <div class="vsp-grid">
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Nominal Annual Interest Rate' | translate }} (%)</span>
+        <span class="vsp-v vsp-v--accent"
+          >{{ fixedDepositProductData.nominalAnnualInterestRate | formatNumber }}<span class="vsp-suffix">%</span></span
+        >
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Interest Compounding Period' | translate }}</span>
+        <span class="vsp-v">{{ fixedDepositProductData.interestCompoundingPeriodType?.value }}</span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Interest Posting Period' | translate }}</span>
+        <span class="vsp-v">{{ fixedDepositProductData.interestPostingPeriodType?.value }}</span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Interest Calculated Using' | translate }}</span>
+        <span class="vsp-v">{{ fixedDepositProductData.interestCalculationType?.value }}</span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Days in Year' | translate }}</span>
+        <span class="vsp-v">{{ fixedDepositProductData.interestCalculationDaysInYearType?.value }}</span>
+      </div>
+      @if (fixedDepositProductData.interestCalculateSelector) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Interest Calculation Selector</span>
+          <span class="vsp-v">{{ fixedDepositProductData.interestCalculateSelector }}</span>
+        </div>
+      }
+      @if (fixedDepositProductData.averagePeriod) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Average Period</span>
+          <span class="vsp-v">{{ fixedDepositProductData.averagePeriod }}</span>
+        </div>
+      }
+      <div class="vsp-kv">
+        <span class="vsp-k">Auto Interest Post</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="fixedDepositProductData.autoPost"
+            [class.vsp-pill--gray]="!fixedDepositProductData.autoPost"
+          >
+            {{ fixedDepositProductData.autoPost | yesNo }}
+          </span>
+        </span>
+      </div>
+      @if (fixedDepositProductData.frequencyFixDay !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Frequency (Fix Day)</span>
+          <span class="vsp-v">{{ fixedDepositProductData.frequencyFixDay }}</span>
+        </div>
+      }
+      @if (fixedDepositProductData.lastInterestDate) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Last Interest Date</span>
+          <span class="vsp-v">{{ fixedDepositProductData.lastInterestDate | dateFormat }}</span>
+        </div>
+      }
+    </div>
+  </section>
+
+  <!-- SETTINGS -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--indigo"><fa-icon icon="sliders-h"></fa-icon></div>
+      <h3>{{ 'labels.heading.Settings' | translate }}</h3>
+    </div>
+    <div class="vsp-grid">
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Loan Facility' | translate }}</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="fixedDepositProductData.loanFacility"
+            [class.vsp-pill--gray]="!fixedDepositProductData.loanFacility"
+          >
+            {{ fixedDepositProductData.loanFacility | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Premature Withdrawal Option' | translate }}</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="fixedDepositProductData.prematureWithdrawalOption"
+            [class.vsp-pill--gray]="!fixedDepositProductData.prematureWithdrawalOption"
+          >
+            {{ fixedDepositProductData.prematureWithdrawalOption | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Tenure Flexibility' | translate }}</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="fixedDepositProductData.tenureFlexibility"
+            [class.vsp-pill--gray]="!fixedDepositProductData.tenureFlexibility"
+          >
+            {{ fixedDepositProductData.tenureFlexibility | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Lien Marked' | translate }}</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="fixedDepositProductData.lienMarked"
+            [class.vsp-pill--gray]="!fixedDepositProductData.lienMarked"
+          >
+            {{ fixedDepositProductData.lienMarked | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="fixedDepositProductData.withdrawalFeeForTransfers"
+            [class.vsp-pill--gray]="!fixedDepositProductData.withdrawalFeeForTransfers"
+          >
+            {{ fixedDepositProductData.withdrawalFeeForTransfers | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Enable Lock-in Period</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="fixedDepositProductData.enableLockinPeriod"
+            [class.vsp-pill--gray]="!fixedDepositProductData.enableLockinPeriod"
+          >
+            {{ fixedDepositProductData.enableLockinPeriod | yesNo }}
+          </span>
+        </span>
+      </div>
+      @if (fixedDepositProductData.lockinPeriodFrequency !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Lock-in Period' | translate }}</span>
+          <span class="vsp-v"
+            >{{ fixedDepositProductData.lockinPeriodFrequency }}
+            {{ fixedDepositProductData.lockinPeriodFrequencyType?.value }}</span
+          >
+        </div>
+      }
+      @if (fixedDepositProductData.maturityInstructions !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Maturity Instructions</span>
+          <span class="vsp-v">
+            <span
+              class="vsp-pill"
+              [class.vsp-pill--green]="fixedDepositProductData.maturityInstructions"
+              [class.vsp-pill--gray]="!fixedDepositProductData.maturityInstructions"
+            >
+              {{ fixedDepositProductData.maturityInstructions | yesNo }}
+            </span>
+          </span>
+        </div>
+      }
+      <div class="vsp-kv">
+        <span class="vsp-k">Credit Maturity Proceeds</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="fixedDepositProductData.creditMaturityProceeds"
+            [class.vsp-pill--gray]="!fixedDepositProductData.creditMaturityProceeds"
+          >
+            {{ fixedDepositProductData.creditMaturityProceeds | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Penalty Grace Period (Missed Installments)</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="fixedDepositProductData.penaltyGracePeriodMissedInstallments"
+            [class.vsp-pill--gray]="!fixedDepositProductData.penaltyGracePeriodMissedInstallments"
+          >
+            {{ fixedDepositProductData.penaltyGracePeriodMissedInstallments | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Panel Request Applicable</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="fixedDepositProductData.panelRequestApplicable"
+            [class.vsp-pill--gray]="!fixedDepositProductData.panelRequestApplicable"
+          >
+            {{ fixedDepositProductData.panelRequestApplicable | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">No Penalty (Nominee / Heir Closure)</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="fixedDepositProductData.noPenaltyNomineeHeirClosure"
+            [class.vsp-pill--gray]="!fixedDepositProductData.noPenaltyNomineeHeirClosure"
+          >
+            {{ fixedDepositProductData.noPenaltyNomineeHeirClosure | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Deceased Settlement</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="fixedDepositProductData.deceasedSettlement"
+            [class.vsp-pill--gray]="!fixedDepositProductData.deceasedSettlement"
+          >
+            {{ fixedDepositProductData.deceasedSettlement | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Allow Debit Txn After Due Date</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="fixedDepositProductData.allowDebitTxnAfterDueDate"
+            [class.vsp-pill--gray]="!fixedDepositProductData.allowDebitTxnAfterDueDate"
+          >
+            {{ fixedDepositProductData.allowDebitTxnAfterDueDate | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Account Closed with Zero Balance in Day Closing</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="fixedDepositProductData.accountClosedZeroBalanceInDayClosing"
+            [class.vsp-pill--gray]="!fixedDepositProductData.accountClosedZeroBalanceInDayClosing"
+          >
+            {{ fixedDepositProductData.accountClosedZeroBalanceInDayClosing | yesNo }}
+          </span>
+        </span>
+      </div>
+      @if (fixedDepositProductData.minBalanceForInterestCalculation !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Min Balance for Interest Calculation</span>
+          <span class="vsp-v">{{ fixedDepositProductData.minBalanceForInterestCalculation | formatNumber }}</span>
+        </div>
+      }
+      @if (fixedDepositProductData.minDepositTerm !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Minimum Deposit Term' | translate }}</span>
+          <span class="vsp-v"
+            >{{ fixedDepositProductData.minDepositTerm }} {{ fixedDepositProductData.minDepositTermType?.value }}</span
+          >
+        </div>
+      }
+      @if (fixedDepositProductData.inMultiplesOfDepositTerm) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Deposit Term In multiple of' | translate }}</span>
+          <span class="vsp-v"
+            >{{ fixedDepositProductData.inMultiplesOfDepositTerm }}
+            {{ fixedDepositProductData.inMultiplesOfDepositTermType?.value }}</span
+          >
+        </div>
+      }
+      @if (fixedDepositProductData.maxDepositTerm) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Maximum Deposit Term' | translate }}</span>
+          <span class="vsp-v"
+            >{{ fixedDepositProductData.maxDepositTerm }} {{ fixedDepositProductData.maxDepositTermType?.value }}</span
+          >
+        </div>
+      }
+      @if (fixedDepositProductData.preClosurePenalApplicable) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Apply Penal Interest (less)' | translate }}</span>
+          <span class="vsp-v">{{ fixedDepositProductData.preClosurePenalApplicable | yesNo }}</span>
+        </div>
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Penal Interest' | translate }} (%)</span>
+          <span class="vsp-v"
+            >{{ fixedDepositProductData.preClosurePenalInterest }} % On
+            {{ fixedDepositProductData.preClosurePenalInterestOnType?.value }}</span
+          >
+        </div>
+      }
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="fixedDepositProductData.withHoldTax"
+            [class.vsp-pill--gray]="!fixedDepositProductData.withHoldTax"
+          >
+            {{ fixedDepositProductData.withHoldTax | yesNo }}
+          </span>
+        </span>
+      </div>
+      @if (fixedDepositProductData.withHoldTax) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Withhold Tax group' | translate }}</span>
+          <span class="vsp-v">{{ fixedDepositProductData.taxGroup?.name }}</span>
+        </div>
+      }
+    </div>
+  </section>
+
+  <!-- INTEREST RATE CHARTS -->
+  @if (fdSlabs.length) {
+    <section class="vsp-section">
+      <div class="vsp-section-h">
+        <div class="vsp-section-ic vsp-section-ic--amber"><fa-icon icon="chart-line"></fa-icon></div>
+        <h3>{{ 'labels.heading.Interest Rate Charts' | translate }}</h3>
+      </div>
+      <div class="vsp-table-wrap">
+        <table class="vsp-table" mat-table [dataSource]="fdSlabs">
+          <ng-container matColumnDef="srNo">
+            <th mat-header-cell *matHeaderCellDef>Sr.</th>
+            <td mat-cell *matCellDef="let slab">{{ slab.srNo }}</td>
+          </ng-container>
+          <ng-container matColumnDef="description">
+            <th mat-header-cell *matHeaderCellDef>Particular</th>
+            <td mat-cell *matCellDef="let slab">{{ slab.description }}</td>
+          </ng-container>
+          <ng-container matColumnDef="fromPeriod">
+            <th mat-header-cell *matHeaderCellDef>From</th>
+            <td mat-cell *matCellDef="let slab">{{ slab.fromPeriod }}</td>
+          </ng-container>
+          <ng-container matColumnDef="toPeriod">
+            <th mat-header-cell *matHeaderCellDef>To</th>
+            <td mat-cell *matCellDef="let slab">{{ slab.toPeriod ?? '—' }}</td>
+          </ng-container>
+          <ng-container matColumnDef="periodTypeLabel">
+            <th mat-header-cell *matHeaderCellDef>Period</th>
+            <td mat-cell *matCellDef="let slab">{{ slab.periodTypeLabel }}</td>
+          </ng-container>
+          <ng-container matColumnDef="annualInterestRate">
+            <th mat-header-cell *matHeaderCellDef>Rate (%)</th>
+            <td mat-cell *matCellDef="let slab">
+              <strong>{{ slab.annualInterestRate }}</strong>
+            </td>
+          </ng-container>
+          <tr mat-header-row *matHeaderRowDef="fdSlabColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: fdSlabColumns"></tr>
+        </table>
+      </div>
+    </section>
+  }
+
+  <!-- CHARGES -->
+  @if (fixedDepositProductData.charges?.length) {
+    <section class="vsp-section">
+      <div class="vsp-section-h">
+        <div class="vsp-section-ic vsp-section-ic--red"><fa-icon icon="receipt"></fa-icon></div>
+        <h3>{{ 'labels.inputs.Charges' | translate }}</h3>
+      </div>
+      <div class="vsp-table-wrap">
+        <table class="vsp-table" mat-table [dataSource]="fixedDepositProductData.charges">
           <ng-container matColumnDef="name">
             <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
-            <td mat-cell *matCellDef="let charge">
-              {{ charge.name }}
-            </td>
+            <td mat-cell *matCellDef="let charge">{{ charge.name }}</td>
           </ng-container>
           <ng-container matColumnDef="type">
             <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
-            <td mat-cell *matCellDef="let charge">
-              {{ charge.chargeCalculationType.value }}
-            </td>
+            <td mat-cell *matCellDef="let charge">{{ charge.chargeCalculationType?.value }}</td>
           </ng-container>
           <ng-container matColumnDef="amount">
             <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
-            <td mat-cell *matCellDef="let charge">
-              {{ charge.amount | formatNumber }}
-            </td>
+            <td mat-cell *matCellDef="let charge">{{ charge.amount | formatNumber }}</td>
           </ng-container>
           <ng-container matColumnDef="collectedon">
             <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
-            <td mat-cell *matCellDef="let charge">
-              {{ charge.chargeTimeType.value }}
-            </td>
+            <td mat-cell *matCellDef="let charge">{{ charge.chargeTimeType?.value }}</td>
           </ng-container>
           <tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
         </table>
       </div>
+    </section>
+  }
+
+  <!-- ACCOUNTING -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--green"><fa-icon icon="book"></fa-icon></div>
+      <h3>{{ 'labels.heading.Accounting' | translate }}</h3>
+    </div>
+    @if (!isNoneAccounting()) {
+      <mifosx-view-savings-accounting-details
+        [accountingRule]="fixedDepositProductData.accountingRule"
+        [accountingMappings]="fixedDepositProductData.accountingMappings"
+      ></mifosx-view-savings-accounting-details>
     }
-
-    <h3 class="mat-h3 flex-100">{{ 'labels.heading.Accounting' | translate }}</h3>
-
-    <mat-divider [inset]="true"></mat-divider>
-
-    <mifosx-view-savings-accounting-details
-      class="container"
-      [accountingRule]="fixedDepositProductData.accountingRule"
-      [accountingMappings]="fixedDepositProductData.accountingMappings"
-    >
-    </mifosx-view-savings-accounting-details>
-
-    @if (
-      fixedDepositProductData.advancedAccountingRules &&
-      (fixedDepositProductData.paymentChannelToFundSourceMappings?.length ||
-        fixedDepositProductData.feeToIncomeAccountMappings?.length ||
-        fixedDepositProductData.penaltyToIncomeAccountMappings?.length)
-    ) {
-      <div class="flex-100 layout-row-wrap layout-lt-md-column">
-        <h3 class="mat-h3 flex-100">{{ 'labels.heading.Advanced Accounting Rules' | translate }}</h3>
-        <mat-divider [inset]="true"></mat-divider>
-        <hr />
-        @if (fixedDepositProductData.paymentChannelToFundSourceMappings?.length) {
-          <div class="flex-100 layout-row-wrap layout-xs-column">
-            <h4 class="mat-h4 flex-100">
-              {{ 'labels.inputs.Configure Fund Sources for Payment Channels' | translate }}
-            </h4>
-            <table
-              class="mat-elevation-z1 flex-100"
-              mat-table
-              [dataSource]="fixedDepositProductData.paymentChannelToFundSourceMappings"
-            >
-              <ng-container matColumnDef="paymentTypeId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Type' | translate }}</th>
-                <td mat-cell *matCellDef="let paymentFundSource">
-                  {{ paymentFundSource.paymentType.name }}
-                </td>
-              </ng-container>
-              <ng-container matColumnDef="fundSourceAccountId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
-                <td mat-cell *matCellDef="let paymentFundSource">
-                  {{ paymentFundSource.fundSourceAccount.name }}
-                </td>
-              </ng-container>
-              <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
-            </table>
-          </div>
-        }
-        @if (fixedDepositProductData.feeToIncomeAccountMappings?.length) {
-          <div class="flex-100 layout-row-wrap layout-xs-column">
-            <h4 class="mat-h4 flex-100">{{ 'labels.inputs.Fees to Specific Income Accounts' | translate }}</h4>
-            <table
-              class="mat-elevation-z1 flex-100"
-              mat-table
-              [dataSource]="fixedDepositProductData.feeToIncomeAccountMappings"
-            >
-              <ng-container matColumnDef="chargeId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fees' | translate }}</th>
-                <td mat-cell *matCellDef="let feesIncome">
-                  {{ feesIncome.charge.name }}
-                </td>
-              </ng-container>
-              <ng-container matColumnDef="incomeAccountId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
-                <td mat-cell *matCellDef="let feesIncome">
-                  {{ feesIncome.incomeAccount.name }}
-                </td>
-              </ng-container>
-              <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
-            </table>
-          </div>
-        }
-        @if (fixedDepositProductData.penaltyToIncomeAccountMappings?.length) {
-          <div class="flex-100 layout-row-wrap layout-xs-column">
-            <h4 class="mat-h4 flex-100">
-              {{ 'labels.heading.Penalties to Specific Income Accounts' | translate }}
-            </h4>
-            <table
-              class="mat-elevation-z1 flex-100"
-              mat-table
-              [dataSource]="fixedDepositProductData.penaltyToIncomeAccountMappings"
-            >
-              <ng-container matColumnDef="chargeId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
-                <td mat-cell *matCellDef="let penaltyIncome">
-                  {{ penaltyIncome.charge.name }}
-                </td>
-              </ng-container>
-              <ng-container matColumnDef="incomeAccountId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
-                <td mat-cell *matCellDef="let penaltyIncome">
-                  {{ penaltyIncome.incomeAccount.name }}
-                </td>
-              </ng-container>
-              <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
-            </table>
-          </div>
-        }
-      </div>
-    }
-  </div>
+  </section>
 </div>
diff --git a/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.scss b/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.scss
index ed63d2d44..5b41b230d 100644
--- a/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.scss
+++ b/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.scss
@@ -6,77 +6,397 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-@use 'assets/styles/helper';
-@use 'assets/styles/colours' as *;
-@use 'assets/styles/product-view' as pv;
-
-@include pv.product-view-styles;
-
-/* FD-specific teal accent */
 :host {
-  --pv-accent: #0e7e6b;
-  --pv-accent-l: #ccfbf1;
+  --vsp-navy: #0b1e3d;
+  --vsp-blue: #1d4ed8;
+  --vsp-blue-l: #eff6ff;
+  --vsp-teal: #0e7e6b;
+  --vsp-teal-l: #ccfbf1;
+  --vsp-purple: #6d28d9;
+  --vsp-purple-l: #ede9fe;
+  --vsp-indigo: #3730a3;
+  --vsp-indigo-l: #e0e7ff;
+  --vsp-amber: #b45309;
+  --vsp-amber-l: #fef3c7;
+  --vsp-green: #15803d;
+  --vsp-green-l: #dcfce7;
+  --vsp-red: #c0392b;
+  --vsp-red-l: #fee2e2;
+  --vsp-pink: #be185d;
+  --vsp-pink-l: #fce7f3;
+  --vsp-g50: #f8fafc;
+  --vsp-g100: #f1f5f9;
+  --vsp-g200: #e2e8f0;
+  --vsp-g500: #64748b;
+  --vsp-g700: #334155;
+  --vsp-g900: #0f172a;
+
+  display: block;
+  font-family:
+    'DM Sans',
+    system-ui,
+    -apple-system,
+    sans-serif;
+  color: var(--vsp-g900);
+  font-size: 13.5px;
 }
 
-.container {
-  width: 100%;
+.vsp-root {
+  padding: 4px 4px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
 
-.tab-container {
-  padding: 1%;
-  margin: 1%;
+.vsp-hero {
+  background: linear-gradient(135deg, var(--vsp-navy) 0%, var(--vsp-blue) 100%);
+  border-radius: 14px;
+  padding: 22px 22px 22px 18px;
+  display: flex;
+  align-items: flex-start;
+  gap: 18px;
+  box-shadow:
+    0 10px 24px rgb(11 30 61 / 18%),
+    0 4px 10px rgb(11 30 61 / 12%);
+  color: #fff;
+  position: relative;
+  overflow: hidden;
 }
 
-.mat-h3 {
-  margin-top: 10px !important;
-  font-weight: 300;
-  color: $status-approved;
+.vsp-hero::before {
+  content: '';
+  position: absolute;
+  top: -60px;
+  right: -60px;
+  width: 240px;
+  height: 240px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgb(255 255 255 / 8%) 0%, transparent 70%);
+  pointer-events: none;
 }
 
-.mat-elevation-z1 {
-  margin: 1em 0 1.5em;
+.vsp-hero-left {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  flex: 1;
+  min-width: 0;
 }
 
-h2,
-h3,
-h4 {
-  margin: 0;
-  font-weight: 500;
+.vsp-hero-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  background: rgb(255 255 255 / 16%);
+  border: 1px solid rgb(255 255 255 / 22%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  flex-shrink: 0;
 }
 
-span {
-  margin: 0.5em 0;
+.vsp-hero-text {
+  flex: 1;
+  min-width: 0;
 }
 
-mat-divider {
-  margin: 0 0 0.5em;
+.vsp-hero-eyebrow {
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: rgb(255 255 255 / 70%);
+  margin-bottom: 4px;
 }
 
-.margin-t {
-  margin-top: 1em;
+.vsp-hero-title {
+  margin: 0 0 10px;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  color: #fff;
+  line-height: 1.2;
 }
 
-table {
-  width: 100%;
+.vsp-hero-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
 
-  tr.incentives-row {
-    height: 0;
+.vsp-hero-desc {
+  margin: 12px 0 0;
+  font-size: 13px;
+  color: rgb(255 255 255 / 82%);
+  line-height: 1.5;
+  max-width: 720px;
+}
 
-    > td {
-      padding: 0;
-    }
+.vsp-edit-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 38px;
+  padding: 0 16px;
+  border-radius: 10px;
+  background: rgb(255 255 255 / 14%);
+  color: #fff;
+  border: 1px solid rgb(255 255 255 / 28%);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  font-family: inherit;
+  flex-shrink: 0;
+  transition: all 0.16s ease;
 
-    .incentives {
-      overflow: hidden;
-    }
+  fa-icon {
+    font-size: 12px;
+  }
 
-    .mat-card {
-      border-radius: 0;
-
-      > h4 {
-        font-weight: 500;
-        margin: 0.5em 0 0;
-      }
-    }
+  &:hover {
+    background: rgb(255 255 255 / 24%);
+    border-color: rgb(255 255 255 / 50%);
+  }
+}
+
+.vsp-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-family: inherit;
+
+  fa-icon {
+    font-size: 9.5px;
+  }
+
+  &--code {
+    background: rgb(255 255 255 / 18%);
+    color: #fff;
+    border: 1px solid rgb(255 255 255 / 24%);
+    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
+  }
+
+  &--teal {
+    background: var(--vsp-teal-l);
+    color: var(--vsp-teal);
+    border: 1px solid #99f6e4;
+  }
+
+  &--blue {
+    background: var(--vsp-blue-l);
+    color: var(--vsp-blue);
+    border: 1px solid #dbeafe;
+  }
+
+  &--green {
+    background: var(--vsp-green-l);
+    color: var(--vsp-green);
+    border: 1px solid #bbf7d0;
+  }
+
+  &--amber {
+    background: var(--vsp-amber-l);
+    color: var(--vsp-amber);
+    border: 1px solid #fde68a;
+  }
+
+  &--red {
+    background: var(--vsp-red-l);
+    color: var(--vsp-red);
+    border: 1px solid #fecaca;
+  }
+
+  &--gray {
+    background: var(--vsp-g100);
+    color: var(--vsp-g700);
+    border: 1px solid var(--vsp-g200);
+  }
+}
+
+.vsp-section {
+  background: #fff;
+  border: 1px solid var(--vsp-g200);
+  border-radius: 12px;
+  padding: 16px 20px;
+  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
+}
+
+.vsp-section-h {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px dashed var(--vsp-g200);
+
+  h3 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--vsp-g900);
+    letter-spacing: 0.02em;
+  }
+}
+
+.vsp-section-ic {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  flex-shrink: 0;
+
+  &--blue {
+    background: var(--vsp-blue-l);
+    color: var(--vsp-blue);
+  }
+
+  &--teal {
+    background: var(--vsp-teal-l);
+    color: var(--vsp-teal);
+  }
+
+  &--purple {
+    background: var(--vsp-purple-l);
+    color: var(--vsp-purple);
+  }
+
+  &--indigo {
+    background: var(--vsp-indigo-l);
+    color: var(--vsp-indigo);
+  }
+
+  &--amber {
+    background: var(--vsp-amber-l);
+    color: var(--vsp-amber);
+  }
+
+  &--green {
+    background: var(--vsp-green-l);
+    color: var(--vsp-green);
+  }
+
+  &--red {
+    background: var(--vsp-red-l);
+    color: var(--vsp-red);
+  }
+
+  &--pink {
+    background: var(--vsp-pink-l);
+    color: var(--vsp-pink);
+  }
+}
+
+.vsp-sub-h {
+  margin: 16px 0 10px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--vsp-g700);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.vsp-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px 24px;
+}
+
+@media (width <= 600px) {
+  .vsp-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.vsp-kv {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--vsp-g100);
+
+  &--span {
+    grid-column: 1 / -1;
+  }
+}
+
+.vsp-k {
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--vsp-g500);
+}
+
+.vsp-v {
+  font-size: 13.5px;
+  color: var(--vsp-g900);
+  font-weight: 500;
+  word-break: break-word;
+
+  strong {
+    font-weight: 700;
+  }
+}
+
+.vsp-v--accent {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--vsp-blue);
+  letter-spacing: 0.01em;
+}
+
+.vsp-suffix {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vsp-g500);
+  margin-left: 4px;
+}
+
+.vsp-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--vsp-g200);
+  border-radius: 10px;
+  margin-top: 4px;
+}
+
+.vsp-table {
+  width: 100%;
+  background: #fff;
+
+  th.mat-mdc-header-cell {
+    background: var(--vsp-g50);
+    color: var(--vsp-g700);
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 11px 14px;
+    border-bottom: 1px solid var(--vsp-g200);
+    white-space: nowrap;
+  }
+
+  td.mat-mdc-cell {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--vsp-g100);
+    font-size: 12.5px;
+    color: var(--vsp-g900);
+  }
+
+  tbody tr:last-child td.mat-mdc-cell {
+    border-bottom: 0;
   }
 }
diff --git a/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.ts b/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.ts
index 6952ed868..6ec2fffe9 100644
--- a/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.ts
+++ b/src/app/products/fixed-deposit-products/view-fixed-deposit-product/fixed-deposit-general-tab/fixed-deposit-general-tab.component.ts
@@ -8,6 +8,7 @@
 
 import { Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
+import { trigger, state, style, animate, transition } from '@angular/animations';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { MatDivider } from '@angular/material/divider';
 import {
@@ -36,6 +37,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   selector: 'mifosx-fixed-deposit-general-tab',
   templateUrl: './fixed-deposit-general-tab.component.html',
   styleUrls: ['./fixed-deposit-general-tab.component.scss'],
+  animations: [
+    trigger('expandChartSlab', [
+      state('collapsed', style({ height: '0px', overflow: 'hidden', opacity: 0 })),
+      state('expanded', style({ height: '*', overflow: 'visible', opacity: 1 })),
+      transition('collapsed <=> expanded', animate('200ms ease'))
+    ])
+  ],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     RouterLink,
@@ -80,6 +88,24 @@ export class FixedDepositGeneralTabComponent implements OnInit {
     'periodTypeLabel',
     'annualInterestRate'
   ];
+  readonly chartSlabsDisplayedColumns = [
+    'period',
+    'amountRange',
+    'annualInterestRate',
+    'description',
+    'actions'
+  ];
+  readonly chartSlabsIncentivesDisplayedColumns = ['incentives'];
+  readonly incentivesDisplayedColumns = [
+    'entityType',
+    'attributeName',
+    'conditionType',
+    'attributeValue',
+    'incentiveType',
+    'amount'
+  ];
+  expandChartSlabIndex: number | null = null;
+
   readonly chargesDisplayedColumns = [
     'name',
     'type',
diff --git a/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
index daadc5f00..91b2336e0 100644
--- a/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
+++ b/src/app/products/loan-products/view-loan-product/general-tab/general-tab.component.html
@@ -53,7 +53,6 @@
     <mifosx-loan-product-summary
       [action]="'view'"
       [loanProduct]="loanProduct"
-      [useDueForRepaymentsConfigurations]="useDueForRepaymentsConfigurations"
       [paymentAllocations]="loanProduct.paymentAllocation"
       [creditAllocations]="loanProduct.creditAllocation"
       [supportedInterestRefundTypes]="loanProduct.supportedInterestRefundTypes"
diff --git a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.html b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.html
index 176eae34f..648ed8a58 100644
--- a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.html
+++ b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.html
@@ -6,551 +6,720 @@
   file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 
-<div class="pv-root">
+<div class="vsp-root">
   <!-- HERO -->
-  <div class="pv-hero">
-    <div class="pv-hero-left">
-      <div class="pv-hero-icon"><fa-icon icon="coins"></fa-icon></div>
-      <div class="pv-hero-text">
-        <div class="pv-hero-eyebrow">Recurring Deposit Product</div>
-        <h2 class="pv-hero-title">{{ recurringDepositProduct.name }}</h2>
-        <div class="pv-hero-meta">
-          <span class="pv-pill pv-pill--code">{{ recurringDepositProduct.shortName }}</span>
+  <div class="vsp-hero">
+    <div class="vsp-hero-left">
+      <div class="vsp-hero-icon"><fa-icon icon="calendar-check"></fa-icon></div>
+      <div class="vsp-hero-text">
+        <div class="vsp-hero-eyebrow">Recurring Deposit Product</div>
+        <h2 class="vsp-hero-title">{{ recurringDepositProduct.name }}</h2>
+        <div class="vsp-hero-meta">
+          <span class="vsp-pill vsp-pill--code">{{ recurringDepositProduct.shortName }}</span>
           @if (recurringDepositProduct.currency?.code) {
-            <span class="pv-pill pv-pill--teal">{{ recurringDepositProduct.currency.code }}</span>
+            <span class="vsp-pill vsp-pill--teal">{{ recurringDepositProduct.currency.code }}</span>
           }
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="!recurringDepositProduct.endDate"
+            [class.vsp-pill--amber]="recurringDepositProduct.endDate"
+          >
+            <fa-icon [icon]="recurringDepositProduct.endDate ? 'times-circle' : 'check-circle'"></fa-icon>
+            {{ recurringDepositProduct.endDate ? 'Inactive' : 'Active' }}
+          </span>
         </div>
         @if (recurringDepositProduct.description) {
-          <p class="pv-hero-desc">{{ recurringDepositProduct.description }}</p>
+          <p class="vsp-hero-desc">{{ recurringDepositProduct.description }}</p>
         }
       </div>
     </div>
     <button
-      class="pv-edit-btn"
+      class="vsp-edit-btn"
       type="button"
       [routerLink]="['../edit']"
       *mifosxHasPermission="'UPDATE_RECURRINGDEPOSITPRODUCT'"
     >
-      <fa-icon icon="edit"></fa-icon><span>{{ 'labels.buttons.Edit' | translate }}</span>
+      <fa-icon icon="edit"></fa-icon>
+      <span>{{ 'labels.buttons.Edit' | translate }}</span>
     </button>
   </div>
 
-  <div class="pv-legacy">
-    <!-- ===== DETAILS ===== -->
-    <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Details' | translate }}</h3>
-    <mat-divider class="flex-100"></mat-divider>
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Short Name' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositProduct.shortName }}</span>
+  <!-- DETAILS -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--blue"><fa-icon icon="info-circle"></fa-icon></div>
+      <h3>{{ 'labels.inputs.Details' | translate }}</h3>
     </div>
-
-    @if (recurringDepositProduct.description) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
-        <span class="flex-60">{{ recurringDepositProduct.description }}</span>
-      </div>
-    }
-
-    <!-- Product Classification (inside Details tab) -->
-    <h3 class="mat-h3 flex-100">Product Classification</h3>
-    <mat-divider class="flex-100"></mat-divider>
-
-    @if (recurringDepositProduct.accountType) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Account Type:</span>
-        <span class="flex-60">{{ recurringDepositProduct.accountType }}</span>
-      </div>
-    }
-    @if (recurringDepositProduct.customerSegment) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Customer Segment:</span>
-        <span class="flex-60">{{ recurringDepositProduct.customerSegment }}</span>
-      </div>
-    }
-    @if (recurringDepositProduct.glAccountId) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">GL Account (Liability):</span>
-        <span class="flex-60">{{ recurringDepositProduct.glAccountName || recurringDepositProduct.glAccountId }}</span>
-      </div>
-    }
-    @if (recurringDepositProduct.effectiveTo) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Effective To:</span>
-        <span class="flex-60">{{ recurringDepositProduct.effectiveTo | dateFormat }}</span>
-      </div>
-    }
-    @if (recurringDepositProduct.endDate) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">End Date:</span>
-        <span class="flex-60">{{ recurringDepositProduct.endDate | dateFormat }}</span>
-      </div>
-    }
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Introducer Required:</span>
-      <span class="flex-60">{{ recurringDepositProduct.introducerRequired | yesNo }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Deposit Account Link:</span>
-      <span class="flex-60">{{ recurringDepositProduct.shareLinkingEnabled | yesNo }}</span>
-    </div>
-
-    <!-- ===== CURRENCY ===== -->
-    <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Currency' | translate }}</h3>
-    <mat-divider class="flex-100"></mat-divider>
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Currency' | translate }}:</span>
-      <span class="flex-60"
-        >({{ recurringDepositProduct.currency.code }}) {{ recurringDepositProduct.currency.name }}</span
-      >
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Decimal Places' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositProduct.currency.decimalPlaces }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Dormancy Alert:</span>
-      <span class="flex-60">{{ recurringDepositProduct.dormancyAlert | yesNo }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Balance Swap Option:</span>
-      <span class="flex-60">{{ recurringDepositProduct.balanceSwapOption | yesNo }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">MSME:</span>
-      <span class="flex-60">{{ recurringDepositProduct.msme | yesNo }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Nomination Facility:</span>
-      <span class="flex-60">{{ recurringDepositProduct.nominationFacility | yesNo }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Auto Debit Facility:</span>
-      <span class="flex-60">{{ recurringDepositProduct.autoDebitFacility | yesNo }}</span>
-    </div>
-
-    <!-- ===== TERMS ===== -->
-    <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Terms' | translate }}</h3>
-    <mat-divider class="flex-100"></mat-divider>
-
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Deposit Amount' | translate }}:</span>
-      <span class="flex-60">{{
-        recurringDepositProduct.depositAmount +
-          ' (Min: ' +
-          (recurringDepositProduct.minDepositAmount || recurringDepositProduct.depositAmount) +
-          ', Max: ' +
-          (recurringDepositProduct.maxDepositAmount || recurringDepositProduct.depositAmount) +
-          ')'
-      }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Nominal Annual Interest' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositProduct.nominalAnnualInterestRate | formatNumber }} %</span>
-    </div>
-    @if (recurringDepositProduct.effectiveDate) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Effective Date:</span>
-        <span class="flex-60">{{ recurringDepositProduct.effectiveDate | dateFormat }}</span>
-      </div>
-    }
-    @if (recurringDepositProduct.interestCalculationTypeName) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Interest Calculation Type' | translate }}:</span>
-        <span class="flex-60">{{ recurringDepositProduct.interestCalculationTypeName }}</span>
-      </div>
-    }
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Interest Calculate:</span>
-      <span class="flex-60">{{ recurringDepositProduct.interestCalculationType?.value }}</span>
-    </div>
-    @if (recurringDepositProduct.averagePeriod) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Average Period:</span>
-        <span class="flex-60">{{ recurringDepositProduct.averagePeriod }}</span>
-      </div>
-    }
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositProduct.interestPostingPeriodType.value }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositProduct.interestCompoundingPeriodType.value }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Days in Year' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositProduct.interestCalculationDaysInYearType.value }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Auto Post:</span>
-      <span class="flex-60">{{ recurringDepositProduct.autoPost | yesNo }}</span>
-    </div>
-    @if (recurringDepositProduct.frequencyFixDay) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Frequency (Fix Day):</span>
-        <span class="flex-60">{{ recurringDepositProduct.frequencyFixDay }}</span>
-      </div>
-    }
-    @if (recurringDepositProduct.lastInterestDate) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">Last Interest Date:</span>
-        <span class="flex-60">{{ recurringDepositProduct.lastInterestDate | dateFormat }}</span>
-      </div>
-    }
-
-    <!-- ===== SETTINGS ===== -->
-    <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Settings' | translate }}</h3>
-    <mat-divider class="flex-100"></mat-divider>
-
-    <!-- Premature option -->
-    <h4 class="mat-h4 flex-100">Premature Option</h4>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Loan Facility:</span>
-      <span class="flex-60">{{ recurringDepositProduct.loanFacility | yesNo }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Premature Withdrawal Option:</span>
-      <span class="flex-60">{{ recurringDepositProduct.prematureWithdrawalOption | yesNo }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Tenure Flexibility:</span>
-      <span class="flex-60">{{ recurringDepositProduct.tenureFlexibility | yesNo }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Lien Marked:</span>
-      <span class="flex-60">{{ recurringDepositProduct.lienMarked | yesNo }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositProduct.withdrawalFeeForTransfers | yesNo }}</span>
-    </div>
-
-    <!-- Lock-in Period -->
-    <h4 class="mat-h4 flex-100">{{ 'labels.inputs.Lock-in Period' | translate }}</h4>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Enable Lock-in Period:</span>
-      <span class="flex-60">{{ recurringDepositProduct.enableLockinPeriod | yesNo }}</span>
-    </div>
-    @if (recurringDepositProduct.lockinPeriodFrequency) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
-        <span class="flex-60"
-          >{{ recurringDepositProduct.lockinPeriodFrequency }}
-          {{ recurringDepositProduct.lockinPeriodFrequencyType?.value }}</span
+    <div class="vsp-grid">
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Short Name' | translate }}</span>
+        <span class="vsp-v"
+          ><strong>{{ recurringDepositProduct.shortName }}</strong></span
         >
       </div>
-    }
-
-    <!-- Maturity Instructions -->
-    <h4 class="mat-h4 flex-100">Maturity Instructions</h4>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Maturity Instructions:</span>
-      <span class="flex-60">{{ recurringDepositProduct.maturityInstructions | yesNo }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Credit Maturity Proceeds:</span>
-      <span class="flex-60">{{ recurringDepositProduct.creditMaturityProceeds | yesNo }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Penalty Grace Period (Missed Installments):</span>
-      <span class="flex-60">{{ recurringDepositProduct.penaltyGracePeriodMissedInstallments | yesNo }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Panel Request Applicable:</span>
-      <span class="flex-60">{{ recurringDepositProduct.panelRequestApplicable | yesNo }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">No Penalty (Nominee / Heir Closure):</span>
-      <span class="flex-60">{{ recurringDepositProduct.noPenaltyNomineeHeirClosure | yesNo }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Deceased Settlement:</span>
-      <span class="flex-60">{{ recurringDepositProduct.deceasedSettlement | yesNo }}</span>
-    </div>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Allow Debit Txn After Due Date:</span>
-      <span class="flex-60">{{ recurringDepositProduct.allowDebitTxnAfterDueDate | yesNo }}</span>
-    </div>
-
-    <!-- Additional Rules -->
-    <h4 class="mat-h4 flex-100">Additional Rules</h4>
-    <div class="flex-100 layout-row">
-      <span class="flex-40">Account Closed Zero Balance in Day Closing:</span>
-      <span class="flex-60">{{ recurringDepositProduct.accountClosedZeroBalanceInDayClosing | yesNo }}</span>
-    </div>
-    @if (recurringDepositProduct.minBalanceForInterestCalculation) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}:</span>
-        <span class="flex-60">{{ recurringDepositProduct.minBalanceForInterestCalculation | formatNumber }}</span>
-      </div>
-    }
-
-    @if (recurringDepositProduct.minDepositTerm) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Minimum Deposit Term' | translate }}:</span>
-        <span class="flex-60"
-          >{{ recurringDepositProduct.minDepositTerm }} {{ recurringDepositProduct.minDepositTermType?.value }}</span
-        >
-      </div>
-    }
-    @if (recurringDepositProduct.maxDepositTerm) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Maximum Deposit Term' | translate }}:</span>
-        <span class="flex-60"
-          >{{ recurringDepositProduct.maxDepositTerm }} {{ recurringDepositProduct.maxDepositTermType?.value }}</span
-        >
-      </div>
-    }
-    @if (recurringDepositProduct.inMultipleOfDepositTerm) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Deposit Term In multiple of' | translate }}:</span>
-        <span class="flex-60"
-          >{{ recurringDepositProduct.inMultipleOfDepositTerm }} -
-          {{ recurringDepositProduct.inMultipleOfDepositTermType?.value }}</span
-        >
-      </div>
-    }
-    @if (recurringDepositProduct.isMandatoryDeposit !== undefined) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Recurring Deposit Type' | translate }}:</span>
-        <span class="flex-60">{{
-          recurringDepositProduct.isMandatoryDeposit
-            ? ('labels.text.Mandatory' | translate)
-            : ('labels.text.Voluntary' | translate)
-        }}</span>
-      </div>
-    }
-    @if (recurringDepositProduct.preClosurePenalInterest) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Apply penal interest (less)' | translate }}:</span>
-        <span class="flex-60"
-          >{{ recurringDepositProduct.preClosurePenalInterest }}% On
-          {{ recurringDepositProduct.preClosurePenalInterestOnType?.value }}</span
-        >
-      </div>
-    }
-    <div class="flex-100 layout-row">
-      <span class="flex-40">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}:</span>
-      <span class="flex-60">{{ recurringDepositProduct.withHoldTax | yesNo }}</span>
-    </div>
-    @if (recurringDepositProduct.withHoldTax) {
-      <div class="flex-100 layout-row">
-        <span class="flex-40">{{ 'labels.inputs.Tax Group' | translate }}:</span>
-        <span class="flex-60">{{ recurringDepositProduct.taxGroup?.name }}</span>
-      </div>
-    }
-
-    <!-- ===== INTEREST RATE CHART ===== -->
-    @if (recurringDepositProduct.activeChart) {
-      <div class="layout-row-wrap responsive-column flex-100">
-        <h3 class="mat-h3 flex-100">{{ 'labels.heading.Interest Rate Charts' | translate }}</h3>
-        <mat-divider class="flex-100"></mat-divider>
-        <div class="layout-row-wrap responsive-column flex-100">
-          @if (recurringDepositProduct.activeChart.name) {
-            <div class="flex-100 layout-row">
-              <span class="flex-40">{{ 'labels.inputs.Name' | translate }}:</span>
-              <span class="flex-60">{{ recurringDepositProduct.activeChart.name }}</span>
-            </div>
-          }
-          <div class="flex-100 layout-row">
-            <span class="flex-40">{{ 'labels.inputs.Valid from Date' | translate }}:</span>
-            <span class="flex-60">{{ recurringDepositProduct.activeChart.fromDate | dateFormat }}</span>
-          </div>
-          @if (recurringDepositProduct.activeChart.endDate) {
-            <div class="flex-100 layout-row">
-              <span class="flex-40">{{ 'labels.inputs.End Date' | translate }}:</span>
-              <span class="flex-60">{{ recurringDepositProduct.activeChart.endDate | dateFormat }}</span>
-            </div>
-          }
-          @if (recurringDepositProduct.activeChart.description) {
-            <div class="flex-100 layout-row">
-              <span class="flex-40">{{ 'labels.inputs.Description' | translate }}:</span>
-              <span class="flex-60">{{ recurringDepositProduct.activeChart.description }}</span>
-            </div>
-          }
-          <div class="flex-100 layout-row">
-            <span class="flex-40">{{ 'labels.inputs.Primary Grouping by Amount' | translate }}:</span>
-            <span class="flex-60">{{ recurringDepositProduct.activeChart.isPrimaryGroupingByAmount | yesNo }}</span>
-          </div>
-          <table
-            class="mat-elevation-z1 flex-100"
-            mat-table
-            [dataSource]="recurringDepositProduct.activeChart.chartSlabs"
-            multiTemplateDataRows
-          >
-            <ng-container matColumnDef="period">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Period' | translate }}</th>
-              <td mat-cell *matCellDef="let chartSlab">
-                @if (chartSlab.fromPeriod !== undefined) {
-                  <div>{{ chartSlab.fromPeriod }} - {{ chartSlab.toPeriod }} {{ chartSlab.periodType.value }}</div>
-                }
-                @if (chartSlab.fromPeriod === undefined) {
-                  <div>&nbsp;</div>
-                }
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="amountRange">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount Range' | translate }}</th>
-              <td mat-cell *matCellDef="let chartSlab">
-                @if (chartSlab.amountRangeFrom !== undefined) {
-                  <div>{{ chartSlab.amountRangeFrom }} - {{ chartSlab.amountRangeTo }}</div>
-                }
-                @if (chartSlab.amountRangeFrom === undefined) {
-                  <div>&nbsp;</div>
-                }
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="annualInterestRate">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Interest' | translate }}</th>
-              <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.annualInterestRate }}</td>
-            </ng-container>
-            <ng-container matColumnDef="description">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Description' | translate }}</th>
-              <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
-            </ng-container>
-            <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
-              <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
-                <button
-                  mat-button
-                  color="primary"
-                  (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
-                >
-                  @if (expandChartSlabIndex !== chartSlabIndex) {
-                    <span
-                      ><fa-icon icon="eye" class="m-r-10"></fa-icon
-                      >{{ 'labels.buttons.View Incentives' | translate }}</span
-                    >
-                  }
-                  @if (expandChartSlabIndex === chartSlabIndex) {
-                    <span
-                      ><fa-icon icon="eye-slash" class="m-r-10"></fa-icon
-                      >{{ 'labels.buttons.Hide Incentives' | translate }}</span
-                    >
-                  }
-                </button>
-              </td>
-            </ng-container>
-            <ng-container matColumnDef="incentives">
-              <td
-                mat-cell
-                *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
-                [attr.colspan]="chartSlabsDisplayedColumns.length"
-              >
-                <div
-                  class="incentives flex-100 layout-row-wrap"
-                  [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
-                >
-                  <mat-card class="layout-row-wrap flex-100">
-                    <h4 class="mat-h4 flex-23">{{ 'labels.heading.Incentives' | translate }}</h4>
-                    <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
-                      <ng-container matColumnDef="entityType">
-                        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
-                        <td mat-cell *matCellDef="let incentive">
-                          {{
-                            incentive.entityType
-                              | find: recurringDepositProductTemplate.chartTemplate.entityTypeOptions : 'id' : 'value'
-                          }}
-                        </td>
-                      </ng-container>
-                      <ng-container matColumnDef="attributeName">
-                        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
-                        <td mat-cell *matCellDef="let incentive">
-                          {{
-                            incentive.attributeName
-                              | find
-                                : recurringDepositProductTemplate.chartTemplate.attributeNameOptions
-                                : 'id'
-                                : 'value'
-                          }}
-                        </td>
-                      </ng-container>
-                      <ng-container matColumnDef="conditionType">
-                        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
-                        <td mat-cell *matCellDef="let incentive">
-                          {{
-                            incentive.conditionType
-                              | find
-                                : recurringDepositProductTemplate.chartTemplate.conditionTypeOptions
-                                : 'id'
-                                : 'value'
-                          }}
-                        </td>
-                      </ng-container>
-                      <ng-container matColumnDef="attributeValue">
-                        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
-                        <td mat-cell *matCellDef="let incentive">
-                          @switch (incentive.attributeName) {
-                            @case (2) {
-                              <span>{{
-                                incentive.attributeValue
-                                  | find: recurringDepositProductTemplate.chartTemplate.genderOptions : 'id' : 'name'
-                              }}</span>
-                            }
-                            @case (3) {
-                              <span>{{ incentive.attributeValue }}</span>
-                            }
-                            @case (4) {
-                              <span>{{
-                                incentive.attributeValue
-                                  | find
-                                    : recurringDepositProductTemplate.chartTemplate.clientTypeOptions
-                                    : 'id'
-                                    : 'name'
-                              }}</span>
-                            }
-                            @case (5) {
-                              <span>{{
-                                incentive.attributeValue
-                                  | find
-                                    : recurringDepositProductTemplate.chartTemplate.clientClassificationOptions
-                                    : 'id'
-                                    : 'name'
-                              }}</span>
-                            }
-                          }
-                        </td>
-                      </ng-container>
-                      <ng-container matColumnDef="incentiveType">
-                        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
-                        <td mat-cell *matCellDef="let incentive">
-                          {{
-                            incentive.incentiveType
-                              | find
-                                : recurringDepositProductTemplate.chartTemplate.incentiveTypeOptions
-                                : 'id'
-                                : 'value'
-                          }}
-                        </td>
-                      </ng-container>
-                      <ng-container matColumnDef="amount">
-                        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
-                        <td mat-cell *matCellDef="let incentive">{{ incentive.amount }}</td>
-                      </ng-container>
-                      <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
-                      <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
-                    </table>
-                  </mat-card>
-                </div>
-              </td>
-            </ng-container>
-            <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
-          </table>
-          <mat-divider class="flex-100"></mat-divider>
+      @if (recurringDepositProduct.description) {
+        <div class="vsp-kv vsp-kv--span">
+          <span class="vsp-k">{{ 'labels.inputs.Description' | translate }}</span>
+          <span class="vsp-v">{{ recurringDepositProduct.description }}</span>
         </div>
-      </div>
-    }
+      }
+    </div>
+  </section>
 
-    <!-- ===== CHARGES ===== -->
-    @if (recurringDepositProduct.charges.length) {
-      <div class="layout-row-wrap responsive-column flex-100">
-        <h3 class="mat-h3 flex-100">{{ 'labels.heading.Charges' | translate }}</h3>
-        <mat-divider class="flex-100"></mat-divider>
-        <table class="flex-100 mat-elevation-z1" mat-table [dataSource]="recurringDepositProduct.charges">
+  <!-- PRODUCT CLASSIFICATION -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--purple"><fa-icon icon="layer-group"></fa-icon></div>
+      <h3>Product Classification</h3>
+    </div>
+    <div class="vsp-grid">
+      @if (recurringDepositProduct.accountType) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Account Type</span>
+          <span class="vsp-v">{{ recurringDepositProduct.accountType }}</span>
+        </div>
+      }
+      @if (recurringDepositProduct.customerSegment) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Customer Segment</span>
+          <span class="vsp-v">{{ recurringDepositProduct.customerSegment }}</span>
+        </div>
+      }
+      @if (recurringDepositProduct.glAccountId) {
+        <div class="vsp-kv">
+          <span class="vsp-k">GL Account (Liability)</span>
+          <span class="vsp-v">{{ recurringDepositProduct.glAccountName || recurringDepositProduct.glAccountId }}</span>
+        </div>
+      }
+      @if (recurringDepositProduct.effectiveTo) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Effective To</span>
+          <span class="vsp-v">{{ recurringDepositProduct.effectiveTo | dateFormat }}</span>
+        </div>
+      }
+      @if (recurringDepositProduct.endDate) {
+        <div class="vsp-kv">
+          <span class="vsp-k">End Date</span>
+          <span class="vsp-v">{{ recurringDepositProduct.endDate | dateFormat }}</span>
+        </div>
+      }
+      <div class="vsp-kv">
+        <span class="vsp-k">Introducer Required</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.introducerRequired"
+            [class.vsp-pill--gray]="!recurringDepositProduct.introducerRequired"
+          >
+            {{ recurringDepositProduct.introducerRequired | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Deposit Account Link</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.shareLinkingEnabled"
+            [class.vsp-pill--gray]="!recurringDepositProduct.shareLinkingEnabled"
+          >
+            {{ recurringDepositProduct.shareLinkingEnabled | yesNo }}
+          </span>
+        </span>
+      </div>
+    </div>
+  </section>
+
+  <!-- CURRENCY -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--teal"><fa-icon icon="coins"></fa-icon></div>
+      <h3>{{ 'labels.inputs.Currency' | translate }}</h3>
+    </div>
+    <div class="vsp-grid">
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Currency' | translate }}</span>
+        <span class="vsp-v"
+          ><strong
+            >({{ recurringDepositProduct.currency.code }}) {{ recurringDepositProduct.currency.name }}</strong
+          ></span
+        >
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Decimal Places' | translate }}</span>
+        <span class="vsp-v">{{ recurringDepositProduct.currency.decimalPlaces }}</span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Dormancy Alert</span>
+        <span class="vsp-v">{{ recurringDepositProduct.dormancyAlert | yesNo }}</span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Balance Swap Option</span>
+        <span class="vsp-v">{{ recurringDepositProduct.balanceSwapOption | yesNo }}</span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">MSME</span>
+        <span class="vsp-v">{{ recurringDepositProduct.msme | yesNo }}</span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Nomination Facility</span>
+        <span class="vsp-v">{{ recurringDepositProduct.nominationFacility | yesNo }}</span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Auto Debit Facility</span>
+        <span class="vsp-v">{{ recurringDepositProduct.autoDebitFacility | yesNo }}</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- TERMS -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--amber"><fa-icon icon="percentage"></fa-icon></div>
+      <h3>{{ 'labels.inputs.Terms' | translate }}</h3>
+    </div>
+    <div class="vsp-grid">
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Deposit Amount' | translate }}</span>
+        <span class="vsp-v vsp-v--accent">
+          {{ recurringDepositProduct.depositAmount | formatNumber }}
+          <span class="vsp-suffix"
+            >(Min: {{ recurringDepositProduct.minDepositAmount || recurringDepositProduct.depositAmount }}, Max:
+            {{ recurringDepositProduct.maxDepositAmount || recurringDepositProduct.depositAmount }})</span
+          >
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Nominal Annual Interest' | translate }}</span>
+        <span class="vsp-v vsp-v--accent"
+          >{{ recurringDepositProduct.nominalAnnualInterestRate | formatNumber }}<span class="vsp-suffix">%</span></span
+        >
+      </div>
+      @if (recurringDepositProduct.effectiveDate) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Effective Date</span>
+          <span class="vsp-v">{{ recurringDepositProduct.effectiveDate | dateFormat }}</span>
+        </div>
+      }
+      @if (recurringDepositProduct.interestCalculationTypeName) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Interest Calculation Type' | translate }}</span>
+          <span class="vsp-v">{{ recurringDepositProduct.interestCalculationTypeName }}</span>
+        </div>
+      }
+      <div class="vsp-kv">
+        <span class="vsp-k">Interest Calculate</span>
+        <span class="vsp-v">{{ recurringDepositProduct.interestCalculationType?.value }}</span>
+      </div>
+      @if (recurringDepositProduct.averagePeriod) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Average Period</span>
+          <span class="vsp-v">{{ recurringDepositProduct.averagePeriod }}</span>
+        </div>
+      }
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Interest Posting Period' | translate }}</span>
+        <span class="vsp-v">{{ recurringDepositProduct.interestPostingPeriodType.value }}</span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Interest Compounding Period' | translate }}</span>
+        <span class="vsp-v">{{ recurringDepositProduct.interestCompoundingPeriodType.value }}</span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Days in Year' | translate }}</span>
+        <span class="vsp-v">{{ recurringDepositProduct.interestCalculationDaysInYearType.value }}</span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Auto Post</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.autoPost"
+            [class.vsp-pill--gray]="!recurringDepositProduct.autoPost"
+          >
+            {{ recurringDepositProduct.autoPost | yesNo }}
+          </span>
+        </span>
+      </div>
+      @if (recurringDepositProduct.frequencyFixDay) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Frequency (Fix Day)</span>
+          <span class="vsp-v">{{ recurringDepositProduct.frequencyFixDay }}</span>
+        </div>
+      }
+      @if (recurringDepositProduct.lastInterestDate) {
+        <div class="vsp-kv">
+          <span class="vsp-k">Last Interest Date</span>
+          <span class="vsp-v">{{ recurringDepositProduct.lastInterestDate | dateFormat }}</span>
+        </div>
+      }
+    </div>
+  </section>
+
+  <!-- SETTINGS -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--indigo"><fa-icon icon="sliders-h"></fa-icon></div>
+      <h3>{{ 'labels.inputs.Settings' | translate }}</h3>
+    </div>
+
+    <h4 class="vsp-sub-h">Premature Option</h4>
+    <div class="vsp-grid">
+      <div class="vsp-kv">
+        <span class="vsp-k">Loan Facility</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.loanFacility"
+            [class.vsp-pill--gray]="!recurringDepositProduct.loanFacility"
+          >
+            {{ recurringDepositProduct.loanFacility | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Premature Withdrawal Option</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.prematureWithdrawalOption"
+            [class.vsp-pill--gray]="!recurringDepositProduct.prematureWithdrawalOption"
+          >
+            {{ recurringDepositProduct.prematureWithdrawalOption | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Tenure Flexibility</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.tenureFlexibility"
+            [class.vsp-pill--gray]="!recurringDepositProduct.tenureFlexibility"
+          >
+            {{ recurringDepositProduct.tenureFlexibility | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Lien Marked</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.lienMarked"
+            [class.vsp-pill--gray]="!recurringDepositProduct.lienMarked"
+          >
+            {{ recurringDepositProduct.lienMarked | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.withdrawalFeeForTransfers"
+            [class.vsp-pill--gray]="!recurringDepositProduct.withdrawalFeeForTransfers"
+          >
+            {{ recurringDepositProduct.withdrawalFeeForTransfers | yesNo }}
+          </span>
+        </span>
+      </div>
+    </div>
+
+    <h4 class="vsp-sub-h">{{ 'labels.inputs.Lock-in Period' | translate }}</h4>
+    <div class="vsp-grid">
+      <div class="vsp-kv">
+        <span class="vsp-k">Enable Lock-in Period</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.enableLockinPeriod"
+            [class.vsp-pill--gray]="!recurringDepositProduct.enableLockinPeriod"
+          >
+            {{ recurringDepositProduct.enableLockinPeriod | yesNo }}
+          </span>
+        </span>
+      </div>
+      @if (recurringDepositProduct.lockinPeriodFrequency) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Lock-in Period' | translate }}</span>
+          <span class="vsp-v"
+            >{{ recurringDepositProduct.lockinPeriodFrequency }}
+            {{ recurringDepositProduct.lockinPeriodFrequencyType?.value }}</span
+          >
+        </div>
+      }
+    </div>
+
+    <h4 class="vsp-sub-h">Maturity Instructions</h4>
+    <div class="vsp-grid">
+      <div class="vsp-kv">
+        <span class="vsp-k">Maturity Instructions</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.maturityInstructions"
+            [class.vsp-pill--gray]="!recurringDepositProduct.maturityInstructions"
+          >
+            {{ recurringDepositProduct.maturityInstructions | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Credit Maturity Proceeds</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.creditMaturityProceeds"
+            [class.vsp-pill--gray]="!recurringDepositProduct.creditMaturityProceeds"
+          >
+            {{ recurringDepositProduct.creditMaturityProceeds | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Penalty Grace Period (Missed Installments)</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.penaltyGracePeriodMissedInstallments"
+            [class.vsp-pill--gray]="!recurringDepositProduct.penaltyGracePeriodMissedInstallments"
+          >
+            {{ recurringDepositProduct.penaltyGracePeriodMissedInstallments | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Panel Request Applicable</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.panelRequestApplicable"
+            [class.vsp-pill--gray]="!recurringDepositProduct.panelRequestApplicable"
+          >
+            {{ recurringDepositProduct.panelRequestApplicable | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">No Penalty (Nominee / Heir Closure)</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.noPenaltyNomineeHeirClosure"
+            [class.vsp-pill--gray]="!recurringDepositProduct.noPenaltyNomineeHeirClosure"
+          >
+            {{ recurringDepositProduct.noPenaltyNomineeHeirClosure | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Deceased Settlement</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.deceasedSettlement"
+            [class.vsp-pill--gray]="!recurringDepositProduct.deceasedSettlement"
+          >
+            {{ recurringDepositProduct.deceasedSettlement | yesNo }}
+          </span>
+        </span>
+      </div>
+      <div class="vsp-kv">
+        <span class="vsp-k">Allow Debit Txn After Due Date</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.allowDebitTxnAfterDueDate"
+            [class.vsp-pill--gray]="!recurringDepositProduct.allowDebitTxnAfterDueDate"
+          >
+            {{ recurringDepositProduct.allowDebitTxnAfterDueDate | yesNo }}
+          </span>
+        </span>
+      </div>
+    </div>
+
+    <h4 class="vsp-sub-h">Additional Rules</h4>
+    <div class="vsp-grid">
+      <div class="vsp-kv">
+        <span class="vsp-k">Account Closed Zero Balance in Day Closing</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.accountClosedZeroBalanceInDayClosing"
+            [class.vsp-pill--gray]="!recurringDepositProduct.accountClosedZeroBalanceInDayClosing"
+          >
+            {{ recurringDepositProduct.accountClosedZeroBalanceInDayClosing | yesNo }}
+          </span>
+        </span>
+      </div>
+      @if (recurringDepositProduct.minBalanceForInterestCalculation) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</span>
+          <span class="vsp-v">{{ recurringDepositProduct.minBalanceForInterestCalculation | formatNumber }}</span>
+        </div>
+      }
+      @if (recurringDepositProduct.minDepositTerm) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Minimum Deposit Term' | translate }}</span>
+          <span class="vsp-v"
+            >{{ recurringDepositProduct.minDepositTerm }} {{ recurringDepositProduct.minDepositTermType?.value }}</span
+          >
+        </div>
+      }
+      @if (recurringDepositProduct.maxDepositTerm) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Maximum Deposit Term' | translate }}</span>
+          <span class="vsp-v"
+            >{{ recurringDepositProduct.maxDepositTerm }} {{ recurringDepositProduct.maxDepositTermType?.value }}</span
+          >
+        </div>
+      }
+      @if (recurringDepositProduct.inMultipleOfDepositTerm) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Deposit Term In multiple of' | translate }}</span>
+          <span class="vsp-v"
+            >{{ recurringDepositProduct.inMultipleOfDepositTerm }} -
+            {{ recurringDepositProduct.inMultipleOfDepositTermType?.value }}</span
+          >
+        </div>
+      }
+      @if (recurringDepositProduct.isMandatoryDeposit !== undefined) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Recurring Deposit Type' | translate }}</span>
+          <span class="vsp-v">{{
+            recurringDepositProduct.isMandatoryDeposit
+              ? ('labels.text.Mandatory' | translate)
+              : ('labels.text.Voluntary' | translate)
+          }}</span>
+        </div>
+      }
+      @if (recurringDepositProduct.preClosurePenalInterest) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Apply penal interest (less)' | translate }}</span>
+          <span class="vsp-v"
+            >{{ recurringDepositProduct.preClosurePenalInterest }}% On
+            {{ recurringDepositProduct.preClosurePenalInterestOnType?.value }}</span
+          >
+        </div>
+      }
+      <div class="vsp-kv">
+        <span class="vsp-k">{{ 'labels.inputs.Withhold Tax is Applicable' | translate }}</span>
+        <span class="vsp-v">
+          <span
+            class="vsp-pill"
+            [class.vsp-pill--green]="recurringDepositProduct.withHoldTax"
+            [class.vsp-pill--gray]="!recurringDepositProduct.withHoldTax"
+          >
+            {{ recurringDepositProduct.withHoldTax | yesNo }}
+          </span>
+        </span>
+      </div>
+      @if (recurringDepositProduct.withHoldTax) {
+        <div class="vsp-kv">
+          <span class="vsp-k">{{ 'labels.inputs.Tax Group' | translate }}</span>
+          <span class="vsp-v">{{ recurringDepositProduct.taxGroup?.name }}</span>
+        </div>
+      }
+    </div>
+  </section>
+
+  <!-- INTEREST RATE CHART -->
+  @if (recurringDepositProduct.activeChart) {
+    <section class="vsp-section">
+      <div class="vsp-section-h">
+        <div class="vsp-section-ic vsp-section-ic--amber"><fa-icon icon="chart-line"></fa-icon></div>
+        <h3>{{ 'labels.heading.Interest Rate Charts' | translate }}</h3>
+      </div>
+
+      <!-- Chart meta pills -->
+      <div class="vsp-chart-meta">
+        @if (recurringDepositProduct.activeChart.name) {
+          <span class="vsp-chart-pill"
+            ><fa-icon icon="tag"></fa-icon> {{ recurringDepositProduct.activeChart.name }}</span
+          >
+        }
+        <span class="vsp-chart-pill"
+          ><fa-icon icon="calendar"></fa-icon> {{ recurringDepositProduct.activeChart.fromDate | dateFormat }}</span
+        >
+        @if (recurringDepositProduct.activeChart.endDate) {
+          <span class="vsp-chart-pill vsp-chart-pill--red"
+            ><fa-icon icon="calendar-times"></fa-icon>
+            {{ recurringDepositProduct.activeChart.endDate | dateFormat }}</span
+          >
+        }
+        <span
+          class="vsp-chart-pill"
+          [class.vsp-chart-pill--green]="recurringDepositProduct.activeChart.isPrimaryGroupingByAmount"
+        >
+          Primary by Amount: {{ recurringDepositProduct.activeChart.isPrimaryGroupingByAmount | yesNo }}
+        </span>
+      </div>
+
+      <div class="vsp-table-wrap">
+        <table
+          class="vsp-table"
+          mat-table
+          [dataSource]="recurringDepositProduct.activeChart.chartSlabs"
+          multiTemplateDataRows
+        >
+          <ng-container matColumnDef="srNo">
+            <th mat-header-cell *matHeaderCellDef>Sr.</th>
+            <td mat-cell *matCellDef="let chartSlab; let i = dataIndex">{{ i + 1 }}</td>
+          </ng-container>
+          <ng-container matColumnDef="description">
+            <th mat-header-cell *matHeaderCellDef>Particular</th>
+            <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.description }}</td>
+          </ng-container>
+          <ng-container matColumnDef="fromPeriod">
+            <th mat-header-cell *matHeaderCellDef>From</th>
+            <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.fromPeriod }}</td>
+          </ng-container>
+          <ng-container matColumnDef="toPeriod">
+            <th mat-header-cell *matHeaderCellDef>To</th>
+            <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.toPeriod ?? '—' }}</td>
+          </ng-container>
+          <ng-container matColumnDef="periodTypeLabel">
+            <th mat-header-cell *matHeaderCellDef>Period</th>
+            <td mat-cell *matCellDef="let chartSlab">{{ chartSlab.periodType?.value }}</td>
+          </ng-container>
+          <ng-container matColumnDef="annualInterestRate">
+            <th mat-header-cell *matHeaderCellDef>Rate (%)</th>
+            <td mat-cell *matCellDef="let chartSlab">
+              <strong>{{ chartSlab.annualInterestRate }}</strong>
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
+              <button
+                class="vsp-incentive-btn"
+                type="button"
+                (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex"
+              >
+                <fa-icon [icon]="expandChartSlabIndex === chartSlabIndex ? 'eye-slash' : 'eye'"></fa-icon>
+                {{
+                  expandChartSlabIndex === chartSlabIndex
+                    ? ('labels.buttons.Hide Incentives' | translate)
+                    : ('labels.buttons.View Incentives' | translate)
+                }}
+              </button>
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="incentives">
+            <td
+              mat-cell
+              *matCellDef="let chartSlab; let chartSlabIndex = dataIndex"
+              [attr.colspan]="chartSlabsDisplayedColumns.length"
+              class="vsp-incentive-cell"
+            >
+              <div
+                [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
+                class="vsp-incentive-panel"
+              >
+                <p class="vsp-incentive-title">{{ 'labels.heading.Incentives' | translate }}</p>
+                <div class="vsp-table-wrap">
+                  <table class="vsp-table" mat-table [dataSource]="chartSlab.incentives">
+                    <ng-container matColumnDef="entityType">
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Entity Type' | translate }}</th>
+                      <td mat-cell *matCellDef="let incentive">
+                        {{
+                          incentive.entityType
+                            | find: recurringDepositProductTemplate.chartTemplate.entityTypeOptions : 'id' : 'value'
+                        }}
+                      </td>
+                    </ng-container>
+                    <ng-container matColumnDef="attributeName">
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Name' | translate }}</th>
+                      <td mat-cell *matCellDef="let incentive">
+                        {{
+                          incentive.attributeName
+                            | find: recurringDepositProductTemplate.chartTemplate.attributeNameOptions : 'id' : 'value'
+                        }}
+                      </td>
+                    </ng-container>
+                    <ng-container matColumnDef="conditionType">
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Condition Type' | translate }}</th>
+                      <td mat-cell *matCellDef="let incentive">
+                        {{
+                          incentive.conditionType
+                            | find: recurringDepositProductTemplate.chartTemplate.conditionTypeOptions : 'id' : 'value'
+                        }}
+                      </td>
+                    </ng-container>
+                    <ng-container matColumnDef="attributeValue">
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Attribute Value' | translate }}</th>
+                      <td mat-cell *matCellDef="let incentive">
+                        @switch (incentive.attributeName) {
+                          @case (2) {
+                            <span>{{
+                              incentive.attributeValue
+                                | find: recurringDepositProductTemplate.chartTemplate.genderOptions : 'id' : 'name'
+                            }}</span>
+                          }
+                          @case (3) {
+                            <span>{{ incentive.attributeValue }}</span>
+                          }
+                          @case (4) {
+                            <span>{{
+                              incentive.attributeValue
+                                | find: recurringDepositProductTemplate.chartTemplate.clientTypeOptions : 'id' : 'name'
+                            }}</span>
+                          }
+                          @case (5) {
+                            <span>{{
+                              incentive.attributeValue
+                                | find
+                                  : recurringDepositProductTemplate.chartTemplate.clientClassificationOptions
+                                  : 'id'
+                                  : 'name'
+                            }}</span>
+                          }
+                        }
+                      </td>
+                    </ng-container>
+                    <ng-container matColumnDef="incentiveType">
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Incentive Type' | translate }}</th>
+                      <td mat-cell *matCellDef="let incentive">
+                        {{
+                          incentive.incentiveType
+                            | find: recurringDepositProductTemplate.chartTemplate.incentiveTypeOptions : 'id' : 'value'
+                        }}
+                      </td>
+                    </ng-container>
+                    <ng-container matColumnDef="amount">
+                      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
+                      <td mat-cell *matCellDef="let incentive">{{ incentive.amount }}</td>
+                    </ng-container>
+                    <tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns"></tr>
+                  </table>
+                </div>
+              </div>
+            </td>
+          </ng-container>
+          <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
+          <tr
+            mat-row
+            *matRowDef="let row; columns: chartSlabsDisplayedColumns; let i = dataIndex"
+            [class.vsp-row-even]="i % 2 === 1"
+          ></tr>
+          <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns" class="incentives-row"></tr>
+        </table>
+      </div>
+    </section>
+  }
+
+  <!-- CHARGES -->
+  @if (recurringDepositProduct.charges.length) {
+    <section class="vsp-section">
+      <div class="vsp-section-h">
+        <div class="vsp-section-ic vsp-section-ic--red"><fa-icon icon="receipt"></fa-icon></div>
+        <h3>{{ 'labels.heading.Charges' | translate }}</h3>
+      </div>
+      <div class="vsp-table-wrap">
+        <table class="vsp-table" mat-table [dataSource]="recurringDepositProduct.charges">
           <ng-container matColumnDef="name">
             <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
             <td mat-cell *matCellDef="let charge">{{ charge.name }}</td>
@@ -571,91 +740,83 @@
           <tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
         </table>
       </div>
-    }
-
-    <!-- ===== ACCOUNTING ===== -->
-    <h3 class="mat-h3 flex-100">{{ 'labels.heading.Accounting' | translate }}</h3>
-    <mat-divider class="flex-100"></mat-divider>
+    </section>
+  }
 
+  <!-- ACCOUNTING -->
+  <section class="vsp-section">
+    <div class="vsp-section-h">
+      <div class="vsp-section-ic vsp-section-ic--green"><fa-icon icon="book"></fa-icon></div>
+      <h3>{{ 'labels.heading.Accounting' | translate }}</h3>
+    </div>
     <mifosx-view-savings-accounting-details
-      class="flex-100"
       [accountingRule]="recurringDepositProduct.accountingRule"
       [accountingMappings]="recurringDepositProduct.accountingMappings"
-    >
-    </mifosx-view-savings-accounting-details>
+    ></mifosx-view-savings-accounting-details>
+  </section>
 
-    @if (
-      recurringDepositProduct.paymentChannelToFundSourceMappings?.length ||
-      recurringDepositProduct.feeToIncomeAccountMappings?.length ||
-      recurringDepositProduct.penaltyToIncomeAccountMappings?.length
-    ) {
-      <div class="flex-100 layout-row-wrap responsive-column">
-        <h3 class="mat-h3 flex-100">{{ 'labels.inputs.Advanced Accounting Rules' | translate }}</h3>
-        <mat-divider class="flex-100"></mat-divider>
-        @if (recurringDepositProduct.paymentChannelToFundSourceMappings?.length) {
-          <div class="flex-100 layout-row-wrap responsive-column">
-            <h4 class="mat-h4 flex-100">{{ 'labels.inputs.Fund Sources for Payment Channels' | translate }}</h4>
-            <table
-              class="mat-elevation-z1 flex-100"
-              mat-table
-              [dataSource]="recurringDepositProduct.paymentChannelToFundSourceMappings"
-            >
-              <ng-container matColumnDef="paymentTypeId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Type' | translate }}</th>
-                <td mat-cell *matCellDef="let paymentFundSource">{{ paymentFundSource.paymentType.name }}</td>
-              </ng-container>
-              <ng-container matColumnDef="fundSourceAccountId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
-                <td mat-cell *matCellDef="let paymentFundSource">{{ paymentFundSource.fundSourceAccount.name }}</td>
-              </ng-container>
-              <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
-            </table>
-          </div>
-        }
-        @if (recurringDepositProduct.feeToIncomeAccountMappings?.length) {
-          <div class="flex-100 layout-row-wrap responsive-column">
-            <h4 class="mat-h4 flex-100">{{ 'labels.inputs.Fees to Specific Income Accounts' | translate }}</h4>
-            <table
-              class="flex-100 mat-elevation-z1"
-              mat-table
-              [dataSource]="recurringDepositProduct.feeToIncomeAccountMappings"
-            >
-              <ng-container matColumnDef="chargeId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fee/Charge' | translate }}</th>
-                <td mat-cell *matCellDef="let feesIncome">{{ feesIncome.charge.name }}</td>
-              </ng-container>
-              <ng-container matColumnDef="incomeAccountId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
-                <td mat-cell *matCellDef="let feesIncome">{{ feesIncome.incomeAccount.name }}</td>
-              </ng-container>
-              <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
-            </table>
-          </div>
-        }
-        @if (recurringDepositProduct.penaltyToIncomeAccountMappings?.length) {
-          <div class="flex-100 layout-row-wrap responsive-column">
-            <h4 class="mat-h4 flex-100">{{ 'labels.inputs.Penalties to Specific Income Accounts' | translate }}</h4>
-            <table
-              class="flex-100 mat-elevation-z1"
-              mat-table
-              [dataSource]="recurringDepositProduct.penaltyToIncomeAccountMappings"
-            >
-              <ng-container matColumnDef="chargeId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
-                <td mat-cell *matCellDef="let penaltyIncome">{{ penaltyIncome.charge.name }}</td>
-              </ng-container>
-              <ng-container matColumnDef="incomeAccountId">
-                <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
-                <td mat-cell *matCellDef="let penaltyIncome">{{ penaltyIncome.incomeAccount.name }}</td>
-              </ng-container>
-              <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
-              <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
-            </table>
-          </div>
-        }
+  <!-- ADVANCED ACCOUNTING RULES -->
+  @if (
+    recurringDepositProduct.paymentChannelToFundSourceMappings?.length ||
+    recurringDepositProduct.feeToIncomeAccountMappings?.length ||
+    recurringDepositProduct.penaltyToIncomeAccountMappings?.length
+  ) {
+    <section class="vsp-section">
+      <div class="vsp-section-h">
+        <div class="vsp-section-ic vsp-section-ic--purple"><fa-icon icon="sitemap"></fa-icon></div>
+        <h3>{{ 'labels.inputs.Advanced Accounting Rules' | translate }}</h3>
       </div>
-    }
-  </div>
+      @if (recurringDepositProduct.paymentChannelToFundSourceMappings?.length) {
+        <h4 class="vsp-sub-h">{{ 'labels.inputs.Fund Sources for Payment Channels' | translate }}</h4>
+        <div class="vsp-table-wrap">
+          <table class="vsp-table" mat-table [dataSource]="recurringDepositProduct.paymentChannelToFundSourceMappings">
+            <ng-container matColumnDef="paymentTypeId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Payment Type' | translate }}</th>
+              <td mat-cell *matCellDef="let p">{{ p.paymentType.name }}</td>
+            </ng-container>
+            <ng-container matColumnDef="fundSourceAccountId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fund Source' | translate }}</th>
+              <td mat-cell *matCellDef="let p">{{ p.fundSourceAccount.name }}</td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns"></tr>
+          </table>
+        </div>
+      }
+      @if (recurringDepositProduct.feeToIncomeAccountMappings?.length) {
+        <h4 class="vsp-sub-h">{{ 'labels.inputs.Fees to Specific Income Accounts' | translate }}</h4>
+        <div class="vsp-table-wrap">
+          <table class="vsp-table" mat-table [dataSource]="recurringDepositProduct.feeToIncomeAccountMappings">
+            <ng-container matColumnDef="chargeId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Fee/Charge' | translate }}</th>
+              <td mat-cell *matCellDef="let f">{{ f.charge.name }}</td>
+            </ng-container>
+            <ng-container matColumnDef="incomeAccountId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
+              <td mat-cell *matCellDef="let f">{{ f.incomeAccount.name }}</td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
+          </table>
+        </div>
+      }
+      @if (recurringDepositProduct.penaltyToIncomeAccountMappings?.length) {
+        <h4 class="vsp-sub-h">{{ 'labels.inputs.Penalties to Specific Income Accounts' | translate }}</h4>
+        <div class="vsp-table-wrap">
+          <table class="vsp-table" mat-table [dataSource]="recurringDepositProduct.penaltyToIncomeAccountMappings">
+            <ng-container matColumnDef="chargeId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Penalty' | translate }}</th>
+              <td mat-cell *matCellDef="let p">{{ p.charge.name }}</td>
+            </ng-container>
+            <ng-container matColumnDef="incomeAccountId">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Income Account' | translate }}</th>
+              <td mat-cell *matCellDef="let p">{{ p.incomeAccount.name }}</td>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns"></tr>
+          </table>
+        </div>
+      }
+    </section>
+  }
 </div>
diff --git a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.scss b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.scss
index cdee63517..9e7b167c3 100644
--- a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.scss
+++ b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.scss
@@ -6,50 +6,513 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-@use 'assets/styles/helper';
-@use 'assets/styles/colours' as *;
-@use 'assets/styles/product-view' as pv;
-
-@include pv.product-view-styles;
-
-/* RD-specific purple accent */
 :host {
-  --pv-accent: #6d28d9;
-  --pv-accent-l: #ede9fe;
+  --vsp-navy: #0b1e3d;
+  --vsp-blue: #1d4ed8;
+  --vsp-blue-l: #eff6ff;
+  --vsp-teal: #0e7e6b;
+  --vsp-teal-l: #ccfbf1;
+  --vsp-purple: #6d28d9;
+  --vsp-purple-l: #ede9fe;
+  --vsp-indigo: #3730a3;
+  --vsp-indigo-l: #e0e7ff;
+  --vsp-amber: #b45309;
+  --vsp-amber-l: #fef3c7;
+  --vsp-green: #15803d;
+  --vsp-green-l: #dcfce7;
+  --vsp-red: #c0392b;
+  --vsp-red-l: #fee2e2;
+  --vsp-pink: #be185d;
+  --vsp-pink-l: #fce7f3;
+  --vsp-g50: #f8fafc;
+  --vsp-g100: #f1f5f9;
+  --vsp-g200: #e2e8f0;
+  --vsp-g500: #64748b;
+  --vsp-g700: #334155;
+  --vsp-g900: #0f172a;
+
+  display: block;
+  font-family:
+    'DM Sans',
+    system-ui,
+    -apple-system,
+    sans-serif;
+  color: var(--vsp-g900);
+  font-size: 13.5px;
 }
 
-.container {
-  width: 100%;
+.vsp-root {
+  padding: 4px 4px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
 
-.tab-container {
-  padding: 1%;
-  margin: 1%;
+.vsp-hero {
+  background: linear-gradient(135deg, var(--vsp-navy) 0%, var(--vsp-blue) 100%);
+  border-radius: 14px;
+  padding: 22px 22px 22px 18px;
+  display: flex;
+  align-items: flex-start;
+  gap: 18px;
+  box-shadow:
+    0 10px 24px rgb(11 30 61 / 18%),
+    0 4px 10px rgb(11 30 61 / 12%);
+  color: #fff;
+  position: relative;
+  overflow: hidden;
 }
 
-.mat-h3 {
-  margin-top: 10px !important;
-  font-weight: 300;
-  color: $status-approved;
+.vsp-hero::before {
+  content: '';
+  position: absolute;
+  top: -60px;
+  right: -60px;
+  width: 240px;
+  height: 240px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgb(255 255 255 / 8%) 0%, transparent 70%);
+  pointer-events: none;
 }
 
-.mat-elevation-z1 {
-  margin: 1em 0 1.5em;
+.vsp-hero-left {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  flex: 1;
+  min-width: 0;
 }
 
-.interestCarts {
-  float: right;
+.vsp-hero-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  background: rgb(255 255 255 / 16%);
+  border: 1px solid rgb(255 255 255 / 22%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  flex-shrink: 0;
 }
 
-h2,
-h3,
-h4 {
-  margin: 0;
+.vsp-hero-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.vsp-hero-eyebrow {
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: rgb(255 255 255 / 70%);
+  margin-bottom: 4px;
+}
+
+.vsp-hero-title {
+  margin: 0 0 10px;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  color: #fff;
+  line-height: 1.2;
+}
+
+.vsp-hero-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.vsp-hero-desc {
+  margin: 12px 0 0;
+  font-size: 13px;
+  color: rgb(255 255 255 / 82%);
+  line-height: 1.5;
+  max-width: 720px;
+}
+
+.vsp-edit-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 38px;
+  padding: 0 16px;
+  border-radius: 10px;
+  background: rgb(255 255 255 / 14%);
+  color: #fff;
+  border: 1px solid rgb(255 255 255 / 28%);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  font-family: inherit;
+  flex-shrink: 0;
+  transition: all 0.16s ease;
+
+  fa-icon {
+    font-size: 12px;
+  }
+
+  &:hover {
+    background: rgb(255 255 255 / 24%);
+    border-color: rgb(255 255 255 / 50%);
+  }
+}
+
+.vsp-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-family: inherit;
+
+  fa-icon {
+    font-size: 9.5px;
+  }
+
+  &--code {
+    background: rgb(255 255 255 / 18%);
+    color: #fff;
+    border: 1px solid rgb(255 255 255 / 24%);
+    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
+  }
+
+  &--teal {
+    background: var(--vsp-teal-l);
+    color: var(--vsp-teal);
+    border: 1px solid #99f6e4;
+  }
+
+  &--blue {
+    background: var(--vsp-blue-l);
+    color: var(--vsp-blue);
+    border: 1px solid #dbeafe;
+  }
+
+  &--green {
+    background: var(--vsp-green-l);
+    color: var(--vsp-green);
+    border: 1px solid #bbf7d0;
+  }
+
+  &--amber {
+    background: var(--vsp-amber-l);
+    color: var(--vsp-amber);
+    border: 1px solid #fde68a;
+  }
+
+  &--red {
+    background: var(--vsp-red-l);
+    color: var(--vsp-red);
+    border: 1px solid #fecaca;
+  }
+
+  &--gray {
+    background: var(--vsp-g100);
+    color: var(--vsp-g700);
+    border: 1px solid var(--vsp-g200);
+  }
+}
+
+.vsp-section {
+  background: #fff;
+  border: 1px solid var(--vsp-g200);
+  border-radius: 12px;
+  padding: 16px 20px;
+  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
+}
+
+.vsp-section-h {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px dashed var(--vsp-g200);
+
+  h3 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--vsp-g900);
+    letter-spacing: 0.02em;
+  }
+}
+
+.vsp-section-ic {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  flex-shrink: 0;
+
+  &--blue {
+    background: var(--vsp-blue-l);
+    color: var(--vsp-blue);
+  }
+
+  &--teal {
+    background: var(--vsp-teal-l);
+    color: var(--vsp-teal);
+  }
+
+  &--purple {
+    background: var(--vsp-purple-l);
+    color: var(--vsp-purple);
+  }
+
+  &--indigo {
+    background: var(--vsp-indigo-l);
+    color: var(--vsp-indigo);
+  }
+
+  &--amber {
+    background: var(--vsp-amber-l);
+    color: var(--vsp-amber);
+  }
+
+  &--green {
+    background: var(--vsp-green-l);
+    color: var(--vsp-green);
+  }
+
+  &--red {
+    background: var(--vsp-red-l);
+    color: var(--vsp-red);
+  }
+
+  &--pink {
+    background: var(--vsp-pink-l);
+    color: var(--vsp-pink);
+  }
+}
+
+.vsp-sub-h {
+  margin: 16px 0 10px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--vsp-g700);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.vsp-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px 24px;
+}
+
+@media (width <=600px) {
+  .vsp-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.vsp-kv {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--vsp-g100);
+
+  &--span {
+    grid-column: 1 / -1;
+  }
+}
+
+.vsp-k {
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--vsp-g500);
+}
+
+.vsp-v {
+  font-size: 13.5px;
+  color: var(--vsp-g900);
   font-weight: 500;
+  word-break: break-word;
+
+  strong {
+    font-weight: 700;
+  }
 }
 
-table {
+.vsp-v--accent {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--vsp-blue);
+  letter-spacing: 0.01em;
+}
+
+.vsp-suffix {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vsp-g500);
+  margin-left: 4px;
+}
+
+.vsp-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--vsp-g200);
+  border-radius: 10px;
+  margin-top: 4px;
+}
+
+/* ───────── CHART META PILLS ───────── */
+.vsp-chart-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.vsp-chart-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 5px 12px;
+  border-radius: 8px;
+  background: var(--vsp-g100);
+  border: 1px solid var(--vsp-g200);
+  color: var(--vsp-g700);
+
+  fa-icon {
+    font-size: 11px;
+    color: var(--vsp-g500);
+  }
+
+  &--green {
+    background: var(--vsp-green-l);
+    border-color: #bbf7d0;
+    color: var(--vsp-green);
+  }
+
+  &--red {
+    background: var(--vsp-red-l);
+    border-color: #fecaca;
+    color: var(--vsp-red);
+  }
+}
+
+/* ───────── RATE BADGE ───────── */
+.vsp-rate-badge {
+  display: inline-block;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--vsp-blue);
+  background: var(--vsp-blue-l);
+  border: 1px solid #dbeafe;
+  border-radius: 6px;
+  padding: 3px 10px;
+  letter-spacing: 0.02em;
+}
+
+/* ───────── CELL SUB TEXT ───────── */
+.vsp-cell-sub {
+  display: block;
+  font-size: 10.5px;
+  color: var(--vsp-g500);
+  margin-top: 2px;
+}
+
+/* ───────── INCENTIVE EXPAND ───────── */
+.vsp-incentive-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11.5px;
+  font-weight: 600;
+  padding: 5px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--vsp-g200);
+  background: var(--vsp-g50);
+  color: var(--vsp-blue);
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.14s ease;
+
+  fa-icon {
+    font-size: 11px;
+  }
+
+  &:hover {
+    background: var(--vsp-blue-l);
+    border-color: #dbeafe;
+  }
+}
+
+.vsp-incentive-cell {
+  padding: 0 !important;
+}
+
+.vsp-incentive-panel {
+  overflow: hidden;
+  padding: 0 14px;
+  background: var(--vsp-g50);
+  border-top: 1px dashed var(--vsp-g200);
+}
+
+.vsp-incentive-title {
+  margin: 12px 0 8px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--vsp-g500);
+}
+
+.vsp-table {
   width: 100%;
+  background: #fff;
+
+  th.mat-mdc-header-cell {
+    background: var(--vsp-g50);
+    color: var(--vsp-g700);
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 11px 14px;
+    border-bottom: 1px solid var(--vsp-g200);
+    white-space: nowrap;
+  }
+
+  td.mat-mdc-cell {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--vsp-g100);
+    font-size: 12.5px;
+    color: var(--vsp-g900);
+  }
+
+  tbody tr:last-child td.mat-mdc-cell {
+    border-bottom: 0;
+  }
+
+  tbody tr:not(.incentives-row, .vsp-row-even) td.mat-mdc-cell {
+    background: #fff !important;
+  }
+
+  tbody tr.vsp-row-even td.mat-mdc-cell {
+    background: var(--vsp-g50) !important;
+  }
 
   tr.incentives-row {
     height: 0;
@@ -61,26 +524,5 @@ table {
     .incentives {
       overflow: hidden;
     }
-
-    .mat-card {
-      border-radius: 0;
-
-      > h4 {
-        font-weight: 500;
-        margin: 0.5em 0 0;
-      }
-    }
   }
 }
-
-span {
-  margin: 0.5em 0;
-}
-
-mat-divider {
-  margin: 0 0 0.5em;
-}
-
-.margin-t {
-  margin-top: 1em;
-}
diff --git a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.ts b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.ts
index 4ba8ac022..f932b76d6 100644
--- a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.ts
+++ b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/recurring-deposit-general-tab/recurring-deposit-general-tab.component.ts
@@ -44,6 +44,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
+    RouterLink,
     FaIconComponent,
     MatDivider,
     MatTable,
@@ -71,13 +72,23 @@ export class RecurringDepositGeneralTabComponent {
   expandChartSlabIndex: number | null = null;
 
   chartSlabsIncentivesDisplayedColumns: string[] = ['incentives'];
-  chartSlabsDisplayedColumns: string[] = [
-    'period',
-    'amountRange',
-    'annualInterestRate',
+  readonly chartSlabsBaseColumns = [
+    'srNo',
     'description',
-    'actions'
+    'fromPeriod',
+    'toPeriod',
+    'periodTypeLabel',
+    'annualInterestRate'
   ];
+
+  get chartSlabsDisplayedColumns(): string[] {
+    const slabs = this.recurringDepositProduct?.activeChart?.chartSlabs || [];
+    const hasIncentives = slabs.some((s: any) => s.incentives?.length);
+    return hasIncentives ? [
+          ...this.chartSlabsBaseColumns,
+          'actions'
+        ] : this.chartSlabsBaseColumns;
+  }
   incentivesDisplayedColumns: string[] = [
     'entityType',
     'attributeName',