From fd853045cfbbfc351a240a94f3cf81fa3afbfc12 Mon Sep 17 00:00:00 2001
From: Jerozgen <jerozgen@gmail.com>
Date: Sat, 14 Feb 2026 22:31:46 +0300
Subject: [PATCH 1/2] Improve Intl formatting

---
 .../src/components/ui/LegacyProjectCard.vue   |  9 ++-
 .../src/components/ui/world/InstanceItem.vue  |  8 +-
 .../src/components/ui/world/WorldItem.vue     | 13 +++-
 .../src/pages/project/Gallery.vue             | 16 ++--
 .../src/pages/project/Version.vue             | 24 ++----
 .../src/components/ui/NotificationItem.vue    | 17 ++--
 .../src/components/ui/charts/Chart.client.vue | 15 ++--
 .../src/components/ui/charts/ChartDisplay.vue | 25 ++++--
 .../ui/dashboard/RevenueInputField.vue        |  3 +-
 .../ui/dashboard/RevenueTransaction.vue       |  9 ++-
 .../ui/dashboard/WithdrawFeeBreakdown.vue     | 26 +------
 .../withdraw-stages/CompletionStage.vue       | 26 +++----
 .../withdraw-stages/MethodSelectionStage.vue  |  3 +-
 .../withdraw-stages/TaxFormStage.vue          |  3 +-
 .../TremendousDetailsStage.vue                | 14 +---
 .../ui/moderation/ModerationQueueCard.vue     | 14 +++-
 .../ui/moderation/ModerationReportCard.vue    | 15 ++--
 .../ui/moderation/ModerationTechRevCard.vue   | 13 +++-
 .../src/components/ui/report/ReportInfo.vue   |  8 +-
 .../src/components/ui/servers/FileItem.vue    | 29 +++----
 .../servers/marketing/ServerPlanSelector.vue  |  8 +-
 .../ui/servers/notice/NoticeDashboardItem.vue | 19 +++--
 .../components/ui/thread/ThreadMessage.vue    | 16 +++-
 .../src/composables/compact-number.ts         | 26 -------
 apps/frontend/src/locales/en-US/index.json    | 10 +--
 apps/frontend/src/pages/[type]/[id].vue       | 25 +++---
 .../src/pages/[type]/[id]/changelog.vue       | 15 +++-
 .../src/pages/[type]/[id]/gallery.vue         |  9 ++-
 .../pages/[type]/[id]/settings/gallery.vue    |  9 ++-
 .../pages/[type]/[id]/version/[version].vue   | 14 +++-
 .../frontend/src/pages/admin/billing/[id].vue | 28 +++++--
 .../src/pages/admin/servers/notices.vue       | 16 ++--
 .../src/pages/admin/servers/transfers.vue     |  9 ++-
 apps/frontend/src/pages/collection/[id].vue   | 21 +++--
 .../src/pages/dashboard/collections.vue       | 15 +++-
 .../src/pages/dashboard/revenue/index.vue     |  7 +-
 .../src/pages/dashboard/revenue/transfers.vue | 19 ++++-
 apps/frontend/src/pages/hosting/index.vue     |  7 +-
 apps/frontend/src/pages/index.vue             |  6 +-
 apps/frontend/src/pages/legal/cmp-info.vue    | 13 +++-
 .../src/pages/news/article/[slug].vue         |  8 +-
 apps/frontend/src/pages/news/index.vue        |  7 +-
 apps/frontend/src/pages/organization/[id].vue | 10 ++-
 apps/frontend/src/pages/plus.vue              |  9 +--
 .../src/pages/settings/applications.vue       |  4 +-
 .../src/pages/settings/billing/charges.vue    | 14 ++--
 .../src/pages/settings/billing/index.vue      | 46 ++++++-----
 apps/frontend/src/pages/settings/pats.vue     | 34 ++------
 apps/frontend/src/pages/settings/sessions.vue | 23 ++----
 apps/frontend/src/pages/user/[id].vue         | 30 +++----
 packages/assets/generated-icons.ts            |  4 +-
 packages/ui/package.json                      |  1 +
 .../billing/ExpandableInvoiceTotal.vue        |  9 +--
 .../billing/ModalBasedServerPlan.vue          |  7 +-
 .../src/components/billing/PurchaseModal.vue  | 25 +++---
 .../billing/ServersPurchase0Plan.vue          |  9 ++-
 .../billing/ServersPurchase1Region.vue        |  7 +-
 .../billing/ServersPurchase3Review.vue        | 32 ++++----
 .../components/changelog/ChangelogEntry.vue   | 15 +++-
 packages/ui/src/components/chart/Chart.vue    |  7 +-
 .../ui/src/components/chart/CompactChart.vue  |  6 +-
 .../components/content/NewsArticleCard.vue    |  7 +-
 .../instances/ContentModpackCard.vue          | 11 +--
 .../instances/modals/ContentUpdaterModal.vue  |  8 +-
 .../src/components/project/ProjectHeader.vue  | 13 ++--
 .../project/ProjectPageVersions.vue           | 18 ++---
 .../project/ProjectSidebarDetails.vue         | 21 +++--
 .../project/card/ProjectCardDate.vue          | 17 ++--
 .../project/card/ProjectCardStats.vue         | 13 ++--
 .../src/components/servers/ServerListing.vue  | 12 +--
 .../components/servers/backups/BackupItem.vue |  8 +-
 .../servers/files/explorer/FileItem.vue       | 29 +++----
 .../ui/src/composables/format-date-time.ts    | 38 +++++++++
 packages/ui/src/composables/format-money.ts   | 78 +++++++++++++++++++
 packages/ui/src/composables/format-number.ts  | 75 ++++++++++++++++++
 packages/ui/src/composables/how-ago.ts        | 41 +++++-----
 packages/ui/src/composables/index.ts          |  3 +
 packages/ui/src/locales/en-US/index.json      | 13 ++--
 packages/ui/src/utils/common-messages.ts      |  8 +-
 packages/utils/billing.ts                     | 23 ------
 packages/utils/utils.ts                       | 34 --------
 81 files changed, 782 insertions(+), 577 deletions(-)
 delete mode 100644 apps/frontend/src/composables/compact-number.ts
 create mode 100644 packages/ui/src/composables/format-date-time.ts
 create mode 100644 packages/ui/src/composables/format-money.ts
 create mode 100644 packages/ui/src/composables/format-number.ts

diff --git a/apps/app-frontend/src/components/ui/LegacyProjectCard.vue b/apps/app-frontend/src/components/ui/LegacyProjectCard.vue
index 000970c653..73b51ba568 100644
--- a/apps/app-frontend/src/components/ui/LegacyProjectCard.vue
+++ b/apps/app-frontend/src/components/ui/LegacyProjectCard.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
-import { Avatar, FormattedTag, TagItem } from '@modrinth/ui'
-import { formatNumber } from '@modrinth/utils'
+import {Avatar, FormattedTag, TagItem, useCompactNumber} from '@modrinth/ui'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed } from 'vue'
@@ -11,6 +10,8 @@ dayjs.extend(relativeTime)
 
 const router = useRouter()
 
