diff --git a/test.html b/test.html
index a62db87..4d63197 100644
--- a/test.html
+++ b/test.html
@@ -15,6 +15,12 @@
     pre { background: #0b0b0b; color: #eaeaea; padding: 12px; border-radius: 12px; overflow: auto; }
     .muted { color: #666; font-size: 14px; }
     label { display: block; font-size: 13px; margin: 8px 0 6px; color: #444; }
+    .list { margin-top: 12px; display: grid; gap: 10px; }
+    .item { border: 1px solid #eee; border-radius: 12px; padding: 12px; }
+    .item h3 { margin: 0 0 6px; font-size: 16px; }
+    .meta { display:flex; gap: 10px; flex-wrap: wrap; color:#555; font-size: 13px; }
+    .pill { background:#f3f3f3; padding: 4px 8px; border-radius: 999px; }
+    .error { color:#b00020; font-weight:600; }
   </style>
 </head>
 <body>
@@ -35,32 +41,35 @@
   </div>
 
   <div class="card">
-    <h2 style="margin-top:0;">Crear servicio (cuando exista POST /services)</h2>
-    <p class="muted">Ahora mismo tu API no tiene este endpoint, pero el formulario ya queda listo.</p>
+    <h2 style="margin-top:0;">Crear servicio</h2>
+    <p class="muted">POST /services y GET /services (en memoria por ahora).</p>
 
-    <label>Título / Descripción</label>
-    <input id="sTitle" placeholder="Ej: Fuga en cocina / Enchufe no funciona" />
+    <label>Título / Descripción *</label>
+    <input id="sTitle" placeholder="Ej: Fuga en cocina / Enchufe no funciona" value="sin luz" />
 
-    <label>Cliente</label>
-    <input id="sClient" placeholder="Ej: Juan Pérez" />
+    <label>Cliente *</label>
+    <input id="sClient" placeholder="Ej: Juan Pérez" value="juan perez" />
 
     <label>Teléfono</label>
-    <input id="sPhone" placeholder="Ej: 600123123" />
+    <input id="sPhone" placeholder="Ej: 600123123" value="666777888" />
 
     <label>Dirección</label>
-    <input id="sAddress" placeholder="Ej: Calle X, 12, Algeciras" />
+    <input id="sAddress" placeholder="Ej: Calle X, 12, Algeciras" value="calle" />
 
     <label>Notas</label>
-    <textarea id="sNotes" rows="3" placeholder="Ej: Llamar antes, perro suelto (pero majo)"></textarea>
+    <textarea id="sNotes" rows="3" placeholder="Ej: Llamar antes, perro suelto (pero majo)">ejemplo</textarea>
 
     <div class="row" style="margin-top:12px;">
       <button class="primary" id="btnCreate">POST /services</button>
       <button class="primary" id="btnList">GET /services</button>
     </div>
+
+    <div id="list" class="list"></div>
   </div>
 
 <script>
   const out = document.getElementById("out");
+  const listEl = document.getElementById("list");
 
   function log(obj) {
     out.textContent = (typeof obj === "string") ? obj : JSON.stringify(obj, null, 2);
@@ -85,11 +94,45 @@
     try { data = JSON.parse(text); } catch { data = text; }
 
     if (!res.ok) {
-      throw { status: res.status, data };
+      const msg = (data && data.error) ? data.error : "Request failed";
+      throw { status: res.status, message: msg, data };
     }
     return data;
   }
 
+  function esc(s) {
+    return String(s ?? "").replace(/[&<>"']/g, m => ({
+      "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"
+    }[m]));
+  }
+
+  function renderList(payload) {
+    const services = payload?.services || [];
+    if (!services.length) {
+      listEl.innerHTML = `<div class="muted">No hay servicios todavía. Crea uno y saldrá aquí.</div>`;
+      return;
+    }
+
+    listEl.innerHTML = services.map(s => `
+      <div class="item">
+        <h3>#${esc(s.id)} — ${esc(s.title)}</h3>
+        <div class="meta">
+          <span class="pill">👤 ${esc(s.client)}</span>
+          ${s.phone ? `<span class="pill">📞 ${esc(s.phone)}</span>` : ``}
+          ${s.address ? `<span class="pill">📍 ${esc(s.address)}</span>` : ``}
+          <span class="pill">🕒 ${esc(s.createdAt)}</span>
+        </div>
+        ${s.notes ? `<div class="muted" style="margin-top:8px;">📝 ${esc(s.notes)}</div>` : ``}
+      </div>
+    `).join("");
+  }
+
+  async function refreshServices() {
+    const data = await req("/services");
+    renderList(data);
+    return data;
+  }
+
   document.getElementById("btnRoot").onclick = async () => {
     try { log(await req("/")); }
     catch (e) { log({ error: true, ...e }); }
@@ -106,35 +149,38 @@
 
   document.getElementById("btnCreate").onclick = async () => {
     const payload = {
-      title: document.getElementById("sTitle").value,
-      clientName: document.getElementById("sClient").value,
-      phone: document.getElementById("sPhone").value,
-      address: document.getElementById("sAddress").value,
-      notes: document.getElementById("sNotes").value
+      title: document.getElementById("sTitle").value.trim(),
+      client: document.getElementById("sClient").value.trim(),   // <-- clave: client (no clientName)
+      phone: document.getElementById("sPhone").value.trim(),
+      address: document.getElementById("sAddress").value.trim(),
+      notes: document.getElementById("sNotes").value.trim()
     };
 
     try {
-      log(await req("/services", { method: "POST", body: JSON.stringify(payload) }));
+      const created = await req("/services", { method: "POST", body: JSON.stringify(payload) });
+      log(created);
+      await refreshServices();
     } catch (e) {
-      log({
-        hint: "Si esto falla con 404, es normal: aún no hemos creado POST /services.",
-        error: true,
-        ...e
-      });
+      log({ error: true, ...e });
+      listEl.innerHTML = `<div class="error">❌ Error: ${esc(e.message || "No se pudo crear")}</div>`;
     }
   };
 
   document.getElementById("btnList").onclick = async () => {
     try {
-      log(await req("/services"));
+      const data = await refreshServices();
+      log(data);
     } catch (e) {
-      log({
-        hint: "Si esto falla con 404, es normal: aún no hemos creado GET /services.",
-        error: true,
-        ...e
-      });
+      log({ error: true, ...e });
+      listEl.innerHTML = `<div class="error">❌ Error: ${esc(e.message || "No se pudo listar")}</div>`;
     }
   };
+
+  // Carga inicial
+  (async () => {
+    try { await refreshServices(); }
+    catch { /* si aún no está arriba la API, no pasa nada */ }
+  })();
 </script>
 </body>
 </html>
\ No newline at end of file
