diff --git a/web-next/app/[locale]/novawow-realm/page.tsx b/web-next/app/[locale]/[realm]/page.tsx
similarity index 63%
rename from web-next/app/[locale]/novawow-realm/page.tsx
rename to web-next/app/[locale]/[realm]/page.tsx
index b354916..302bd34 100644
--- a/web-next/app/[locale]/novawow-realm/page.tsx
+++ b/web-next/app/[locale]/[realm]/page.tsx
@@ -1,25 +1,43 @@
 import type { Metadata } from 'next'
 import { setRequestLocale } from 'next-intl/server'
-import { getRealmName } from '@/lib/realm'
+import { notFound } from 'next/navigation'
+import { getRealmName, realmSlug } from '@/lib/realm'
 
 export const dynamic = 'force-dynamic'
 
-export async function generateMetadata(): Promise<Metadata> {
-  const realm = await getRealmName()
-  return { title: `Reino - ${realm}` }
+// Ruta dinámica del reino: /<slug>-realm, donde <slug> viene del nombre del
+// reino en acore_auth.realmlist (p. ej. «Trinity» → /trinity-realm).
+async function resolveRealm(param: string): Promise<string | null> {
+  const name = await getRealmName()
+  return param === `${realmSlug(name)}-realm` ? name : null
 }
 
-export default async function NovawowRealmPage({ params }: { params: Promise<{ locale: string }> }) {
-  const { locale } = await params
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ realm: string }>
+}): Promise<Metadata> {
+  const { realm } = await params
+  const name = await resolveRealm(realm)
+  return name ? { title: `Reino - ${name}` } : {}
+}
+
+export default async function RealmPage({
+  params,
+}: {
+  params: Promise<{ locale: string; realm: string }>
+}) {
+  const { locale, realm } = await params
   setRequestLocale(locale)
-  const realm = await getRealmName()
+  const name = await resolveRealm(realm)
+  if (!name) notFound()
 
   return (
     <div className="main-page">
       <div className="middle-content">
         <div className="body-content">
           <div className="title-content">
-            <h1>Reino - <span className="blue-info">{realm.toUpperCase()}</span></h1>
+            <h1>Reino - <span className="blue-info">{name.toUpperCase()}</span></h1>
           </div>
           <div className="box-content centered">
             <div className="realm-information realm-information-half">
diff --git a/web-next/lib/realm.ts b/web-next/lib/realm.ts
index 7b5414f..7393b0b 100644
--- a/web-next/lib/realm.ts
+++ b/web-next/lib/realm.ts
@@ -12,3 +12,8 @@ export async function getRealmName(): Promise<string> {
     return 'NovaWoW'
   }
 }
+
+/** Slug del reino para la URL (p. ej. «Nova WoW» → «novawow», «Trinity» → «trinity»). */
+export function realmSlug(name: string): string {
+  return name.toLowerCase().replace(/[^a-z0-9]/g, '')
+}