diff --git a/.changeset/curly-trees-stare.md b/.changeset/curly-trees-stare.md
new file mode 100644
index 000000000..947d501ab
--- /dev/null
+++ b/.changeset/curly-trees-stare.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+use next-intl formatter to properly localize dates & prices
diff --git a/apps/core/app/[locale]/(default)/blog/[blogId]/page.tsx b/apps/core/app/[locale]/(default)/blog/[blogId]/page.tsx
index de2332468..da60f871e 100644
--- a/apps/core/app/[locale]/(default)/blog/[blogId]/page.tsx
+++ b/apps/core/app/[locale]/(default)/blog/[blogId]/page.tsx
@@ -8,6 +8,7 @@ import {
 import { Tag, TagContent } from '@bigcommerce/components/tag';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
+import { getFormatter } from 'next-intl/server';
 
 import { getBlogPost } from '~/client/queries/get-blog-post';
 import { BcImage } from '~/components/bc-image';
@@ -32,7 +33,8 @@ export async function generateMetadata({ params: { blogId } }: Props): Promise<M
   };
 }
 
-export default async function BlogPostPage({ params: { blogId } }: Props) {
+export default async function BlogPostPage({ params: { blogId, locale } }: Props) {
+  const format = await getFormatter({ locale });
   const blogPost = await getBlogPost(+blogId);
 
   if (!blogPost || !blogPost.isVisibleInNavigation) {
@@ -45,7 +47,7 @@ export default async function BlogPostPage({ params: { blogId } }: Props) {
 
       <div className="mb-8 flex">
         <BlogPostDate className="mb-0">
-          {new Intl.DateTimeFormat('en-US').format(new Date(blogPost.publishedDate.utc))}
+          {format.dateTime(new Date(blogPost.publishedDate.utc))}
         </BlogPostDate>
         {blogPost.author ? <BlogPostAuthor>, by {blogPost.author}</BlogPostAuthor> : null}
       </div>
@@ -67,7 +69,7 @@ export default async function BlogPostPage({ params: { blogId } }: Props) {
           </BlogPostTitle>
           <BlogPostDate variant="inBanner">
             <span className="text-primary">
-              {new Intl.DateTimeFormat('en-US').format(new Date(blogPost.publishedDate.utc))}
+              {format.dateTime(new Date(blogPost.publishedDate.utc))}
             </span>
           </BlogPostDate>
         </BlogPostBanner>
diff --git a/apps/core/app/[locale]/(default)/cart/_components/cart-item.tsx b/apps/core/app/[locale]/(default)/cart/_components/cart-item.tsx
index 549bcc03b..626f58928 100644
--- a/apps/core/app/[locale]/(default)/cart/_components/cart-item.tsx
+++ b/apps/core/app/[locale]/(default)/cart/_components/cart-item.tsx
@@ -1,5 +1,5 @@
 import { NextIntlClientProvider } from 'next-intl';
-import { getMessages } from 'next-intl/server';
+import { getFormatter, getLocale, getMessages } from 'next-intl/server';
 
 import { getCart } from '~/client/queries/get-cart';
 import { ExistingResultType } from '~/client/util';
@@ -15,18 +15,13 @@ export type Product =
 export const CartItem = async ({
   currencyCode,
   product,
-  locale,
 }: {
   currencyCode: string;
   product: Product;
-  locale: string;
 }) => {
+  const locale = await getLocale();
   const messages = await getMessages({ locale });
-
-  const currencyFormatter = new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: currencyCode,
-  });
+  const format = await getFormatter({ locale });
 
   return (
     <li>
@@ -88,7 +83,7 @@ export const CartItem = async ({
                       <div key={selectedOption.entityId}>
                         <span>{selectedOption.name}:</span>{' '}
                         <span className="font-semibold">
-                          {Intl.DateTimeFormat().format(new Date(selectedOption.date.utc))}
+                          {format.dateTime(new Date(selectedOption.date.utc))}
                         </span>
                       </div>
                     );
@@ -106,7 +101,10 @@ export const CartItem = async ({
 
         <div>
           <p className="inline-flex w-24 justify-center text-lg font-bold">
-            {currencyFormatter.format(product.extendedSalePrice.value)}
+            {format.number(product.extendedSalePrice.value, {
+              style: 'currency',
+              currency: currencyCode,
+            })}
           </p>
         </div>
 
diff --git a/apps/core/app/[locale]/(default)/cart/_components/checkout-summary.tsx b/apps/core/app/[locale]/(default)/cart/_components/checkout-summary.tsx
index 2ae43e044..72fbac37b 100644
--- a/apps/core/app/[locale]/(default)/cart/_components/checkout-summary.tsx
+++ b/apps/core/app/[locale]/(default)/cart/_components/checkout-summary.tsx
@@ -1,6 +1,6 @@
 import { AlertCircle } from 'lucide-react';
 import { NextIntlClientProvider } from 'next-intl';
-import { getMessages, getTranslations } from 'next-intl/server';
+import { getFormatter, getLocale, getMessages, getTranslations } from 'next-intl/server';
 import { toast } from 'react-hot-toast';
 
 import { getCheckout } from '~/client/queries/get-checkout';
@@ -10,8 +10,10 @@ import { getShippingCountries } from '../_actions/get-shipping-countries';
 import { CouponCode } from './coupon-code';
 import { ShippingEstimator } from './shipping-estimator';
 
-export const CheckoutSummary = async ({ cartId, locale }: { cartId: string; locale: string }) => {
+export const CheckoutSummary = async ({ cartId }: { cartId: string }) => {
+  const locale = await getLocale();
   const t = await getTranslations({ locale, namespace: 'Cart.CheckoutSummary' });
+  const format = await getFormatter({ locale });
   const messages = await getMessages({ locale });
 
   const [checkout, shippingCountries] = await Promise.all([
@@ -27,16 +29,16 @@ export const CheckoutSummary = async ({ cartId, locale }: { cartId: string; loca
     return null;
   }
 
-  const currencyFormatter = new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: checkout.cart?.currencyCode,
-  });
-
   return (
     <>
       <div className="flex justify-between border-t border-t-gray-200 py-4">
         <span className="font-semibold">{t('subTotal')}</span>
-        <span>{currencyFormatter.format(checkout.subtotal?.value || 0)}</span>
+        <span>
+          {format.number(checkout.subtotal?.value || 0, {
+            style: 'currency',
+            currency: checkout.cart?.currencyCode,
+          })}
+        </span>
       </div>
 
       <NextIntlClientProvider locale={locale} messages={{ Cart: messages.Cart ?? {} }}>
@@ -46,7 +48,13 @@ export const CheckoutSummary = async ({ cartId, locale }: { cartId: string; loca
       {checkout.cart?.discountedAmount && (
         <div className="flex justify-between border-t border-t-gray-200 py-4">
           <span className="font-semibold">{t('discounts')}</span>
-          <span>-{currencyFormatter.format(checkout.cart.discountedAmount.value)}</span>
+          <span>
+            -
+            {format.number(checkout.cart.discountedAmount.value, {
+              style: 'currency',
+              currency: checkout.cart.currencyCode,
+            })}
+          </span>
         </div>
       )}
 
@@ -57,13 +65,23 @@ export const CheckoutSummary = async ({ cartId, locale }: { cartId: string; loca
       {checkout.taxTotal && (
         <div className="flex justify-between border-t border-t-gray-200 py-4">
           <span className="font-semibold">{t('tax')}</span>
-          <span>{currencyFormatter.format(checkout.taxTotal.value)}</span>
+          <span>
+            {format.number(checkout.taxTotal.value, {
+              style: 'currency',
+              currency: checkout.cart?.currencyCode,
+            })}
+          </span>
         </div>
       )}
 
       <div className="flex justify-between border-t border-t-gray-200 py-4 text-xl font-bold lg:text-2xl">
         {t('grandTotal')}
-        <span>{currencyFormatter.format(checkout.grandTotal?.value || 0)}</span>
+        <span>
+          {format.number(checkout.grandTotal?.value || 0, {
+            style: 'currency',
+            currency: checkout.cart?.currencyCode,
+          })}
+        </span>
       </div>
     </>
   );
diff --git a/apps/core/app/[locale]/(default)/cart/_components/coupon-code.tsx b/apps/core/app/[locale]/(default)/cart/_components/coupon-code.tsx
index 7b8e8c1d6..5f71e6b9a 100644
--- a/apps/core/app/[locale]/(default)/cart/_components/coupon-code.tsx
+++ b/apps/core/app/[locale]/(default)/cart/_components/coupon-code.tsx
@@ -4,7 +4,7 @@ import { Button } from '@bigcommerce/components/button';
 import { Field, FieldControl, FieldMessage, Form, FormSubmit } from '@bigcommerce/components/form';
 import { Input } from '@bigcommerce/components/input';
 import { AlertCircle, Loader2 as Spinner } from 'lucide-react';
-import { useTranslations } from 'next-intl';
+import { useFormatter, useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { useFormStatus } from 'react-dom';
 import { toast } from 'react-hot-toast';
@@ -37,16 +37,13 @@ const SubmitButton = () => {
 
 export const CouponCode = ({ checkout }: { checkout: ExistingResultType<typeof getCheckout> }) => {
   const t = useTranslations('Cart.CheckoutSummary');
+  const format = useFormatter();
+
   const [showAddCoupon, setShowAddCoupon] = useState(false);
   const [selectedCoupon, setSelectedCoupon] = useState<Checkout['coupons'][number] | null>(
     checkout.coupons.at(0) || null,
   );
 
-  const currencyFormatter = new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: checkout.cart?.currencyCode,
-  });
-
   useEffect(() => {
     if (checkout.coupons[0]) {
       setSelectedCoupon(checkout.coupons[0]);
@@ -84,7 +81,12 @@ export const CouponCode = ({ checkout }: { checkout: ExistingResultType<typeof g
         <span className="font-semibold">
           {t('coupon')} ({selectedCoupon.code})
         </span>
-        <span>{currencyFormatter.format(selectedCoupon.discountedAmount.value * -1)}</span>
+        <span>
+          {format.number(selectedCoupon.discountedAmount.value * -1, {
+            style: 'currency',
+            currency: checkout.cart?.currencyCode,
+          })}
+        </span>
       </div>
       <form action={onSubmitRemoveCouponCode}>
         <input name="checkoutEntityId" type="hidden" value={checkout.entityId} />
diff --git a/apps/core/app/[locale]/(default)/cart/_components/shipping-estimator.tsx b/apps/core/app/[locale]/(default)/cart/_components/shipping-estimator.tsx
index 1061f18ca..f62ab4523 100644
--- a/apps/core/app/[locale]/(default)/cart/_components/shipping-estimator.tsx
+++ b/apps/core/app/[locale]/(default)/cart/_components/shipping-estimator.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Button } from '@bigcommerce/components/button';
-import { useTranslations } from 'next-intl';
+import { useFormatter, useTranslations } from 'next-intl';
 import { useEffect, useRef, useState } from 'react';
 
 import { getCheckout } from '~/client/queries/get-checkout';
@@ -20,15 +20,11 @@ export const ShippingEstimator = ({
   shippingCountries: ExistingResultType<typeof getShippingCountries>;
 }) => {
   const t = useTranslations('Cart.CheckoutSummary');
+  const format = useFormatter();
 
   const [showShippingInfo, setShowShippingInfo] = useState(false);
   const [showShippingOptions, setShowShippingOptions] = useState(false);
 
-  const currencyFormatter = new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: checkout.cart?.currencyCode,
-  });
-
   const selectedShippingConsignment = checkout.shippingConsignments?.find(
     (shippingConsignment) => shippingConsignment.selectedShippingOption,
   );
@@ -60,7 +56,12 @@ export const ShippingEstimator = ({
         <div className="flex justify-between">
           <span className="font-semibold">{t('shippingCost')}</span>
           {selectedShippingConsignment ? (
-            <span>{currencyFormatter.format(checkout.shippingCostTotal?.value || 0)}</span>
+            <span>
+              {format.number(checkout.shippingCostTotal?.value || 0, {
+                style: 'currency',
+                currency: checkout.cart?.currencyCode,
+              })}
+            </span>
           ) : (
             <Button
               aria-controls="shipping-options"
@@ -113,7 +114,12 @@ export const ShippingEstimator = ({
       {Boolean(checkout.handlingCostTotal?.value) && (
         <div className="flex justify-between border-t border-t-gray-200 py-4">
           <span className="font-semibold">{t('handlingCost')}</span>
-          <span>{currencyFormatter.format(checkout.handlingCostTotal?.value || 0)}</span>
+          <span>
+            {format.number(checkout.handlingCostTotal?.value || 0, {
+              style: 'currency',
+              currency: checkout.cart?.currencyCode,
+            })}
+          </span>
         </div>
       )}
     </>
diff --git a/apps/core/app/[locale]/(default)/cart/_components/shipping-options.tsx b/apps/core/app/[locale]/(default)/cart/_components/shipping-options.tsx
index 836db0029..b9448d175 100644
--- a/apps/core/app/[locale]/(default)/cart/_components/shipping-options.tsx
+++ b/apps/core/app/[locale]/(default)/cart/_components/shipping-options.tsx
@@ -4,7 +4,7 @@ import { Label } from '@bigcommerce/components/label';
 import { Message } from '@bigcommerce/components/message';
 import { RadioGroup, RadioItem } from '@bigcommerce/components/radio-group';
 import { AlertCircle, Loader2 as Spinner } from 'lucide-react';
-import { useTranslations } from 'next-intl';
+import { useFormatter, useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 import { toast } from 'react-hot-toast';
 
@@ -50,6 +50,7 @@ export const ShippingOptions = ({
   availableShippingOptions: AvailableShippingOptions[] | null;
 }) => {
   const t = useTranslations('Cart.ShippingCost');
+  const format = useFormatter();
 
   const shippingOptions = availableShippingOptions?.map(
     ({ cost, description, entityId: shippingOptionEntityId, isRecommended }) => ({
@@ -60,11 +61,6 @@ export const ShippingOptions = ({
     }),
   );
 
-  const currencyFormatter = new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: checkout.cart?.currencyCode,
-  });
-
   const onSubmit = async (formData: FormData) => {
     const { status } = await submitShippingCosts(formData, checkout.entityId, consignmentEntityId);
 
@@ -98,7 +94,12 @@ export const ShippingOptions = ({
                 >
                   <p className="inline-flex w-full justify-between">
                     <span>{option.description}</span>
-                    <span>{currencyFormatter.format(option.cost)}</span>
+                    <span>
+                      {format.number(option.cost, {
+                        style: 'currency',
+                        currency: checkout.cart?.currencyCode,
+                      })}
+                    </span>
                   </p>
                 </Label>
               </div>
diff --git a/apps/core/app/[locale]/(default)/cart/page.tsx b/apps/core/app/[locale]/(default)/cart/page.tsx
index 5350d9d2b..557b1b400 100644
--- a/apps/core/app/[locale]/(default)/cart/page.tsx
+++ b/apps/core/app/[locale]/(default)/cart/page.tsx
@@ -65,26 +65,16 @@ export default async function CartPage({ params: { locale } }: Props) {
       <div className="pb-12 md:grid md:grid-cols-2 md:gap-8 lg:grid-cols-3">
         <ul className="col-span-2">
           {cart.lineItems.physicalItems.map((product) => (
-            <CartItem
-              currencyCode={cart.currencyCode}
-              key={product.entityId}
-              locale={locale}
-              product={product}
-            />
+            <CartItem currencyCode={cart.currencyCode} key={product.entityId} product={product} />
           ))}
 
           {cart.lineItems.digitalItems.map((product) => (
-            <CartItem
-              currencyCode={cart.currencyCode}
-              key={product.entityId}
-              locale={locale}
-              product={product}
-            />
+            <CartItem currencyCode={cart.currencyCode} key={product.entityId} product={product} />
           ))}
         </ul>
 
         <div className="col-span-1 col-start-2 lg:col-start-3">
-          <CheckoutSummary cartId={cartId} locale={locale} />
+          <CheckoutSummary cartId={cartId} />
 
           <Suspense fallback={t('loading')}>
             <CheckoutButton cartId={cartId} label={t('proceedToCheckout')} />
diff --git a/apps/core/app/[locale]/(default)/product/[slug]/_components/details.tsx b/apps/core/app/[locale]/(default)/product/[slug]/_components/details.tsx
index 77cd8bd2d..30e5e74b5 100644
--- a/apps/core/app/[locale]/(default)/product/[slug]/_components/details.tsx
+++ b/apps/core/app/[locale]/(default)/product/[slug]/_components/details.tsx
@@ -1,4 +1,4 @@
-import { useTranslations } from 'next-intl';
+import { useFormatter, useTranslations } from 'next-intl';
 import { Suspense } from 'react';
 
 import { getProduct } from '~/client/queries/get-product';
@@ -11,15 +11,11 @@ type Product = Awaited<ReturnType<typeof getProduct>>;
 
 export const Details = ({ product }: { product: NonNullable<Product> }) => {
   const t = useTranslations('Product.Details');
+  const format = useFormatter();
 
   const showPriceRange =
     product.prices?.priceRange.min.value !== product.prices?.priceRange.max.value;
 
-  const currencyFormatter = new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: product.prices?.price.currencyCode || 'USD',
-  });
-
   return (
     <div>
       {product.brand && (
@@ -36,8 +32,15 @@ export const Details = ({ product }: { product: NonNullable<Product> }) => {
         <div className="my-6 text-2xl font-bold lg:text-3xl">
           {showPriceRange ? (
             <span>
-              {currencyFormatter.format(product.prices.priceRange.min.value)} -{' '}
-              {currencyFormatter.format(product.prices.priceRange.max.value)}
+              {format.number(product.prices.priceRange.min.value, {
+                style: 'currency',
+                currency: product.prices.price.currencyCode,
+              })}{' '}
+              -{' '}
+              {format.number(product.prices.priceRange.max.value, {
+                style: 'currency',
+                currency: product.prices.price.currencyCode,
+              })}
             </span>
           ) : (
             <>
@@ -45,7 +48,10 @@ export const Details = ({ product }: { product: NonNullable<Product> }) => {
                 <span>
                   {t('Prices.msrp')}:{' '}
                   <span className="line-through">
-                    {currencyFormatter.format(product.prices.retailPrice.value)}
+                    {format.number(product.prices.retailPrice.value, {
+                      style: 'currency',
+                      currency: product.prices.price.currencyCode,
+                    })}
                   </span>
                   <br />
                 </span>
@@ -56,17 +62,29 @@ export const Details = ({ product }: { product: NonNullable<Product> }) => {
                   <span>
                     {t('Prices.was')}:{' '}
                     <span className="line-through">
-                      {currencyFormatter.format(product.prices.basePrice.value)}
+                      {format.number(product.prices.basePrice.value, {
+                        style: 'currency',
+                        currency: product.prices.price.currencyCode,
+                      })}
                     </span>
                   </span>
                   <br />
                   <span>
-                    {t('Prices.now')} {currencyFormatter.format(product.prices.salePrice.value)}
+                    {t('Prices.now')}{' '}
+                    {format.number(product.prices.salePrice.value, {
+                      style: 'currency',
+                      currency: product.prices.price.currencyCode,
+                    })}
                   </span>
                 </>
               ) : (
                 product.prices.price.value && (
-                  <span>{currencyFormatter.format(product.prices.price.value)}</span>
+                  <span>
+                    {format.number(product.prices.price.value, {
+                      style: 'currency',
+                      currency: product.prices.price.currencyCode,
+                    })}
+                  </span>
                 )
               )}
             </>
diff --git a/apps/core/app/[locale]/(default)/product/[slug]/_components/product-review-schema.tsx b/apps/core/app/[locale]/(default)/product/[slug]/_components/product-review-schema.tsx
index ed72ca26b..3d541ec31 100644
--- a/apps/core/app/[locale]/(default)/product/[slug]/_components/product-review-schema.tsx
+++ b/apps/core/app/[locale]/(default)/product/[slug]/_components/product-review-schema.tsx
@@ -1,3 +1,4 @@
+import { useFormatter } from 'next-intl';
 import { Product as ProductSchemaType, WithContext } from 'schema-dts';
 
 import { getProductReviews } from '~/client/queries/get-product-reviews';
@@ -10,6 +11,8 @@ export const ProductReviewSchema = ({
   reviews: ExistingResultType<typeof getProductReviews>['reviews'];
   productId: number;
 }) => {
+  const format = useFormatter();
+
   const productReviewSchema: WithContext<ProductSchemaType> = {
     '@context': 'https://schema.org',
     '@type': 'Product',
@@ -17,7 +20,7 @@ export const ProductReviewSchema = ({
     review: reviews.map((review) => {
       return {
         '@type': 'Review' as const,
-        datePublished: new Intl.DateTimeFormat('en-US').format(new Date(review.createdAt.utc)),
+        datePublished: format.dateTime(new Date(review.createdAt.utc)),
         name: review.title,
         reviewBody: review.text,
         author: {
diff --git a/apps/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx b/apps/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx
index e6733d3aa..cce163ea3 100644
--- a/apps/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx
+++ b/apps/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx
@@ -1,5 +1,5 @@
 import { Rating } from '@bigcommerce/components/rating';
-import { getTranslations } from 'next-intl/server';
+import { getFormatter, getTranslations } from 'next-intl/server';
 
 import { getProductReviews } from '~/client/queries/get-product-reviews';
 
@@ -12,6 +12,7 @@ interface Props {
 export const Reviews = async ({ productId }: Props) => {
   const product = await getProductReviews(productId);
   const t = await getTranslations('Product.DescriptionAndReviews');
+  const format = await getFormatter();
   const reviews = product?.reviews;
 
   if (!reviews) {
@@ -44,9 +45,9 @@ export const Reviews = async ({ productId }: Props) => {
                 <h4 className="text-base font-semibold">{review.title}</h4>
                 <p className="mb-2 text-gray-500">
                   {t('reviewAuthor', { author: review.author.name })}{' '}
-                  {new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(
-                    new Date(review.createdAt.utc),
-                  )}
+                  {format.dateTime(new Date(review.createdAt.utc), {
+                    dateStyle: 'medium',
+                  })}
                 </p>
                 <p className="mb-6">{review.text}</p>
               </li>
diff --git a/apps/core/components/blog-post-card/index.tsx b/apps/core/components/blog-post-card/index.tsx
index d5e6a13ab..2a03ac39e 100644
--- a/apps/core/components/blog-post-card/index.tsx
+++ b/apps/core/components/blog-post-card/index.tsx
@@ -7,6 +7,7 @@ import {
   BlogPostTitle,
   BlogPostCard as ComponentsBlogPostCard,
 } from '@bigcommerce/components/blog-post-card';
+import { getFormatter, getLocale } from 'next-intl/server';
 
 import { FragmentOf, graphql } from '~/client/graphql';
 import { Link } from '~/components/link';
@@ -33,40 +34,43 @@ interface Props {
   data: FragmentOf<typeof BlogPostCardFragment>;
 }
 
-export const BlogPostCard = ({ data }: Props) => (
-  <ComponentsBlogPostCard>
-    {data.thumbnailImage ? (
-      <BlogPostImage>
-        <Link className="block w-full" href={`/blog/${data.entityId}`}>
-          <BcImage
-            alt={data.thumbnailImage.altText}
-            className="h-full w-full object-cover object-center"
-            height={300}
-            src={data.thumbnailImage.url}
-            width={300}
-          />
-        </Link>
-      </BlogPostImage>
-    ) : (
-      <BlogPostBanner>
-        <BlogPostTitle variant="inBanner">
-          <span className="line-clamp-3 text-primary">{data.name}</span>
-        </BlogPostTitle>
-        <BlogPostDate variant="inBanner">
-          <span className="text-primary">
-            {new Intl.DateTimeFormat('en-US').format(new Date(data.publishedDate.utc))}
-          </span>
-        </BlogPostDate>
-      </BlogPostBanner>
-    )}
+export const BlogPostCard = async ({ data }: Props) => {
+  const locale = await getLocale();
+  const format = await getFormatter({ locale });
 
-    <BlogPostTitle>
-      <Link href={`/blog/${data.entityId}`}>{data.name}</Link>
-    </BlogPostTitle>
-    <BlogPostContent>{data.plainTextSummary}</BlogPostContent>
-    <BlogPostDate>
-      {new Intl.DateTimeFormat('en-US').format(new Date(data.publishedDate.utc))}
-    </BlogPostDate>
-    {data.author ? <BlogPostAuthor>, by {data.author}</BlogPostAuthor> : null}
-  </ComponentsBlogPostCard>
-);
+  return (
+    <ComponentsBlogPostCard>
+      {data.thumbnailImage ? (
+        <BlogPostImage>
+          <Link className="block w-full" href={`/blog/${data.entityId}`}>
+            <BcImage
+              alt={data.thumbnailImage.altText}
+              className="h-full w-full object-cover object-center"
+              height={300}
+              src={data.thumbnailImage.url}
+              width={300}
+            />
+          </Link>
+        </BlogPostImage>
+      ) : (
+        <BlogPostBanner>
+          <BlogPostTitle variant="inBanner">
+            <span className="line-clamp-3 text-primary">{data.name}</span>
+          </BlogPostTitle>
+          <BlogPostDate variant="inBanner">
+            <span className="text-primary">
+              {format.dateTime(new Date(data.publishedDate.utc))}
+            </span>
+          </BlogPostDate>
+        </BlogPostBanner>
+      )}
+
+      <BlogPostTitle>
+        <Link href={`/blog/${data.entityId}`}>{data.name}</Link>
+      </BlogPostTitle>
+      <BlogPostContent>{data.plainTextSummary}</BlogPostContent>
+      <BlogPostDate>{format.dateTime(new Date(data.publishedDate.utc))}</BlogPostDate>
+      {data.author ? <BlogPostAuthor>, by {data.author}</BlogPostAuthor> : null}
+    </ComponentsBlogPostCard>
+  );
+};
diff --git a/apps/core/components/pricing/index.tsx b/apps/core/components/pricing/index.tsx
index ef410eae1..d6cf08f74 100644
--- a/apps/core/components/pricing/index.tsx
+++ b/apps/core/components/pricing/index.tsx
@@ -1,3 +1,5 @@
+import { getFormatter, getLocale } from 'next-intl/server';
+
 import { graphql, ResultOf } from '~/client/graphql';
 
 export const PricingFragment = graphql(`
@@ -37,26 +39,31 @@ interface Props {
   data: ResultOf<typeof PricingFragment>;
 }
 
-export const Pricing = ({ data }: Props) => {
+export const Pricing = async ({ data }: Props) => {
+  const locale = await getLocale();
+  const format = await getFormatter({ locale });
+
   const { prices } = data;
 
   if (!prices) {
     return null;
   }
 
-  const currencyFormatter = new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: prices.price.currencyCode,
-  });
-
   const showPriceRange = prices.priceRange.min.value !== prices.priceRange.max.value;
 
   return (
     <p className="w-36 shrink-0">
       {showPriceRange ? (
         <>
-          {currencyFormatter.format(prices.priceRange.min.value)} -{' '}
-          {currencyFormatter.format(prices.priceRange.max.value)}
+          {format.number(prices.priceRange.min.value, {
+            style: 'currency',
+            currency: prices.price.currencyCode,
+          })}{' '}
+          -{' '}
+          {format.number(prices.priceRange.max.value, {
+            style: 'currency',
+            currency: prices.price.currencyCode,
+          })}
         </>
       ) : (
         <>
@@ -64,7 +71,10 @@ export const Pricing = ({ data }: Props) => {
             <>
               MSRP:{' '}
               <span className="line-through">
-                {currencyFormatter.format(prices.retailPrice.value)}
+                {format.number(prices.retailPrice.value, {
+                  style: 'currency',
+                  currency: prices.price.currencyCode,
+                })}
               </span>
               <br />
             </>
@@ -73,13 +83,29 @@ export const Pricing = ({ data }: Props) => {
             <>
               Was:{' '}
               <span className="line-through">
-                {currencyFormatter.format(prices.basePrice.value)}
+                {format.number(prices.basePrice.value, {
+                  style: 'currency',
+                  currency: prices.price.currencyCode,
+                })}
               </span>
               <br />
-              <>Now: {currencyFormatter.format(prices.salePrice.value)}</>
+              <>
+                Now:{' '}
+                {format.number(prices.salePrice.value, {
+                  style: 'currency',
+                  currency: prices.price.currencyCode,
+                })}
+              </>
             </>
           ) : (
-            prices.price.value && <>{currencyFormatter.format(prices.price.value)}</>
+            prices.price.value && (
+              <>
+                {format.number(prices.price.value, {
+                  style: 'currency',
+                  currency: prices.price.currencyCode,
+                })}
+              </>
+            )
           )}
         </>
       )}
diff --git a/apps/core/components/product-form/fields/date-field.tsx b/apps/core/components/product-form/fields/date-field.tsx
index a3b528d5a..f1970ae29 100644
--- a/apps/core/components/product-form/fields/date-field.tsx
+++ b/apps/core/components/product-form/fields/date-field.tsx
@@ -1,5 +1,6 @@
 import { DatePicker } from '@bigcommerce/components/date-picker';
 import { Label } from '@bigcommerce/components/label';
+import { useFormatter } from 'next-intl';
 
 import { getProduct } from '~/client/queries/get-product';
 import { ExistingResultType, Unpacked } from '~/client/util';
@@ -33,15 +34,15 @@ const getDisabledDays = (option: DateFieldOption) => {
 };
 
 export const DateField = ({ option }: { option: DateFieldOption }) => {
+  const format = useFormatter();
+
   const disabledDays = getDisabledDays(option);
   const { field, fieldState } = useProductFieldController({
     name: `attribute_${option.entityId}`,
     rules: {
       required: option.isRequired ? 'Please select a date.' : false,
     },
-    defaultValue: option.defaultDate
-      ? Intl.DateTimeFormat().format(new Date(option.defaultDate))
-      : '',
+    defaultValue: option.defaultDate ? format.dateTime(new Date(option.defaultDate)) : '',
   });
   const { error } = fieldState;
 
diff --git a/apps/core/components/product-sheet/product-sheet-content.tsx b/apps/core/components/product-sheet/product-sheet-content.tsx
index a73214de0..df247c0e4 100644
--- a/apps/core/components/product-sheet/product-sheet-content.tsx
+++ b/apps/core/components/product-sheet/product-sheet-content.tsx
@@ -3,7 +3,7 @@
 import { Rating } from '@bigcommerce/components/rating';
 import { Loader2 as Spinner } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
-import { useTranslations } from 'next-intl';
+import { useFormatter, useTranslations } from 'next-intl';
 import { useEffect, useId, useState } from 'react';
 
 import { getProduct } from '~/client/queries/get-product';
@@ -15,6 +15,7 @@ import { BcImage } from '../bc-image';
 export const ProductSheetContent = () => {
   const summaryId = useId();
   const t = useTranslations('Product.ProductSheet');
+  const format = useFormatter();
 
   const searchParams = useSearchParams();
   const productId = searchParams.get('showQuickAdd');
@@ -61,11 +62,6 @@ export const ProductSheetContent = () => {
   }
 
   if (product) {
-    const currencyFormatter = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: product.prices?.price.currencyCode,
-    });
-
     const showPriceRange =
       product.prices?.priceRange.min.value !== product.prices?.priceRange.max.value;
 
@@ -122,8 +118,15 @@ export const ProductSheetContent = () => {
               <div>
                 {showPriceRange ? (
                   <span>
-                    {currencyFormatter.format(product.prices.priceRange.min.value)} -{' '}
-                    {currencyFormatter.format(product.prices.priceRange.max.value)}
+                    {format.number(product.prices.priceRange.min.value, {
+                      style: 'currency',
+                      currency: product.prices.price.currencyCode,
+                    })}{' '}
+                    -{' '}
+                    {format.number(product.prices.priceRange.max.value, {
+                      style: 'currency',
+                      currency: product.prices.price.currencyCode,
+                    })}
                   </span>
                 ) : (
                   <>
@@ -131,7 +134,10 @@ export const ProductSheetContent = () => {
                       <span>
                         {t('msrp')}{' '}
                         <span className="line-through">
-                          {currencyFormatter.format(product.prices.retailPrice.value)}
+                          {format.number(product.prices.retailPrice.value, {
+                            style: 'currency',
+                            currency: product.prices.price.currencyCode,
+                          })}
                         </span>
                         <br />
                       </span>
@@ -142,17 +148,29 @@ export const ProductSheetContent = () => {
                         <span>
                           {t('was')}{' '}
                           <span className="line-through">
-                            {currencyFormatter.format(product.prices.basePrice.value)}
+                            {format.number(product.prices.basePrice.value, {
+                              style: 'currency',
+                              currency: product.prices.price.currencyCode,
+                            })}
                           </span>
                         </span>
                         <br />
                         <span>
-                          {t('now')} {currencyFormatter.format(product.prices.salePrice.value)}
+                          {t('now')}{' '}
+                          {format.number(product.prices.salePrice.value, {
+                            style: 'currency',
+                            currency: product.prices.price.currencyCode,
+                          })}
                         </span>
                       </>
                     ) : (
                       product.prices.price.value && (
-                        <span>{currencyFormatter.format(product.prices.price.value)}</span>
+                        <span>
+                          {format.number(product.prices.price.value, {
+                            style: 'currency',
+                            currency: product.prices.price.currencyCode,
+                          })}
+                        </span>
                       )
                     )}
                   </>