diff --git a/astro.config.mjs b/astro.config.mjs
index 9fbc5f0..83ad662 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -16,6 +16,7 @@ export default defineConfig({
     starlight({
       title: 'Xahau Docs',
       description: 'Documentation for the Xahau blockchain',
+      defaultLocale: 'root',
       locales: {
         root: { label: 'English', lang: 'en' },
         es: { label: 'Español', lang: 'es' },
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 479381d..f34550c 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,11 +1,9 @@
 ---
   import { Image } from 'astro:assets'
+  import { getRelativeLocaleUrl } from 'astro:i18n'
   import logo from '../assets/xahau-logo.svg'
 
-  const LOCALES = ['es', 'ja']
-  const firstSegment = Astro.url.pathname.split('/')[1]
-  const locale = LOCALES.includes(firstSegment) ? firstSegment : 'en'
-  const p = locale !== 'en' ? `/${locale}` : ''
+  const locale = Astro.currentLocale ?? 'en'
 
   const translations = {
     en: {
@@ -78,7 +76,7 @@
     class="flex-none container mx-auto py-12 max-w-7xl p-6 grid grid-cols-1 md:grid-cols-10 gap-4"
   >
     <div class="col-span-1 md:col-span-3 flex flex-col gap-3">
-      <a href={p || '/'}>
+      <a href={getRelativeLocaleUrl(locale, '/')}>
         <Image src={logo} class="w-1/2" alt="Xahau"/>
       </a>
       <p>
@@ -92,37 +90,53 @@
       <p>
         <strong>Xahau</strong>
       </p>
-      <a href={`${p}/about`}>{t.about}</a>
-      <a href={`${p}/features`}>{t.features}</a>
-      <a href={`${p}/ecosystem`}>{t.ecosystem}</a>
-      <a href={`${p}/roadmap`}>{t.roadmap}</a>
-      <a href={`${p}/docs/compliance/responsible-disclosure`}>{t.break}</a>
+      <a href={getRelativeLocaleUrl(locale, '/about')}>{t.about}</a>
+      <a href={getRelativeLocaleUrl(locale, '/features')}>{t.features}</a>
+      <a href={getRelativeLocaleUrl(locale, '/ecosystem')}>{t.ecosystem}</a>
+      <a href={getRelativeLocaleUrl(locale, '/roadmap')}>{t.roadmap}</a>
+      <a
+        href={getRelativeLocaleUrl(locale, '/docs/compliance/responsible-disclosure')}
+      >
+        {t.break}
+      </a>
       <a href="/fraud-report">{t.fraud}</a>
-      <a href={`${p}/docs/resources/media-kit`}>{t.media}</a>
+      <a href={getRelativeLocaleUrl(locale, '/docs/resources/media-kit')}>
+        {t.media}
+      </a>
       <a href="/privacy-policy">{t.privacy}</a>
     </div>
     <div class="col-span-1 md:col-span-2 flex flex-col gap-3">
       <p>
         <strong>{t.docs}</strong>
       </p>
-      <a href={`${p}/docs`}>{t.getstarted}</a>
-      <a href={`${p}/docs/protocol-reference/transactions`}>{t.protocol}</a>
-      <a href={`${p}/docs/hooks`}>Hooks</a>
-      <a href={`${p}/docs/data-apis`}>Data APIs</a>
-      <a href={`${p}/docs/infrastructure/system-requirements`}>{t.infra}</a>
-      <a href={`${p}/docs/resources/whitepaper`}>Whitepaper</a>
+      <a href={getRelativeLocaleUrl(locale, '/docs')}>{t.getstarted}</a>
+      <a
+        href={getRelativeLocaleUrl(locale, '/docs/protocol-reference/transactions')}
+      >
+        {t.protocol}
+      </a>
+      <a href={getRelativeLocaleUrl(locale, '/docs/hooks')}>Hooks</a>
+      <a href={getRelativeLocaleUrl(locale, '/docs/data-apis')}>Data APIs</a>
+      <a
+        href={getRelativeLocaleUrl(locale, '/docs/infrastructure/system-requirements')}
+      >
+        {t.infra}
+      </a>
+      <a href={getRelativeLocaleUrl(locale, '/docs/resources/whitepaper')}>
+        Whitepaper
+      </a>
     </div>
     <div class="col-span-1 md:col-span-2 flex flex-col gap-3">
       <p>
         <strong>{t.connect}</strong>
       </p>
-      <a href={`${p}/connect`}>{t.events}</a>
-      <a href={`${p}/contest`}>Dev Contest</a>
+      <a href={getRelativeLocaleUrl(locale, '/connect')}>{t.events}</a>
+      <a href={getRelativeLocaleUrl(locale, '/contest')}>Dev Contest</a>
       <a href="https://x.com/XahauNetwork" target="_blank">X</a>
       <a href="https://github.com/Xahau" target="_blank">GitHub</a>
-      <a href="https://discord.com/invite/UzU58haAn4" target="_blank"
-        >{t.discord}</a
-      >
+      <a href="https://discord.com/invite/UzU58haAn4" target="_blank">
+        {t.discord}
+      </a>
     </div>
   </div>
 </footer>
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index c8aed53..ce73576 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -21,7 +21,6 @@ import { useState } from 'react'
 
 import logo from '../assets/xahau-logo.svg'
 
-const LOCALES = ['es', 'ja']
 
 const languages = [
   { code: 'en', label: 'English', flag: '🇬🇧' },
@@ -85,8 +84,7 @@ export default function Header(props) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   const pathname = props.url.pathname
-  const firstSegment = pathname.split('/')[1]
-  const currentLocale = LOCALES.includes(firstSegment) ? firstSegment : 'en'
+  const currentLocale = props.locale || 'en'
   const p = currentLocale !== 'en' ? `/${currentLocale}` : ''
   const t = nav[currentLocale]
 
@@ -132,7 +130,7 @@ export default function Header(props) {
   ]
 
   const pathSegments = pathname.slice(1).split('/')
-  const activeSegment = LOCALES.includes(pathSegments[0])
+  const activeSegment = currentLocale !== 'en'
     ? pathSegments[1]
     : pathSegments[0]
 
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index a5a256f..51cdbfc 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -3,8 +3,7 @@
   import Footer from '../components/Footer.astro'
   import Header from '../components/Header.jsx'
 
-  const _firstSeg = Astro.url.pathname.split('/')[1]
-  const _lang = ['es', 'ja'].includes(_firstSeg) ? _firstSeg : 'en'
+  const _lang = Astro.currentLocale ?? 'en'
   const _canonicalURL = new URL(Astro.url.pathname, Astro.site)
   const _socialImageURL = new URL('/xahau-logo.png', Astro.site)
   const _title = Astro.props.frontmatter?.title
@@ -41,7 +40,7 @@
     <meta name="twitter:image" content={_socialImageURL}>
   </head>
   <body class="font-[Onest] bg-xahau-background min-h-screen flex flex-col">
-    <Header client:load url={Astro.url}/>
+    <Header client:load url={Astro.url} locale={_lang}/>
     <slot/>
     <Footer/>
     <CookieConsent/>
diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
index 1f8cd0f..7fabb8f 100644
--- a/src/layouts/DocsLayout.astro
+++ b/src/layouts/DocsLayout.astro
@@ -12,7 +12,7 @@
   rel="stylesheet"
 >
 <div class="font-[Onest] bg-xahau-background min-h-screen flex flex-col">
-  <Header client:load url={Astro.url}/>
+  <Header client:load url={Astro.url} locale={Astro.currentLocale ?? 'en'}/>
   <div class="page-content flex-1 container mx-auto p-6">
     <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
       <div>
diff --git a/src/layouts/IndexLayout.astro b/src/layouts/IndexLayout.astro
index b78a072..ffc8d24 100644
--- a/src/layouts/IndexLayout.astro
+++ b/src/layouts/IndexLayout.astro
@@ -1,5 +1,6 @@
 ---
   import '../styles/main.css'
+  import { getRelativeLocaleUrl } from 'astro:i18n'
   import worldmap from '../assets/worldmap.svg'
   import type { IndexLocale } from '../i18n/indexTranslations'
   import { indexTranslations } from '../i18n/indexTranslations'
@@ -7,12 +8,7 @@
 
   const _frontmatter = Astro.props.frontmatter
 
-  const LOCALES = ['es', 'ja']
-  const firstSegment = Astro.url.pathname.split('/')[1]
-  const locale = (
-    LOCALES.includes(firstSegment) ? firstSegment : 'en'
-  ) as IndexLocale
-  const p = locale !== 'en' ? `/${locale}` : ''
+  const locale = (Astro.currentLocale ?? 'en') as IndexLocale
   const i = indexTranslations[locale]
 ---
 <BaseLayout frontmatter={_frontmatter}>
@@ -42,13 +38,13 @@
         </p>
         <div class="flex gap-4">
           <a
-            href={`${p}/about`}
+            href={getRelativeLocaleUrl(locale, '/about')}
             class="px-10 h-12 flex items-center justify-center bg-xahau-green text-black text-base font-bold hover:bg-black hover:text-white transition"
           >
             {i.hero_learn}
           </a>
           <a
-            href={`${p}/docs`}
+            href={getRelativeLocaleUrl(locale, '/docs')}
             class="px-10 h-12 flex items-center justify-center bg-gray-300 text-black text-base font-bold hover:bg-black hover:text-white transition"
           >
             {i.hero_docs}
@@ -97,10 +93,11 @@
           <p class="text-base font-light text-black">{i.feat5_desc}</p>
         </div>
         <a
-          href={`${p}/features`}
+          href={getRelativeLocaleUrl(locale, '/features')}
           class="self-end px-10 h-12 flex items-center justify-center bg-xahau-green text-black text-base font-bold hover:bg-black hover:text-white transition"
-          >{i.feat_more}</a
         >
+          {i.feat_more}
+        </a>
       </div>
     </div>
   </div>
@@ -144,7 +141,7 @@
           <h4 class="text-4xl md:text-6xl font-extrabold">16M+</h4>
         </div>
         <a
-          href={`${p}/docs/infrastructure/system-requirements/`}
+          href={getRelativeLocaleUrl(locale, '/docs/infrastructure/system-requirements/')}
           class="col-span-6 row-start-auto md:row-start-2 px-10 h-12 flex items-center justify-center bg-xahau-green text-black text-base font-bold hover:bg-black hover:text-white transition"
           >{i.stats_node_cta}</a
         >