diff --git a/zenno/src/routes/chara/convo/+page.svelte b/zenno/src/routes/chara/convo/+page.svelte
index 8913f36..d7bb9f8 100644
--- a/zenno/src/routes/chara/convo/+page.svelte
+++ b/zenno/src/routes/chara/convo/+page.svelte
@@ -8,13 +8,12 @@
 	const convoMap = $derived(byChara(conversations));
 	const popular = $derived(groupPopulars(conversations));
 	let characters: Character[] = $state([]);
+	const selCharas = $derived(characters.filter((c) => convoMap.has(c.chara_id)));
 	const names = $derived(charaNames(characters ?? []));
 	const minSuggest = 8;
 
 	onMount(async () => {
-		const [convos, charas] = await Promise.all([conversation(), character()]);
-		conversations = convos;
-		characters = charas.filter((c) => convoMap.has(c.chara_id));
+		[conversations, characters] = await Promise.all([conversation(), character()]);
 	});
 
 	let chara: Character | undefined = $state();
@@ -43,7 +42,7 @@
 <div class="mx-auto mt-8 flex flex-col rounded-md text-center shadow-md ring md:max-w-xl md:flex-row">
 	<div class="m-4 flex-1 md:mt-3">
 		<label for="chara" class="hidden md:inline">Character</label>
-		<CharaPick id="chara" {characters} class="w-full" bind:value={chara} required />
+		<CharaPick id="chara" characters={selCharas} class="w-full" bind:value={chara} required />
 	</div>
 	<div class="m-4 flex-1 md:mt-3">
 		<label for="convo" class="hidden md:inline">Conversation</label>