diff --git a/layer/app/app.config.ts b/layer/app/app.config.ts
index e81b4a401..ebc3e98da 100644
--- a/layer/app/app.config.ts
+++ b/layer/app/app.config.ts
@@ -1,4 +1,5 @@
 export default defineAppConfig({
+  locale: 'en',
   ui: {
     colors: {
       primary: 'emerald',
diff --git a/layer/app/app.vue b/layer/app/app.vue
index a1003cc2d..251b2fe91 100644
--- a/layer/app/app.vue
+++ b/layer/app/app.vue
@@ -6,8 +6,10 @@ const { seo } = useAppConfig()
 const site = useSiteConfig()
 const { locale, locales, isEnabled, switchLocalePath } = useDocusI18n()
 
-const lang = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.code || 'en')
-const dir = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.dir || 'ltr')
+const matchedUiLocale = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales])
+const uiLocale = computed(() => matchedUiLocale.value || nuxtUiLocales.en)
+const lang = computed(() => matchedUiLocale.value.code || 'en')
+const dir = computed(() => matchedUiLocale.value?.dir || 'ltr')
 const collectionName = computed(() => isEnabled.value ? `docs_${locale.value}` : 'docs')
 
 useHead({
@@ -58,7 +60,7 @@ provide('navigation', navigation)
 </script>
 
 <template>
-  <UApp :locale="nuxtUiLocales[locale as keyof typeof nuxtUiLocales]">
+  <UApp :locale="uiLocale">
     <NuxtLoadingIndicator color="var(--ui-primary)" />
 
     <AppHeader v-if="$route.meta.header !== false" />
diff --git a/layer/app/components/LanguageSelect.vue b/layer/app/components/LanguageSelect.vue
index 9f08ea05c..9f1952a62 100644
--- a/layer/app/components/LanguageSelect.vue
+++ b/layer/app/components/LanguageSelect.vue
@@ -28,6 +28,7 @@ function getEmojiFlag(locale: string): string {
     uk: 'ua', // Ukrainian -> Ukraine
     ur: 'pk', // Urdu -> Pakistan
     vi: 'vn', // Vietnamese -> Vietnam
+    es: 'es', // Spanish -> Spain
   }
 
   const baseLanguage = locale.split('-')[0]?.toLowerCase() || locale
diff --git a/layer/app/composables/useDocusI18n.ts b/layer/app/composables/useDocusI18n.ts
index 28feec563..15d838f26 100644
--- a/layer/app/composables/useDocusI18n.ts
+++ b/layer/app/composables/useDocusI18n.ts
@@ -1,20 +1,46 @@
 import type { LocaleObject } from '@nuxtjs/i18n'
 import en from '../../i18n/locales/en.json'
 
+type LocaleMessages = typeof en
+
+const localeFiles = import.meta.glob('../../i18n/locales/*.json', {
+  import: 'default',
+  eager: true,
+}) as Record<string, LocaleMessages>
+
+const localeMessages = Object.entries(localeFiles).reduce<Record<string, LocaleMessages>>((acc, [path, messages]) => {
+  const localeCode = path.split('/').pop()?.replace('.json', '')
+  if (localeCode) {
+    acc[localeCode] = messages
+  }
+  return acc
+}, {})
+
 export const useDocusI18n = () => {
   const config = useRuntimeConfig().public
+  const appConfig = useAppConfig()
   const isEnabled = ref(!!config.i18n)
 
   if (!isEnabled.value) {
+    const configuredLocale = appConfig.locale
+    const messages = localeMessages[configuredLocale]
+
+    if (!messages && configuredLocale !== 'en') {
+      console.warn(`[Docus] Missing locale file for "${configuredLocale}". Falling back to "en".`)
+    }
+
+    const locale = messages ? configuredLocale : 'en'
+    const resolvedMessages = messages || en
+
     return {
       isEnabled,
-      locale: ref('en'),
+      locale: ref(locale),
       locales: [],
       localePath: (path: string) => path,
       switchLocalePath: () => {},
       t: (key: string): string => {
         const path = key.split('.')
-        return path.reduce((acc: unknown, curr) => (acc as Record<string, unknown>)?.[curr], en) as string
+        return path.reduce((acc: unknown, curr) => (acc as Record<string, unknown>)?.[curr], resolvedMessages) as string
       },
     }
   }
diff --git a/layer/app/error.vue b/layer/app/error.vue
index 1ad556376..3c9faa23b 100644
--- a/layer/app/error.vue
+++ b/layer/app/error.vue
@@ -9,6 +9,9 @@ const props = defineProps<{
 
 const { locale, locales, isEnabled, t, switchLocalePath } = useDocusI18n()
 
+const matchedUiLocale = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales])
+const uiLocale = computed(() => matchedUiLocale.value || nuxtUiLocales.en)
+
 const lang = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.code || 'en')
 const dir = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales]?.dir || 'ltr')
 useHead({
@@ -22,6 +25,7 @@ const localizedError = computed(() => {
   return {
     ...props.error,
     statusMessage: t('common.error.title'),
+    message: t('common.error.description'),
   }
 })
 
@@ -59,7 +63,7 @@ provide('navigation', navigation)
 </script>
 
 <template>
-  <UApp>
+  <UApp :locale="uiLocale">
     <AppHeader />
 
     <UError :error="localizedError" />
diff --git a/layer/app/types/index.d.ts b/layer/app/types/index.d.ts
index fb5a005b7..6ccc6725d 100644
--- a/layer/app/types/index.d.ts
+++ b/layer/app/types/index.d.ts
@@ -1,5 +1,6 @@
 declare module 'nuxt/schema' {
   interface AppConfig {
+    locale: string
     seo: {
       titleTemplate: string
       title: string
diff --git a/layer/i18n/locales/es.json b/layer/i18n/locales/es.json
new file mode 100644
index 000000000..74cc279a8
--- /dev/null
+++ b/layer/i18n/locales/es.json
@@ -0,0 +1,22 @@
+{
+  "common": {
+    "or": "o",
+    "error": {
+      "title": "Página no encontrada",
+      "description": "Lo sentimos, no se pudo encontrar esta página."
+    }
+  },
+  "docs": {
+    "copy": {
+      "page": "Copiar página",
+      "link": "Copiar página en Markdown",
+      "view": "Ver como Markdown",
+      "gpt": "Abrir en ChatGPT",
+      "claude": "Abrir en Claude"
+    },
+    "links": "Comunidad",
+    "toc": "En esta página",
+    "report": "Reportar un problema",
+    "edit": "Editar esta página"
+  }
+}
diff --git a/layer/nuxt.schema.ts b/layer/nuxt.schema.ts
index 209e8784e..2d9a920c6 100644
--- a/layer/nuxt.schema.ts
+++ b/layer/nuxt.schema.ts
@@ -2,6 +2,13 @@ import { field, group } from '@nuxt/content/preview'
 
 export default defineNuxtSchema({
   appConfig: {
+    locale: field({
+      type: 'string',
+      title: 'Locale',
+      description: 'Locale to use when @nuxtjs/i18n is not being used.',
+      icon: 'i-lucide-languages',
+      default: 'en',
+    }),
     ui: group({
       title: 'UI',
       description: 'UI Customization.',