diff --git a/ui/components/currency-toggle.tsx b/ui/components/currency-toggle.tsx
new file mode 100644
index 00000000..a280d663
--- /dev/null
+++ b/ui/components/currency-toggle.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { useCurrencyStore } from '@/lib/stores/currency';
+import { useQuery } from '@tanstack/react-query';
+import { fetchBtcUsdPrice, btcToSatsRate } from '@/lib/exchange-rate';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { useEffect } from 'react';
+import type { DisplayUnit } from '@/lib/types/units';
+
+export function CurrencyToggle() {
+ const { displayUnit, setDisplayUnit } = useCurrencyStore();
+
+ const { data: btcUsdPrice } = useQuery({
+ queryKey: ['btc-usd-price'],
+ queryFn: fetchBtcUsdPrice,
+ refetchInterval: 120_000,
+ staleTime: 60_000,
+ });
+
+ const usdPerSat = btcUsdPrice ? btcToSatsRate(btcUsdPrice) : null;
+
+ useEffect(() => {
+ if (displayUnit === 'usd' && usdPerSat === null) {
+ setDisplayUnit('sat');
+ }
+ }, [displayUnit, usdPerSat, setDisplayUnit]);
+
+ return (
+ {
+ if (value) {
+ setDisplayUnit(value as DisplayUnit);
+ }
+ }}
+ variant='outline'
+ size='sm'
+ className="mr-2"
+ >
+
+ mSAT
+
+
+ sat
+
+
+ USD
+
+
+ );
+}
+
diff --git a/ui/components/site-header.tsx b/ui/components/site-header.tsx
index 617607f1..70cfc485 100644
--- a/ui/components/site-header.tsx
+++ b/ui/components/site-header.tsx
@@ -8,6 +8,7 @@ import { useRouter } from 'next/navigation';
import { adminLogout } from '@/lib/api/services/auth';
import { toast } from 'sonner';
import { ThemeToggle } from '@/components/theme-toggle';
+import { CurrencyToggle } from '@/components/currency-toggle';
export function SiteHeader() {
const router = useRouter();
@@ -35,6 +36,7 @@ export function SiteHeader() {
Routstr Node
+