+const { formatCompactNumber } = useCompactNumber()
+
 const props = defineProps({
 	project: {
 		type: Object,
@@ -96,13 +97,13 @@ const toTransparent = computed(() => {
 					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
 				>
 					<DownloadIcon />
-					{{ formatNumber(project.downloads) }}
+					{{ formatCompactNumber(project.downloads) }}
 				</div>
 				<div
 					class="flex items-center gap-1 pr-2 border-0 border-r-[1px] border-solid border-button-border"
 				>
 					<HeartIcon />
-					{{ formatNumber(project.follows) }}
+					{{ formatCompactNumber(project.follows) }}
 				</div>
 				<div class="flex items-center gap-1 pr-2">
 					<TagIcon />
diff --git a/apps/app-frontend/src/components/ui/world/InstanceItem.vue b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
index a4e1816592..07e5875f0d 100644
--- a/apps/app-frontend/src/components/ui/world/InstanceItem.vue
+++ b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
@@ -13,7 +13,7 @@ import {
 	commonMessages,
 	injectNotificationManager,
 	OverflowMenu,
-	SmartClickable,
+	SmartClickable, useFormatDateTime,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
@@ -36,6 +36,10 @@ import { handleSevereError } from '@/store/error'
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: "short",
+	dateStyle: "long",
+})
 
 const router = useRouter()
 
@@ -147,7 +151,7 @@ onUnmounted(() => {
 					<div
 						v-tooltip="
 							instance.last_played
-								? dayjs(instance.last_played).format('MMMM D, YYYY [at] h:mm A')
+								? formatDateTime(instance.last_played)
 								: null
 						"
 						class="w-fit shrink-0"
diff --git a/apps/app-frontend/src/components/ui/world/WorldItem.vue b/apps/app-frontend/src/components/ui/world/WorldItem.vue
index 6fda5cf5d8..fe89cea999 100644
--- a/apps/app-frontend/src/components/ui/world/WorldItem.vue
+++ b/apps/app-frontend/src/components/ui/world/WorldItem.vue
@@ -17,7 +17,7 @@ import {
 	UserIcon,
 	XIcon,
 } from '@modrinth/assets'
-import type { MessageDescriptor } from '@modrinth/ui'
+import {MessageDescriptor, useFormatDateTime, useFormatNumber} from '@modrinth/ui'
 import {
 	Avatar,
 	ButtonStyled,
@@ -28,7 +28,7 @@ import {
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
-import { formatNumber, getPingLevel } from '@modrinth/utils'
+import { getPingLevel } from '@modrinth/utils'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
@@ -48,6 +48,11 @@ import { getWorldIdentifier, set_world_display_status } from '@/helpers/worlds.t
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
+const formatNumber = useFormatNumber()
+const formatDateTime = useFormatDateTime({
+	timeStyle: "short",
+	dateStyle: "long",
+})
 
 const router = useRouter()
 
@@ -239,7 +244,7 @@ const messages = defineMessages({
 								/>
 								<Tooltip :disabled="!hasPlayersTooltip">
 									<span :class="{ 'cursor-help': hasPlayersTooltip }">
-										{{ formatNumber(serverStatus.players?.online, false) }}
+										{{ formatNumber(serverStatus.players?.online) }}
 										online
 									</span>
 									<template #popper>
@@ -261,7 +266,7 @@ const messages = defineMessages({
 				<div class="flex items-center gap-2 text-sm text-secondary">
 					<div
 						v-tooltip="
-							world.last_played ? dayjs(world.last_played).format('MMMM D, YYYY [at] h:mm A') : null
+							world.last_played ? formatDateTime(world.last_played) : null
 						"
 						class="w-fit shrink-0"
 						:class="{
diff --git a/apps/app-frontend/src/pages/project/Gallery.vue b/apps/app-frontend/src/pages/project/Gallery.vue
index e55d7d11b3..648f8e3749 100644
--- a/apps/app-frontend/src/pages/project/Gallery.vue
+++ b/apps/app-frontend/src/pages/project/Gallery.vue
@@ -10,13 +10,7 @@
 			</div>
 			<span class="gallery-time">
 				<CalendarIcon />
-				{{
-					new Date(image.created).toLocaleDateString('en-US', {
-						year: 'numeric',
-						month: 'long',
-						day: 'numeric',
-					})
-				}}
+				{{ formatDate(new Date(image.created))  }}
 			</span>
 		</Card>
 	</div>
@@ -91,12 +85,18 @@ import {
 	RightArrowIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Button, Card } from '@modrinth/ui'
+import {Button, Card, useFormatDateTime} from '@modrinth/ui'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
 import { trackEvent } from '@/helpers/analytics'
 
+const formatDate = useFormatDateTime({
+	year: 'numeric',
+	month: 'long',
+	day: 'numeric',
+})
+
 const props = defineProps({
 	project: {
 		type: Object,
diff --git a/apps/app-frontend/src/pages/project/Version.vue b/apps/app-frontend/src/pages/project/Version.vue
index 337fd978f7..ff27e39180 100644
--- a/apps/app-frontend/src/pages/project/Version.vue
+++ b/apps/app-frontend/src/pages/project/Version.vue
@@ -136,22 +136,7 @@
 					<div class="metadata-item">
 						<span class="metadata-label">Publication Date</span>
 						<span class="metadata-value">
-							{{
-								new Date(version.date_published).toLocaleString('en-US', {
-									month: 'long',
-									day: 'numeric',
-									year: 'numeric',
-								})
-							}}
-							at
-							{{
-								new Date(version.date_published).toLocaleString('en-US', {
-									hour: 'numeric',
-									minute: 'numeric',
-									second: 'numeric',
-									hour12: true,
-								})
-							}}
+							{{ formatDateTime(version.date_published) }}
 						</span>
 					</div>
 					<div v-if="author" class="metadata-item">
@@ -183,7 +168,7 @@
 
 <script setup>
 import { CheckIcon, DownloadIcon, ExternalIcon, FileIcon, ReportIcon } from '@modrinth/assets'
-import { Avatar, Badge, Breadcrumbs, Button, Card, CopyCode } from '@modrinth/ui'
+import {Avatar, Badge, Breadcrumbs, Button, Card, CopyCode, useFormatDateTime} from '@modrinth/ui'
 import { formatBytes, renderString } from '@modrinth/utils'
 import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
@@ -193,6 +178,11 @@ import { get_project_many, get_version_many } from '@/helpers/cache.js'
 import { releaseColor } from '@/helpers/utils'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 
+const formatDateTime = useFormatDateTime({
+	timeStyle: "short",
+	dateStyle: "long",
+})
+
 const breadcrumbs = useBreadcrumbs()
 
 const route = useRoute()
diff --git a/apps/frontend/src/components/ui/NotificationItem.vue b/apps/frontend/src/components/ui/NotificationItem.vue
index 1e95f8d9f0..c56f32978a 100644
--- a/apps/frontend/src/components/ui/NotificationItem.vue
+++ b/apps/frontend/src/components/ui/NotificationItem.vue
@@ -178,12 +178,7 @@
 							class="categories"
 						/>
 						{{ $formatVersion(notif.extra_data.version.game_versions) }}
-						<span
-							v-tooltip="
-								$dayjs(notif.extra_data.version.date_published).format('MMMM D, YYYY [at] h:mm A')
-							"
-							class="date"
-						>
+						<span v-tooltip="formatDateTime(notif.extra_data.version.date_published)" class="date">
 							{{ formatRelativeTime(notif.extra_data.version.date_published) }}
 						</span>
 					</span>
@@ -197,10 +192,7 @@
 			<span v-if="notification.read" class="read-badge inline-flex">
 				<CheckCircleIcon /> Read
 			</span>
-			<span
-				v-tooltip="$dayjs(notification.created).format('MMMM D, YYYY [at] h:mm A')"
-				class="inline-flex"
-			>
+			<span v-tooltip="formatDateTime(notification.created)" class="inline-flex">
 				<CalendarIcon class="mr-1" /> Received
 				{{ formatRelativeTime(notification.created) }}
 			</span>
@@ -338,6 +330,7 @@ import {
 	DoubleIcon,
 	injectNotificationManager,
 	ProjectStatusBadge,
+	useFormatDateTime,
 	useRelativeTime,
 } from '@modrinth/ui'
 import { getUserLink, renderString } from '@modrinth/utils'
@@ -351,6 +344,10 @@ import ThreadSummary from './thread/ThreadSummary.vue'
 const { addNotification } = injectNotificationManager()
 const emit = defineEmits(['update:notifications'])
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const props = defineProps({
 	notification: {
diff --git a/apps/frontend/src/components/ui/charts/Chart.client.vue b/apps/frontend/src/components/ui/charts/Chart.client.vue
index ad3e6b2a2f..16ea42aaea 100644
--- a/apps/frontend/src/components/ui/charts/Chart.client.vue
+++ b/apps/frontend/src/components/ui/charts/Chart.client.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { formatMoney, formatNumber } from '@modrinth/utils'
-import dayjs from 'dayjs'
+import { useFormatDateTime, useFormatMoney, useFormatNumber } from '@modrinth/ui'
 import VueApexCharts from 'vue3-apexcharts'
 
 const props = defineProps({
@@ -18,7 +17,6 @@ const props = defineProps({
 	},
 	formatLabels: {
 		type: Function,
-		default: (label) => dayjs(label).format('MMM D'),
 	},
 	colors: {
 		type: Array,
@@ -78,8 +76,15 @@ const props = defineProps({
 	},
 })
 
+const formatNumber = useFormatNumber()
+const formatMoney = useFormatMoney()
+const formatDate = useFormatDateTime({
+	month: 'short',
+	day: 'numeric',
+})
+
 function formatTooltipValue(value, props) {
-	return props.isMoney ? formatMoney(value, false) : formatNumber(value, false)
+	return props.isMoney ? formatMoney(value) : formatNumber(value)
 }
 
 function generateListEntry(value, index, _, w, props) {
@@ -99,7 +104,7 @@ function generateListEntry(value, index, _, w, props) {
 function generateTooltip({ series, seriesIndex, dataPointIndex, w }, props) {
 	const label = w.globals.lastXAxis.categories?.[dataPointIndex]
 
-	const formattedLabel = props.formatLabels(label)
+	const formattedLabel = props.formatLabels ? props.formatLabels(label) : formatDate(label)
 
 	let tooltip = `<div class="bar-tooltip">
     <div class="seperated-entry title">
diff --git a/apps/frontend/src/components/ui/charts/ChartDisplay.vue b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
index 2d4f7d58fd..6966ea788e 100644
--- a/apps/frontend/src/components/ui/charts/ChartDisplay.vue
+++ b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
@@ -21,7 +21,7 @@
 						ref="tinyDownloadChart"
 						:title="`Downloads`"
 						color="var(--color-brand)"
-						:value="formatNumber(analytics.formattedData.value.downloads.sum, false)"
+						:value="formatNumber(analytics.formattedData.value.downloads.sum)"
 						:data="analytics.formattedData.value.downloads.chart.sumData"
 						:labels="analytics.formattedData.value.downloads.chart.labels"
 						suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
@@ -40,7 +40,7 @@
 						ref="tinyViewChart"
 						:title="`Views`"
 						color="var(--color-blue)"
-						:value="formatNumber(analytics.formattedData.value.views.sum, false)"
+						:value="formatNumber(analytics.formattedData.value.views.sum)"
 						:data="analytics.formattedData.value.views.chart.sumData"
 						:labels="analytics.formattedData.value.views.chart.labels"
 						suffix="<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>"
@@ -57,7 +57,7 @@
 						ref="tinyRevenueChart"
 						:title="`Revenue`"
 						color="var(--color-purple)"
-						:value="formatMoney(analytics.formattedData.value.revenue.sum, false)"
+						:value="formatMoney(analytics.formattedData.value.revenue.sum)"
 						:data="analytics.formattedData.value.revenue.chart.sumData"
 						:labels="analytics.formattedData.value.revenue.chart.labels"
 						is-money
@@ -221,7 +221,7 @@
 										><template v-if="name.toLowerCase() === 'xx' || !name">Other</template>
 										<template v-else>{{ countryCodeToName(name) }}</template>
 									</strong>
-									<span class="data-point">{{ formatNumber(count) }}</span>
+									<span class="data-point">{{ formatCompactNumber(count) }}</span>
 								</div>
 								<div
 									v-tooltip="
@@ -280,7 +280,7 @@
 										<template v-if="name.toLowerCase() === 'xx' || !name">Other</template>
 										<template v-else>{{ countryCodeToName(name) }}</template>
 									</strong>
-									<span class="data-point">{{ formatNumber(count) }}</span>
+									<span class="data-point">{{ formatCompactNumber(count) }}</span>
 								</div>
 								<div
 									v-tooltip="
@@ -310,8 +310,15 @@
 
 <script setup lang="ts">
 import { DownloadIcon, PaletteIcon, UpdatedIcon } from '@modrinth/assets'
-import { Button, Card, DropdownSelect } from '@modrinth/ui'
-import { capitalizeString, formatMoney, formatNumber } from '@modrinth/utils'
+import {
+	Button,
+	Card,
+	DropdownSelect,
+	useCompactNumber,
+	useFormatMoney,
+	useFormatNumber,
+} from '@modrinth/ui'
+import { capitalizeString } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
 
@@ -325,6 +332,10 @@ import {
 	intToRgba,
 } from '~/utils/analytics.js'
 
+const formatNumber = useFormatNumber()
+const { formatCompactNumber } = useCompactNumber()
+const formatMoney = useFormatMoney()
+
 const router = useNativeRouter()
 const theme = useTheme()
 
diff --git a/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue b/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue
index 37b3010b93..b30d2ed8c4 100644
--- a/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue
+++ b/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue
@@ -54,9 +54,9 @@ import {
 	Combobox,
 	commonMessages,
 	formFieldPlaceholders,
+	useFormatMoney,
 	useVIntl,
 } from '@modrinth/ui'
-import { formatMoney } from '@modrinth/utils'
 import { computed, nextTick, ref, watch } from 'vue'
 
 const props = withDefaults(
@@ -81,6 +81,7 @@ const emit = defineEmits<{
 }>()
 
 const { formatMessage } = useVIntl()
+const formatMoney = useFormatMoney()
 const amountInput = ref<HTMLInputElement | null>(null)
 
 const safeMaxAmount = computed(() => {
diff --git a/apps/frontend/src/components/ui/dashboard/RevenueTransaction.vue b/apps/frontend/src/components/ui/dashboard/RevenueTransaction.vue
index 2e51ab13cb..d6b3b59d2d 100644
--- a/apps/frontend/src/components/ui/dashboard/RevenueTransaction.vue
+++ b/apps/frontend/src/components/ui/dashboard/RevenueTransaction.vue
@@ -35,7 +35,7 @@
 							>{{ formatTransactionStatus(transaction.status) }} <BulletDivider
 						/></span>
 					</template>
-					{{ dayjs(transaction.created).format('MMM DD YYYY') }}
+					{{ formatDate(transaction.created) }}
 					<template v-if="transaction.type === 'withdrawal' && transaction.fee">
 						<BulletDivider /> Fee {{ formatMoney(transaction.fee) }}
 					</template>
@@ -79,10 +79,11 @@ import {
 	ButtonStyled,
 	getCurrencyIcon,
 	injectNotificationManager,
+	useFormatDateTime,
+	useFormatMoney,
 	useVIntl,
 } from '@modrinth/ui'
-import { capitalizeString, formatMoney } from '@modrinth/utils'
-import dayjs from 'dayjs'
+import { capitalizeString } from '@modrinth/utils'
 import { Tooltip } from 'floating-vue'
 
 import { useGeneratedState } from '~/composables/generated'
@@ -188,6 +189,8 @@ function formatTransactionStatus(status: string): string {
 }
 
 const { formatMessage } = useVIntl()
+const formatMoney = useFormatMoney()
+const formatDate = useFormatDateTime({ dateStyle: 'medium' })
 
 function formatMethodName(method: string | undefined, method_id: string | undefined): string {
 	if (!method) return 'Unknown'
diff --git a/apps/frontend/src/components/ui/dashboard/WithdrawFeeBreakdown.vue b/apps/frontend/src/components/ui/dashboard/WithdrawFeeBreakdown.vue
index 13c2c994cf..41f9a6d97b 100644
--- a/apps/frontend/src/components/ui/dashboard/WithdrawFeeBreakdown.vue
+++ b/apps/frontend/src/components/ui/dashboard/WithdrawFeeBreakdown.vue
@@ -57,8 +57,7 @@
 
 <script setup lang="ts">
 import { LoaderCircleIcon } from '@modrinth/assets'
-import { defineMessages, useVIntl } from '@modrinth/ui'
-import { formatMoney } from '@modrinth/utils'
+import { defineMessages, useFormatMoney, useVIntl } from '@modrinth/ui'
 import { computed } from 'vue'
 
 const props = withDefaults(
@@ -78,6 +77,7 @@ const props = withDefaults(
 )
 
 const { formatMessage } = useVIntl()
+const formatMoney = useFormatMoney()
 
 const amountInUsd = computed(() => {
 	if (props.isGiftCard && shouldShowExchangeRate.value) {
@@ -119,31 +119,13 @@ const formattedLocalCurrency = computed(() => {
 	if (!shouldShowExchangeRate.value || !netAmountInLocalCurrency.value || !props.localCurrency)
 		return ''
 
-	try {
-		return new Intl.NumberFormat('en-US', {
-			style: 'currency',
-			currency: props.localCurrency,
-			minimumFractionDigits: 2,
-			maximumFractionDigits: 2,
-		}).format(netAmountInLocalCurrency.value)
-	} catch {
-		return `${props.localCurrency} ${netAmountInLocalCurrency.value.toFixed(2)}`
-	}
+	return formatMoney(netAmountInLocalCurrency.value, props.localCurrency)
 })
 
 const formattedLocalCurrencyAmount = computed(() => {
 	if (!shouldShowExchangeRate.value || !localCurrencyAmount.value || !props.localCurrency) return ''
 
-	try {
-		return new Intl.NumberFormat('en-US', {
-			style: 'currency',
-			currency: props.localCurrency,
-			minimumFractionDigits: 2,
-			maximumFractionDigits: 2,
-		}).format(localCurrencyAmount.value)
-	} catch {
-		return `${props.localCurrency} ${localCurrencyAmount.value.toFixed(2)}`
-	}
+	return formatMoney(localCurrencyAmount.value, props.localCurrency)
 })
 
 const messages = defineMessages({
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue
index fc302b47f7..d717ac98f4 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/CompletionStage.vue
@@ -124,9 +124,14 @@
 </template>
 
 <script setup lang="ts">
-import { defineMessages, IntlFormatted, normalizeChildren, useVIntl } from '@modrinth/ui'
-import { formatMoney } from '@modrinth/utils'
-import dayjs from 'dayjs'
+import {
+	defineMessages,
+	IntlFormatted,
+	normalizeChildren,
+	useFormatDateTime,
+	useFormatMoney,
+	useVIntl,
+} from '@modrinth/ui'
 import { computed, onMounted, ref } from 'vue'
 import ConfettiExplosion from 'vue-confetti-explosion'
 
@@ -135,6 +140,8 @@ import { getRailConfig } from '@/utils/muralpay-rails'
 
 const { withdrawData } = useWithdrawContext()
 const { formatMessage } = useVIntl()
+const formatMoney = useFormatMoney()
+const formatDate = useFormatDateTime({ dateStyle: 'long' })
 
 const result = computed(() => withdrawData.value.result)
 
@@ -149,7 +156,7 @@ onMounted(() => {
 
 const formattedDate = computed(() => {
 	if (!result.value?.created) return 'N/A'
-	return dayjs(result.value.created).format('MMMM D, YYYY')
+	return formatDate(result.value.created)
 })
 
 const selectedRail = computed(() => {
@@ -185,16 +192,7 @@ const formattedLocalCurrency = computed(() => {
 	if (!shouldShowExchangeRate.value || !netAmountInLocalCurrency.value || !localCurrency.value)
 		return ''
 
-	try {
-		return new Intl.NumberFormat('en-US', {
-			style: 'currency',
-			currency: localCurrency.value,
-			minimumFractionDigits: 2,
-			maximumFractionDigits: 2,
-		}).format(netAmountInLocalCurrency.value)
-	} catch {
-		return `${localCurrency.value} ${netAmountInLocalCurrency.value.toFixed(2)}`
-	}
+	return formatMoney(netAmountInLocalCurrency.value, localCurrency.value)
 })
 
 const isMuralPayWithdrawal = computed(() => {
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue
index 15bec7f69f..85b9902ccd 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MethodSelectionStage.vue
@@ -88,9 +88,9 @@ import {
 	IntlFormatted,
 	normalizeChildren,
 	useDebugLogger,
+	useFormatMoney,
 	useVIntl,
 } from '@modrinth/ui'
-import { formatMoney } from '@modrinth/utils'
 import { useGeolocation } from '@vueuse/core'
 
 import { useCountries, useFormattedCountries, useUserCountry } from '@/composables/country.ts'
@@ -109,6 +109,7 @@ const userCountry = useUserCountry()
 const allCountries = useCountries()
 const { coords } = useGeolocation()
 const { formatMessage } = useVIntl()
+const formatMoney = useFormatMoney()
 const { addNotification } = injectNotificationManager()
 const auth = await useAuth()
 
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue
index 9d229dc9d6..11a5c0c803 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TaxFormStage.vue
@@ -80,9 +80,9 @@ import {
 	defineMessages,
 	IntlFormatted,
 	normalizeChildren,
+	useFormatMoney,
 	useVIntl,
 } from '@modrinth/ui'
-import { formatMoney } from '@modrinth/utils'
 import { computed } from 'vue'
 
 import { TAX_THRESHOLD_ACTUAL } from '@/providers/creator-withdraw.ts'
@@ -93,6 +93,7 @@ const props = defineProps<{
 }>()
 
 const { formatMessage } = useVIntl()
+const formatMoney = useFormatMoney()
 
 const usedLimit = computed(() => props.balance?.withdrawn_ytd ?? 0)
 const remainingLimit = computed(() => {
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
index d33d0662f4..3eab6e28f2 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
@@ -351,9 +351,9 @@ import {
 	normalizeChildren,
 	paymentMethodMessages,
 	useDebugLogger,
+	useFormatMoney,
 	useVIntl,
 } from '@modrinth/ui'
-import { formatMoney } from '@modrinth/utils'
 import { useDebounceFn } from '@vueuse/core'
 import { computed, onMounted, ref, watch } from 'vue'
 
@@ -366,6 +366,7 @@ const debug = useDebugLogger('TremendousDetailsStage')
 const { withdrawData, maxWithdrawAmount, availableMethods, paymentOptions, calculateFees } =
 	useWithdrawContext()
 const { formatMessage } = useVIntl()
+const formatMoney = useFormatMoney()
 const auth = await useAuth()
 
 const userEmail = computed(() => {
@@ -588,16 +589,7 @@ function formatAmountForDisplay(
 	if (!currencyCode || currencyCode === 'USD' || !rate) {
 		return formatMoney(localAmount)
 	}
-	try {
-		return new Intl.NumberFormat('en-US', {
-			style: 'currency',
-			currency: currencyCode,
-			minimumFractionDigits: 2,
-			maximumFractionDigits: 2,
-		}).format(localAmount)
-	} catch {
-		return `${currencyCode} ${localAmount.toFixed(2)}`
-	}
+	return formatMoney(localAmount, currencyCode)
 }
 
 const useFixedDenominations = computed(() => {
diff --git a/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue b/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
index b013bbca9a..359c122fa6 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
@@ -73,7 +73,7 @@
 
 			<div class="flex items-center gap-3">
 				<span
-					v-tooltip="`Since ${queuedDate.toLocaleString()}`"
+					v-tooltip="`Since ${formatDateTimeFull(queuedDate.toDate())}`"
 					class="text-base text-secondary"
 					:class="{
 						'text-red': daysInQueue > 4,
@@ -120,6 +120,7 @@ import {
 	injectNotificationManager,
 	OverflowMenu,
 	type OverflowMenuOption,
+	useFormatDateTime,
 	useRelativeTime,
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
@@ -130,6 +131,17 @@ import type { ModerationProject } from '~/helpers/moderation'
 
 const { addNotification } = injectNotificationManager()
 const formatRelativeTime = useRelativeTime()
+const formatDateTimeFull = useFormatDateTime({
+	weekday: 'short',
+	year: 'numeric',
+	month: 'short',
+	day: 'numeric',
+	hour: 'numeric',
+	minute: '2-digit',
+	second: '2-digit',
+	timeZoneName: 'short',
+	timeZone: 'UTC',
+})
 
 const baseId = useId()
 
diff --git a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
index 5fe31f92d5..ef77f3146f 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationReportCard.vue
@@ -32,7 +32,7 @@
 
 				<div class="flex flex-row items-center gap-2 self-end sm:self-auto">
 					<span
-						v-tooltip="formatExactDate(report.created)"
+						v-tooltip="formatDateTime(report.created)"
 						class="cursor-help whitespace-nowrap text-sm text-secondary"
 					>
 						{{ formatRelativeTime(report.created) }}
@@ -80,7 +80,7 @@
 
 						<span
 							v-if="report.user?.created"
-							v-tooltip="formatExactDate(report.user.created)"
+							v-tooltip="formatDateTime(report.user.created)"
 							class="cursor-help text-sm text-secondary"
 						>
 							Joined {{ formatRelativeTime(report.user.created) }}
@@ -190,7 +190,7 @@ import {
 	LinkIcon,
 } from '@modrinth/assets'
 import { type ExtendedReport, reportQuickReplies } from '@modrinth/moderation'
-import type { OverflowMenuOption } from '@modrinth/ui'
+import { type OverflowMenuOption, useFormatDateTime } from '@modrinth/ui'
 import {
 	Avatar,
 	ButtonStyled,
@@ -201,7 +201,6 @@ import {
 	useRelativeTime,
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
-import dayjs from 'dayjs'
 import { computed } from 'vue'
 
 import { isStaff } from '~/helpers/users.js'
@@ -305,10 +304,10 @@ async function reopenReport() {
 }
 
 const formatRelativeTime = useRelativeTime()
-
-function formatExactDate(date: string): string {
-	return dayjs(date).format('MMMM D, YYYY [at] h:mm A')
-}
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 function updateThread(newThread: any) {
 	if (props.report.thread) {
diff --git a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
index 33688274b1..078765e931 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
@@ -27,6 +27,7 @@ import {
 	injectNotificationManager,
 	OverflowMenu,
 	type OverflowMenuOption,
+	useFormatDateTime,
 } from '@modrinth/ui'
 import {
 	capitalizeString,
@@ -45,6 +46,16 @@ import ThreadView from '~/components/ui/thread/ThreadView.vue'
 const auth = await useAuth()
 const featureFlags = useFeatureFlags()
 
+const formatDateTimeUtc = useFormatDateTime({
+	year: 'numeric',
+	month: 'long',
+	day: 'numeric',
+	hour: 'numeric',
+	minute: '2-digit',
+	timeZoneName: 'short',
+	timeZone: 'UTC',
+})
+
 type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
 	id: string
 	version_id: string
@@ -706,7 +717,7 @@ const reviewSummaryPreview = computed(() => {
 	const totalDecisions = totalSafe + totalUnsafe
 	if (totalDecisions === 0) return ''
 
-	const timestamp = dayjs().utc().format('MMMM D, YYYY [at] h:mm A [UTC]')
+	const timestamp = formatDateTimeUtc(dayjs().toDate())
 	let markdown = `## Tech Review Summary\n*${timestamp}*\n\n`
 	markdown += `<details>\n<summary>File Details (${totalSafe} safe, ${totalUnsafe} unsafe)</summary>\n\n`
 
diff --git a/apps/frontend/src/components/ui/report/ReportInfo.vue b/apps/frontend/src/components/ui/report/ReportInfo.vue
index 46dc420a9e..d161d62784 100644
--- a/apps/frontend/src/components/ui/report/ReportInfo.vue
+++ b/apps/frontend/src/components/ui/report/ReportInfo.vue
@@ -94,7 +94,7 @@
 				<span>{{ report.reporterUser.username }}</span>
 			</nuxt-link>
 			<span>&nbsp;</span>
-			<span v-tooltip="$dayjs(report.created).format('MMMM D, YYYY [at] h:mm A')">{{
+			<span v-tooltip="formatDateTime(report.created)">{{
 				formatRelativeTime(report.created)
 			}}</span>
 			<CopyCode v-if="flags.developerMode" :text="report.id" class="report-id" />
@@ -104,13 +104,17 @@
 
 <script setup>
 import { ReportIcon, UnknownIcon, VersionIcon } from '@modrinth/assets'
-import { Avatar, Badge, CopyCode, useRelativeTime } from '@modrinth/ui'
+import { Avatar, Badge, CopyCode, useFormatDateTime, useRelativeTime } from '@modrinth/ui'
 import { formatProjectType, renderHighlightedString } from '@modrinth/utils'
 
 import ThreadSummary from '~/components/ui/thread/ThreadSummary.vue'
 import { getProjectTypeForUrl } from '~/helpers/projects.js'
 
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 defineProps({
 	report: {
diff --git a/apps/frontend/src/components/ui/servers/FileItem.vue b/apps/frontend/src/components/ui/servers/FileItem.vue
index 338d351181..6d74915743 100644
--- a/apps/frontend/src/components/ui/servers/FileItem.vue
+++ b/apps/frontend/src/components/ui/servers/FileItem.vue
@@ -79,6 +79,7 @@ import {
 	getFileExtensionIcon,
 	isEditableFile as isEditableFileExt,
 	isImageFile,
+	useFormatDateTime,
 } from '@modrinth/ui'
 import { computed, h, ref, shallowRef } from 'vue'
 import { renderToString } from 'vue/server-renderer'
@@ -121,6 +122,14 @@ const units = Object.freeze(['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'])
 const route = shallowRef(useRoute())
 const router = useRouter()
 
+const formatDateTime = useFormatDateTime({
+	year: '2-digit',
+	month: '2-digit',
+	day: '2-digit',
+	hour: 'numeric',
+	minute: 'numeric',
+})
+
 const containerClasses = computed(() => [
 	'group m-0 flex w-full select-none items-center justify-between overflow-hidden border-0 border-t border-solid border-surface-3 px-4 py-3 focus:!outline-none',
 	props.index % 2 === 0 ? 'bg-surface-2' : 'bg-surface-3',
@@ -177,28 +186,12 @@ const iconComponent = computed(() => {
 
 const formattedModifiedDate = computed(() => {
 	const date = new Date(props.modified * 1000)
-	return `${date.toLocaleDateString('en-US', {
-		month: '2-digit',
-		day: '2-digit',
-		year: '2-digit',
-	})}, ${date.toLocaleTimeString('en-US', {
-		hour: 'numeric',
-		minute: 'numeric',
-		hour12: true,
-	})}`
+	return formatDateTime(date)
 })
 
 const formattedCreationDate = computed(() => {
 	const date = new Date(props.created * 1000)
-	return `${date.toLocaleDateString('en-US', {
-		month: '2-digit',
-		day: '2-digit',
-		year: '2-digit',
-	})}, ${date.toLocaleTimeString('en-US', {
-		hour: 'numeric',
-		minute: 'numeric',
-		hour12: true,
-	})}`
+	return formatDateTime(date)
 })
 
 const isEditableFile = computed(() => {
diff --git a/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue b/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue
index acddaf0eed..ac6caa41d5 100644
--- a/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue
+++ b/apps/frontend/src/components/ui/servers/marketing/ServerPlanSelector.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { MessageDescriptor } from '@modrinth/ui'
+import { type MessageDescriptor, useFormatPrice } from '@modrinth/ui'
 import { ButtonStyled, defineMessage, defineMessages, ServersSpecs, useVIntl } from '@modrinth/ui'
-import { formatPrice } from '@modrinth/utils'
 
-const { formatMessage, locale } = useVIntl()
+const { formatMessage } = useVIntl()
+const formatPrice = useFormatPrice()
 
 const emit = defineEmits<{
 	(e: 'select' | 'scroll-to-faq'): void
@@ -132,7 +132,7 @@ const billingMonths = computed(() => {
 					</div>
 				</div>
 				<span class="m-0 text-2xl font-bold text-contrast">
-					{{ formatPrice(locale, price / billingMonths, currency, true) }}
+					{{ formatPrice(price / billingMonths, currency, true) }}
 					{{ isUsa ? '' : currency }}
 					<span class="text-lg font-semibold text-secondary">
 						/ month<template v-if="interval !== 'monthly'">, billed {{ interval }}</template>
diff --git a/apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue b/apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue
index 7980dd7765..3b3776af7d 100644
--- a/apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue
+++ b/apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue
@@ -6,14 +6,20 @@ import {
 	NOTICE_LEVELS,
 	ServerNotice,
 	TagItem,
+	useFormatDateTime,
 	useRelativeTime,
-	useVIntl,
 } from '@modrinth/ui'
 import type { ServerNotice as ServerNoticeType } from '@modrinth/utils'
-import dayjs from 'dayjs'
 
-const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
+const formatDateTimeShortMonth = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'medium',
+})
 
 defineProps<{
 	notice: ServerNoticeType
@@ -27,17 +33,14 @@ defineProps<{
 			</div>
 			<div class="text-sm">
 				<span v-if="notice.announce_at">
-					{{ dayjs(notice.announce_at).format('MMM D, YYYY [at] h:mm A') }} ({{
+					{{ formatDateTimeShortMonth(notice.announce_at) }} ({{
 						formatRelativeTime(notice.announce_at)
 					}})
 				</span>
 				<template v-else> Never begins </template>
 			</div>
 			<div class="text-sm">
-				<span
-					v-if="notice.expires"
-					v-tooltip="dayjs(notice.expires).format('MMMM D, YYYY [at] h:mm A')"
-				>
+				<span v-if="notice.expires" v-tooltip="formatDateTime(notice.expires)">
 					{{ formatRelativeTime(notice.expires) }}
 				</span>
 				<template v-else> Never expires </template>
diff --git a/apps/frontend/src/components/ui/thread/ThreadMessage.vue b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
index fb5148e287..527ec594d2 100644
--- a/apps/frontend/src/components/ui/thread/ThreadMessage.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadMessage.vue
@@ -99,7 +99,7 @@
 			</span>
 		</div>
 		<span class="message__date">
-			<span v-tooltip="$dayjs(message.created).format('MMMM D, YYYY [at] h:mm A')">
+			<span v-tooltip="formatDateTime(message.created)">
 				{{ timeSincePosted }}
 			</span>
 		</span>
@@ -131,7 +131,14 @@ import {
 	ScaleIcon,
 	TrashIcon,
 } from '@modrinth/assets'
-import { AutoLink, Avatar, Badge, OverflowMenu, useRelativeTime } from '@modrinth/ui'
+import {
+	AutoLink,
+	Avatar,
+	Badge,
+	OverflowMenu,
+	useFormatDateTime,
+	useRelativeTime,
+} from '@modrinth/ui'
 import { renderString } from '@modrinth/utils'
 
 import { isStaff } from '~/helpers/users.js'
@@ -186,6 +193,11 @@ const formattedMessage = computed(() => {
 })
 
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
+
 const timeSincePosted = ref(formatRelativeTime(props.message.created))
 
 const isPrivateMessage = computed(() => {
diff --git a/apps/frontend/src/composables/compact-number.ts b/apps/frontend/src/composables/compact-number.ts
deleted file mode 100644
index 298e369680..0000000000
--- a/apps/frontend/src/composables/compact-number.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-const formatters = new WeakMap<object, Intl.NumberFormat>()
-
-export function useCompactNumber(truncate = false, fractionDigits = 2, locale?: string) {
-	const context = {}
-
-	let formatter = formatters.get(context)
-
-	if (!formatter) {
-		formatter = new Intl.NumberFormat(locale, {
-			notation: 'compact',
-			maximumFractionDigits: fractionDigits,
-		})
-		formatters.set(context, formatter)
-	}
-
-	function format(value: number): string {
-		let formattedValue = value
-		if (truncate) {
-			const scale = Math.pow(10, fractionDigits)
-			formattedValue = Math.floor(value * scale) / scale
-		}
-		return formatter!.format(formattedValue)
-	}
-
-	return format
-}
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 34ff279ad5..14c6560f21 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -393,7 +393,7 @@
     "message": "No projects in collection yet"
   },
   "collection.label.projects-count": {
-    "message": "{count, plural, =0 {No projects yet} one {<stat>{count}</stat> project} other {<stat>{count}</stat> {type}}}"
+    "message": "{count, plural, =0 {No projects yet} other {<stat>{count}</stat> {type}}}"
   },
   "collection.label.updated-at": {
     "message": "Updated {ago}"
@@ -555,7 +555,7 @@
     "message": "Create new"
   },
   "dashboard.collections.label.projects-count": {
-    "message": "{count, plural, one {{count} project} other {{count} projects}}"
+    "message": "{count} {countPlural, plural, one {project} other {projects}}"
   },
   "dashboard.collections.label.search-input": {
     "message": "Search your collections"
@@ -1401,7 +1401,7 @@
     "message": "For Players"
   },
   "landing.section.for-players.tagline": {
-    "message": "Discover over {count} creations"
+    "message": "Discover over {count, number} creations"
   },
   "landing.subheading": {
     "message": "Discover, play, and share Minecraft content through our open-source platform built for the community."
@@ -1998,7 +1998,7 @@
     "message": "Collection"
   },
   "profile.label.downloads": {
-    "message": "{count} {count, plural, one {download} other {downloads}}"
+    "message": "{count} {countPlural, plural, one {download} other {downloads}}"
   },
   "profile.label.joined": {
     "message": "Joined"
@@ -2019,7 +2019,7 @@
     "message": "Organizations"
   },
   "profile.label.projects": {
-    "message": "{count} {count, plural, one {project} other {projects}}"
+    "message": "{count} {countPlural, plural, one {project} other {projects}}"
   },
   "profile.label.saving": {
     "message": "Saving..."
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index b407ca4829..21388948ae 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -544,7 +544,7 @@
 											<IntlFormatted
 												:message-id="messages.serversPromoPricing"
 												:values="{
-													price: formatPrice(locale, 500, 'USD', true),
+													price: formatPrice(500, 'USD', true),
 												}"
 											>
 												<template #small="{ children }">
@@ -855,7 +855,7 @@
 
 							<div
 								v-if="project.approved"
-								v-tooltip="$dayjs(project.approved).format('MMMM D, YYYY [at] h:mm A')"
+								v-tooltip="formatDateTime(project.approved)"
 								class="details-list__item"
 							>
 								<CalendarIcon aria-hidden="true" />
@@ -868,11 +868,7 @@
 								</div>
 							</div>
 
-							<div
-								v-else
-								v-tooltip="$dayjs(project.published).format('MMMM D, YYYY [at] h:mm A')"
-								class="details-list__item"
-							>
+							<div v-else v-tooltip="formatDateTime(project.published)" class="details-list__item">
 								<CalendarIcon aria-hidden="true" />
 								<div>
 									{{ formatMessage(detailsMessages.created, { date: createdDate }) }}
@@ -881,7 +877,7 @@
 
 							<div
 								v-if="project.status === 'processing' && project.queued"
-								v-tooltip="$dayjs(project.queued).format('MMMM D, YYYY [at] h:mm A')"
+								v-tooltip="formatDateTime(project.queued)"
 								class="details-list__item"
 							>
 								<ScaleIcon aria-hidden="true" />
@@ -896,7 +892,7 @@
 
 							<div
 								v-if="versions.length > 0 && project.updated"
-								v-tooltip="$dayjs(project.updated).format('MMMM D, YYYY [at] h:mm A')"
+								v-tooltip="formatDateTime(project.updated)"
 								class="details-list__item"
 							>
 								<VersionIcon aria-hidden="true" />
@@ -987,11 +983,13 @@ import {
 	ScrollablePanel,
 	ServersPromo,
 	TagItem,
+	useFormatDateTime,
+	useFormatPrice,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
 import VersionSummary from '@modrinth/ui/src/components/version/VersionSummary.vue'
-import { formatPrice, formatProjectType, renderString } from '@modrinth/utils'
+import { formatProjectType, renderString } from '@modrinth/utils'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useLocalStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
@@ -1030,7 +1028,12 @@ const tags = useGeneratedState()
 const flags = useFeatureFlags()
 const cosmetics = useCosmetics()
 
-const { locale, formatMessage } = useVIntl()
+const { formatMessage } = useVIntl()
+const formatPrice = useFormatPrice()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const settingsModal = ref()
 const downloadModal = ref()
diff --git a/apps/frontend/src/pages/[type]/[id]/changelog.vue b/apps/frontend/src/pages/[type]/[id]/changelog.vue
index 966a423ce5..c88b3a86e3 100644
--- a/apps/frontend/src/pages/[type]/[id]/changelog.vue
+++ b/apps/frontend/src/pages/[type]/[id]/changelog.vue
@@ -50,7 +50,7 @@
 									</span>
 									<span>
 										on
-										{{ $dayjs(version.date_published).format('MMM D, YYYY') }}</span
+										{{ formatDate(version.date_published) }}</span
 									>
 								</div>
 								<a
@@ -86,12 +86,23 @@
 </template>
 <script setup>
 import { DownloadIcon, SpinnerIcon } from '@modrinth/assets'
-import { injectModrinthClient, injectProjectPageContext, Pagination } from '@modrinth/ui'
+import {
+	injectModrinthClient,
+	injectProjectPageContext,
+	Pagination,
+	useFormatDateTime,
+} from '@modrinth/ui'
 import VersionFilterControl from '@modrinth/ui/src/components/version/VersionFilterControl.vue'
 import { renderHighlightedString } from '@modrinth/utils'
 import { useQuery } from '@tanstack/vue-query'
 import { onMounted } from 'vue'
 
+const formatDate = useFormatDateTime({
+	month: 'short',
+	day: 'numeric',
+	year: 'numeric',
+})
+
 const { projectV2, versions, versionsLoading, loadVersions } = injectProjectPageContext()
 
 // Load versions on mount (client-side)
diff --git a/apps/frontend/src/pages/[type]/[id]/gallery.vue b/apps/frontend/src/pages/[type]/[id]/gallery.vue
index a6f70f098b..6253c9d904 100644
--- a/apps/frontend/src/pages/[type]/[id]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[id]/gallery.vue
@@ -266,7 +266,7 @@
 				<div class="gallery-bottom">
 					<div class="gallery-created">
 						<CalendarIcon aria-hidden="true" aria-label="Date created" />
-						{{ $dayjs(item.created).format('MMMM D, YYYY') }}
+						{{ formatDate(item.created) }}
 					</div>
 					<div v-if="currentMember" class="gallery-buttons input-group">
 						<button
@@ -343,11 +343,18 @@ import {
 	injectNotificationManager,
 	injectProjectPageContext,
 	NewModal as Modal,
+	useFormatDateTime,
 } from '@modrinth/ui'
 import { useEventListener, useLocalStorage } from '@vueuse/core'
 
 import { isPermission } from '~/utils/permissions.ts'
 
+const formatDate = useFormatDateTime({
+	year: 'numeric',
+	month: 'long',
+	day: 'numeric',
+})
+
 // Router
 const router = useRouter()
 
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue b/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue
index 21b06603e6..38173fd164 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue
@@ -237,7 +237,7 @@
 				<div class="gallery-bottom">
 					<div class="gallery-created">
 						<CalendarIcon aria-hidden="true" aria-label="Date created" />
-						{{ $dayjs(item.created).format('MMMM D, YYYY') }}
+						{{ formatDate(item.created) }}
 					</div>
 					<div v-if="currentMember" class="gallery-buttons input-group">
 						<button
@@ -301,10 +301,17 @@ import {
 	FileInput,
 	injectProjectPageContext,
 	NewModal as Modal,
+	useFormatDateTime,
 } from '@modrinth/ui'
 
 import { isPermission } from '~/utils/permissions.ts'
 
+const formatDate = useFormatDateTime({
+	year: 'numeric',
+	month: 'long',
+	day: 'numeric',
+})
+
 const {
 	projectV2: project,
 	currentMember,
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index d3141057d8..490f08124d 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -367,7 +367,7 @@
 				<div v-if="!isEditing">
 					<h4>Publication date</h4>
 					<span>
-						{{ $dayjs(version.date_published).format('MMMM D, YYYY [at] h:mm A') }}
+						{{ formatDateTime(version.date_published) }}
 					</span>
 				</div>
 				<div v-if="!isEditing && version.author">
@@ -434,6 +434,7 @@ import {
 	ENVIRONMENTS_COPY,
 	injectNotificationManager,
 	injectProjectPageContext,
+	useFormatDateTime,
 } from '@modrinth/ui'
 import { formatBytes, renderHighlightedString } from '@modrinth/utils'
 import { Multiselect } from 'vue-multiselect'
@@ -457,6 +458,11 @@ const auth = await useAuth()
 const tags = useGeneratedState()
 const flags = useFeatureFlags()
 const { addNotification } = injectNotificationManager()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
+const formatDate = useFormatDateTime({ dateStyle: 'medium' })
 
 // Helper for accessing nuxt app $formatVersion
 const formatVersionDisplay = (versions: string[]) => (data as any).$formatVersion(versions)
@@ -681,9 +687,9 @@ const description = computed(
 			version.value.loaders ?? []
 		)
 			.map((x: string) => x.charAt(0).toUpperCase() + x.slice(1))
-			.join(' & ')}. Published on ${data
-			.$dayjs(version.value.date_published)
-			.format('MMM D, YYYY')}. ${version.value.downloads} downloads.`,
+			.join(
+				' & ',
+			)}. Published on ${formatDate(version.value.date_published)}. ${version.value.downloads} downloads.`,
 )
 
 const usesFeaturedVersions = computed(() =>
diff --git a/apps/frontend/src/pages/admin/billing/[id].vue b/apps/frontend/src/pages/admin/billing/[id].vue
index 27a45b2242..9386ec2a27 100644
--- a/apps/frontend/src/pages/admin/billing/[id].vue
+++ b/apps/frontend/src/pages/admin/billing/[id].vue
@@ -169,7 +169,7 @@
 						</span>
 						<div class="mb-4 mt-2 flex w-full items-center gap-1 text-sm text-secondary">
 							{{ capitalizeString(subscription.interval) }} ⋅ {{ subscription.status }} ⋅
-							{{ dayjs(subscription.created).format('MMMM D, YYYY [at] h:mma') }} ({{
+							{{ formatDateTime(subscription.created) }} ({{
 								formatRelativeTime(subscription.created)
 							}})
 						</div>
@@ -239,7 +239,7 @@
 									</span>
 									<template v-if="charge.status !== 'cancelled'">
 										⋅
-										{{ formatPrice(vintl.locale, charge.amount, charge.currency_code) }}
+										{{ formatPrice(charge.amount, charge.currency_code) }}
 									</template>
 								</span>
 								<span class="text-sm text-secondary">
@@ -252,13 +252,13 @@
 									<span v-else-if="charge.status === 'cancelled'" class="font-bold">Ends:</span>
 									<span v-else-if="charge.type === 'refund'" class="font-bold">Issued:</span>
 									<span v-else class="font-bold">Due:</span>
-									{{ dayjs(charge.due).format('MMMM D, YYYY [at] h:mma') }}
+									{{ formatDateTime(charge.due) }}
 									<span class="text-secondary">({{ formatRelativeTime(charge.due) }}) </span>
 								</span>
 								<span v-if="charge.last_attempt != null" class="text-sm text-secondary">
 									<span v-if="charge.status === 'failed'" class="font-bold">Last attempt:</span>
 									<span v-else class="font-bold">Charged:</span>
-									{{ dayjs(charge.last_attempt).format('MMMM D, YYYY [at] h:mma') }}
+									{{ formatDateTime(charge.last_attempt) }}
 									<span class="text-secondary"
 										>({{ formatRelativeTime(charge.last_attempt) }})
 									</span>
@@ -268,9 +268,9 @@
 									⋅
 									{{ charge.type }}
 									⋅
-									{{ formatPrice(vintl.locale, charge.amount, charge.currency_code) }}
+									{{ formatPrice(charge.amount, charge.currency_code) }}
 									⋅
-									{{ dayjs(charge.due).format('YYYY-MM-DD h:mma') }}
+									{{ formatDateTimeShort(charge.due) }}
 									<template v-if="charge.subscription_interval">
 										⋅ {{ charge.subscription_interval }}
 									</template>
@@ -331,16 +331,30 @@ import {
 	injectNotificationManager,
 	NewModal,
 	Toggle,
+	useFormatDateTime,
+	useFormatPrice,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
-import { capitalizeString, formatPrice } from '@modrinth/utils'
+import { capitalizeString } from '@modrinth/utils'
 import { DEFAULT_CREDIT_EMAIL_MESSAGE } from '@modrinth/utils/utils.ts'
 import dayjs from 'dayjs'
 
 import ModrinthServersIcon from '~/components/ui/servers/ModrinthServersIcon.vue'
 
 const { addNotification } = injectNotificationManager()
+const formatPrice = useFormatPrice()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
+const formatDateTimeShort = useFormatDateTime({
+	year: 'numeric',
+	month: '2-digit',
+	day: '2-digit',
+	hour: 'numeric',
+	minute: 'numeric',
+})
 
 const route = useRoute()
 const vintl = useVIntl()
diff --git a/apps/frontend/src/pages/admin/servers/notices.vue b/apps/frontend/src/pages/admin/servers/notices.vue
index f6e8cf7192..c4eb6812cc 100644
--- a/apps/frontend/src/pages/admin/servers/notices.vue
+++ b/apps/frontend/src/pages/admin/servers/notices.vue
@@ -157,16 +157,13 @@
 						</div>
 						<div class="text-sm">
 							<span v-if="notice.announce_at">
-								{{ dayjs(notice.announce_at).format('MMM D, YYYY [at] h:mm A') }}
+								{{ formatDateTimeShortMonth(notice.announce_at) }}
 								({{ formatRelativeTime(notice.announce_at) }})
 							</span>
 							<template v-else> Never begins </template>
 						</div>
 						<div class="text-sm">
-							<span
-								v-if="notice.expires"
-								v-tooltip="dayjs(notice.expires).format('MMMM D, YYYY [at] h:mm A')"
-							>
+							<span v-if="notice.expires" v-tooltip="formatDateTime(notice.expires)">
 								{{ formatRelativeTime(notice.expires) }}
 							</span>
 							<template v-else> Never expires </template>
@@ -273,6 +270,7 @@ import {
 	ServerNotice,
 	TagItem,
 	Toggle,
+	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
@@ -287,6 +285,14 @@ import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
+const formatDateTimeShortMonth = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'medium',
+})
 
 const notices = ref<ServerNoticeType[]>([])
 const createNoticeModal = ref<InstanceType<typeof NewModal>>()
diff --git a/apps/frontend/src/pages/admin/servers/transfers.vue b/apps/frontend/src/pages/admin/servers/transfers.vue
index c3d8f2b565..c706aabbfe 100644
--- a/apps/frontend/src/pages/admin/servers/transfers.vue
+++ b/apps/frontend/src/pages/admin/servers/transfers.vue
@@ -76,11 +76,11 @@
 							</div>
 						</div>
 						<div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-secondary">
-							<span v-tooltip="dayjs(batch.created_at).format('MMMM D, YYYY [at] h:mm A')">
+							<span v-tooltip="formatDateTime(batch.created_at)">
 								Created {{ formatRelativeTime(batch.created_at) }}
 							</span>
 							<span>•</span>
-							<span v-tooltip="dayjs(batch.scheduled_at).format('MMMM D, YYYY [at] h:mm A')">
+							<span v-tooltip="formatDateTime(batch.scheduled_at)">
 								Scheduled {{ formatRelativeTime(batch.scheduled_at) }}
 							</span>
 							<template v-if="batch.provision_options?.region">
@@ -116,6 +116,7 @@ import {
 	injectNotificationManager,
 	Pagination,
 	TagItem,
+	useFormatDateTime,
 	useRelativeTime,
 } from '@modrinth/ui'
 import type { User } from '@modrinth/utils'
@@ -127,6 +128,10 @@ import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 
 const { addNotification } = injectNotificationManager()
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 // Types
 interface ProvisionOptions {
diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index 9b6766097e..27b9492278 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -177,9 +177,11 @@
 										count: formatCompactNumber(projects?.length || 0),
 										type: formatMessage(
 											commonProjectTypeSentenceMessages[
-												projectTypes.length === 1 ? projectTypes[0] : 'project'
+												projectTypes.length === 1 && projects?.length > 1
+													? projectTypes[0]
+													: 'project'
 											],
-											{ count: projects?.length || 0 },
+											{ count: formatCompactNumberPlural(projects?.length || 0) },
 										),
 									}"
 								>
@@ -244,7 +246,7 @@
 			>
 				<div class="flex flex-col gap-2">
 					<span
-						v-tooltip="dayjs(collection.created).format('MMMM D, YYYY [at] h:mm A')"
+						v-tooltip="formatDateTime(collection.created)"
 						class="flex w-fit items-center gap-2"
 					>
 						<CalendarIcon aria-hidden="true" />
@@ -256,7 +258,7 @@
 					</span>
 					<span
 						v-if="showUpdatedDate"
-						v-tooltip="dayjs(collection.updated).format('MMMM D, YYYY [at] h:mm A')"
+						v-tooltip="formatDateTime(collection.updated)"
 						class="flex w-fit items-center gap-2"
 					>
 						<UpdatedIcon aria-hidden="true" />
@@ -405,6 +407,8 @@ import {
 	ProjectCardList,
 	RadioButtons,
 	SidebarCard,
+	useCompactNumber,
+	useFormatDateTime,
 	useRelativeTime,
 	useSavable,
 	useVIntl,
@@ -420,7 +424,11 @@ const { handleError } = injectNotificationManager()
 const api = injectModrinthClient()
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
-const formatCompactNumber = useCompactNumber()
+const { formatCompactNumber, formatCompactNumberPlural } = useCompactNumber()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const route = useNativeRoute()
 const router = useRouter()
@@ -486,8 +494,7 @@ const messages = defineMessages({
 	},
 	projectsCountLabel: {
 		id: 'collection.label.projects-count',
-		defaultMessage:
-			'{count, plural, =0 {No projects yet} one {<stat>{count}</stat> project} other {<stat>{count}</stat> {type}}}',
+		defaultMessage: '{count, plural, =0 {No projects yet} other {<stat>{count}</stat> {type}}}',
 	},
 	removeProjectButton: {
 		id: 'collection.button.remove-project',
diff --git a/apps/frontend/src/pages/dashboard/collections.vue b/apps/frontend/src/pages/dashboard/collections.vue
index 45ac4b75c9..9103df30c9 100644
--- a/apps/frontend/src/pages/dashboard/collections.vue
+++ b/apps/frontend/src/pages/dashboard/collections.vue
@@ -39,6 +39,7 @@
 							{{
 								formatMessage(messages.projectsCountLabel, {
 									count: formatCompactNumber(user ? user.follows.length : 0),
+									countPlural: formatCompactNumberPlural(user ? user.follows.length : 0),
 								})
 							}}
 						</div>
@@ -69,6 +70,7 @@
 							{{
 								formatMessage(messages.projectsCountLabel, {
 									count: formatCompactNumber(collection.projects?.length || 0),
+									countPlural: formatCompactNumberPlural(collection.projects?.length || 0),
 								})
 							}}
 						</div>
@@ -106,12 +108,19 @@ import {
 	SearchIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Avatar, Button, commonMessages, defineMessages, useVIntl } from '@modrinth/ui'
+import {
+	Avatar,
+	Button,
+	commonMessages,
+	defineMessages,
+	useCompactNumber,
+	useVIntl,
+} from '@modrinth/ui'
 
 import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 
 const { formatMessage } = useVIntl()
-const formatCompactNumber = useCompactNumber()
+const { formatCompactNumber, formatCompactNumberPlural } = useCompactNumber()
 
 const messages = defineMessages({
 	createNewButton: {
@@ -128,7 +137,7 @@ const messages = defineMessages({
 	},
 	projectsCountLabel: {
 		id: 'dashboard.collections.label.projects-count',
-		defaultMessage: '{count, plural, one {{count} project} other {{count} projects}}',
+		defaultMessage: '{count} {countPlural, plural, one {project} other {projects}}',
 	},
 	searchInputLabel: {
 		id: 'dashboard.collections.label.search-input',
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index f3ec3ab4e0..79a6d6fd2b 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -67,7 +67,7 @@
 						></span>
 						{{
 							formatMessage(messages.estimatedWithDate, {
-								date: date.date ? dayjs(date.date).format('MMM D, YYYY') : '',
+								date: date.date ? formatDate(date.date) : '',
 							})
 						}}
 						<Tooltip theme="dismissable-prompt" :triggers="['hover', 'focus']" no-auto-focus>
@@ -260,8 +260,7 @@
 
 <script setup lang="ts">
 import { ArrowUpRightIcon, InProgressIcon, UnknownIcon } from '@modrinth/assets'
-import { defineMessages, useVIntl } from '@modrinth/ui'
-import { formatMoney } from '@modrinth/utils'
+import { defineMessages, useFormatDateTime, useFormatMoney, useVIntl } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
 
@@ -271,6 +270,8 @@ import CreatorWithdrawModal from '~/components/ui/dashboard/CreatorWithdrawModal
 import RevenueTransaction from '~/components/ui/dashboard/RevenueTransaction.vue'
 
 const { formatMessage } = useVIntl()
+const formatMoney = useFormatMoney()
+const formatDate = useFormatDateTime({ dateStyle: 'medium' })
 
 await useAuth()
 
diff --git a/apps/frontend/src/pages/dashboard/revenue/transfers.vue b/apps/frontend/src/pages/dashboard/revenue/transfers.vue
index 3b08a8195a..ecabbf92f2 100644
--- a/apps/frontend/src/pages/dashboard/revenue/transfers.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/transfers.vue
@@ -90,8 +90,15 @@ import {
 	GenericListIcon,
 	SpinnerIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, Combobox, defineMessages, useVIntl } from '@modrinth/ui'
-import { formatMoney } from '@modrinth/utils'
+import {
+	ButtonStyled,
+	Combobox,
+	defineMessages,
+	useFormatDateTime,
+	useFormatMoney,
+	useVIntl,
+} from '@modrinth/ui'
+import { capitalizeString } from '@modrinth/utils'
 import dayjs from 'dayjs'
 
 import RevenueTransaction from '~/components/ui/dashboard/RevenueTransaction.vue'
@@ -99,6 +106,12 @@ import { useGeneratedState } from '~/composables/generated'
 import { findRail } from '~/utils/muralpay-rails'
 
 const { formatMessage } = useVIntl()
+const formatMoney = useFormatMoney()
+const formatMonth = useFormatDateTime({
+	year: 'numeric',
+	month: 'long',
+})
+
 const generatedState = useGeneratedState()
 
 useHead({
@@ -152,7 +165,7 @@ function getPeriodLabel(date) {
 	} else if (txnDate.isSame(now.subtract(1, 'month'), 'month')) {
 		return 'Last month'
 	} else {
-		return txnDate.format('MMMM YYYY')
+		return capitalizeString(formatMonth(txnDate.toDate()))
 	}
 }
 
diff --git a/apps/frontend/src/pages/hosting/index.vue b/apps/frontend/src/pages/hosting/index.vue
index bab6725db7..20c5d2b9d7 100644
--- a/apps/frontend/src/pages/hosting/index.vue
+++ b/apps/frontend/src/pages/hosting/index.vue
@@ -616,7 +616,7 @@
 						<p v-if="lowestPrice" class="m-0 text-sm">
 							{{
 								formatMessage(messages.startingAtPrice, {
-									price: formatPrice(locale, lowestPrice, selectedCurrency, true),
+									price: formatPrice(lowestPrice, selectedCurrency, true),
 								})
 							}}
 						</p>
@@ -644,10 +644,10 @@ import {
 	injectNotificationManager,
 	IntlFormatted,
 	ModrinthServersPurchaseModal,
+	useFormatPrice,
 	useVIntl,
 } from '@modrinth/ui'
 import { monthsInInterval } from '@modrinth/ui/src/utils/billing.ts'
-import { formatPrice } from '@modrinth/utils'
 import { computed } from 'vue'
 
 import { useBaseFetch } from '@/composables/fetch.js'
@@ -678,7 +678,8 @@ if (affiliateCode.value) {
 }
 
 const { addNotification } = injectNotificationManager()
-const { locale, formatMessage } = useVIntl()
+const { formatMessage } = useVIntl()
+const formatPrice = useFormatPrice()
 const flags = useFeatureFlags()
 
 const messages = defineMessages({
diff --git a/apps/frontend/src/pages/index.vue b/apps/frontend/src/pages/index.vue
index 952e4f5d0d..b9825974de 100644
--- a/apps/frontend/src/pages/index.vue
+++ b/apps/frontend/src/pages/index.vue
@@ -75,7 +75,7 @@
 				<div class="section-header">
 					<div class="section-label green">{{ formatMessage(messages.forPlayersLabel) }}</div>
 					<h2 class="section-tagline">
-						{{ formatMessage(messages.discoverCreationsTagline, { count: formattedProjectCount }) }}
+						{{ formatMessage(messages.discoverCreationsTagline, { count: PROJECT_COUNT }) }}
 					</h2>
 					<p class="section-description">
 						{{ formatMessage(messages.playersDescription) }}
@@ -466,8 +466,6 @@ const searchQuery = ref('leave')
 const sortType = ref('relevance')
 
 const PROJECT_COUNT = 100000
-const formatNumber = new Intl.NumberFormat().format
-const formattedProjectCount = computed(() => formatNumber(PROJECT_COUNT))
 
 const auth = await useAuth()
 
@@ -526,7 +524,7 @@ const messages = defineMessages({
 	},
 	discoverCreationsTagline: {
 		id: 'landing.section.for-players.tagline',
-		defaultMessage: 'Discover over {count} creations',
+		defaultMessage: 'Discover over {count, number} creations',
 	},
 	shareContentTagline: {
 		id: 'landing.section.for-creators.tagline',
diff --git a/apps/frontend/src/pages/legal/cmp-info.vue b/apps/frontend/src/pages/legal/cmp-info.vue
index 30f2024483..4e3f6e042d 100644
--- a/apps/frontend/src/pages/legal/cmp-info.vue
+++ b/apps/frontend/src/pages/legal/cmp-info.vue
@@ -111,7 +111,7 @@
 				</tr>
 				<tr>
 					<td>End of the month</td>
-					<td>{{ formatDate(endOfMonthDate) }}</td>
+					<td>{{ formatDate(endOfMonthDate.toDate()) }}</td>
 				</tr>
 				<tr>
 					<td>NET 60 policy applied</td>
@@ -119,7 +119,7 @@
 				</tr>
 				<tr class="final-result">
 					<td>Available for withdrawal</td>
-					<td>{{ formatDate(withdrawalDate) }}</td>
+					<td>{{ formatDate(withdrawalDate.toDate()) }}</td>
 				</tr>
 			</tbody>
 		</table>
@@ -162,10 +162,17 @@
 </template>
 
 <script lang="ts" setup>
-import { formatDate, formatMoney } from '@modrinth/utils'
+import { useFormatDateTime, useFormatMoney } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import { computed, ref } from 'vue'
 
+const formatMoney = useFormatMoney()
+const formatDate = useFormatDateTime({
+	month: 'long',
+	day: 'numeric',
+	year: 'numeric',
+})
+
 const description =
 	'Information about the Rewards Program of Modrinth, an open source modding platform focused on Minecraft.'
 
diff --git a/apps/frontend/src/pages/news/article/[slug].vue b/apps/frontend/src/pages/news/article/[slug].vue
index d7d78dcb63..ea385ab361 100644
--- a/apps/frontend/src/pages/news/article/[slug].vue
+++ b/apps/frontend/src/pages/news/article/[slug].vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { GitGraphIcon, RssIcon } from '@modrinth/assets'
 import { articles as rawArticles } from '@modrinth/blog'
-import { Avatar, ButtonStyled } from '@modrinth/ui'
+import { Avatar, ButtonStyled, useFormatDateTime } from '@modrinth/ui'
 import type { User } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed, onMounted } from 'vue'
@@ -12,6 +12,8 @@ import ShareArticleButtons from '~/components/ui/ShareArticleButtons.vue'
 const config = useRuntimeConfig()
 const route = useRoute()
 
+const formatDate = useFormatDateTime({ dateStyle: 'long' })
+
 const rawArticle = rawArticles.find((article) => article.slug === route.params.slug)
 
 if (!rawArticle) {
@@ -157,10 +159,10 @@ onMounted(() => {
 					</nuxt-link>
 				</template>
 				<span class="hidden md:block">•</span>
-				<span class="hidden md:block"> {{ dayjsDate.format('MMMM D, YYYY') }}</span>
+				<span class="hidden md:block"> {{ formatDate(dayjsDate.toDate()) }}</span>
 			</div>
 			<span class="text-sm text-secondary sm:text-base md:hidden">
-				Posted on {{ dayjsDate.format('MMMM D, YYYY') }}</span
+				Posted on {{ formatDate(dayjsDate.toDate()) }}</span
 			>
 			<ShareArticleButtons :title="article.title" :url="articleUrl" />
 			<img
diff --git a/apps/frontend/src/pages/news/index.vue b/apps/frontend/src/pages/news/index.vue
index 3ba523b184..865e466552 100644
--- a/apps/frontend/src/pages/news/index.vue
+++ b/apps/frontend/src/pages/news/index.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { ChevronRightIcon, GitGraphIcon, RssIcon } from '@modrinth/assets'
 import { articles as rawArticles } from '@modrinth/blog'
-import { ButtonStyled, NewsArticleCard } from '@modrinth/ui'
-import dayjs from 'dayjs'
+import { ButtonStyled, NewsArticleCard, useFormatDateTime } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 import NewsletterButton from '~/components/ui/NewsletterButton.vue'
 
+const formatDate = useFormatDateTime({ dateStyle: 'long' })
+
 const articles = ref(
 	rawArticles
 		.map((article) => ({
@@ -83,7 +84,7 @@ useSeoMeta({
 							</h3>
 							<p class="m-0 text-lg leading-tight">{{ featuredArticle?.summary }}</p>
 							<div class="mt-auto text-secondary">
-								{{ dayjs(featuredArticle?.date).format('MMMM D, YYYY') }}
+								{{ formatDate(featuredArticle?.date) }}
 							</div>
 						</div>
 					</article>
diff --git a/apps/frontend/src/pages/organization/[id].vue b/apps/frontend/src/pages/organization/[id].vue
index 9539d3bff4..9ba958d404 100644
--- a/apps/frontend/src/pages/organization/[id].vue
+++ b/apps/frontend/src/pages/organization/[id].vue
@@ -19,7 +19,7 @@
 								</nuxt-link>
 							</h2>
 							<span>
-								{{ formatNumber(acceptedMembers?.length || 0) }}
+								{{ formatCompactNumber(acceptedMembers?.length || 0) }}
 								member<template v-if="acceptedMembers?.length !== 1">s</template>
 							</span>
 						</div>
@@ -89,7 +89,7 @@
 							projects
 						</div>
 						<div
-							v-tooltip="sumDownloads.toLocaleString()"
+							v-tooltip="formatNumber(sumDownloads)"
 							class="flex items-center gap-2 font-semibold"
 						>
 							<DownloadIcon class="h-6 w-6 text-secondary" />
@@ -265,10 +265,11 @@ import {
 	OverflowMenu,
 	ProjectCard,
 	ProjectCardList,
+	useCompactNumber,
+	useFormatNumber,
 	useVIntl,
 } from '@modrinth/ui'
 import type { Organization, ProjectStatus, ProjectType, ProjectV3 } from '@modrinth/utils'
-import { formatNumber } from '@modrinth/utils'
 
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
@@ -285,7 +286,8 @@ import { isPermission } from '~/utils/permissions.ts'
 const vintl = useVIntl()
 const { formatMessage } = vintl
 
-const formatCompactNumber = useCompactNumber(true)
+const formatNumber = useFormatNumber()
+const { formatCompactNumber } = useCompactNumber()
 
 const auth: { user: any } & any = await useAuth()
 const user = await useUser()
diff --git a/apps/frontend/src/pages/plus.vue b/apps/frontend/src/pages/plus.vue
index 56466a076d..b968ada055 100644
--- a/apps/frontend/src/pages/plus.vue
+++ b/apps/frontend/src/pages/plus.vue
@@ -31,7 +31,7 @@
 				anytime.
 			</p>
 			<p class="m-0 text-[2rem] font-bold text-purple">
-				{{ formatPrice(vintl.locale, price.prices.intervals.monthly, price.currency_code) }}/mo
+				{{ formatPrice(price.prices.intervals.monthly, price.currency_code) }}/mo
 			</p>
 			<p class="m-0 mb-4 text-secondary">
 				or save
@@ -86,14 +86,15 @@
 </template>
 <script setup>
 import { HeartIcon, ModrinthPlusIcon, SettingsIcon, SparklesIcon, StarIcon } from '@modrinth/assets'
-import { injectNotificationManager, PurchaseModal, useVIntl } from '@modrinth/ui'
-import { calculateSavings, formatPrice, getCurrency } from '@modrinth/utils'
+import { injectNotificationManager, PurchaseModal, useFormatPrice } from '@modrinth/ui'
+import { calculateSavings, getCurrency } from '@modrinth/utils'
 
 import { useBaseFetch } from '@/composables/fetch.js'
 import { isPermission } from '@/utils/permissions.ts'
 import { products } from '~/generated/state.json'
 
 const { addNotification } = injectNotificationManager()
+const formatPrice = useFormatPrice()
 
 const title = 'Subscribe to Modrinth Plus!'
 const description =
@@ -116,8 +117,6 @@ useHead({
 	],
 })
 
-const vintl = useVIntl()
-
 const config = useRuntimeConfig()
 
 const auth = await useAuth()
diff --git a/apps/frontend/src/pages/settings/applications.vue b/apps/frontend/src/pages/settings/applications.vue
index 301d13c71c..d1de918f98 100644
--- a/apps/frontend/src/pages/settings/applications.vue
+++ b/apps/frontend/src/pages/settings/applications.vue
@@ -183,7 +183,7 @@
 						<div>
 							{{
 								formatMessage(messages.createdOn, {
-									date: new Date(app.created).toLocaleDateString(),
+									date: formatDate(new Date(app.created)),
 								})
 							}}
 						</div>
@@ -257,6 +257,7 @@ import {
 	injectNotificationManager,
 	IntlFormatted,
 	normalizeChildren,
+	useFormatDateTime,
 	useVIntl,
 } from '@modrinth/ui'
 
@@ -272,6 +273,7 @@ import {
 
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
+const formatDate = useFormatDateTime()
 
 definePageMeta({
 	middleware: 'auth',
diff --git a/apps/frontend/src/pages/settings/billing/charges.vue b/apps/frontend/src/pages/settings/billing/charges.vue
index b4c55f419d..9a1bd7d929 100644
--- a/apps/frontend/src/pages/settings/billing/charges.vue
+++ b/apps/frontend/src/pages/settings/billing/charges.vue
@@ -25,12 +25,12 @@
 							</template>
 						</span>
 						⋅
-						<span>{{ formatPrice(vintl.locale, charge.amount, charge.currency_code) }}</span>
+						<span>{{ formatPrice(charge.amount, charge.currency_code) }}</span>
 					</div>
 					<div class="flex items-center gap-1">
 						<Badge :color="charge.status === 'succeeded' ? 'green' : 'red'" :type="charge.status" />
 						⋅
-						{{ $dayjs(charge.due).format('YYYY-MM-DD') }}
+						{{ formatDate(charge.due) }}
 					</div>
 				</div>
 			</div>
@@ -38,8 +38,7 @@
 	</div>
 </template>
 <script setup>
-import { Badge, Breadcrumbs, useVIntl } from '@modrinth/ui'
-import { formatPrice } from '@modrinth/utils'
+import { Badge, Breadcrumbs, useFormatDateTime, useFormatPrice } from '@modrinth/ui'
 
 import { products } from '~/generated/state.json'
 
@@ -47,7 +46,12 @@ definePageMeta({
 	middleware: 'auth',
 })
 
-const vintl = useVIntl()
+const formatPrice = useFormatPrice()
+const formatDate = useFormatDateTime({
+	year: 'numeric',
+	month: '2-digit',
+	day: '2-digit',
+})
 
 const { data: charges } = await useAsyncData(
 	'billing/payments',
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index f4b1b7c2eb..e00a1a0632 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -51,7 +51,6 @@
 							<template v-if="midasCharge">
 								{{
 									formatPrice(
-										vintl.locale,
 										midasSubscriptionPrice.prices.intervals[midasSubscription.interval],
 										midasSubscriptionPrice.currency_code,
 									)
@@ -60,7 +59,7 @@
 								{{ midasSubscription.interval }}
 							</template>
 							<template v-else>
-								{{ formatPrice(vintl.locale, price.prices.intervals.monthly, price.currency_code) }}
+								{{ formatPrice(price.prices.intervals.monthly, price.currency_code) }}
 								/ month
 							</template>
 						</span>
@@ -77,7 +76,7 @@
 						>
 							<span class="opacity-70">Next:</span>
 							<span class="font-semibold text-contrast">
-								{{ formatPrice(vintl.locale, midasCharge.amount, midasCharge.currency_code) }}
+								{{ formatPrice(midasCharge.amount, midasCharge.currency_code) }}
 							</span>
 							<span>/{{ midasCharge.subscription_interval.replace('ly', '') }}</span>
 						</div>
@@ -90,21 +89,17 @@
 							>
 								Save
 								{{
-									formatPrice(
-										vintl.locale,
-										midasCharge.amount * 12 - oppositePrice,
-										midasCharge.currency_code,
-									)
+									formatPrice(midasCharge.amount * 12 - oppositePrice, midasCharge.currency_code)
 								}}/year by switching to yearly billing!
 							</span>
 							<span class="text-sm text-secondary">
-								Since {{ $dayjs(midasSubscription.created).format('MMMM D, YYYY') }}
+								Since {{ formatDate(midasSubscription.created) }}
 							</span>
 							<span v-if="midasCharge.status === 'open'" class="text-sm text-secondary">
-								Renews {{ $dayjs(midasCharge.due).format('MMMM D, YYYY') }}
+								Renews {{ formatDate(midasCharge.due) }}
 							</span>
 							<span v-else-if="midasCharge.status === 'cancelled'" class="text-sm text-secondary">
-								Expires {{ $dayjs(midasCharge.due).format('MMMM D, YYYY') }}
+								Expires {{ formatDate(midasCharge.due) }}
 							</span>
 							<span
 								v-if="
@@ -116,14 +111,13 @@
 								class="text-sm text-secondary"
 							>
 								Switches to {{ midasCharge.subscription_interval }} billing on
-								{{ $dayjs(midasCharge.due).format('MMMM D, YYYY') }}
+								{{ formatDate(midasCharge.due) }}
 							</span>
 						</template>
 
 						<span v-else class="text-sm text-secondary">
 							Or
-							{{ formatPrice(vintl.locale, price.prices.intervals.yearly, price.currency_code) }} /
-							year (save
+							{{ formatPrice(price.prices.intervals.yearly, price.currency_code) }} / year (save
 							{{
 								calculateSavings(price.prices.intervals.monthly, price.prices.intervals.yearly)
 							}}%)!
@@ -188,7 +182,6 @@
 								v-tooltip="
 									midasCharge.subscription_interval === 'yearly'
 										? `Monthly billing will cost you an additional ${formatPrice(
-												vintl.locale,
 												oppositePrice * 12 - midasCharge.amount,
 												midasCharge.currency_code,
 											)} per year`
@@ -307,7 +300,6 @@
 											<span class="text-contrast">
 												{{
 													formatPrice(
-														vintl.locale,
 														getProductPrice(getPyroProduct(subscription), subscription.interval)
 															.prices.intervals[subscription.interval],
 														getProductPrice(getPyroProduct(subscription), subscription.interval)
@@ -333,7 +325,6 @@
 											<span class="font-semibold text-contrast">
 												{{
 													formatPrice(
-														vintl.locale,
 														getPyroCharge(subscription).amount,
 														getPyroCharge(subscription).currency_code,
 													)
@@ -351,13 +342,13 @@
 										</div>
 										<div v-if="getPyroCharge(subscription)" class="mb-4 flex flex-col items-end">
 											<span class="text-sm text-secondary">
-												Since {{ $dayjs(subscription.created).format('MMMM D, YYYY') }}
+												Since {{ formatDate(subscription.created) }}
 											</span>
 											<span
 												v-if="getPyroCharge(subscription).status === 'open'"
 												class="text-sm text-secondary"
 											>
-												Renews {{ $dayjs(getPyroCharge(subscription).due).format('MMMM D, YYYY') }}
+												Renews {{ formatDate(getPyroCharge(subscription).due) }}
 											</span>
 											<span
 												v-if="
@@ -371,7 +362,7 @@
 												Switches to
 												{{ getPyroCharge(subscription).subscription_interval }}
 												billing on
-												{{ $dayjs(getPyroCharge(subscription).due).format('MMMM D, YYYY') }}
+												{{ formatDate(getPyroCharge(subscription).due) }}
 											</span>
 											<span
 												v-else-if="getPyroCharge(subscription).status === 'processing'"
@@ -384,7 +375,7 @@
 												v-else-if="getPyroCharge(subscription).status === 'cancelled'"
 												class="text-sm text-secondary"
 											>
-												Expires {{ $dayjs(getPyroCharge(subscription).due).format('MMMM D, YYYY') }}
+												Expires {{ formatDate(getPyroCharge(subscription).due) }}
 											</span>
 											<span
 												v-else-if="getPyroCharge(subscription).status === 'failed'"
@@ -624,9 +615,11 @@ import {
 	paymentMethodMessages,
 	PurchaseModal,
 	ServerListing,
+	useFormatDateTime,
+	useFormatPrice,
 	useVIntl,
 } from '@modrinth/ui'
-import { calculateSavings, formatPrice, getCurrency } from '@modrinth/utils'
+import { calculateSavings, getCurrency } from '@modrinth/utils'
 import { computed, ref } from 'vue'
 
 import { useBaseFetch } from '@/composables/fetch.js'
@@ -655,8 +648,13 @@ useHead({
 
 const config = useRuntimeConfig()
 
-const vintl = useVIntl()
-const { formatMessage } = vintl
+const { formatMessage } = useVIntl()
+const formatPrice = useFormatPrice()
+const formatDate = useFormatDateTime({
+	year: 'numeric',
+	month: 'long',
+	day: 'numeric',
+})
 
 const deleteModalMessages = defineMessages({
 	title: {
diff --git a/apps/frontend/src/pages/settings/pats.vue b/apps/frontend/src/pages/settings/pats.vue
index 026db6854a..49e4ba9470 100644
--- a/apps/frontend/src/pages/settings/pats.vue
+++ b/apps/frontend/src/pages/settings/pats.vue
@@ -120,16 +120,7 @@
 						<CopyCode :text="pat.access_token" />
 					</template>
 					<template v-else>
-						<span
-							v-tooltip="
-								pat.last_used
-									? formatMessage(commonMessages.dateAtTimeTooltip, {
-											date: new Date(pat.last_used),
-											time: new Date(pat.last_used),
-										})
-									: null
-							"
-						>
+						<span v-tooltip="pat.last_used ? formatDateTime(pat.last_used) : null">
 							<template v-if="pat.last_used">
 								{{
 									formatMessage(tokenMessages.lastUsed, {
@@ -140,14 +131,7 @@
 							<template v-else>{{ formatMessage(tokenMessages.neverUsed) }}</template>
 						</span>
 						⋅
-						<span
-							v-tooltip="
-								formatMessage(commonMessages.dateAtTimeTooltip, {
-									date: new Date(pat.expires),
-									time: new Date(pat.expires),
-								})
-							"
-						>
+						<span v-tooltip="formatDateTime(pat.expires)">
 							<template v-if="new Date(pat.expires) > new Date()">
 								{{
 									formatMessage(tokenMessages.expiresIn, {
@@ -164,14 +148,7 @@
 							</template>
 						</span>
 						⋅
-						<span
-							v-tooltip="
-								formatMessage(commonMessages.dateAtTimeTooltip, {
-									date: new Date(pat.created),
-									time: new Date(pat.created),
-								})
-							"
-						>
+						<span v-tooltip="formatDateTime(pat.created)">
 							{{
 								formatMessage(commonMessages.createdAgoLabel, {
 									ago: formatRelativeTime(pat.created),
@@ -222,6 +199,7 @@ import {
 	defineMessages,
 	injectNotificationManager,
 	IntlFormatted,
+	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
@@ -240,6 +218,10 @@ const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const createModalMessages = defineMessages({
 	createTitle: {
diff --git a/apps/frontend/src/pages/settings/sessions.vue b/apps/frontend/src/pages/settings/sessions.vue
index 5cef936725..4ddb23dc40 100644
--- a/apps/frontend/src/pages/settings/sessions.vue
+++ b/apps/frontend/src/pages/settings/sessions.vue
@@ -15,14 +15,7 @@
 				</div>
 				<div>
 					<template v-if="session.city">{{ session.city }}, {{ session.country }} ⋅ </template>
-					<span
-						v-tooltip="
-							formatMessage(commonMessages.dateAtTimeTooltip, {
-								date: new Date(session.last_login),
-								time: new Date(session.last_login),
-							})
-						"
-					>
+					<span v-tooltip="formatDateTime(session.last_login)">
 						{{
 							formatMessage(messages.lastAccessedAgoLabel, {
 								ago: formatRelativeTime(session.last_login),
@@ -30,14 +23,7 @@
 						}}
 					</span>
 					⋅
-					<span
-						v-tooltip="
-							formatMessage(commonMessages.dateAtTimeTooltip, {
-								date: new Date(session.created),
-								time: new Date(session.created),
-							})
-						"
-					>
+					<span v-tooltip="formatDateTime(session.created)">
 						{{
 							formatMessage(messages.createdAgoLabel, {
 								ago: formatRelativeTime(session.created),
@@ -62,6 +48,7 @@ import {
 	commonSettingsMessages,
 	defineMessages,
 	injectNotificationManager,
+	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
@@ -73,6 +60,10 @@ definePageMeta({
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const messages = defineMessages({
 	currentSessionLabel: {
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index 4d98e7c1fa..1f581f6373 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -155,27 +155,24 @@
 							{{
 								formatMessage(messages.profileProjectsLabel, {
 									count: formatCompactNumber(projects?.length || 0),
+									countPlural: formatCompactNumberPlural(projects?.length || 0),
 								})
 							}}
 						</div>
 						<div
-							v-tooltip="sumDownloads.toLocaleString()"
+							v-tooltip="formatNumber(sumDownloads)"
 							class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold"
 						>
 							<DownloadIcon class="h-6 w-6 text-secondary" />
 							{{
 								formatMessage(messages.profileDownloadsLabel, {
 									count: formatCompactNumber(sumDownloads),
+									countPlural: formatCompactNumberPlural(sumDownloads),
 								})
 							}}
 						</div>
 						<div
-							v-tooltip="
-								formatMessage(commonMessages.dateAtTimeTooltip, {
-									date: new Date(user.created),
-									time: new Date(user.created),
-								})
-							"
+							v-tooltip="formatDateTime(user.created)"
 							class="flex items-center gap-2 font-semibold"
 						>
 							<CalendarIcon class="h-6 w-6 text-secondary" />
@@ -502,6 +499,9 @@ import {
 	ProjectCard,
 	ProjectCardList,
 	TagItem,
+	useCompactNumber,
+	useFormatDateTime,
+	useFormatNumber,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
@@ -528,12 +528,14 @@ const cosmetics = useCosmetics()
 const tags = useGeneratedState()
 const config = useRuntimeConfig()
 
-const vintl = useVIntl()
-const { formatMessage } = vintl
-
-const formatCompactNumber = useCompactNumber(true)
-
+const { formatMessage } = useVIntl()
+const formatNumber = useFormatNumber()
+const { formatCompactNumber, formatCompactNumberPlural } = useCompactNumber()
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const { addNotification } = injectNotificationManager()
 
@@ -542,11 +544,11 @@ const baseId = useId()
 const messages = defineMessages({
 	profileProjectsLabel: {
 		id: 'profile.label.projects',
-		defaultMessage: '{count} {count, plural, one {project} other {projects}}',
+		defaultMessage: '{count} {countPlural, plural, one {project} other {projects}}',
 	},
 	profileDownloadsLabel: {
 		id: 'profile.label.downloads',
-		defaultMessage: '{count} {count, plural, one {download} other {downloads}}',
+		defaultMessage: '{count} {countPlural, plural, one {download} other {downloads}}',
 	},
 	profileJoinedLabel: {
 		id: 'profile.label.joined',
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 22569d9b31..d960a5f4da 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -3,8 +3,6 @@
 
 import type { FunctionalComponent, SVGAttributes } from 'vue'
 
-export type IconComponent = FunctionalComponent<SVGAttributes>
-
 import _AffiliateIcon from './icons/affiliate.svg?component'
 import _AlignLeftIcon from './icons/align-left.svg?component'
 import _ArchiveIcon from './icons/archive.svg?component'
@@ -327,6 +325,8 @@ import _XCircleIcon from './icons/x-circle.svg?component'
 import _ZoomInIcon from './icons/zoom-in.svg?component'
 import _ZoomOutIcon from './icons/zoom-out.svg?component'
 
+export type IconComponent = FunctionalComponent<SVGAttributes>
+
 export const AffiliateIcon = _AffiliateIcon
 export const AlignLeftIcon = _AlignLeftIcon
 export const ArchiveIcon = _ArchiveIcon
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 23a0d857c7..ef53f7db17 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -69,6 +69,7 @@
 		"fuse.js": "^6.6.2",
 		"highlight.js": "^11.9.0",
 		"intl-messageformat": "^10.7.7",
+		"lru-cache": "^11.2.4",
 		"markdown-it": "^13.0.2",
 		"postprocessing": "^6.37.6",
 		"qrcode.vue": "^3.4.1",
diff --git a/packages/ui/src/components/billing/ExpandableInvoiceTotal.vue b/packages/ui/src/components/billing/ExpandableInvoiceTotal.vue
index 809c2ec09f..64944facdb 100644
--- a/packages/ui/src/components/billing/ExpandableInvoiceTotal.vue
+++ b/packages/ui/src/components/billing/ExpandableInvoiceTotal.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { SpinnerIcon } from '@modrinth/assets'
-import { formatPrice } from '@modrinth/utils'
 import { computed } from 'vue'
 
-import { useVIntl } from '../../composables/i18n'
+import { useFormatPrice } from '../../composables'
 import Accordion from '../base/Accordion.vue'
 
-const { locale } = useVIntl()
+const formatPrice = useFormatPrice()
 
 export type BillingItem = {
 	title: string
@@ -38,7 +37,7 @@ const periodSuffix = computed(() => {
 						<template v-if="loading">
 							<SpinnerIcon class="animate-spin size-4" />
 						</template>
-						<template v-else> {{ formatPrice(locale, total, currency) }} </template
+						<template v-else> {{ formatPrice(total, currency) }} </template
 						><span class="text-xs text-secondary">{{ periodSuffix }}</span>
 					</span>
 				</div>
@@ -57,7 +56,7 @@ const periodSuffix = computed(() => {
 					<template v-if="loading">
 						<SpinnerIcon class="animate-spin size-4" />
 					</template>
-					<template v-else> {{ formatPrice(locale, amount, currency) }} </template
+					<template v-else> {{ formatPrice(amount, currency) }} </template
 					><span class="text-xs text-secondary">{{ periodSuffix }}</span>
 				</div>
 			</div>
diff --git a/packages/ui/src/components/billing/ModalBasedServerPlan.vue b/packages/ui/src/components/billing/ModalBasedServerPlan.vue
index 417ba7255f..ce363cccca 100644
--- a/packages/ui/src/components/billing/ModalBasedServerPlan.vue
+++ b/packages/ui/src/components/billing/ModalBasedServerPlan.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { InfoIcon } from '@modrinth/assets'
-import { formatPrice } from '@modrinth/utils'
 import { Menu } from 'floating-vue'
 import { computed, inject, type Ref } from 'vue'
 
+import { useFormatPrice } from '../../composables'
 import { type MessageDescriptor, useVIntl } from '../../composables/i18n'
 import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils'
 import type { ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'
@@ -30,7 +30,8 @@ const emit = defineEmits<{
 	(e: 'select', plan: Labrinth.Billing.Internal.Product): void
 }>()
 
-const { formatMessage, locale } = useVIntl()
+const { formatMessage } = useVIntl()
+const formatPrice = useFormatPrice()
 
 // TODO: Use DI framework when merged.
 const selectedInterval = inject<Ref<ServerBillingInterval>>('selectedInterval')
@@ -101,7 +102,7 @@ const mostPopularStyle = computed(() => {
 					</div>
 				</div>
 				<span class="m-0 text-lg font-bold text-contrast">
-					{{ formatPrice(locale, perMonth, currency, true) }}
+					{{ formatPrice(perMonth, currency, true) }}
 					<span class="text-sm font-semibold text-secondary">
 						/ month{{ selectedInterval !== 'monthly' ? `, billed ${selectedInterval}` : '' }}
 					</span>
diff --git a/packages/ui/src/components/billing/PurchaseModal.vue b/packages/ui/src/components/billing/PurchaseModal.vue
index beb8dc77ce..8d530662df 100644
--- a/packages/ui/src/components/billing/PurchaseModal.vue
+++ b/packages/ui/src/components/billing/PurchaseModal.vue
@@ -228,7 +228,7 @@
 							}}%
 						</span>
 						<span class="ml-auto text-lg" :class="{ 'text-secondary': selectedPlan !== interval }">
-							{{ formatPrice(locale, rawPrice, price.currency_code) }}
+							{{ formatPrice(rawPrice, price.currency_code) }}
 						</span>
 					</div>
 				</div>
@@ -236,7 +236,7 @@
 					<span class="text-xl text-secondary">Total</span>
 					<div class="flex items-baseline gap-2">
 						<span class="text-2xl font-extrabold text-primary">
-							{{ formatPrice(locale, price.prices.intervals[selectedPlan], price.currency_code) }}
+							{{ formatPrice(price.prices.intervals[selectedPlan], price.currency_code) }}
 						</span>
 						<span class="text-lg text-secondary">/ {{ selectedPlan }}</span>
 					</div>
@@ -300,23 +300,21 @@
 							}}
 						</span>
 						<span v-if="existingPlan" class="text-secondary text-end">
-							{{ formatPrice(locale, total - tax, price.currency_code) }}
+							{{ formatPrice(total - tax, price.currency_code) }}
 						</span>
 						<span v-else class="text-secondary text-end">
-							{{ formatPrice(locale, total - tax, price.currency_code) }} /
+							{{ formatPrice(total - tax, price.currency_code) }} /
 							{{ selectedPlan }}
 						</span>
 					</div>
 					<div class="flex justify-between">
 						<span class="text-secondary">Tax</span>
-						<span class="text-secondary text-end">{{
-							formatPrice(locale, tax, price.currency_code)
-						}}</span>
+						<span class="text-secondary text-end">{{ formatPrice(tax, price.currency_code) }}</span>
 					</div>
 					<div class="mt-4 flex justify-between border-0 border-t border-solid border-code-bg pt-4">
 						<span class="text-lg font-bold">Today's total</span>
 						<span class="text-lg font-extrabold text-primary text-end">
-							{{ formatPrice(locale, total, price.currency_code) }}
+							{{ formatPrice(total, price.currency_code) }}
 						</span>
 					</div>
 				</div>
@@ -412,9 +410,9 @@
 				<strong>By clicking "Subscribe", you are purchasing a recurring subscription.</strong>
 				<br />
 				You'll be charged
-				{{ formatPrice(locale, price.prices.intervals[selectedPlan], price.currency_code) }}
+				{{ formatPrice(price.prices.intervals[selectedPlan], price.currency_code) }}
 				/ {{ selectedPlan }} plus applicable taxes starting
-				{{ existingPlan ? dayjs(renewalDate).format('MMMM D, YYYY') : 'today' }}, until you cancel.
+				{{ existingPlan ? formatDate(renewalDate) : 'today' }}, until you cancel.
 				<br />
 				You can cancel anytime from your settings page.
 			</p>
@@ -541,12 +539,13 @@ import {
 	UnknownIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { calculateSavings, createStripeElements, formatPrice, getCurrency } from '@modrinth/utils'
+import { calculateSavings, createStripeElements, getCurrency } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed, nextTick, reactive, ref, watch } from 'vue'
 import { Multiselect } from 'vue-multiselect'
 
 import { useVIntl } from '../../composables/i18n'
+import { useFormatDateTime, useFormatPrice } from '../../composables/index.ts'
 import { paymentMethodMessages } from '../../utils/common-messages'
 import Admonition from '../base/Admonition.vue'
 import Checkbox from '../base/Checkbox.vue'
@@ -555,7 +554,9 @@ import AnimatedLogo from '../brand/AnimatedLogo.vue'
 import NewModal from '../modal/NewModal.vue'
 import LoaderIcon from '../servers/icons/LoaderIcon.vue'
 
-const { locale, formatMessage } = useVIntl()
+const { formatMessage } = useVIntl()
+const formatPrice = useFormatPrice()
+const formatDate = useFormatDateTime({ dateStyle: 'long' })
 
 const props = defineProps({
 	product: {
diff --git a/packages/ui/src/components/billing/ServersPurchase0Plan.vue b/packages/ui/src/components/billing/ServersPurchase0Plan.vue
index f96287db3f..88fa441d4d 100644
--- a/packages/ui/src/components/billing/ServersPurchase0Plan.vue
+++ b/packages/ui/src/components/billing/ServersPurchase0Plan.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { formatPrice } from '@modrinth/utils'
 import { computed, provide } from 'vue'
 
+import { useFormatPrice } from '../../composables'
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils'
 import OptionGroup from '../base/OptionGroup.vue'
 import ModalBasedServerPlan from './ModalBasedServerPlan.vue'
 import type { ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'
 
-const { formatMessage, locale } = useVIntl()
+const { formatMessage } = useVIntl()
+const formatPrice = useFormatPrice()
 
 const props = defineProps<{
 	availableProducts: Labrinth.Billing.Internal.Product[]
@@ -209,7 +210,7 @@ provide('selectedInterval', selectedInterval)
 						<span class="text-2xl font-semibold text-contrast">Custom</span>
 					</div>
 					<span class="m-0 text-lg font-bold text-contrast">
-						{{ formatPrice(locale, customStartingPrice, currency, true) }}
+						{{ formatPrice(customStartingPrice, currency, true) }}
 						<span class="text-sm font-semibold text-secondary">
 							/ month<template v-if="selectedInterval !== 'monthly'"
 								>, billed {{ selectedInterval }}</template
@@ -221,7 +222,7 @@ provide('selectedInterval', selectedInterval)
 				<div class="flex flex-col gap-2">
 					<div class="flex items-center gap-3">
 						<span v-if="customPricePerGb" class="text-sm text-secondary">
-							From {{ formatPrice(locale, customPricePerGb, currency, true) }} / GB
+							From {{ formatPrice(customPricePerGb, currency, true) }} / GB
 						</span>
 					</div>
 				</div>
diff --git a/packages/ui/src/components/billing/ServersPurchase1Region.vue b/packages/ui/src/components/billing/ServersPurchase1Region.vue
index f5e54a3389..f81b3602d1 100644
--- a/packages/ui/src/components/billing/ServersPurchase1Region.vue
+++ b/packages/ui/src/components/billing/ServersPurchase1Region.vue
@@ -3,7 +3,7 @@ import type { Archon, Labrinth } from '@modrinth/api-client'
 import { InfoIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { computed, onMounted, ref, watch } from 'vue'
 
-import { formatPrice } from '../../../../utils'
+import { useFormatPrice } from '../../composables'
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils.ts'
 import { regionOverrides } from '../../utils/regions.ts'
@@ -14,7 +14,8 @@ import type { RegionPing, ServerBillingInterval } from './ModrinthServersPurchas
 import ServersRegionButton from './ServersRegionButton.vue'
 import ServersSpecs from './ServersSpecs.vue'
 
-const { formatMessage, locale } = useVIntl()
+const { formatMessage } = useVIntl()
+const formatPrice = useFormatPrice()
 
 const props = defineProps<{
 	regions: Archon.Servers.v1.Region[]
@@ -283,7 +284,7 @@ onMounted(() => {
 				<Slider v-model="selectedRam" :min="minRam" :max="maxRam" :step="2" unit="GB" />
 				<p v-if="selectedPrice" class="mt-2 mb-0">
 					<span class="text-contrast text-lg font-bold"
-						>{{ formatPrice(locale, selectedPrice, currency, true) }} / month</span
+						>{{ formatPrice(selectedPrice, currency, true) }} / month</span
 					><span v-if="interval !== 'monthly'">, billed {{ interval }}</span>
 				</p>
 				<div class="bg-bg rounded-xl p-4 mt-2 text-secondary h-14">
diff --git a/packages/ui/src/components/billing/ServersPurchase3Review.vue b/packages/ui/src/components/billing/ServersPurchase3Review.vue
index bf556e5472..bcd83a5269 100644
--- a/packages/ui/src/components/billing/ServersPurchase3Review.vue
+++ b/packages/ui/src/components/billing/ServersPurchase3Review.vue
@@ -10,11 +10,12 @@ import {
 	SpinnerIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { formatPrice, getPingLevel } from '@modrinth/utils'
+import { getPingLevel } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import type Stripe from 'stripe'
 import { computed } from 'vue'
 
+import { useFormatPrice } from '../../composables'
 import { useVIntl } from '../../composables/i18n'
 import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils'
 import { regionOverrides } from '../../utils/regions'
@@ -27,8 +28,8 @@ import FormattedPaymentMethod from './FormattedPaymentMethod.vue'
 import type { ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'
 import ServersSpecs from './ServersSpecs.vue'
 
-const vintl = useVIntl()
-const { locale, formatMessage } = vintl
+const { formatMessage } = useVIntl()
+const formatPrice = useFormatPrice()
 
 const emit = defineEmits<{
 	(e: 'changePaymentMethod' | 'reloadPaymentIntent'): void
@@ -246,7 +247,7 @@ function setInterval(newInterval: ServerBillingInterval) {
 					>Pay monthly</span
 				>
 				<span class="text-sm text-secondary flex items-center gap-1"
-					>{{ formatPrice(locale, monthlyPrice, currency, true) }} / month</span
+					>{{ formatPrice(monthlyPrice, currency, true) }} / month</span
 				>
 			</div>
 		</button>
@@ -268,17 +269,10 @@ function setInterval(newInterval: ServerBillingInterval) {
 						>{{ interval === 'quarterly' ? 'Saving' : 'Save' }} 16%</span
 					></span
 				>
-				<span class="text-sm text-secondary flex items-center gap-1"
-					>{{
-						formatPrice(
-							locale,
-							(quarterlyPrice ?? 0) / monthsInInterval['quarterly'],
-							currency,
-							true,
-						)
-					}}
-					/ month</span
-				>
+				<span class="text-sm text-secondary flex items-center gap-1">
+					{{ formatPrice((quarterlyPrice ?? 0) / monthsInInterval['quarterly'], currency, true) }} /
+					month
+				</span>
 			</div>
 		</button>
 	</div>
@@ -346,14 +340,14 @@ function setInterval(newInterval: ServerBillingInterval) {
 			Today, you will be charged a prorated amount for the remainder of your current billing cycle.
 			<br />
 			Your subscription will renew at
-			{{ formatPrice(locale, selectedPlanPriceForInterval, currency) }} / {{ period }} plus
-			applicable taxes at the end of your current billing interval, until you cancel. You can cancel
-			anytime from your settings page.
+			{{ formatPrice(selectedPlanPriceForInterval, currency) }} / {{ period }} plus applicable taxes
+			at the end of your current billing interval, until you cancel. You can cancel anytime from
+			your settings page.
 		</template>
 		<template v-else>
 			You'll be charged
 			<SpinnerIcon v-if="loading" class="animate-spin relative top-0.5 mx-2" /><template v-else>{{
-				formatPrice(locale, total, currency)
+				formatPrice(total, currency)
 			}}</template>
 			every {{ period }} plus applicable taxes starting today, until you cancel. You can cancel
 			anytime from your settings page.
diff --git a/packages/ui/src/components/changelog/ChangelogEntry.vue b/packages/ui/src/components/changelog/ChangelogEntry.vue
index 82e5b9e939..1eca9786aa 100644
--- a/packages/ui/src/components/changelog/ChangelogEntry.vue
+++ b/packages/ui/src/components/changelog/ChangelogEntry.vue
@@ -47,12 +47,19 @@ import type { VersionEntry } from '@modrinth/utils/changelog'
 import dayjs from 'dayjs'
 import { computed, ref } from 'vue'
 
-import { useRelativeTime } from '../../composables'
+import { useFormatDateTime, useRelativeTime } from '../../composables'
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import AutoLink from '../base/AutoLink.vue'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
+const formatDate = useFormatDateTime({
+	dateStyle: 'long',
+})
 
 const props = withDefaults(
 	defineProps<{
@@ -71,10 +78,10 @@ const props = withDefaults(
 const currentDate = ref(dayjs())
 const recent = computed(() => props.entry.date.isAfter(currentDate.value.subtract(1, 'week')))
 const future = computed(() => props.entry.date.isAfter(currentDate.value))
-const dateTooltip = computed(() => props.entry.date.format('MMMM D, YYYY [at] h:mm A'))
+const dateTooltip = computed(() => formatDateTime(props.entry.date.toDate()))
 
-const relativeDate = computed(() => formatRelativeTime(props.entry.date.toISOString()))
-const longDate = computed(() => props.entry.date.format('MMMM D, YYYY'))
+const relativeDate = computed(() => formatRelativeTime(props.entry.date.toDate()))
+const longDate = computed(() => formatDate(props.entry.date.toDate()))
 const versionName = computed(() => props.entry.version ?? longDate.value)
 
 const messages = defineMessages({
diff --git a/packages/ui/src/components/chart/Chart.vue b/packages/ui/src/components/chart/Chart.vue
index c152621507..c456f56e6c 100644
--- a/packages/ui/src/components/chart/Chart.vue
+++ b/packages/ui/src/components/chart/Chart.vue
@@ -1,13 +1,14 @@
 <!-- eslint-disable no-console -->
 <script setup>
-import { formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { defineAsyncComponent, ref } from 'vue'
 
+import { useFormatNumber } from '../../composables/index.ts'
 import Button from '../base/Button.vue'
 import Checkbox from '../base/Checkbox.vue'
 
 const VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
+const formatNumber = useFormatNumber()
 
 const props = defineProps({
 	name: {
@@ -149,7 +150,7 @@ const chartOptions = ref({
 					!props.hideTotal
 						? `<div class="value">
         ${props.prefix}
-        ${formatNumber(series.reduce((a, b) => a + b[dataPointIndex], 0).toString(), false)}
+        ${formatNumber(series.reduce((a, b) => a + b[dataPointIndex], 0).toString())}
         ${props.suffix}
         </div>`
 						: ``
@@ -163,7 +164,7 @@ const chartOptions = ref({
                 </div>
                 <div class="value">
                   ${props.prefix}
-                  ${formatNumber(value[dataPointIndex], false)}
+                  ${formatNumber(value[dataPointIndex])}
                   ${props.suffix}
                 </div>
               </div>`
diff --git a/packages/ui/src/components/chart/CompactChart.vue b/packages/ui/src/components/chart/CompactChart.vue
index 387e1b92e3..08b5efa7cf 100644
--- a/packages/ui/src/components/chart/CompactChart.vue
+++ b/packages/ui/src/components/chart/CompactChart.vue
@@ -1,13 +1,15 @@
 <!-- eslint-disable eslint-comments/require-description -->
 <script setup>
-import { formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { defineAsyncComponent, ref } from 'vue'
 
+import { useFormatNumber } from '../../composables/index.ts'
 import Card from '../base/Card.vue'
 
 const VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
 
+const formatNumber = useFormatNumber()
+
 const props = defineProps({
 	value: {
 		type: String,
@@ -124,7 +126,7 @@ const chartOptions = ref({
                 </div>
                 <div class="value">
                   ${props.prefix}
-                  ${formatNumber(value[dataPointIndex], false)}
+                  ${formatNumber(value[dataPointIndex])}
                   ${props.suffix}
                 </div>
               </div>`
diff --git a/packages/ui/src/components/content/NewsArticleCard.vue b/packages/ui/src/components/content/NewsArticleCard.vue
index 20c9fe41f3..9e442a2997 100644
--- a/packages/ui/src/components/content/NewsArticleCard.vue
+++ b/packages/ui/src/components/content/NewsArticleCard.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import dayjs from 'dayjs'
-
+import { useFormatDateTime } from '../../composables'
 import AutoLink from '../base/AutoLink.vue'
 
+const formatDate = useFormatDateTime({ dateStyle: 'long' })
+
 export interface Article {
 	path: string
 	thumbnail: string
@@ -34,7 +35,7 @@ defineProps<{
 					{{ article.summary }}
 				</p>
 				<div class="mt-auto text-sm text-secondary">
-					{{ dayjs(article.date).format('MMMM D, YYYY') }}
+					{{ formatDate(article.date) }}
 				</div>
 			</div>
 		</article>
diff --git a/packages/ui/src/components/instances/ContentModpackCard.vue b/packages/ui/src/components/instances/ContentModpackCard.vue
index 36373f6202..fe650aaca3 100644
--- a/packages/ui/src/components/instances/ContentModpackCard.vue
+++ b/packages/ui/src/components/instances/ContentModpackCard.vue
@@ -10,6 +10,7 @@ import {
 import { computed, getCurrentInstance } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
+import { useCompactNumber } from '../../composables'
 import { useRelativeTime } from '../../composables/how-ago'
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages'
@@ -66,11 +67,7 @@ const hasContentListener = computed(() => typeof instance?.vnode.props?.onConten
 const hasUnlinkListener = computed(() => typeof instance?.vnode.props?.onUnlink === 'function')
 
 const formatTimeAgo = useRelativeTime()
-
-const formatCompact = (n: number | undefined) => {
-	if (n === undefined) return ''
-	return new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 }).format(n)
-}
+const { formatCompactNumber } = useCompactNumber()
 </script>
 
 <template>
@@ -165,12 +162,12 @@ const formatCompact = (n: number | undefined) => {
 		<div class="flex flex-wrap items-center gap-3">
 			<div v-if="project.downloads !== undefined" class="flex items-center gap-2 text-secondary">
 				<DownloadIcon class="size-5" />
-				<span class="font-medium">{{ formatCompact(project.downloads) }}</span>
+				<span class="font-medium">{{ formatCompactNumber(project.downloads) }}</span>
 			</div>
 
 			<div v-if="project.followers !== undefined" class="flex items-center gap-2 text-secondary">
 				<HeartIcon class="size-5" />
-				<span class="font-medium">{{ formatCompact(project.followers) }}</span>
+				<span class="font-medium">{{ formatCompactNumber(project.followers) }}</span>
 			</div>
 
 			<div v-if="categories?.length" class="flex flex-wrap gap-2">
diff --git a/packages/ui/src/components/instances/modals/ContentUpdaterModal.vue b/packages/ui/src/components/instances/modals/ContentUpdaterModal.vue
index a2cc4bd79c..e2cd322b2d 100644
--- a/packages/ui/src/components/instances/modals/ContentUpdaterModal.vue
+++ b/packages/ui/src/components/instances/modals/ContentUpdaterModal.vue
@@ -182,6 +182,7 @@ import {
 import { capitalizeString, renderHighlightedString } from '@modrinth/utils'
 import { computed, ref } from 'vue'
 
+import { useFormatDateTime } from '../../../composables'
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { commonMessages } from '../../../utils/common-messages'
 import Avatar from '../../base/Avatar.vue'
@@ -189,6 +190,7 @@ import ButtonStyled from '../../base/ButtonStyled.vue'
 import NewModal from '../../modal/NewModal.vue'
 
 const { formatMessage } = useVIntl()
+const formatDate = useFormatDateTime({ dateStyle: 'long' })
 
 const messages = defineMessages({
 	updateVersionHeader: {
@@ -342,11 +344,7 @@ function getBadgeClasses(version: Labrinth.Versions.v2.Version): string {
 }
 
 function formatLongDate(dateString: string): string {
-	return new Date(dateString).toLocaleDateString('en-US', {
-		year: 'numeric',
-		month: 'long',
-		day: 'numeric',
-	})
+	return formatDate(new Date(dateString))
 }
 
 function formatLoaderGameVersion(version: Labrinth.Versions.v2.Version): string {
diff --git a/packages/ui/src/components/project/ProjectHeader.vue b/packages/ui/src/components/project/ProjectHeader.vue
index 715529bb5e..33d41b5926 100644
--- a/packages/ui/src/components/project/ProjectHeader.vue
+++ b/packages/ui/src/components/project/ProjectHeader.vue
@@ -17,20 +17,20 @@
 				v-tooltip="
 					capitalizeString(
 						formatMessage(commonMessages.projectDownloads, {
-							count: formatNumber(project.downloads, false),
+							count: project.downloads,
 						}),
 					)
 				"
 				class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold cursor-help"
 			>
 				<DownloadIcon class="h-6 w-6 text-secondary" />
-				{{ formatNumber(project.downloads) }}
+				{{ formatCompactNumber(project.downloads) }}
 			</div>
 			<div
 				v-tooltip="
 					capitalizeString(
 						formatMessage(commonMessages.projectFollowers, {
-							count: formatNumber(project.followers, false),
+							count: project.followers,
 						}),
 					)
 				"
@@ -39,7 +39,7 @@
 			>
 				<HeartIcon class="h-6 w-6 text-secondary" />
 				<span class="font-semibold">
-					{{ formatNumber(project.followers) }}
+					{{ formatCompactNumber(project.followers) }}
 				</span>
 			</div>
 			<div v-if="project.categories.length > 0" class="hidden items-center gap-2 md:flex">
@@ -62,10 +62,10 @@
 </template>
 <script setup lang="ts">
 import { DownloadIcon, HeartIcon, TagsIcon } from '@modrinth/assets'
-import { capitalizeString, formatNumber, type Project } from '@modrinth/utils'
+import { capitalizeString, type Project } from '@modrinth/utils'
 import { useRouter } from 'vue-router'
 
-import { useVIntl } from '../../composables'
+import { useCompactNumber, useVIntl } from '../../composables'
 import { commonMessages } from '../../utils'
 import Avatar from '../base/Avatar.vue'
 import ContentPageHeader from '../base/ContentPageHeader.vue'
@@ -75,6 +75,7 @@ import ProjectStatusBadge from './ProjectStatusBadge.vue'
 
 const router = useRouter()
 const { formatMessage } = useVIntl()
+const { formatCompactNumber } = useCompactNumber()
 
 withDefaults(
 	defineProps<{
diff --git a/packages/ui/src/components/project/ProjectPageVersions.vue b/packages/ui/src/components/project/ProjectPageVersions.vue
index 769c782811..ac20de528f 100644
--- a/packages/ui/src/components/project/ProjectPageVersions.vue
+++ b/packages/ui/src/components/project/ProjectPageVersions.vue
@@ -171,12 +171,7 @@
 							class="flex flex-col justify-center gap-1 max-sm:flex-row max-sm:justify-start max-sm:gap-3 xl:contents"
 						>
 							<div
-								v-tooltip="
-									formatMessage(commonMessages.dateAtTimeTooltip, {
-										date: new Date(version.date_published),
-										time: new Date(version.date_published),
-									})
-								"
+								v-tooltip="formatDateTime(version.date_published)"
 								class="z-[1] flex cursor-help items-center gap-1 text-nowrap font-medium xl:self-center"
 							>
 								<CalendarIcon class="xl:hidden" />
@@ -186,7 +181,7 @@
 								class="pointer-events-none z-[1] flex items-center gap-1 font-medium xl:self-center"
 							>
 								<DownloadIcon class="xl:hidden" />
-								{{ formatNumber(version.downloads) }}
+								{{ formatCompactNumber(version.downloads) }}
 							</div>
 						</div>
 					</div>
@@ -227,12 +222,13 @@ import {
 	FormattedTag,
 	Pagination,
 	TagItem,
+	useCompactNumber,
+	useFormatDateTime,
 	VersionChannelIndicator,
 	VersionFilterControl,
 } from '@modrinth/ui'
 import {
 	formatBytes,
-	formatNumber,
 	formatVersionsForDisplay,
 	type GameVersionTag,
 	type Version,
@@ -242,11 +238,15 @@ import { useRoute, useRouter } from 'vue-router'
 
 import { useRelativeTime } from '../../composables'
 import { useVIntl } from '../../composables/i18n'
-import { commonMessages } from '../../utils/common-messages'
 import { getEnvironmentTags } from './settings/environment/environments'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
+const { formatCompactNumber } = useCompactNumber()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 type VersionWithDisplayUrlEnding = Version & {
 	displayUrlEnding: string
diff --git a/packages/ui/src/components/project/ProjectSidebarDetails.vue b/packages/ui/src/components/project/ProjectSidebarDetails.vue
index 459991c18e..867045453b 100644
--- a/packages/ui/src/components/project/ProjectSidebarDetails.vue
+++ b/packages/ui/src/components/project/ProjectSidebarDetails.vue
@@ -30,10 +30,7 @@
 					</IntlFormatted>
 				</div>
 			</div>
-			<div
-				v-if="project.approved"
-				v-tooltip="dayjs(project.approved).format('MMMM D, YYYY [at] h:mm A')"
-			>
+			<div v-if="project.approved" v-tooltip="formatDateTime(project.approved)">
 				<CalendarIcon aria-hidden="true" />
 				<div>
 					{{
@@ -43,7 +40,7 @@
 					}}
 				</div>
 			</div>
-			<div v-else v-tooltip="dayjs(project.published).format('MMMM D, YYYY [at] h:mm A')">
+			<div v-else v-tooltip="formatDateTime(project.published)">
 				<CalendarIcon aria-hidden="true" />
 				<div>
 					{{
@@ -53,7 +50,7 @@
 			</div>
 			<div
 				v-if="project.status === 'processing' && project.queued"
-				v-tooltip="dayjs(project.queued).format('MMMM D, YYYY [at] h:mm A')"
+				v-tooltip="formatDateTime(project.queued)"
 			>
 				<ScaleIcon aria-hidden="true" />
 				<div>
@@ -64,10 +61,7 @@
 					}}
 				</div>
 			</div>
-			<div
-				v-if="hasVersions && project.updated"
-				v-tooltip="dayjs(project.updated).format('MMMM D, YYYY [at] h:mm A')"
-			>
+			<div v-if="hasVersions && project.updated" v-tooltip="formatDateTime(project.updated)">
 				<VersionIcon aria-hidden="true" />
 				<div>
 					{{
@@ -81,16 +75,19 @@
 <script setup lang="ts">
 import { BookTextIcon, CalendarIcon, ExternalIcon, ScaleIcon, VersionIcon } from '@modrinth/assets'
 import { capitalizeString } from '@modrinth/utils'
-import dayjs from 'dayjs'
 import { computed } from 'vue'
 
-import { useRelativeTime } from '../../composables'
+import { useFormatDateTime, useRelativeTime } from '../../composables'
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages'
 import { IntlFormatted } from '../base'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const props = defineProps<{
 	project: {
diff --git a/packages/ui/src/components/project/card/ProjectCardDate.vue b/packages/ui/src/components/project/card/ProjectCardDate.vue
index 6f154be8d2..5225196071 100644
--- a/packages/ui/src/components/project/card/ProjectCardDate.vue
+++ b/packages/ui/src/components/project/card/ProjectCardDate.vue
@@ -1,36 +1,39 @@
 <script setup lang="ts">
 import { CalendarIcon, HistoryIcon } from '@modrinth/assets'
 import { capitalizeString } from '@modrinth/utils'
-import dayjs from 'dayjs'
 import { computed } from 'vue'
 
-import { useRelativeTime, useVIntl } from '../../../composables'
+import { defineMessage, useFormatDateTime, useRelativeTime, useVIntl } from '../../../composables'
 
 const { formatMessage } = useVIntl()
 
 const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const props = defineProps<{
 	date: Date
 	type: 'updated' | 'published'
 }>()
 
-const formattedDate = computed(() => dayjs(props.date).format('MMMM D, YYYY [at] h:mm A'))
+const formattedDate = computed(() => formatDateTime(props.date))
 
 const types = {
 	updated: {
 		icon: HistoryIcon,
-		tooltip: {
+		tooltip: defineMessage({
 			id: 'project-card.date.updated.tooltip',
 			defaultMessage: 'Updated {date}',
-		},
+		}),
 	},
 	published: {
 		icon: CalendarIcon,
-		tooltip: {
+		tooltip: defineMessage({
 			id: 'project-card.date.published.tooltip',
 			defaultMessage: 'Published {date}',
-		},
+		}),
 	},
 }
 
diff --git a/packages/ui/src/components/project/card/ProjectCardStats.vue b/packages/ui/src/components/project/card/ProjectCardStats.vue
index 546c0a1bfc..c769de7ee7 100644
--- a/packages/ui/src/components/project/card/ProjectCardStats.vue
+++ b/packages/ui/src/components/project/card/ProjectCardStats.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { DownloadIcon, HeartIcon } from '@modrinth/assets'
 
-import { capitalizeString, formatNumber } from '../../../../../utils'
-import { useVIntl } from '../../../composables'
+import { capitalizeString } from '../../../../../utils'
+import { useCompactNumber, useVIntl } from '../../../composables'
 import { commonMessages } from '../../../utils'
 
 const { formatMessage } = useVIntl()
+const { formatCompactNumber } = useCompactNumber()
 
 defineProps<{
 	downloads?: number
@@ -19,7 +20,7 @@ defineProps<{
 		v-tooltip="
 			capitalizeString(
 				formatMessage(commonMessages.projectDownloads, {
-					count: formatNumber(downloads, false),
+					count: downloads,
 				}),
 			)
 		"
@@ -27,7 +28,7 @@ defineProps<{
 	>
 		<DownloadIcon class="size-5 shrink-0" />
 		<span class="font-medium">
-			{{ formatNumber(downloads) }}
+			{{ formatCompactNumber(downloads) }}
 		</span>
 	</div>
 	<div
@@ -35,7 +36,7 @@ defineProps<{
 		v-tooltip="
 			capitalizeString(
 				formatMessage(commonMessages.projectFollowers, {
-					count: formatNumber(followers, false),
+					count: followers,
 				}),
 			)
 		"
@@ -43,7 +44,7 @@ defineProps<{
 	>
 		<HeartIcon class="size-5 shrink-0" />
 		<span class="font-medium">
-			{{ formatNumber(followers) }}
+			{{ formatCompactNumber(followers) }}
 		</span>
 	</div>
 </template>
diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index cc705dd27d..1990edd27c 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -122,9 +122,9 @@ import {
 	TriangleAlertIcon,
 } from '@modrinth/assets'
 import { useQuery } from '@tanstack/vue-query'
-import dayjs from 'dayjs'
 import { computed } from 'vue'
 
+import { useFormatDateTime } from '../../composables'
 import { injectModrinthClient } from '../../providers/api-client'
 import Avatar from '../base/Avatar.vue'
 import CopyCode from '../base/CopyCode.vue'
@@ -132,6 +132,8 @@ import ServersSpecs from '../billing/ServersSpecs.vue'
 import ServerIcon from './icons/ServerIcon.vue'
 import ServerInfoLabels from './labels/ServerInfoLabels.vue'
 
+const formatDate = useFormatDateTime({ dateStyle: 'long' })
+
 export type PendingChange = {
 	planSize: string
 	cpu: number
@@ -249,12 +251,4 @@ const { data: image } = useQuery({
 })
 
 const isConfiguring = computed(() => props.flows?.intro)
-
-const formatDate = (d: unknown) => {
-	try {
-		return dayjs(d as string).format('MMMM D, YYYY')
-	} catch {
-		return ''
-	}
-}
 </script>
diff --git a/packages/ui/src/components/servers/backups/BackupItem.vue b/packages/ui/src/components/servers/backups/BackupItem.vue
index ca75453c4e..92295e18ef 100644
--- a/packages/ui/src/components/servers/backups/BackupItem.vue
+++ b/packages/ui/src/components/servers/backups/BackupItem.vue
@@ -10,9 +10,9 @@ import {
 	UserRoundIcon,
 	XIcon,
 } from '@modrinth/assets'
-import dayjs from 'dayjs'
 import { computed } from 'vue'
 
+import { useFormatDateTime } from '../../../composables'
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { commonMessages } from '../../../utils'
 import ButtonStyled from '../../base/ButtonStyled.vue'
@@ -20,6 +20,10 @@ import OverflowMenu, { type Option as OverflowOption } from '../../base/Overflow
 import ProgressBar from '../../base/ProgressBar.vue'
 
 const { formatMessage } = useVIntl()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
 
 const emit = defineEmits<{
 	(e: 'download' | 'rename' | 'restore' | 'retry'): void
@@ -254,7 +258,7 @@ const messages = defineMessages({
 			</template>
 			<template v-else>
 				<span class="w-full font-medium text-contrast md:text-center">
-					{{ dayjs(backup.created_at).format('MMMM Do YYYY, h:mm A') }}
+					{{ formatDateTime(backup.created_at) }}
 				</span>
 				<!-- TODO: Uncomment when API supports size field -->
 				<!-- <span class="text-secondary">{{ formatBytes(backup.size) }}</span> -->
diff --git a/packages/ui/src/components/servers/files/explorer/FileItem.vue b/packages/ui/src/components/servers/files/explorer/FileItem.vue
index 671743e6fe..aabeb8a897 100644
--- a/packages/ui/src/components/servers/files/explorer/FileItem.vue
+++ b/packages/ui/src/components/servers/files/explorer/FileItem.vue
@@ -81,6 +81,7 @@ import {
 	getFileExtensionIcon,
 	isEditableFile as isEditableFileExt,
 	isImageFile,
+	useFormatDateTime,
 } from '@modrinth/ui'
 import { computed, ref, shallowRef } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -123,6 +124,14 @@ const units = Object.freeze(['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'])
 const route = shallowRef(useRoute())
 const router = useRouter()
 
+const formatDateTime = useFormatDateTime({
+	year: '2-digit',
+	month: '2-digit',
+	day: '2-digit',
+	hour: 'numeric',
+	minute: 'numeric',
+})
+
 const containerClasses = computed(() => [
 	'group m-0 flex w-full select-none items-center justify-between overflow-hidden border-0 border-t border-solid border-surface-3 px-4 py-3 focus:!outline-none',
 	props.selected ? 'bg-surface-3' : props.index % 2 === 0 ? 'bg-surface-2' : 'file-row-alt',
@@ -179,28 +188,12 @@ const iconComponent = computed(() => {
 
 const formattedModifiedDate = computed(() => {
 	const date = new Date(props.modified * 1000)
-	return `${date.toLocaleDateString('en-US', {
-		month: '2-digit',
-		day: '2-digit',
-		year: '2-digit',
-	})}, ${date.toLocaleTimeString('en-US', {
-		hour: 'numeric',
-		minute: 'numeric',
-		hour12: true,
-	})}`
+	return formatDateTime(date)
 })
 
 const formattedCreationDate = computed(() => {
 	const date = new Date(props.created * 1000)
-	return `${date.toLocaleDateString('en-US', {
-		month: '2-digit',
-		day: '2-digit',
-		year: '2-digit',
-	})}, ${date.toLocaleTimeString('en-US', {
-		hour: 'numeric',
-		minute: 'numeric',
-		hour12: true,
-	})}`
+	return formatDateTime(date)
 })
 
 const isEditableFile = computed(() => {
diff --git a/packages/ui/src/composables/format-date-time.ts b/packages/ui/src/composables/format-date-time.ts
new file mode 100644
index 0000000000..6875ac27cc
--- /dev/null
+++ b/packages/ui/src/composables/format-date-time.ts
@@ -0,0 +1,38 @@
+import { LRUCache } from 'lru-cache'
+
+import { injectI18n } from '../providers/i18n'
+
+const formatterCache = new LRUCache<string, Intl.DateTimeFormat>({ max: 40 })
+
+export function useFormatDateTime(options?: Intl.DateTimeFormatOptions) {
+	const { locale } = injectI18n()
+
+	const formatter = getFormatter(locale.value, options)
+
+	function format(date?: Date | number | string): string {
+		if (typeof date === 'number' || typeof date === 'string') {
+			date = new Date(date)
+		}
+		return formatter!.format(date)
+	}
+
+	return format
+}
+
+function getFormatter(locale: string, options?: Intl.DateTimeFormatOptions): Intl.DateTimeFormat {
+	let cacheKey = locale
+	if (options) {
+		const entries = Object.entries(options)
+			.filter(([, value]) => value !== undefined)
+			.sort()
+			.map(([key, value]) => `${key}=${value}`)
+		cacheKey = [locale, ...entries].join(':')
+	}
+
+	let formatter = formatterCache.get(cacheKey)
+	if (!formatter) {
+		formatter = new Intl.DateTimeFormat(locale, options)
+		formatterCache.set(cacheKey, formatter)
+	}
+	return formatter
+}
diff --git a/packages/ui/src/composables/format-money.ts b/packages/ui/src/composables/format-money.ts
new file mode 100644
index 0000000000..30abe6a412
--- /dev/null
+++ b/packages/ui/src/composables/format-money.ts
@@ -0,0 +1,78 @@
+import { LRUCache } from 'lru-cache'
+
+import { injectI18n } from '../providers/i18n'
+
+const formatterCache = new LRUCache<string, Intl.NumberFormat>({ max: 10 })
+const maxDigitsCache = new LRUCache<string, number>({ max: 10 })
+
+// `formatMoney(1234.56, 'USD')` → `$1,234.56`
+export function useFormatMoney() {
+	const { locale } = injectI18n()
+
+	function format(number: number, currency = 'USD'): string {
+		try {
+			const formatter = getFormatter(locale.value, currency)
+			return formatter!.format(number)
+		} catch {
+			return `${currency} ${number.toFixed(2)}`
+		}
+	}
+
+	return format
+}
+
+// `formatPrice(123456, 'USD')` → `$1,234.56`
+export function useFormatPrice() {
+	const { locale } = injectI18n()
+
+	function format(price: number, currency: string, trimZeros = false): string {
+		const maxDigits = getMaxDigits(currency)
+		const convertedPrice = price / Math.pow(10, maxDigits)
+
+		const minimumFractionDigits = trimZeros && Number.isInteger(convertedPrice) ? 0 : undefined
+
+		try {
+			const formatter = getFormatter(locale.value, currency, minimumFractionDigits)
+			return formatter.format(convertedPrice)
+		} catch {
+			return `${currency} ${convertedPrice}`
+		}
+	}
+
+	return format
+}
+
+function getFormatter(
+	locale: string,
+	currency: string,
+	minimumFractionDigits?: number,
+): Intl.NumberFormat {
+	const cacheKey = `${locale}:${currency}:${minimumFractionDigits}`
+	let formatter = formatterCache.get(cacheKey)
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(locale, {
+			style: 'currency',
+			currency,
+			minimumFractionDigits,
+		})
+		formatterCache.set(cacheKey, formatter)
+	}
+	return formatter
+}
+
+function getMaxDigits(currency: string): number {
+	let maxDigits = maxDigitsCache.get(currency)
+	if (!maxDigits) {
+		try {
+			const formatter = new Intl.NumberFormat(undefined, {
+				style: 'currency',
+				currency,
+			})
+			maxDigits = formatter.resolvedOptions().maximumFractionDigits || 2
+		} catch {
+			maxDigits = 2
+		}
+		maxDigitsCache.set(currency, maxDigits)
+	}
+	return maxDigits
+}
diff --git a/packages/ui/src/composables/format-number.ts b/packages/ui/src/composables/format-number.ts
new file mode 100644
index 0000000000..c5cca33ee9
--- /dev/null
+++ b/packages/ui/src/composables/format-number.ts
@@ -0,0 +1,75 @@
+import { LRUCache } from 'lru-cache'
+
+import { injectI18n } from '../providers/i18n'
+
+const formatterCache = new LRUCache<string, Intl.NumberFormat>({ max: 15 })
+
+// `formatNumber(1234567)` → `1,234,567`
+export function useFormatNumber() {
+	const { locale } = injectI18n()
+
+	const formatter = getStandardFormatter(locale.value)
+
+	function format(value: number | bigint): string {
+		return formatter!.format(value)
+	}
+
+	return format
+}
+
+// `formatCompactNumber(1234567)` → `1.23M`
+//
+// Use `formatCompactNumberPlural` over `{(here!), plural, one {...} other {...}}`
+export function useCompactNumber() {
+	const { locale } = injectI18n()
+	const currentLocale = locale.value
+
+	const standardFormatter = getStandardFormatter(currentLocale)
+	const oneDigitCompactFormatter = getCompactFormatter(currentLocale, 1)
+	const twoDigitsCompactFormatter = getCompactFormatter(currentLocale, 2)
+
+	function formatCompactNumber(value: number | bigint): string {
+		if (value < 10_000) {
+			return standardFormatter!.format(value)
+		}
+		if (value < 1_000_000) {
+			return oneDigitCompactFormatter!.format(value)
+		}
+		return twoDigitsCompactFormatter!.format(value)
+	}
+
+	function formatCompactNumberPlural(value: number | bigint): string {
+		if (value < 10_000) {
+			return value.toString()
+		}
+		if (value < 1_000_000) {
+			return oneDigitCompactFormatter!.format(value)
+		}
+		return twoDigitsCompactFormatter!.format(value)
+	}
+
+	return { formatCompactNumber, formatCompactNumberPlural }
+}
+
+function getStandardFormatter(locale: string): Intl.NumberFormat {
+	const cacheKey = `${locale}:standard`
+	let formatter = formatterCache.get(cacheKey)
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(locale)
+		formatterCache.set(cacheKey, formatter)
+	}
+	return formatter
+}
+
+function getCompactFormatter(locale: string, maximumFractionDigits: number): Intl.NumberFormat {
+	const cacheKey = `${locale}:compact:${maximumFractionDigits}`
+	let formatter = formatterCache.get(cacheKey)
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(locale, {
+			notation: 'compact',
+			maximumFractionDigits,
+		})
+		formatterCache.set(cacheKey, formatter)
+	}
+	return formatter
+}
diff --git a/packages/ui/src/composables/how-ago.ts b/packages/ui/src/composables/how-ago.ts
index fa8efecb0f..85b6586504 100644
--- a/packages/ui/src/composables/how-ago.ts
+++ b/packages/ui/src/composables/how-ago.ts
@@ -1,32 +1,16 @@
-import { computed, type ComputedRef } from 'vue'
+import { LRUCache } from 'lru-cache'
 
 import { injectI18n } from '../providers/i18n'
 import { LOCALES } from './i18n.ts'
 
-export type Formatter = (value: Date | number | null | undefined, options?: FormatOptions) => string
+const formatterCache = new LRUCache<string, Intl.RelativeTimeFormat>({ max: 5 })
 
-export interface FormatOptions {
-	roundingMode?: 'halfExpand' | 'floor' | 'ceil'
-}
-
-const formatters = new Map<string, ComputedRef<Intl.RelativeTimeFormat>>()
-
-export function useRelativeTime(): Formatter {
+export function useRelativeTime() {
 	const { locale } = injectI18n()
 
-	const formatterRef = computed(() => {
-		const localeDefinition = LOCALES.find((loc) => loc.code === locale.value)
-		return new Intl.RelativeTimeFormat(locale.value, {
-			numeric: localeDefinition?.numeric || 'auto',
-			style: 'long',
-		})
-	})
-
-	if (!formatters.has(locale.value)) {
-		formatters.set(locale.value, formatterRef)
-	}
+	const rtf = getFormatter(locale.value)
 
-	return (value: Date | number | null | undefined) => {
+	return (value: Date | number | string | null | undefined) => {
 		if (value == null) {
 			return ''
 		}
@@ -47,8 +31,6 @@ export function useRelativeTime(): Formatter {
 		const months = Math.round(diff / 2629746000)
 		const years = Math.round(diff / 31556952000)
 
-		const rtf = formatterRef.value
-
 		if (Math.abs(seconds) < 60) {
 			return rtf.format(seconds, 'second')
 		} else if (Math.abs(minutes) < 60) {
@@ -66,3 +48,16 @@ export function useRelativeTime(): Formatter {
 		}
 	}
 }
+
+function getFormatter(locale: string): Intl.RelativeTimeFormat {
+	let formatter = formatterCache.get(locale)
+	if (!formatter) {
+		const localeDefinition = LOCALES.find((loc) => loc.code === locale)
+		formatter = new Intl.RelativeTimeFormat(locale, {
+			numeric: localeDefinition?.numeric || 'auto',
+			style: 'long',
+		})
+		formatterCache.set(locale, formatter)
+	}
+	return formatter
+}
diff --git a/packages/ui/src/composables/index.ts b/packages/ui/src/composables/index.ts
index 0336fd3405..1db82c3c34 100644
--- a/packages/ui/src/composables/index.ts
+++ b/packages/ui/src/composables/index.ts
@@ -1,5 +1,8 @@
 export * from './debug-logger'
 export * from './dynamic-font-size'
+export * from './format-date-time'
+export * from './format-money'
+export * from './format-number'
 export * from './how-ago'
 export * from './i18n'
 export * from './scroll-indicator'
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 37502c870d..1d19bdfda2 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -650,6 +650,12 @@
   "payment-method.visa": {
     "defaultMessage": "Visa"
   },
+  "project-card.date.published.tooltip": {
+    "defaultMessage": "Published {date}"
+  },
+  "project-card.date.updated.tooltip": {
+    "defaultMessage": "Updated {date}"
+  },
   "project-card.environment.client": {
     "defaultMessage": "Client"
   },
@@ -822,7 +828,7 @@
     "defaultMessage": "Visit wiki"
   },
   "project.download-count-tooltip": {
-    "defaultMessage": "{count} {count, plural, one {download} other {downloads}}"
+    "defaultMessage": "{count, number} {count, plural, one {download} other {downloads}}"
   },
   "project.environment.client-and-server.description": {
     "defaultMessage": "Has some functionality on both the client and server, even if only partially."
@@ -891,7 +897,7 @@
     "defaultMessage": "Unknown environment"
   },
   "project.follower-count-tooltip": {
-    "defaultMessage": "{count} {count, plural, one {followers} other {followers}}"
+    "defaultMessage": "{count, number} {count, plural, one {follower} other {followers}}"
   },
   "project.settings.analytics.title": {
     "defaultMessage": "Analytics"
@@ -1619,9 +1625,6 @@
   "tag.loader.waterfall": {
     "defaultMessage": "Waterfall"
   },
-  "tooltip.date-at-time": {
-    "defaultMessage": "{date, date, long} at {time, time, short}"
-  },
   "ui.component.unsaved-changes-popup.body": {
     "defaultMessage": "You have unsaved changes."
   }
diff --git a/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index e2c1db7914..80c3a7aeb8 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -77,10 +77,6 @@ export const commonMessages = defineMessages({
 		id: 'label.dashboard',
 		defaultMessage: 'Dashboard',
 	},
-	dateAtTimeTooltip: {
-		id: 'tooltip.date-at-time',
-		defaultMessage: '{date, date, long} at {time, time, short}',
-	},
 	declineButton: {
 		id: 'button.decline',
 		defaultMessage: 'Decline',
@@ -387,11 +383,11 @@ export const commonMessages = defineMessages({
 	},
 	projectDownloads: {
 		id: 'project.download-count-tooltip',
-		defaultMessage: '{count} {count, plural, one {download} other {downloads}}',
+		defaultMessage: '{count, number} {count, plural, one {download} other {downloads}}',
 	},
 	projectFollowers: {
 		id: 'project.follower-count-tooltip',
-		defaultMessage: '{count} {count, plural, one {followers} other {followers}}',
+		defaultMessage: '{count, number} {count, plural, one {follower} other {followers}}',
 	},
 })
 
diff --git a/packages/utils/billing.ts b/packages/utils/billing.ts
index f9f9f3ef75..71306036fb 100644
--- a/packages/utils/billing.ts
+++ b/packages/utils/billing.ts
@@ -60,29 +60,6 @@ export const getCurrency = (userCountry) => {
 	return countryCurrency[userCountry] ?? 'USD'
 }
 
-export const formatPrice = (locale, price, currency, trimZeros = false) => {
-	let formatter = new Intl.NumberFormat(locale, {
-		style: 'currency',
-		currency,
-	})
-
-	const maxDigits = formatter.resolvedOptions().maximumFractionDigits
-	const convertedPrice = price / Math.pow(10, maxDigits)
-
-	let minimumFractionDigits = maxDigits
-
-	if (trimZeros && Number.isInteger(convertedPrice)) {
-		minimumFractionDigits = 0
-	}
-
-	formatter = new Intl.NumberFormat(locale, {
-		style: 'currency',
-		currency,
-		minimumFractionDigits,
-	})
-	return formatter.format(convertedPrice)
-}
-
 export const calculateSavings = (monthlyPlan, plan, months = 12) => {
 	const monthlyAnnualized = monthlyPlan * months
 
diff --git a/packages/utils/utils.ts b/packages/utils/utils.ts
index d15ee0a4b6..9ee13976ac 100644
--- a/packages/utils/utils.ts
+++ b/packages/utils/utils.ts
@@ -77,40 +77,6 @@ export const sortedCategories = (tags) => {
 	})
 }
 
-export const formatNumber = (number, abbreviate = true) => {
-	const x = Number(number)
-	if (x >= 1000000 && abbreviate) {
-		return `${(x / 1000000).toFixed(2).toString()}M`
-	} else if (x >= 10000 && abbreviate) {
-		return `${(x / 1000).toFixed(1).toString()}k`
-	}
-	return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-}
-
-export function formatDate(
-	date: dayjs.Dayjs,
-	options: Intl.DateTimeFormatOptions = {
-		month: 'long',
-		day: 'numeric',
-		year: 'numeric',
-	},
-): string {
-	return date.toDate().toLocaleDateString(undefined, options)
-}
-
-export function formatMoney(number, abbreviate = false) {
-	const x = Number(number)
-	if (x >= 1000000 && abbreviate) {
-		return `$${(x / 1000000).toFixed(2).toString()}M`
-	} else if (x >= 10000 && abbreviate) {
-		return `$${(x / 1000).toFixed(2).toString()}k`
-	}
-	return `$${x
-		.toFixed(2)
-		.toString()
-		.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`
-}
-
 export const formatBytes = (bytes, decimals = 2) => {
 	if (bytes === 0) return '0 Bytes'
 

From c92ad76bfb409f53d5e9f95ef923ecb0a7560a09 Mon Sep 17 00:00:00 2001
From: Jerozgen <jerozgen@gmail.com>
Date: Sat, 14 Feb 2026 23:33:59 +0300
Subject: [PATCH 2/2] Additional fixes

---
 .../src/components/ui/LegacyProjectCard.vue        |  2 +-
 .../src/components/ui/world/InstanceItem.vue       | 14 +++++---------
 .../src/components/ui/world/WorldItem.vue          | 12 ++++++------
 apps/app-frontend/src/pages/project/Gallery.vue    |  4 ++--
 apps/app-frontend/src/pages/project/Version.vue    |  6 +++---
 .../components/ui/banner/TaxComplianceBanner.vue   |  4 ++--
 apps/frontend/src/pages/dashboard/collections.vue  |  2 +-
 apps/frontend/src/pages/legal/cmp-info.vue         |  2 +-
 8 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/LegacyProjectCard.vue b/apps/app-frontend/src/components/ui/LegacyProjectCard.vue
index 73b51ba568..7f048a1a8d 100644
--- a/apps/app-frontend/src/components/ui/LegacyProjectCard.vue
+++ b/apps/app-frontend/src/components/ui/LegacyProjectCard.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { DownloadIcon, HeartIcon, TagIcon } from '@modrinth/assets'
-import {Avatar, FormattedTag, TagItem, useCompactNumber} from '@modrinth/ui'
+import { Avatar, FormattedTag, TagItem, useCompactNumber } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed } from 'vue'
diff --git a/apps/app-frontend/src/components/ui/world/InstanceItem.vue b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
index 07e5875f0d..43d653bfea 100644
--- a/apps/app-frontend/src/components/ui/world/InstanceItem.vue
+++ b/apps/app-frontend/src/components/ui/world/InstanceItem.vue
@@ -13,14 +13,14 @@ import {
 	commonMessages,
 	injectNotificationManager,
 	OverflowMenu,
-	SmartClickable, useFormatDateTime,
+	SmartClickable,
+	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
 import { capitalizeString } from '@modrinth/utils'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import type { Dayjs } from 'dayjs'
-import dayjs from 'dayjs'
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -37,8 +37,8 @@ const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
 const formatDateTime = useFormatDateTime({
-	timeStyle: "short",
-	dateStyle: "long",
+	timeStyle: 'short',
+	dateStyle: 'long',
 })
 
 const router = useRouter()
@@ -149,11 +149,7 @@ onUnmounted(() => {
 				</div>
 				<div class="flex items-center gap-2 text-sm text-secondary">
 					<div
-						v-tooltip="
-							instance.last_played
-								? formatDateTime(instance.last_played)
-								: null
-						"
+						v-tooltip="instance.last_played ? formatDateTime(instance.last_played) : null"
 						class="w-fit shrink-0"
 						:class="{ 'cursor-help smart-clickable:allow-pointer-events': last_played }"
 					>
diff --git a/apps/app-frontend/src/components/ui/world/WorldItem.vue b/apps/app-frontend/src/components/ui/world/WorldItem.vue
index fe89cea999..494664eea1 100644
--- a/apps/app-frontend/src/components/ui/world/WorldItem.vue
+++ b/apps/app-frontend/src/components/ui/world/WorldItem.vue
@@ -17,7 +17,7 @@ import {
 	UserIcon,
 	XIcon,
 } from '@modrinth/assets'
-import {MessageDescriptor, useFormatDateTime, useFormatNumber} from '@modrinth/ui'
+import type { MessageDescriptor } from '@modrinth/ui'
 import {
 	Avatar,
 	ButtonStyled,
@@ -25,6 +25,8 @@ import {
 	defineMessages,
 	OverflowMenu,
 	SmartClickable,
+	useFormatDateTime,
+	useFormatNumber,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
@@ -50,8 +52,8 @@ const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
 const formatNumber = useFormatNumber()
 const formatDateTime = useFormatDateTime({
-	timeStyle: "short",
-	dateStyle: "long",
+	timeStyle: 'short',
+	dateStyle: 'long',
 })
 
 const router = useRouter()
@@ -265,9 +267,7 @@ const messages = defineMessages({
 				</div>
 				<div class="flex items-center gap-2 text-sm text-secondary">
 					<div
-						v-tooltip="
-							world.last_played ? formatDateTime(world.last_played) : null
-						"
+						v-tooltip="world.last_played ? formatDateTime(world.last_played) : null"
 						class="w-fit shrink-0"
 						:class="{
 							'cursor-help smart-clickable:allow-pointer-events': world.last_played,
diff --git a/apps/app-frontend/src/pages/project/Gallery.vue b/apps/app-frontend/src/pages/project/Gallery.vue
index 648f8e3749..a1ff6cad6e 100644
--- a/apps/app-frontend/src/pages/project/Gallery.vue
+++ b/apps/app-frontend/src/pages/project/Gallery.vue
@@ -10,7 +10,7 @@
 			</div>
 			<span class="gallery-time">
 				<CalendarIcon />
-				{{ formatDate(new Date(image.created))  }}
+				{{ formatDate(new Date(image.created)) }}
 			</span>
 		</Card>
 	</div>
@@ -85,7 +85,7 @@ import {
 	RightArrowIcon,
 	XIcon,
 } from '@modrinth/assets'
-import {Button, Card, useFormatDateTime} from '@modrinth/ui'
+import { Button, Card, useFormatDateTime } from '@modrinth/ui'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'
diff --git a/apps/app-frontend/src/pages/project/Version.vue b/apps/app-frontend/src/pages/project/Version.vue
index ff27e39180..9db6001c59 100644
--- a/apps/app-frontend/src/pages/project/Version.vue
+++ b/apps/app-frontend/src/pages/project/Version.vue
@@ -168,7 +168,7 @@
 
 <script setup>
 import { CheckIcon, DownloadIcon, ExternalIcon, FileIcon, ReportIcon } from '@modrinth/assets'
-import {Avatar, Badge, Breadcrumbs, Button, Card, CopyCode, useFormatDateTime} from '@modrinth/ui'
+import { Avatar, Badge, Breadcrumbs, Button, Card, CopyCode, useFormatDateTime } from '@modrinth/ui'
 import { formatBytes, renderString } from '@modrinth/utils'
 import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
@@ -179,8 +179,8 @@ import { releaseColor } from '@/helpers/utils'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 
 const formatDateTime = useFormatDateTime({
-	timeStyle: "short",
-	dateStyle: "long",
+	timeStyle: 'short',
+	dateStyle: 'long',
 })
 
 const breadcrumbs = useBreadcrumbs()
diff --git a/apps/frontend/src/components/ui/banner/TaxComplianceBanner.vue b/apps/frontend/src/components/ui/banner/TaxComplianceBanner.vue
index bfdc000648..6c7078b992 100644
--- a/apps/frontend/src/components/ui/banner/TaxComplianceBanner.vue
+++ b/apps/frontend/src/components/ui/banner/TaxComplianceBanner.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { FileTextIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
-import { formatMoney } from '@modrinth/utils'
+import {ButtonStyled, defineMessages, PagewideBanner, useFormatMoney, useVIntl} from '@modrinth/ui'
 import { computed } from 'vue'
 
 import { getTaxThreshold } from '@/providers/creator-withdraw.ts'
@@ -9,6 +8,7 @@ import CreatorTaxFormModal from '~/components/ui/dashboard/CreatorTaxFormModal.v
 import { useGeneratedState } from '~/composables/generated'
 
 const { formatMessage } = useVIntl()
+const formatMoney = useFormatMoney()
 
 const generatedState = useGeneratedState()
 const taxThreshold = computed(() => getTaxThreshold(generatedState.value?.taxComplianceThresholds))
diff --git a/apps/frontend/src/pages/dashboard/collections.vue b/apps/frontend/src/pages/dashboard/collections.vue
index 02f46585aa..89e8000dd4 100644
--- a/apps/frontend/src/pages/dashboard/collections.vue
+++ b/apps/frontend/src/pages/dashboard/collections.vue
@@ -113,8 +113,8 @@ import {
 	Button,
 	commonMessages,
 	defineMessages,
-	useCompactNumber,
 	StyledInput,
+	useCompactNumber,
 	useVIntl,
 } from '@modrinth/ui'
 
diff --git a/apps/frontend/src/pages/legal/cmp-info.vue b/apps/frontend/src/pages/legal/cmp-info.vue
index ad1c77ac38..23820702e3 100644
--- a/apps/frontend/src/pages/legal/cmp-info.vue
+++ b/apps/frontend/src/pages/legal/cmp-info.vue
@@ -162,7 +162,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useFormatDateTime, useFormatMoney, StyledInput } from '@modrinth/ui'
+import { StyledInput, useFormatDateTime, useFormatMoney } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import { computed, ref } from 'vue'