diff --git a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
index 42c77146e..5c72860d8 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
@@ -3,13 +3,13 @@ import { useDateRange, useMessages, useSticky } from 'components/hooks';
 import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
 import MetricCard from 'components/metrics/MetricCard';
 import MetricsBar from 'components/metrics/MetricsBar';
-import { formatShortTime } from 'lib/format';
+import { formatLongNumberOptions, formatShortTime } from 'lib/format';
 import WebsiteFilterButton from './WebsiteFilterButton';
 import useWebsiteStats from 'components/hooks/queries/useWebsiteStats';
 import styles from './WebsiteMetricsBar.module.css';
 import { Dropdown, Item } from 'react-basics';
 import useStore, { setWebsiteDateCompare } from 'store/websites';
-import { type FormatNumberOptions, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 
 export function WebsiteMetricsBar({
   websiteId,
@@ -36,8 +36,6 @@ export function WebsiteMetricsBar({
   const intl = useIntl();
 
   const { pageviews, visitors, visits, bounces, totaltime } = data || {};
-  const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
-  const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
 
   const metrics = data
     ? [
@@ -45,22 +43,19 @@ export function WebsiteMetricsBar({
           ...pageviews,
           label: formatMessage(labels.views),
           change: pageviews.value - pageviews.prev,
-          formatValue: (n: number) =>
-            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber),
+          formatValue: (n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n)),
         },
         {
           ...visits,
           label: formatMessage(labels.visits),
           change: visits.value - visits.prev,
-          formatValue: (n: number) =>
-            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber),
+          formatValue: (n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n)),
         },
         {
           ...visitors,
           label: formatMessage(labels.visitors),
           change: visitors.value - visitors.prev,
-          formatValue: (n: number) =>
-            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber),
+          formatValue: (n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n)),
         },
         {
           label: formatMessage(labels.bounceRate),
diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx
index a73c5207f..91805b07e 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx
@@ -2,16 +2,14 @@ import MetricCard from 'components/metrics/MetricCard';
 import { useMessages } from 'components/hooks';
 import { RealtimeData } from 'lib/types';
 import styles from './RealtimeHeader.module.css';
-import { type FormatNumberOptions, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
+import { formatLongNumberOptions } from 'lib/format';
 
 export function RealtimeHeader({ data }: { data: RealtimeData }) {
   const { formatMessage, labels } = useMessages();
   const { totals }: any = data || {};
   const intl = useIntl();
 
-  const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
-  const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
-
   return (
     <div className={styles.header}>
       <div className={styles.metrics}>
@@ -19,33 +17,25 @@ export function RealtimeHeader({ data }: { data: RealtimeData }) {
           className={styles.card}
           label={formatMessage(labels.views)}
           value={totals.views}
-          formatValue={(n: number) =>
-            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
-          }
+          formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
         />
         <MetricCard
           className={styles.card}
           label={formatMessage(labels.visitors)}
           value={totals.visitors}
-          formatValue={(n: number) =>
-            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
-          }
+          formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
         />
         <MetricCard
           className={styles.card}
           label={formatMessage(labels.events)}
           value={totals.events}
-          formatValue={(n: number) =>
-            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
-          }
+          formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
         />
         <MetricCard
           className={styles.card}
           label={formatMessage(labels.countries)}
           value={totals.countries}
-          formatValue={(n: number) =>
-            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
-          }
+          formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
         />
       </div>
     </div>
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
index 106c9fb18..ef9aa75eb 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
@@ -3,47 +3,37 @@ import useWebsiteSessionStats from 'components/hooks/queries/useWebsiteSessionSt
 import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
 import MetricCard from 'components/metrics/MetricCard';
 import MetricsBar from 'components/metrics/MetricsBar';
+import { formatLongNumberOptions } from 'lib/format';
 import { Flexbox } from 'react-basics';
-import { type FormatNumberOptions, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 
 export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
   const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId);
   const intl = useIntl();
 
-  const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
-  const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
-
   return (
     <Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
       <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
         <MetricCard
           value={data?.visitors?.value}
           label={formatMessage(labels.visitors)}
-          formatValue={(n: number) =>
-            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
-          }
+          formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
         />
         <MetricCard
           value={data?.visits?.value}
           label={formatMessage(labels.visits)}
-          formatValue={(n: number) =>
-            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
-          }
+          formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
         />
         <MetricCard
           value={data?.pageviews?.value}
           label={formatMessage(labels.views)}
-          formatValue={(n: number) =>
-            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
-          }
+          formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
         />
         <MetricCard
           value={data?.countries?.value}
           label={formatMessage(labels.countries)}
-          formatValue={(n: number) =>
-            intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
-          }
+          formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
         />
       </MetricsBar>
       <WebsiteDateFilter websiteId={websiteId} />
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx
index 2e1542421..62f1059cb 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx
@@ -1,38 +1,29 @@
 import { useMessages } from 'components/hooks';
 import MetricCard from 'components/metrics/MetricCard';
 import MetricsBar from 'components/metrics/MetricsBar';
-import { formatShortTime } from 'lib/format';
-import { type FormatNumberOptions, useIntl } from 'react-intl';
+import { formatLongNumberOptions, formatShortTime } from 'lib/format';
+import { useIntl } from 'react-intl';
 
 export function SessionStats({ data }) {
   const { formatMessage, labels } = useMessages();
   const intl = useIntl();
 
-  const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
-  const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
-
   return (
     <MetricsBar isFetched={true}>
       <MetricCard
         label={formatMessage(labels.visits)}
         value={data?.visits}
-        formatValue={(n: number) =>
-          intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
-        }
+        formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
       />
       <MetricCard
         label={formatMessage(labels.views)}
         value={data?.views}
-        formatValue={(n: number) =>
-          intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
-        }
+        formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
       />
       <MetricCard
         label={formatMessage(labels.events)}
         value={data?.events}
-        formatValue={(n: number) =>
-          intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
-        }
+        formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
       />
       <MetricCard
         label={formatMessage(labels.visitDuration)}
diff --git a/src/lib/format.ts b/src/lib/format.ts
index a662a9eb4..83c67067f 100644
--- a/src/lib/format.ts
+++ b/src/lib/format.ts
@@ -1,3 +1,5 @@
+import type { FormatNumberOptions } from 'react-intl';
+
 export function parseTime(val: number) {
   const days = ~~(val / 86400);
   const hours = ~~(val / 3600) - days * 24;
@@ -63,6 +65,18 @@ export function formatLongNumber(value: number) {
   return formatNumber(n);
 }
 
+export function formatLongNumberOptions(value: number): FormatNumberOptions {
+  return value < 100
+    ? {
+        notation: 'compact',
+        maximumFractionDigits: 0,
+      }
+    : {
+        notation: 'compact',
+        maximumSignificantDigits: 3,
+      };
+}
+
 export function stringToColor(str: string) {
   if (!str) {
     return '#ffffff';