diff --git a/src/app/(home)/major-league-balatro/_components/next-match-info-card.tsx b/src/app/(home)/major-league-balatro/_components/next-match-info-card.tsx
index c40344a..eb8779b 100644
--- a/src/app/(home)/major-league-balatro/_components/next-match-info-card.tsx
+++ b/src/app/(home)/major-league-balatro/_components/next-match-info-card.tsx
@@ -1,3 +1,4 @@
+import { TimeZoneProvider } from '@/components/timezone-provider'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
@@ -24,67 +25,69 @@ export function NextMatchInfoCard({
   bestOf,
 }: NextMatchInfoCardProps) {
   return (
-    <div className='mt-10 overflow-hidden rounded-xl border bg-card/60 shadow-lg backdrop-blur-sm'>
-      <div className='flex items-center justify-between gap-4 px-6 py-4'>
-        <div className={'flex flex-col gap-1'}>
-          <div className='text-center text-muted-foreground text-sm'>
-            {typeof week === 'string' ? week : `Week ${week}`}
+    <TimeZoneProvider>
+      <div className='mt-10 overflow-hidden rounded-xl border bg-card/60 shadow-lg backdrop-blur-sm'>
+        <div className='flex items-center justify-between gap-4 px-6 py-4'>
+          <div className={'flex flex-col gap-1'}>
+            <div className='text-center text-muted-foreground text-sm'>
+              {typeof week === 'string' ? week : `Week ${week}`}
+            </div>
+            <div className={'font-bold text-muted-foreground text-sm'}>
+              Best of {bestOf}
+            </div>
           </div>
-          <div className={'font-bold text-muted-foreground text-sm'}>
-            Best of {bestOf}
-          </div>
-        </div>
 
-        <div>
-          <h3 className='flex items-center gap-2 font-bold text-xl md:text-2xl'>
-            <div className={'flex items-center gap-2'}>
-              <PlayerAvatar
-                className={'size-16'}
-                playerName={player1.name}
-                img={player1.picture}
-              />
-              {player1.name}
-            </div>
-            <span className='text-red-500'>vs</span>
-            <div className={'flex items-center gap-2'}>
-              {player2.name}
-              <PlayerAvatar
-                className={'size-16'}
-                playerName={player2.name}
-                img={player2.picture}
-              />
-            </div>
-          </h3>
-        </div>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button className='w-full gap-2 bg-red-600 text-white hover:bg-red-700 md:w-auto'>
-              <SiTwitch className='h-4 w-4' />
-              Watch Live
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem asChild>
-              <Link
-                href={`https://twitch.tv/${player1.socials.twitch}`}
-                target='_blank'
-                rel='noopener noreferrer'
-              >
+          <div>
+            <h3 className='flex items-center gap-2 font-bold text-xl md:text-2xl'>
+              <div className={'flex items-center gap-2'}>
+                <PlayerAvatar
+                  className={'size-16'}
+                  playerName={player1.name}
+                  img={player1.picture}
+                />
                 {player1.name}
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem asChild>
-              <Link
-                href={`https://twitch.tv/${player2.socials.twitch}`}
-                target='_blank'
-                rel='noopener noreferrer'
-              >
+              </div>
+              <span className='text-red-500'>vs</span>
+              <div className={'flex items-center gap-2'}>
                 {player2.name}
-              </Link>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+                <PlayerAvatar
+                  className={'size-16'}
+                  playerName={player2.name}
+                  img={player2.picture}
+                />
+              </div>
+            </h3>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button className='w-full gap-2 bg-red-600 text-white hover:bg-red-700 md:w-auto'>
+                <SiTwitch className='h-4 w-4' />
+                Watch Live
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem asChild>
+                <Link
+                  href={`https://twitch.tv/${player1.socials.twitch}`}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                >
+                  {player1.name}
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild>
+                <Link
+                  href={`https://twitch.tv/${player2.socials.twitch}`}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                >
+                  {player2.name}
+                </Link>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
       </div>
-    </div>
+    </TimeZoneProvider>
   )
 }
diff --git a/src/components/timezone-provider.tsx b/src/components/timezone-provider.tsx
new file mode 100644
index 0000000..0fcc3de
--- /dev/null
+++ b/src/components/timezone-provider.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { NextIntlClientProvider, useLocale } from 'next-intl'
+import { useEffect, useState } from 'react'
+
+export function TimeZoneProvider({ children }: { children: React.ReactNode }) {
+  const [timeZone, setTimeZone] = useState<string>()
+  const locale = useLocale()
+  useEffect(() => {
+    setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
+  }, [])
+
+  return (
+    <NextIntlClientProvider timeZone={timeZone} locale={locale}>
+      {children}
+    </NextIntlClientProvider>
+  )
+}