diff --git a/home/templates/partials/ban_history.html b/home/templates/partials/ban_history.html
index 7fc56e2..fc7d026 100644
--- a/home/templates/partials/ban_history.html
+++ b/home/templates/partials/ban_history.html
@@ -25,71 +25,12 @@
         <h2>Historial de baneos</h2>
     </div>
     <div class="body-box-content info-box-light">
-        <table class="max-center-table" style="width: 100%; border-collapse: collapse;">
-            <thead>
-                <tr>
-                    <th style="text-align: left; padding: 10px; border: 1px solid #ddd;">Fecha de Baneo</th>
-                    <th style="text-align: left; padding: 10px; border: 1px solid #ddd;">Fecha de Desbaneo</th>
-                    <th style="text-align: left; padding: 10px; border: 1px solid #ddd;">Motivo</th>
-                    <th style="text-align: left; padding: 10px; border: 1px solid #ddd;">Estado</th>
-                    <th style="text-align: left; padding: 10px; border: 1px solid #ddd;">
-                        {% if account_bans and character_bans %}
-                            Cuenta / Personaje
-                        {% elif account_bans %}
-                            Cuenta
-                        {% elif character_bans %}
-                            Personaje
-                        {% else %}
-                            Fuente
-                        {% endif %}
-                    </th>
-                </tr>
-            </thead>
-            <tbody>
-                {% if account_bans %}
-                    {% for ban in account_bans %}
-                        <tr>
-                            <td style="padding: 10px; border: 1px solid #ddd;">{{ ban.0|default:"No disponible" }}</td>
-                            <td style="padding: 10px; border: 1px solid #ddd;">{{ ban.1|default:"No disponible" }}</td>
-                            <td style="padding: 10px; border: 1px solid #ddd;">{{ ban.2 }}</td>
-                            <td style="padding: 10px; border: 1px solid #ddd;">
-                                {% if ban.3 == 1 %}
-                                   <span class="red-info2">Activo<span>
-                                {% else %}
-                                   <span class="green-info2">Inactivo</span>
-                                {% endif %}
-                            </td>
-                            <td style="padding: 10px; border: 1px solid #ddd;">Cuenta: {{ ban.4 }}</td>
-                        </tr>
-                    {% endfor %}
-                {% else %}
-                    <tr>
-                        <td colspan="5" style="text-align: center; padding: 10px; border: 1px solid #ddd;">No hay baneos en la cuenta.</td>
-                    </tr>
-                {% endif %}
-
-                {% if character_bans %}
-                    {% for ban in character_bans %}
-                        <tr>
-                            <td style="padding: 10px; border: 1px solid #ddd;">{{ ban.0|default:"No disponible" }}</td>
-                            <td style="padding: 10px; border: 1px solid #ddd;">{{ ban.1|default:"No disponible" }}</td>
-                            <td style="padding: 10px; border: 1px solid #ddd;">{{ ban.2 }}</td>
-                            <td style="padding: 10px; border: 1px solid #ddd;">
-                                {% if ban.3 == 1 %}
-                                    Activo
-                                {% else %}
-                                   <span class="green-info2">Inactivo</span>
-                                {% endif %}
-                            </td>
-                            <td style="padding: 10px; border: 1px solid #ddd;">Personaje: {{ ban.4 }}</td>
-                        </tr>
-                    {% endfor %}
-                {% else %}
-                    <tr>
-                        <td colspan="5" style="text-align: center; padding: 10px; border: 1px solid #ddd;">No hay baneos en los personajes.</td>
-                    </tr>
-                {% endif %}
-            </tbody>
-        </table>
+        {% load django_vite %}
+        <!-- Isla React (Vite): tabla de baneos (cuenta + personajes). -->
+        <div id="history-table-app"
+             data-columns='[{"key":"fecha_baneo","label":"Fecha de Baneo"},{"key":"fecha_desbaneo","label":"Fecha de Desbaneo"},{"key":"motivo","label":"Motivo"},{"key":"estado","label":"Estado"},{"key":"origen","label":"Cuenta / Personaje"}]'
+             data-empty-text="No hay baneos en la cuenta ni en los personajes."></div>
+        {{ ban_rows|json_script:"history-table-data" }}
+        {% vite_asset 'src/entries/history_table.tsx' %}
     </div>
 </div>
\ No newline at end of file
diff --git a/home/views/history.py b/home/views/history.py
index 31ffee6..a71e6ea 100644
--- a/home/views/history.py
+++ b/home/views/history.py
@@ -55,10 +55,23 @@ def ban_history_view(request):
     
     account_bans, character_bans = get_ban_history(account_id)
 
+    def _row(b, origen):
+        return {
+            'fecha_baneo': b[0] or 'No disponible',
+            'fecha_desbaneo': b[1] or 'No disponible',
+            'motivo': b[2],
+            'estado': 'Activo' if b[3] == 1 else 'Inactivo',
+            'origen': f'{origen}: {b[4]}',
+        }
+
+    ban_rows = ([_row(b, 'Cuenta') for b in account_bans]
+                + [_row(b, 'Personaje') for b in character_bans])
+
     return render(request, 'account/ban_history.html', {
         'account_bans': account_bans,
         'character_bans': character_bans,
-         'now': datetime.now(),
+        'ban_rows': ban_rows,
+        'now': datetime.now(),
     })
 def security_history_view(request):
     username = request.session.get('username')