diff --git a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.html b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.html
index c2abae1d..46505528 100644
--- a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.html
+++ b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.html
@@ -10,7 +10,7 @@
     </ng-template>
 
     <ng-template #showDetails>
-      <div class="psdk-grid-filter" *ngIf="field.config.label && getVisibility(field.config)">
+      <div class="psdk-grid-filter" *ngIf="field.config.label && _getVisibility(field.config)">
         <div class="psdk-details-fields-label">
           {{ field.config.label }}
         </div>
@@ -20,6 +20,17 @@
           <a *ngSwitchCase="'phone'" class="psdk-primary-color" as="a" href="tel: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
           <a *ngSwitchCase="'email'" class="psdk-primary-color" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
           <span *ngSwitchCase="'date'" class="psdk-details-text-style">{{ _formatDate(field.config.value, field.type) }}</span>
+          <span *ngSwitchCase="'decimal'" class="psdk-details-text-style">{{ _formatDecimal(field) }}</span>
+          <span *ngSwitchCase="'currency'" class="psdk-details-text-style">{{ _formatCurrency(field) }}</span>
+          <ng-container *ngSwitchCase="'scalarlist'">
+            <span *ngIf="field.config.componentType?.toLowerCase() === 'decimal'" class="psdk-details-text-style">{{ _formatDecimal(field) }}</span>
+            <span *ngIf="field.config.componentType?.toLowerCase() === 'currency'" class="psdk-details-text-style">{{ _formatCurrency(field) }}</span>
+            <span
+              *ngIf="field.config.componentType?.toLowerCase() !== 'decimal' && field.config.componentType?.toLowerCase() !== 'currency'"
+              class="psdk-details-text-style"
+              >{{ _getValue(field.config.value) }}</span
+            >
+          </ng-container>
           <span *ngSwitchCase="'caseoperator'"></span>
           <span *ngSwitchDefault>{{ _getValue(field.config.value, field) }}</span>
         </div>
diff --git a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.ts b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.ts
index 4c6048e0..f53c3734 100644
--- a/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.ts
+++ b/packages/angular-sdk-components/src/lib/_components/designSystemExtension/material-details-fields/material-details-fields.component.ts
@@ -2,6 +2,8 @@ import { Component, Input, forwardRef } from '@angular/core';
 import { Utils } from '../../../_helpers/utils';
 import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { getCurrencyOptions } from '../../../_helpers/currency-utils';
+import { format } from '../../../_helpers/formatters';
 
 @Component({
   selector: 'app-material-details-fields',
@@ -29,7 +31,29 @@ export class MaterialDetailsFieldsComponent {
     return this.utils.generateDate(dateValue, dateFormat);
   }
 
-  getVisibility(config): boolean {
+  _formatDecimal(field: any): string {
+    const { currencyISOCode = '', formatter } = field.config;
+
+    const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+    const formatterLower = formatter?.toLowerCase() || 'decimal';
+    const formattedValue = format(field.config.value, formatterLower, theCurrencyOptions);
+
+    return formattedValue;
+  }
+
+  _formatCurrency(field: any): string {
+    const { currencyISOCode = 'USD', formatter } = field.config;
+
+    const formattedValue = format(
+      field.config.value,
+      formatter ? (formatter.toLowerCase() === 'defaultcurrency' ? 'currency' : formatter.toLowerCase()) : 'currency',
+      getCurrencyOptions(currencyISOCode)
+    );
+
+    return formattedValue;
+  }
+
+  _getVisibility(config): boolean {
     const { visibility = true } = config;
 
     return this.utils.getBooleanValue(visibility);
diff --git a/packages/angular-sdk-components/src/lib/_components/template/base/details-template-base.ts b/packages/angular-sdk-components/src/lib/_components/template/base/details-template-base.ts
index 09fff22c..a10fb8b0 100644
--- a/packages/angular-sdk-components/src/lib/_components/template/base/details-template-base.ts
+++ b/packages/angular-sdk-components/src/lib/_components/template/base/details-template-base.ts
@@ -1,9 +1,11 @@
 import { Directive, OnInit, OnDestroy, Injector, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
 
 @Directive()
 export class DetailsTemplateBase implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
 
   // For interaction with AngularPConnect
   protected angularPConnectData: AngularPConnectData = {};
diff --git a/packages/angular-sdk-components/src/lib/_helpers/formatters/currency.ts b/packages/angular-sdk-components/src/lib/_helpers/formatters/currency.ts
index f3172c1e..b1c3a9e5 100644
--- a/packages/angular-sdk-components/src/lib/_helpers/formatters/currency.ts
+++ b/packages/angular-sdk-components/src/lib/_helpers/formatters/currency.ts
@@ -27,7 +27,14 @@ function CurrencyFormatter(
       currency
     });
 
-    let countryCode: string | undefined = currentLocale?.split('-')[1].toUpperCase();
+    // For currency other than EUR, we need to determine the country code from currency code
+    // If currency is EUR, we use the locale to determine the country code
+    let countryCode: string | undefined;
+    if (currency !== 'EUR') {
+      countryCode = currency.substring(0, 2);
+    } else {
+      countryCode = currentLocale?.split('-')[1].toUpperCase();
+    }
 
     // If countryCode is still undefined, setting it as US
     if (!countryCode) {