diff --git a/src/components/ReleaseDate.astro b/src/components/ReleaseDate.astro
new file mode 100644
index 0000000..b6fbcb3
--- /dev/null
+++ b/src/components/ReleaseDate.astro
@@ -0,0 +1,9 @@
+---
+interface Props {
+  date: Date
+}
+const { props, currentLocale: locale } = Astro
+const { date } = props
+---
+
+{new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(date)}
diff --git a/src/pages/album/[id].astro b/src/pages/album/[id].astro
index 687f974..4f335b8 100644
--- a/src/pages/album/[id].astro
+++ b/src/pages/album/[id].astro
@@ -9,13 +9,13 @@ import BaseLayout from 'layouts/base.astro'
 import TrackList from 'components/albumPage/TrackList'
 import DownloadBtn from 'components/albumPage/DownloadBtn.astro'
 import AlbumBox from 'components/AlbumBox.astro'
-import releaseDate from 'utils/releaseDate'
 
 import kofi from 'img/socials/ko-fi-donate-button.png'
 import discord from 'img/socials/discord.png'
 import vgmdbLogo from 'img/assets/vgmdb-logo.png'
 import flyIcon from 'img/assets/fly-icon.png'
 import ouoIcon from 'img/assets/ouo-icon.png'
+import ReleaseDate from 'components/ReleaseDate.astro'
 
 const { id } = Astro.params
 const { permissions } = Astro.locals
@@ -131,7 +131,7 @@ const coverImage = await getImage({
                       <tr>
                         <th class='width-row'>{m.releaseDate()}</th>
                         <td>
-                          {releaseDate(album?.releaseDate)}
+                          <ReleaseDate date={album?.releaseDate} />
                         </td>
                       </tr>
                     ) : null
diff --git a/src/pages/anim/[id].astro b/src/pages/anim/[id].astro
index 1182a8c..afa82bf 100644
--- a/src/pages/anim/[id].astro
+++ b/src/pages/anim/[id].astro
@@ -7,7 +7,7 @@ import { Image } from 'astro:assets'
 
 import BaseLayout from 'layouts/base.astro'
 import AlbumBox from 'components/AlbumBox.astro'
-import releaseDate from 'utils/releaseDate'
+import ReleaseDate from 'components/ReleaseDate.astro'
 
 const { id } = Astro.params
 
@@ -87,7 +87,9 @@ const { currentLocale } = Astro
               anim.releaseDate ? (
                 <div class='table-row'>
                   <div class='table-cell text-md font-medium'>{m.releaseDate()}</div>
-                  <div class='table-cell text-md'>{releaseDate(anim.releaseDate)}</div>
+                  <div class='table-cell text-md'>
+                    <ReleaseDate date={anim.releaseDate} />
+                  </div>
                 </div>
               ) : null
             }
diff --git a/src/pages/game/[slug].astro b/src/pages/game/[slug].astro
index ed84e5c..2a1fa69 100644
--- a/src/pages/game/[slug].astro
+++ b/src/pages/game/[slug].astro
@@ -7,7 +7,7 @@ import { SEO } from 'astro-seo'
 import BaseLayout from 'layouts/base.astro'
 
 import AlbumBox from 'components/AlbumBox.astro'
-import releaseDate from 'utils/releaseDate'
+import ReleaseDate from 'components/ReleaseDate.astro'
 
 const { slug } = Astro.params
 if (!slug) return Astro.redirect('/404')
@@ -84,7 +84,9 @@ const coverImage = await getImage({
                 game.releaseDate ? (
                   <tr>
                     <th class='width-row'>{m.releaseDate()}:</th>
-                    <td>{releaseDate(game.releaseDate)}</td>
+                    <td>
+                      <ReleaseDate date={game.releaseDate} />
+                    </td>
                   </tr>
                 ) : null
               }
diff --git a/src/pages/series/[slug].astro b/src/pages/series/[slug].astro
index 0d7b887..7d2b459 100644
--- a/src/pages/series/[slug].astro
+++ b/src/pages/series/[slug].astro
@@ -5,9 +5,8 @@ import { getImage, Image } from 'astro:assets'
 import { SEO } from 'astro-seo'
 
 import BaseLayout from 'layouts/base.astro'
-
 import AlbumBox from 'components/AlbumBox.astro'
-import releaseDate from 'utils/releaseDate'
+import ReleaseDate from 'components/ReleaseDate.astro'
 
 const { slug } = Astro.params
 if (!slug) return Astro.redirect('/404')
@@ -132,7 +131,8 @@ const coverImage = await getImage({
                   <tr>
                     <th class='width-row'>{m.firstRelease()}:</th>
                     <td>
-                      {releaseDate(firstGame.releaseDate)} - <a href={`/game/${firstGame.slug}`}>{firstGame.name}</a>
+                      <ReleaseDate date={firstGame.releaseDate} /> -{' '}
+                      <a href={`/game/${firstGame.slug}`}>{firstGame.name}</a>
                     </td>
                   </tr>
                 ) : null
@@ -142,7 +142,9 @@ const coverImage = await getImage({
                   <tr>
                     <th class='width-row'>{m.newestRelease()}:</th>
                     <td>
-                      {releaseDate(lastGame.releaseDate)} - <a href={`/game/${lastGame.slug}`}>{lastGame.name}</a>
+                      <ReleaseDate date={lastGame.releaseDate} />
+                      <span> - </span>
+                      <a href={`/game/${lastGame.slug}`}>{lastGame.name}</a>
                     </td>
                   </tr>
                 ) : null
diff --git a/src/utils/releaseDate.ts b/src/utils/releaseDate.ts
deleted file mode 100644
index e134eb6..0000000
--- a/src/utils/releaseDate.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-const locale =
-  navigator && navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language
-
-const releaseDate = (date: Date) => new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(date)
-
-export default releaseDate