diff --git a/package-lock.json b/package-lock.json
index 2e97fb85a..f7ef16d99 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@xola/ui-kit",
-    "version": "2.1.38",
+    "version": "2.1.39",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "@xola/ui-kit",
-            "version": "2.1.38",
+            "version": "2.1.39",
             "license": "MIT",
             "dependencies": {
                 "@headlessui/react": "^1.4.0",
diff --git a/package.json b/package.json
index fc3f79740..e99c8b548 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@xola/ui-kit",
-    "version": "2.1.38",
+    "version": "2.1.39",
     "description": "Xola UI Kit",
     "license": "MIT",
     "files": [
diff --git a/src/components/Breakdown.jsx b/src/components/Breakdown.jsx
index df4db49a8..93fc560da 100644
--- a/src/components/Breakdown.jsx
+++ b/src/components/Breakdown.jsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React, { createContext, useContext } from "react";
+import React, { createContext, useContext, useMemo } from "react";
 import { isNumber } from "lodash";
 import { Currency } from "./Utilities/Currency";
 
@@ -17,9 +17,10 @@ const colors = {
 
 const CurrencyContext = createContext();
 
-export const Breakdown = ({ children, className, currency, ...rest }) => {
+export const Breakdown = ({ children, className, currency, locale, ...rest }) => {
+    const value = useMemo(() => ({ currency, locale }), [currency, locale]);
     return (
-        <CurrencyContext.Provider value={currency}>
+        <CurrencyContext.Provider value={value}>
             <table className={clsx("ui-breakdown", "w-full", className)} {...rest}>
                 <tbody>{children}</tbody>
             </table>
@@ -31,10 +32,12 @@ Breakdown.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     currency: PropTypes.string.isRequired,
+    locale: PropTypes.string,
 };
 
 const BreakdownItem = ({ children, info, methodIcon, secondary, value, className, color = "default", ...rest }) => {
-    const currency = useContext(CurrencyContext);
+    /** When BreakdownItem is directly used without outer <Breakdown /> component, the context would be `undefined` */
+    const { currency, locale } = useContext(CurrencyContext) ?? {};
 
     return (
         <tr className={clsx("ui-breakdown-item", colors[color], className)} {...rest}>
@@ -57,7 +60,7 @@ const BreakdownItem = ({ children, info, methodIcon, secondary, value, className
 
             <td className="w-[1%] whitespace-nowrap pl-4 text-right">
                 {isNumber(value) ? (
-                    <Currency shouldRemoveTrailingZeroes={false} currency={currency}>
+                    <Currency shouldRemoveTrailingZeroes={false} currency={currency} locale={locale}>
                         {value}
                     </Currency>
                 ) : (
@@ -82,7 +85,7 @@ Breakdown.Item = BreakdownItem;
 Breakdown.Item.displayName = "Breakdown.Item";
 
 const BreakdownSubtotalItem = ({ children, info, value, className, color = "black", ...rest }) => {
-    const currency = useContext(CurrencyContext);
+    const { currency, locale } = useContext(CurrencyContext) ?? {};
 
     return (
         <tr className={clsx("ui-breakdown-subtotal-item", "font-bold", colors[color], className)} {...rest}>
@@ -90,7 +93,7 @@ const BreakdownSubtotalItem = ({ children, info, value, className, color = "blac
             <td className="whitespace-nowrap pt-1 pb-4 text-right">{info}</td>
 
             <td className="w-[1%] whitespace-nowrap pt-1 pb-4 pl-4 text-right">
-                <Currency shouldRemoveTrailingZeroes={false} currency={currency}>
+                <Currency shouldRemoveTrailingZeroes={false} currency={currency} locale={locale}>
                     {value}
                 </Currency>
             </td>
diff --git a/src/helpers/numbers.js b/src/helpers/numbers.js
index 92e20edf1..ee1dadf98 100644
--- a/src/helpers/numbers.js
+++ b/src/helpers/numbers.js
@@ -20,6 +20,7 @@ export const numberFormat = (
     const style = currency ? "currency" : "decimal";
 
     const params = { style, minimumFractionDigits: maximumFractionDigits, maximumFractionDigits };
+
     if (currency) {
         params.currency = currency;
         params.currencyDisplay = isNarrowSymbolForm ? "narrowSymbol" : "symbol";
diff --git a/src/stories/DataDisplay/Currency.stories.js b/src/stories/DataDisplay/Currency.stories.js
index 6c62b99f7..86b211447 100644
--- a/src/stories/DataDisplay/Currency.stories.js
+++ b/src/stories/DataDisplay/Currency.stories.js
@@ -29,7 +29,7 @@ const CurrencyStories = {
             description: "A locale string",
             type: { required: true },
             control: { type: "select" },
-            options: ["en-IN", "en-US", "fr-FR", "ja-JP", "de-DE", "ar-AE"],
+            options: ["en-IN", "en-US", "fr-FR", "ja-JP", "de-DE", "ar-AE", "en-CA", "fr-CA"],
             table: {
                 type: { summary: null },
                 defaultValue: { summary: "Auto-detected based on browser settings" },