diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index de2a48d68..bfbe981c6 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -71,10 +71,10 @@ const noto = Noto_Serif_JP({
   variable: '--font-noto'
 });
 
-export const SupportedLocales: SupportedLocale[] = ['ja', 'en'];
+const locales = ['en', 'ja'] as const;
 
 export function generateStaticParams() {
-  return SupportedLocales.map((locale) => ({ locale }));
+  return locales.map((locale) => ({ locale }));
 }
 
 export default async function RootLayout({
@@ -85,7 +85,7 @@ export default async function RootLayout({
   params: { locale?: SupportedLocale };
 }) {
   // Validate that the incoming `locale` parameter is valid
-  const isValidLocale = SupportedLocales.some((cur: string) => cur === params?.locale);
+  const isValidLocale = locales.some((cur: string) => cur === params?.locale);
   if (!isValidLocale) notFound();
 
   if (params?.locale) {
diff --git a/components/layout/navbar/language-control.tsx b/components/layout/navbar/language-control.tsx
index 0fadc34ce..374c1d046 100644
--- a/components/layout/navbar/language-control.tsx
+++ b/components/layout/navbar/language-control.tsx
@@ -1,11 +1,12 @@
 'use client';
 
 import clsx from 'clsx';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { createSharedPathnamesNavigation } from 'next-intl/navigation';
 
 export type SupportedLocale = 'en' | 'ja';
 
+const locales = ['en', 'ja'] as const;
+
 function removeItem<T>(arr: Array<T>, value: T): Array<T> {
   const index = arr.indexOf(value);
   if (index > -1) {
@@ -15,6 +16,7 @@ function removeItem<T>(arr: Array<T>, value: T): Array<T> {
 }
 
 export const LanguageControl = ({ lang }: { lang?: SupportedLocale }) => {
+  const { Link, usePathname } = createSharedPathnamesNavigation({ locales });
   const pathName = usePathname();
 
   const basePathName = () => {