diff --git a/web/src/routes/ips/+page.svelte b/web/src/routes/ips/+page.svelte
index e4f16af..fdbd4a0 100644
--- a/web/src/routes/ips/+page.svelte
+++ b/web/src/routes/ips/+page.svelte
@@ -96,13 +96,36 @@
 										<Badge variant="outline" class="ml-1">AS{ip.asn}</Badge>
 									{/if}
 								</Table.Cell>
-								<Table.Cell class="max-w-[240px] text-xs text-muted-foreground">
-									active: {(ip.active_on_servers ?? []).join(', ') || '—'}
-									{#if (ip.recent_on_servers?.length ?? 0) > 0}
-										<br />recent: {(ip.recent_on_servers ?? []).join(', ')}
+								<Table.Cell class="max-w-[240px] text-xs">
+									{@const activeServers = (ip.active_on_servers ?? []).filter(Boolean)}
+									{@const recentServers = (ip.recent_on_servers ?? []).filter(Boolean)}
+									{@const primaryServer = ip.primary_server ?? null}
+									{@const recentOnly = recentServers.filter((s) => !activeServers.includes(s))}
+
+									{#if activeServers.length === 0}
+										<span class="text-muted-foreground">—</span>
+									{:else}
+										<div class="flex flex-wrap items-center gap-1">
+											{#each activeServers as srv (srv)}
+												<Badge variant="secondary" class="font-normal px-2 py-0.5">
+													{srv}
+												</Badge>
+												{#if primaryServer && srv === primaryServer}
+													<Badge class="font-normal px-2 py-0.5">primary</Badge>
+												{/if}
+											{/each}
+										</div>
 									{/if}
-									{#if ip.primary_server}
-										<br />primary: {ip.primary_server}
+
+									{#if recentOnly.length > 0}
+										<div class="mt-1 flex flex-wrap items-center gap-1">
+											<Badge variant="outline" class="font-normal px-2 py-0.5">recent</Badge>
+											{#each recentOnly as srv (srv)}
+												<Badge variant="outline" class="font-normal px-2 py-0.5">
+													{srv}
+												</Badge>
+											{/each}
+										</div>
 									{/if}
 								</Table.Cell>
 							</Table.Row>