diff --git a/apps/web/src/lib/ui/data/TaskItem.svelte b/apps/web/src/lib/ui/data/TaskItem.svelte
index 961846a..9ae9eaf 100644
--- a/apps/web/src/lib/ui/data/TaskItem.svelte
+++ b/apps/web/src/lib/ui/data/TaskItem.svelte
@@ -261,7 +261,7 @@
 					aria-label="Soltar"
 					title="Soltar"
 					on:click|preventDefault={doUnassign}
-					disabled={busy}>Soltar 🫳</button
+					disabled={busy}>🫳 Soltar</button
 				>
 			{/if}
 			<button
@@ -269,7 +269,9 @@
 				aria-label="Completar"
 				title="Completar"
 				on:click|preventDefault={doComplete}
-				disabled={busy}>Completar ✅</button
+				disabled={busy}
+			>
+				✅ Completar</button
 			>
 
 			{#if !editingText}
@@ -278,7 +280,9 @@
 					aria-label="Editar texto"
 					title="Editar texto"
 					on:click|preventDefault={toggleEditText}
-					disabled={busy}>Editar ✍️</button
+					disabled={busy}
+				>
+					✍️ Editar</button
 				>
 			{:else}
 				<button
@@ -299,7 +303,7 @@
 					aria-label="Editar fecha"
 					title="Editar fecha"
 					on:click|preventDefault={toggleEdit}
-					disabled={busy}>Mover 🗓️</button
+					disabled={busy}>🗓️ Mover</button
 				>
 			{:else}
 				<input class="date" type="date" bind:value={dateValue} />
@@ -329,8 +333,8 @@
 		grid-template-columns: 1fr max-content;
 		grid-template-rows: min-content max-content max-content;
 		grid-gap: 2px;
-		padding: 4px;
-		border-bottom: 1px solid var(--color-border);
+		padding: 4px 0 8px 0;
+		border-bottom: 2px dashed var(--color-border);
 		position: relative;
 		margin: 0 0 4px 0;
 	}
@@ -338,19 +342,20 @@
 		border-bottom: 0;
 	}
 	.code {
-		font-weight: 600;
+		font-weight: 300;
 		font-size: 0.8rem;
 		color: var(--color-text-muted);
 		font-family: monospace;
 		letter-spacing: 0.5px;
 		grid-row: 1/2;
 		grid-column: 1/2;
+		align-self: center;
 	}
 	.completed {
 		opacity: 0.5;
 	}
 	.desc {
-		padding: 8px;
+		padding: 8px 4px;
 		grid-column: 1/3;
 		grid-row: 2/3;
 	}
@@ -373,7 +378,6 @@
 	.meta {
 		justify-self: end;
 		align-items: start;
-		gap: 8px;
 		grid-row: 1/2;
 		grid-column: 2/3;
 	}
@@ -381,7 +385,7 @@
 		color: var(--color-text-muted);
 	}
 	.date-badge {
-		padding: 2px 6px;
+		padding: 4px 6px;
 		border-radius: 6px;
 		border: 1px solid transparent;
 		font-size: 12px;
@@ -410,13 +414,12 @@
 	}
 
 	.actions {
-		display: block;
-		gap: 6px;
-		justify-self: end;
-		align-items: center;
-		flex-wrap: wrap;
+		justify-self: center;
+		justify-content: space-between;
+		align-content: space-between;
 		grid-column: 2/3;
 		grid-row: 3/4;
+		margin-bottom: 4px;
 	}
 	.btn {
 		padding: 4px 8px;
@@ -426,6 +429,7 @@
 		border-radius: 6px;
 		font-size: 13px;
 		cursor: pointer;
+		font-family: monospace;
 	}
 	.btn[disabled] {
 		opacity: 0.6;
@@ -451,11 +455,31 @@
 		border: 1px solid var(--color-border);
 		border-radius: 6px;
 		background: var(--color-surface);
-		font-size: 16px;
+		font-size: 12px;
 		line-height: 1;
+		font-family: monospace;
 	}
 	.date {
 		padding: 4px 6px;
 		font-size: 14px;
 	}
+	@media (max-width: 480px) {
+		.task {
+			grid-template-columns: 1fr;
+		}
+		.meta {
+			justify-self: end;
+		}
+		.assignees {
+			display: none;
+		}
+		.actions {
+			grid-row: 3/4;
+			grid-column: 1/3;
+			justify-self: center;
+		}
+		.icon-btn {
+			padding: 2px;
+		}
+	}
 </style>
diff --git a/apps/web/src/routes/app/+page.svelte b/apps/web/src/routes/app/+page.svelte
index c31aa22..86a3c7f 100644
--- a/apps/web/src/routes/app/+page.svelte
+++ b/apps/web/src/routes/app/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import Card from '$lib/ui/layout/Card.svelte';
-  import TextField from '$lib/ui/inputs/TextField.svelte';
-  import TaskItem from '$lib/ui/data/TaskItem.svelte';
-  import Pagination from '$lib/ui/layout/Pagination.svelte';
+	import Card from "$lib/ui/layout/Card.svelte";
+	import TextField from "$lib/ui/inputs/TextField.svelte";
+	import TaskItem from "$lib/ui/data/TaskItem.svelte";
+	import Pagination from "$lib/ui/layout/Pagination.svelte";
 
 	export let data: {
 		userId: string;
@@ -31,73 +31,103 @@
 	};
 </script>
 
