diff --git a/packages/ui-components/src/components/overview-card/overview-card.tsx b/packages/ui-components/src/components/overview-card/overview-card.tsx
index fffb0f254e..913663d4c0 100644
--- a/packages/ui-components/src/components/overview-card/overview-card.tsx
+++ b/packages/ui-components/src/components/overview-card/overview-card.tsx
@@ -4,7 +4,9 @@ import { cn } from '../../lib/cn';
 type OverviewCardProps = {
   title: string;
   icon: ReactNode;
-  value: string | number;
+  value: ReactNode;
+  /** Rendered baseline-aligned to the right of the value (e.g. secondary currency amounts). */
+  secondaryValue?: ReactNode;
   bottomLineText?: string;
   onClick?: () => void;
   iconWrapperClassName?: string;
@@ -16,6 +18,7 @@ const OverviewCard = ({
   title,
   icon,
   value,
+  secondaryValue,
   bottomLineText,
   onClick,
   iconWrapperClassName,
@@ -45,7 +48,13 @@ const OverviewCard = ({
         {title}
       </span>
     </div>
-    <p className="font-bold text-[32px]/[32px] text-foreground">{value}</p>
+    <div className="flex items-baseline gap-2 flex-wrap">
+      {/* div, not p: value is a ReactNode and may legally contain non-phrasing content */}
+      <div className="font-bold text-[32px]/[32px] text-foreground">
+        {value}
+      </div>
+      {secondaryValue}
+    </div>
     {bottomLineText && (
       <p className="font-normal text-sm text-gray-400">{bottomLineText}</p>
     )}
diff --git a/packages/ui-components/src/stories/overview-card/overview-card.stories.tsx b/packages/ui-components/src/stories/overview-card/overview-card.stories.tsx
index a474d62f25..96204f593a 100644
--- a/packages/ui-components/src/stories/overview-card/overview-card.stories.tsx
+++ b/packages/ui-components/src/stories/overview-card/overview-card.stories.tsx
@@ -67,3 +67,18 @@ export const CustomIconWrapperClassName: Story = {
     iconWrapperClassName: 'bg-green-400',
   },
 };
+
+/**
+ * Card with a secondary value rendered baseline-aligned next to the main value
+ * (e.g. remaining currency amounts for a multi-currency total).
+ */
+export const WithSecondaryValue: Story = {
+  args: {
+    value: '$12.4K',
+    secondaryValue: (
+      <span className="text-xs font-medium text-muted-foreground">
+        + €3.1K · £980
+      </span>
+    ),
+  },
+};