diff --git a/frontend/src/components/GuildRenameForm.tsx b/frontend/src/components/GuildRenameForm.tsx
new file mode 100644
index 0000000..a5206e8
--- /dev/null
+++ b/frontend/src/components/GuildRenameForm.tsx
@@ -0,0 +1,114 @@
+import { useState } from 'react'
+import { redirectToStripeCheckout } from '../stripe'
+
+interface Props {
+  url: string
+  csrfToken: string
+  guilds: string[]
+}
+
+export function GuildRenameForm({ url, csrfToken, guilds }: Props) {
+  const [oldName, setOldName] = useState('')
+  const [newName, setNewName] = useState('')
+  const [confName, setConfName] = useState('')
+  const [password, setPassword] = useState('')
+  const [token, setToken] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [message, setMessage] = useState<{ ok: boolean; html: string } | null>(null)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (busy) return
+    setBusy(true)
+    setMessage(null)
+
+    const body = new URLSearchParams()
+    body.set('old-guild-name', oldName)
+    body.set('new-guild-name', newName.trim())
+    body.set('conf-new-guild-name', confName.trim())
+    body.set('cur-password', password.trim())
+    body.set('security-token', token.trim())
+    body.set('csrfmiddlewaretoken', csrfToken)
+
+    try {
+      const resp = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          'X-CSRFToken': csrfToken,
+          Accept: 'application/json',
+        },
+        credentials: 'same-origin',
+        body: body.toString(),
+      })
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+      const data: { success?: boolean; message?: string; session_id?: string; stripe_public_key?: string } =
+        await resp.json()
+      if (data.success && data.session_id && data.stripe_public_key) {
+        await redirectToStripeCheckout(data.stripe_public_key, data.session_id)
+        return
+      }
+      setMessage({ ok: !!data.success, html: data.message || '' })
+      setBusy(false)
+    } catch {
+      setMessage({ ok: false, html: '<span class="red-form-response">Error al iniciar el pago. Inténtalo más tarde.</span>' })
+      setBusy(false)
+    }
+  }
+
+  return (
+    <>
+      <form id="nw-rename-guild-form" onSubmit={handleSubmit} acceptCharset="utf-8">
+        <table className="middle-center-table">
+          <tbody>
+            <tr>
+              <td>
+                <select name="old-guild-name" value={oldName} onChange={(e) => setOldName(e.target.value)} required>
+                  <option value="">Selecciona tu hermandad</option>
+                  {guilds.map((g) => (
+                    <option value={g} key={g}>{g}</option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <input type="text" maxLength={24} name="new-guild-name" placeholder="Nuevo nombre de hermandad"
+                  value={newName} onChange={(e) => setNewName(e.target.value)} required />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <input type="text" maxLength={24} name="conf-new-guild-name" placeholder="Confirmar nuevo nombre"
+                  value={confName} onChange={(e) => setConfName(e.target.value)} required />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <input type="password" name="cur-password" placeholder="Contraseña actual"
+                  value={password} onChange={(e) => setPassword(e.target.value)} required />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <input type="text" name="security-token" placeholder="Token de seguridad"
+                  value={token} onChange={(e) => setToken(e.target.value)} required />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <button type="submit" className="rename-guild-button" disabled={busy}>
+                  {busy ? 'Procesando…' : 'Proceder al Pago'}
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </form>
+      <hr />
+      <div className="alert-message" id="rename-guild-response" style={{ display: message ? 'block' : 'none' }}>
+        {message && <span dangerouslySetInnerHTML={{ __html: message.html }} />}
+      </div>
+    </>
+  )
+}
diff --git a/frontend/src/entries/rename_guild.tsx b/frontend/src/entries/rename_guild.tsx
new file mode 100644
index 0000000..8ad5550
--- /dev/null
+++ b/frontend/src/entries/rename_guild.tsx
@@ -0,0 +1,14 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { GuildRenameForm } from '../components/GuildRenameForm'
+
+const el = document.getElementById('rename-guild-app')
+if (el) {
+  const dEl = document.getElementById('rename-guild-data')
+  const guilds: string[] = dEl ? JSON.parse(dEl.textContent || '[]') : []
+  createRoot(el).render(
+    <StrictMode>
+      <GuildRenameForm url={el.dataset.url || ''} csrfToken={el.dataset.csrf || ''} guilds={guilds} />
+    </StrictMode>,
+  )
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 5ba45c9..8b11f59 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -27,6 +27,7 @@ export default defineConfig({
         character_purchase: resolve(__dirname, 'src/entries/character_purchase.tsx'),
         gold_character: resolve(__dirname, 'src/entries/gold_character.tsx'),
         transfer_character: resolve(__dirname, 'src/entries/transfer_character.tsx'),
+        rename_guild: resolve(__dirname, 'src/entries/rename_guild.tsx'),
       },
     },
   },
diff --git a/home/templates/partials/rename_guild.html b/home/templates/partials/rename_guild.html
index cc296dd..46a513f 100644
--- a/home/templates/partials/rename_guild.html
+++ b/home/templates/partials/rename_guild.html
@@ -10,7 +10,6 @@
                     <a class="back-to-account-responsive" href="{% url 'my-account' %}">Regresar</a>
                 </div>
                 <div class="body-box-content justified">
-                    <script src="{{ URL_PRINCIPAL }}/static/nw-themes/nw-ryu/nw-js-handlers/rename_guild_response.js"></script>
                     <br>
                     <p>La herramienta <span>Renombrar hermandad</span> te permite cambiar de nombre a una hermandad de la cual seas Maestro de Hermandad.</p>
                     <br>
@@ -32,41 +31,13 @@
                         {% if no_guild_leader_message %}
                             <span class="red-form-response">{{ no_guild_leader_message }}</span>
                         {% else %}
-                            <form id="nw-rename-guild-form" method="POST" action="{% url 'rename-guild' %}" accept-charset="utf-8">
-                                {% csrf_token %}
-                                <table class="middle-center-table">
-                                    <tr>
-                                        <td>
-                                            <select name="old-guild-name" id="old-guild-name">
-                                                <option value="">Selecciona tu hermandad</option>
-                                                {% for guild in guild_leader_data %}
-                                                    <option value="{{ guild.1 }}">{{ guild.1 }}</option>
-                                                {% endfor %}
-                                            </select>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td><input type="text" maxlength="24" name="new-guild-name" id="new-guild-name" placeholder="Nuevo nombre de hermandad"></td>
-                                    </tr>
-                                    <tr>
-                                        <td><input type="text" maxlength="24" name="conf-new-guild-name" id="conf-new-guild-name" placeholder="Confirmar nuevo nombre"></td>
-                                    </tr>
-									<tr>
-										<td><input type="password" name="cur-password" id="cur-password" placeholder="Contraseña actual"></td>
-									</tr>
-									<tr>
-										<td><input type="text" name="security-token" id="security-token" placeholder="Token de seguridad"></td>
-									</tr>
-
-                                    <tr>
-                                        <td>
-                                            <button type="submit" class="rename-guild-button" data-id="RenameGuild">Proceder al Pago</button>
-                                        </td>
-                                    </tr>
-                                </table>
-                            </form>
-                            <hr>
-                            <div class="alert-message" id="rename-guild-response"></div>
+                            {% load django_vite %}
+                            <!-- Isla React (Vite): renombrar hermandad (guild + campos -> Stripe). -->
+                            <div id="rename-guild-app"
+                                 data-csrf="{{ csrf_token }}"
+                                 data-url="{% url 'rename-guild' %}"></div>
+                            {{ guild_names|json_script:"rename-guild-data" }}
+                            {% vite_asset 'src/entries/rename_guild.tsx' %}
                         {% endif %}
                     </div>
                 </div>
diff --git a/home/views/guild.py b/home/views/guild.py
index 431f70a..2cab51a 100644
--- a/home/views/guild.py
+++ b/home/views/guild.py
@@ -92,7 +92,8 @@ def rename_guild_view(request):
 
     return render(request, 'account/rename_guild.html', {
         'guild_leader_data': guild_leader_data,
-        'rename_cost': rename_cost
+        'rename_cost': rename_cost,
+        'guild_names': [g[1] for g in guild_leader_data],
     })
 @require_paid_stripe()
 def guild_rename_success_view(request):