diff --git a/components/auth/AccountModal/index.tsx b/components/auth/AccountModal/index.tsx
index 0dc5db23..2fe38d20 100644
--- a/components/auth/AccountModal/index.tsx
+++ b/components/auth/AccountModal/index.tsx
@@ -1,6 +1,8 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
 import { getCookie, setCookie } from 'cookies-next'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { useTranslation } from 'next-i18next'
 import { useTheme } from 'next-themes'
 
@@ -38,10 +40,9 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
     // Localization
     const { t } = useTranslation('common')
     const router = useRouter()
-    const locale =
-      router.locale && ['en', 'ja'].includes(router.locale)
-        ? router.locale
-        : 'en'
+    // In App Router, locale is handled via cookies
+    const currentLocale = getCookie('NEXT_LOCALE') as string || 'en'
+    const locale = ['en', 'ja'].includes(currentLocale) ? currentLocale : 'en'
 
     // useEffect only runs on the client, so now we can safely show the UI
     const [mounted, setMounted] = useState(false)
@@ -164,7 +165,7 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
             setOpen(false)
             if (props.onOpenChange) props.onOpenChange(false)
             changeLanguage(router, user.language)
-            if (props.bahamutMode != bahamutMode) router.reload()
+            if (props.bahamutMode != bahamutMode) router.refresh()
           })
       }
     }
diff --git a/components/auth/LoginModal/index.tsx b/components/auth/LoginModal/index.tsx
index 21288f3a..aaf8787a 100644
--- a/components/auth/LoginModal/index.tsx
+++ b/components/auth/LoginModal/index.tsx
@@ -1,6 +1,8 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
 import { setCookie } from 'cookies-next'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import axios, { AxiosError, AxiosResponse } from 'axios'
 
diff --git a/components/auth/SignupModal/index.tsx b/components/auth/SignupModal/index.tsx
index 2ee36e1d..c1a10a41 100644
--- a/components/auth/SignupModal/index.tsx
+++ b/components/auth/SignupModal/index.tsx
@@ -1,6 +1,8 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
-import { setCookie } from 'cookies-next'
-import { useRouter } from 'next/router'
+import { setCookie, getCookie } from 'cookies-next'
+import { useRouter } from 'next/navigation'
 import { useTranslation } from 'next-i18next'
 import { AxiosResponse } from 'axios'
 
@@ -70,13 +72,16 @@ const SignupModal = (props: Props) => {
   function register(event: React.FormEvent) {
     event.preventDefault()
 
+    // In App Router, locale is typically handled via cookies or headers
+    const currentLocale = getCookie('NEXT_LOCALE') as string || 'en'
+
     const body = {
       user: {
         username: usernameInput.current?.value,
         email: emailInput.current?.value,
         password: passwordInput.current?.value,
         password_confirmation: passwordConfirmationInput.current?.value,
-        language: router.locale,
+        language: currentLocale,
       },
     }
 
diff --git a/utils/changeLanguage.tsx b/utils/changeLanguage.tsx
index 6420fa80..844049fd 100644
--- a/utils/changeLanguage.tsx
+++ b/utils/changeLanguage.tsx
@@ -1,15 +1,20 @@
+'use client'
+
 import { setCookie } from 'cookies-next'
-import { NextRouter } from 'next/router'
+import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime'
 
 export default function changeLanguage(
-  router: NextRouter,
+  router: AppRouterInstance,
   newLanguage: string
 ) {
-  if (newLanguage !== router.locale) {
-    const expiresAt = new Date()
-    expiresAt.setDate(expiresAt.getDate() + 60)
+  // In App Router, locale handling is different
+  // We set the cookie and refresh the page to apply the new locale
+  const expiresAt = new Date()
+  expiresAt.setDate(expiresAt.getDate() + 60)
 
-    setCookie('NEXT_LOCALE', newLanguage, { path: '/', expires: expiresAt })
-    router.push(router.asPath, undefined, { locale: newLanguage })
-  }
+  setCookie('NEXT_LOCALE', newLanguage, { path: '/', expires: expiresAt })
+  
+  // App Router doesn't have router.locale or locale option in push
+  // The locale is handled via the cookie and middleware
+  router.refresh()
 }