-<h1 class="title">Panel</h1>
 <p class="subtle">Sesión: <strong>{data.userId}</strong></p>
 
-<form method="GET" action="/app" class="filters">
-	<div class="grow">
-    <TextField name="q" placeholder="Buscar tareas..." value={data.q ?? ''} />
-  </div>
-	<select name="soonDays">
-		<option value="" selected={String(data.soonDays ?? '') === ''}>Todas las fechas</option>
-		<option value="3" selected={String(data.soonDays ?? '') === '3'}>Próximos 3 días</option>
-		<option value="7" selected={String(data.soonDays ?? '') === '7'}>Próximos 7 días</option>
-		<option value="14" selected={String(data.soonDays ?? '') === '14'}>Próximos 14 días</option>
-	</select>
-	<button type="submit">Filtrar</button>
-</form>
-
 <h2 class="section-title">Mis tareas (abiertas)</h2>
 {#if data.openTasks.length === 0}
 	<p>No tienes tareas abiertas.</p>
 {:else}
-  <Card>
-    <ul class="list">
-      {#each data.openTasks as t}
-        <TaskItem {...t} currentUserId={data.userId} />
-      {/each}
-    </ul>
-  </Card>
+	<Card>
+		<ul class="list">
+			{#each data.openTasks as t}
+				<TaskItem {...t} currentUserId={data.userId} />
+			{/each}
+		</ul>
+	</Card>
 {/if}
 
 {#if (data.page ?? 1) > 1 || data.hasMore}
-  <Pagination
-    prevHref={(data.page ?? 1) > 1
-      ? `/app?${new URLSearchParams({ q: data.q ?? '', soonDays: data.soonDays != null ? String(data.soonDays) : '', page: String((data.page ?? 1) - 1) }).toString()}`
-      : null}
-    nextHref={data.hasMore
-      ? `/app?${new URLSearchParams({ q: data.q ?? '', soonDays: data.soonDays != null ? String(data.soonDays) : '', page: String((data.page ?? 1) + 1) }).toString()}`
-      : null}
-  />
+	<Pagination
+		prevHref={(data.page ?? 1) > 1
+			? `/app?${new URLSearchParams({ q: data.q ?? "", soonDays: data.soonDays != null ? String(data.soonDays) : "", page: String((data.page ?? 1) - 1) }).toString()}`
+			: null}
+		nextHref={data.hasMore
+			? `/app?${new URLSearchParams({ q: data.q ?? "", soonDays: data.soonDays != null ? String(data.soonDays) : "", page: String((data.page ?? 1) + 1) }).toString()}`
+			: null}
+	/>
 {/if}
 
 <h2 class="section-title">Completadas (últimas 24 h)</h2>
 {#if data.recentTasks.length === 0}
-  <p>No hay tareas completadas recientemente.</p>
+	<p>No hay tareas completadas recientemente.</p>
 {:else}
-  <Card>
-    <ul class="list">
-      {#each data.recentTasks as t}
-        <TaskItem {...t} currentUserId={data.userId} completed={true} completed_at={t.completed_at ?? null} />
-      {/each}
-    </ul>
-  </Card>
+	<Card>
+		<ul class="list">
+			{#each data.recentTasks as t}
+				<TaskItem
+					{...t}
+					currentUserId={data.userId}
+					completed={true}
+					completed_at={t.completed_at ?? null}
+				/>
+			{/each}
+		</ul>
+	</Card>
 {/if}
 
-<p class="footnote">La cookie de sesión se renueva con cada visita (idle timeout).</p>
+<form method="GET" action="/app" class="filters">
+	<div class="grow">
+		<TextField name="q" placeholder="Buscar tareas..." value={data.q ?? ""} />
+	</div>
+	<select name="soonDays">
+		<option value="" selected={String(data.soonDays ?? "") === ""}
+			>Todas las fechas</option
+		>
+		<option value="3" selected={String(data.soonDays ?? "") === "3"}
+			>Próximos 3 días</option
+		>
+		<option value="7" selected={String(data.soonDays ?? "") === "7"}
+			>Próximos 7 días</option
+		>
+		<option value="14" selected={String(data.soonDays ?? "") === "14"}
+			>Próximos 14 días</option
+		>
+	</select>
+	<button type="submit">Filtrar</button>
+</form>
+<p class="footnote">
+	La cookie de sesión se renueva con cada visita (idle timeout).
+</p>
 
 <style>
-  .title { margin-bottom: .5rem; }
-  .subtle { color: var(--color-text-muted); margin: 0 0 1rem 0; }
-  .filters {
-    margin: 0 0 1rem 0;
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-  .grow { flex: 1 1 260px; min-width: 200px; }
-  .section-title { margin: .5rem 0; }
-  .list { margin: 0; padding: 0; list-style: none; }
-  .footnote { margin-top: .75rem; color: var(--color-text-muted); }
+	.title {
+		margin-bottom: 0.5rem;
+	}
+	.subtle {
+		color: var(--color-text-muted);
+		margin: 0 0 1rem 0;
+	}
+	.filters {
+		margin: 0 0 1rem 0;
+		display: flex;
+		gap: 8px;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+	.grow {
+		flex: 1 1 260px;
+		min-width: 200px;
+	}
+	.section-title {
+		margin: 0.5rem 0;
+	}
+	.list {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.footnote {
+		margin-top: 0.75rem;
+		color: var(--color-text-muted);
+	}
 </style>