diff --git a/src/theme/BlogPostItem/components/Authors/index.tsx b/src/theme/BlogPostItem/components/Authors/index.tsx
index 272fc3f3bc..560d069217 100644
--- a/src/theme/BlogPostItem/components/Authors/index.tsx
+++ b/src/theme/BlogPostItem/components/Authors/index.tsx
@@ -1,12 +1,19 @@
 import { useBlogPost } from "@docusaurus/plugin-content-blog/client";
+import { useDateTimeFormat } from "@docusaurus/theme-common/internal";
 export default function BlogPostItemHeaderAuthors({
   styles,
 }: {
   styles?: React.CSSProperties;
 }): JSX.Element {
   const {
-    metadata: { authors, formattedDate },
+    metadata: { authors, date },
   } = useBlogPost();
+  const dateTimeFormat = useDateTimeFormat({
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+    timeZone: "UTC",
+  });
   const authorsCount = authors.length;
   if (authorsCount === 0) {
     return null;
@@ -51,7 +58,7 @@ export default function BlogPostItemHeaderAuthors({
           background: "var(--color-border-strong)",
         }}
       />
-      <span>{formattedDate}</span>
+      <span>{dateTimeFormat.format(new Date(date))}</span>
     </div>
   );
 }
diff --git a/src/theme/BlogPostItem/components/Info/index.tsx b/src/theme/BlogPostItem/components/Info/index.tsx
index c186b5f703..e64fbdfd5f 100644
--- a/src/theme/BlogPostItem/components/Info/index.tsx
+++ b/src/theme/BlogPostItem/components/Info/index.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import clsx from "clsx";
 import { translate } from "@docusaurus/Translate";
 import { usePluralForm } from "@docusaurus/theme-common";
+import { useDateTimeFormat } from "@docusaurus/theme-common/internal";
 import { useBlogPost } from "@docusaurus/plugin-content-blog/client";
 import type { Props } from "@theme/BlogPostItem/Header/Info";
 
@@ -30,7 +31,7 @@ function ReadingTime({ readingTime }: { readingTime: number }) {
   return <>{readingTimePlural(readingTime)}</>;
 }
 
-function Date({
+function DateTime({
   date,
   formattedDate,
 }: {
@@ -52,11 +53,21 @@ export default function BlogPostItemHeaderInfo({
   className,
 }: Props): JSX.Element {
   const { metadata } = useBlogPost();
-  const { date, formattedDate, readingTime } = metadata;
+  const { date, readingTime } = metadata;
+
+  const dateTimeFormat = useDateTimeFormat({
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+    timeZone: "UTC",
+  });
+
+  const formatDate = (blogDate: string) =>
+    dateTimeFormat.format(new Date(blogDate));
 
   return (
     <div className={clsx(className)}>
-      <Date date={date} formattedDate={formattedDate} />
+      <DateTime date={date} formattedDate={formatDate(date)} />
       {typeof readingTime !== "undefined" && (
         <>
           <Spacer />