diff --git a/packages/core/src/utils/currency.ts b/packages/core/src/utils/currency.ts
index e171960c..f8751b2b 100644
--- a/packages/core/src/utils/currency.ts
+++ b/packages/core/src/utils/currency.ts
@@ -338,7 +338,7 @@ function asNumber(value: string | number | null | undefined) {
   return value || 0;
 }
 
-function getCurrencyAmount(currencyAmountArg: CurrencyAmountArg) {
+export function getCurrencyAmount(currencyAmountArg: CurrencyAmountArg) {
   let value = 0;
   let unit = undefined;
 
@@ -536,6 +536,8 @@ export const abbrCurrencyUnit = (unit: CurrencyUnitType) => {
       return "MSAT";
     case CurrencyUnit.USD:
       return "USD";
+    case CurrencyUnit.MXN:
+      return "MXN";
   }
   return "Unsupported CurrencyUnit";
 };
diff --git a/packages/ui/src/components/CurrencyAmount.tsx b/packages/ui/src/components/CurrencyAmount.tsx
index cf648ac9..ae6c10f0 100644
--- a/packages/ui/src/components/CurrencyAmount.tsx
+++ b/packages/ui/src/components/CurrencyAmount.tsx
@@ -8,6 +8,7 @@ import type {
 import {
   CurrencyUnit,
   formatCurrencyStr,
+  getCurrencyAmount,
   isCurrencyMap,
   mapCurrencyAmount,
 } from "@lightsparkdev/core";
@@ -31,7 +32,7 @@ type CurrencyAmountProps = {
 
 export function CurrencyAmount({
   amount,
-  displayUnit = CurrencyUnit.SATOSHI,
+  displayUnit: displayUnitProp,
   shortNumber = false,
   showUnits = false,
   includeEstimatedIndicator = false,
@@ -41,32 +42,38 @@ export function CurrencyAmount({
   typography,
   unitsPerBtc,
 }: CurrencyAmountProps) {
-  const unit = displayUnit;
-
-  const amountMap = isCurrencyMap(amount)
-    ? amount
-    : mapCurrencyAmount(amount, unitsPerBtc);
+  let displayUnit: CurrencyUnitType;
+  let amountMap: CurrencyMap;
+  if (isCurrencyMap(amount)) {
+    displayUnit = displayUnitProp || CurrencyUnit.SATOSHI;
+    amountMap = amount;
+  } else {
+    const resolvedCurrencyAmount = getCurrencyAmount(amount);
+    /* default to the currency amount unit if defined and displayUnit is not provided: */
+    displayUnit = displayUnitProp || resolvedCurrencyAmount.unit;
+    amountMap = mapCurrencyAmount(amount, unitsPerBtc);
+  }
 
-  const value = amountMap[unit];
-  const defaultFormattedNumber = amountMap.formatted[unit];
+  const value = amountMap[displayUnit];
+  const defaultFormattedNumber = amountMap.formatted[displayUnit];
 
   /* There are just a few ways that CurrencyAmounts need to be formatted
      throughout the UI. In general the default should always be used: */
   let formattedNumber = defaultFormattedNumber;
   if (shortNumber) {
     formattedNumber = formatCurrencyStr(
-      { value: Number(value), unit },
+      { value: Number(value), unit: displayUnit },
       { precision: 1, compact: true },
     );
   } else if (fullPrecision) {
     formattedNumber = formatCurrencyStr(
-      { value: Number(value), unit },
+      { value: Number(value), unit: displayUnit },
       { precision: "full" },
     );
   }
 
   if (showUnits) {
-    formattedNumber += ` ${shorttext(unit, value)}`;
+    formattedNumber += ` ${shorttext(displayUnit, value)}`;
   }
 
   let content: string | ReactNode = formattedNumber;
@@ -81,7 +88,7 @@ export function CurrencyAmount({
   return (
     <StyledCurrencyAmount ml={ml} id={id}>
       {includeEstimatedIndicator && "Est. "}
-      <CurrencyIcon unit={unit} />
+      <CurrencyIcon unit={displayUnit} />
       {content}
     </StyledCurrencyAmount>
   );
diff --git a/packages/ui/src/components/Flex.tsx b/packages/ui/src/components/Flex.tsx
index 50111946..5a05a658 100644
--- a/packages/ui/src/components/Flex.tsx
+++ b/packages/ui/src/components/Flex.tsx
@@ -3,8 +3,20 @@ import { type ElementType, type ReactNode } from "react";
 
 type FlexProps = {
   center?: boolean | undefined;
-  justify?: "center" | "flex-start" | "flex-end" | "space-between" | undefined;
-  align?: "center" | "flex-start" | "flex-end" | "space-between" | undefined;
+  justify?:
+    | "stretch"
+    | "center"
+    | "flex-start"
+    | "flex-end"
+    | "space-between"
+    | undefined;
+  align?:
+    | "stretch"
+    | "center"
+    | "flex-start"
+    | "flex-end"
+    | "space-between"
+    | undefined;
   children?: ReactNode;
   as?: ElementType | undefined;
   column?: boolean | undefined;
@@ -38,8 +50,8 @@ export function Flex({
   mr,
   ml,
 }: FlexProps) {
-  const justify = justifyProp ? justifyProp : center ? "center" : "flex-start";
-  const align = alignProp ? alignProp : center ? "center" : "flex-start";
+  const justify = justifyProp ? justifyProp : center ? "center" : "stretch";
+  const align = alignProp ? alignProp : center ? "center" : "stretch";
 
   return (
     <StyledFlex
@@ -74,7 +86,7 @@ type StyledFlexProps = {
   gap: number | undefined;
 };
 
-const StyledFlex = styled.div<StyledFlexProps>`
+export const StyledFlex = styled.div<StyledFlexProps>`
   display: flex;
   text-overflow: ellipsis;