diff --git a/src/components/tools/DonationCreate.svelte b/src/components/tools/DonationCreate.svelte
index c681a0bc..898da443 100644
--- a/src/components/tools/DonationCreate.svelte
+++ b/src/components/tools/DonationCreate.svelte
@@ -12,235 +12,99 @@
 
 	//
 	let options = [
-		"Bulbasaur",
-		"Ivysaur",
-		"Venusaur",
-		"Charmander",
-		"Charmeleon",
-		"Charizard",
-		"Squirtle",
-		"Wartortle",
-		"Blastoise",
-		"Caterpie",
-		"Metapod",
-		"Butterfree",
-		"Weedle",
-		"Kakuna",
-		"Beedrill",
-		"Pidgey",
-		"Pidgeotto",
-		"Pidgeot",
-		"Rattata",
-		"Raticate",
-		"Spearow",
-		"Fearow",
-		"Ekans",
-		"Arbok",
-		"Pikachu",
-		"Raichu",
-		"Sandshrew",
-		"Sandslash",
-		"Nidoran♀",
-		"Nidorina",
-		"Nidoqueen",
-		"Nidoran♂",
-		"Nidorino",
-		"Nidoking",
-		"Clefairy",
-		"Clefable",
-		"Vulpix",
-		"Ninetales",
-		"Jigglypuff",
-		"Wigglytuff",
-		"Zubat",
-		"Golbat",
-		"Oddish",
-		"Gloom",
-		"Vileplume",
-		"Paras",
-		"Parasect",
-		"Venonat",
-		"Venomoth",
-		"Diglett",
-		"Dugtrio",
-		"Meowth",
-		"Persian",
-		"Psyduck",
-		"Golduck",
-		"Mankey",
-		"Primeape",
-		"Growlithe",
-		"Arcanine",
-		"Poliwag",
-		"Poliwhirl",
-		"Poliwrath",
-		"Abra",
-		"Kadabra",
-		"Alakazam",
-		"Machop",
-		"Machoke",
-		"Machamp",
-		"Bellsprout",
-		"Weepinbell",
-		"Victreebel",
-		"Tentacool",
-		"Tentacruel",
-		"Geodude",
-		"Graveler",
-		"Golem",
-		"Ponyta",
-		"Rapidash",
-		"Slowpoke",
-		"Slowbro",
-		"Magnemite",
-		"Magneton",
-		"Farfetch'd",
-		"Doduo",
-		"Dodrio",
-		"Seel",
-		"Dewgong",
-		"Grimer",
-		"Muk",
-		"Shellder",
-		"Cloyster",
-		"Gastly",
-		"Haunter",
-		"Gengar",
-		"Onix",
-		"Drowzee",
-		"Hypno",
-		"Krabby",
-		"Kingler",
-		"Voltorb",
-		"Electrode",
-		"Exeggcute",
-		"Exeggutor",
-		"Cubone",
-		"Marowak",
-		"Hitmonlee",
-		"Hitmonchan",
-		"Lickitung",
-		"Koffing",
-		"Weezing",
-		"Rhyhorn",
-		"Rhydon",
-		"Chansey",
-		"Tangela",
-		"Kangaskhan",
-		"Horsea",
-		"Seadra",
-		"Goldeen",
-		"Seaking",
-		"Staryu",
-		"Starmie",
-		"Mr. Mime",
-		"Scyther",
-		"Jynx",
-		"Electabuzz",
-		"Magmar",
-		"Pinsir",
-		"Tauros",
-		"Magikarp",
-		"Gyarados",
-		"Lapras",
-		"Ditto",
-		"Eevee",
-		"Vaporeon",
-		"Jolteon",
-		"Flareon",
-		"Porygon",
-		"Omanyte",
-		"Omastar",
-		"Kabuto",
-		"Kabutops",
-		"Aerodactyl",
-		"Snorlax",
-		"Articuno",
-		"Zapdos",
-		"Moltres",
-		"Dratini",
-		"Dragonair",
-		"Dragonite",
-		"Mewtwo",
-		"Mew",
-		"Chikorita",
-		"Bayleef",
-		"Meganium",
-		"Cyndaquil",
-		"Quilava",
-		"Typhlosion",
-		"Totodile",
-		"Croconaw",
-		"Feraligatr",
-		"Sentret",
-		"Furret",
-		"Hoothoot",
-		"Noctowl",
-		"Ledyba",
-		"Ledian",
-		"Spinarak",
-		"Ariados",
-		"Crobat",
-		"Chinchou",
-		"Lanturn",
-		"Pichu",
-		"Cleffa",
-		"Igglybuff",
-		"Togepi",
-		"Togetic",
-		"Natu",
-		"Xatu",
-		"Mareep",
-		"Flaaffy",
-		"Ampharos",
-		"Bellossom",
-		"Marill",
-		"Azumarill",
-		"Sudowoodo",
-		"Politoed",
-		"Hoppip",
-		"Skiploom",
-		"Jumpluff",
-		"Aipom",
-		"Sunkern",
-		"Sunflora",
-		"Yanma",
-		"Wooper",
-		"Quagsire",
-		"Espeon",
-		"Umbreon",
-		"Murkrow",
-		"Slowking",
-		"Misdreavus",
-		"Unown",
-		"Wobbuffet",
-		"Girafarig",
-		"Pineco",
-		"Forretress",
-		"Dunsparce",
-		"Gligar",
-		"Steelix",
-		"Snubbull",
-		"Granbull",
-		"Qwilfish",
-		"Scizor",
-		"Shuckle",
-		"Heracross",
-		"Sneasel",
-		"Teddiursa",
-		"Ursaring",
-		"Slugma",
-		"Magcargo",
-		"Swinub",
-		"Piloswine",
-		"Corsola",
-		"Remoraid",
-		"Octillery",
-		"Delibird",
-		"Mantine",
-		"Skarmory",
-		"Houndour",
-		"Houndoom",
+		{ label: "Bulbasaur", value: { id: 456 } },
+		{ label: "Ivysaur", value: { id: 456 } },
+		{ label: "Venusaur", value: { id: 456 } },
+		{ label: "Charmander", value: { id: 456 } },
+		{ label: "Charmeleon", value: { id: 456 } },
+		{ label: "Charizard", value: { id: 456 } },
+		{ label: "Squirtle", value: { id: 456 } },
+		{ label: "Wartortle", value: { id: 456 } },
+		{ label: "Blastoise", value: { id: 456 } },
+		{ label: "Caterpie", value: { id: 456 } },
+		{ label: "Metapod", value: { id: 456 } },
+		{ label: "Butterfree", value: { id: 456 } },
+		{ label: "Weedle", value: { id: 456 } },
+		{ label: "Kakuna", value: { id: 456 } },
+		{ label: "Beedrill", value: { id: 456 } },
+		{ label: "Pidgey", value: { id: 456 } },
+		{ label: "Pidgeotto", value: { id: 456 } },
+		{ label: "Pidgeot", value: { id: 456 } },
+		{ label: "Rattata", value: { id: 456 } },
+		{ label: "Raticate", value: { id: 456 } },
+		{ label: "Spearow", value: { id: 456 } },
+		{ label: "Fearow", value: { id: 456 } },
+		{ label: "Ekans", value: { id: 456 } },
+		{ label: "Arbok", value: { id: 456 } },
+		{ label: "Pikachu", value: { id: 456 } },
+		{ label: "Raichu", value: { id: 456 } },
+		{ label: "Sandshrew", value: { id: 456 } },
+		{ label: "Sandslash", value: { id: 456 } },
+		{ label: "Nidoran♀", value: { id: 456 } },
+		{ label: "Nidorina", value: { id: 456 } },
+		{ label: "Nidoqueen", value: { id: 456 } },
+		{ label: "Nidoran♂", value: { id: 456 } },
+		{ label: "Nidorino", value: { id: 456 } },
+		{ label: "Nidoking", value: { id: 456 } },
+		{ label: "Clefairy", value: { id: 456 } },
+		{ label: "Clefable", value: { id: 456 } },
+		{ label: "Vulpix", value: { id: 456 } },
+		{ label: "Ninetales", value: { id: 456 } },
+		{ label: "Jigglypuff", value: { id: 456 } },
+		{ label: "Wigglytuff", value: { id: 456 } },
+		{ label: "Zubat", value: { id: 456 } },
+		{ label: "Golbat", value: { id: 456 } },
+		{ label: "Oddish", value: { id: 456 } },
+		{ label: "Gloom", value: { id: 456 } },
+		{ label: "Vileplume", value: { id: 456 } },
+		{ label: "Paras", value: { id: 456 } },
+		{ label: "Parasect", value: { id: 456 } },
+		{ label: "Venonat", value: { id: 456 } },
+		{ label: "Venomoth", value: { id: 456 } },
+		{ label: "Diglett", value: { id: 456 } },
+		{ label: "Dugtrio", value: { id: 456 } },
+		{ label: "Meowth", value: { id: 456 } },
+		{ label: "Persian", value: { id: 456 } },
+		{ label: "Psyduck", value: { id: 456 } },
+		{ label: "Golduck", value: { id: 456 } },
+		{ label: "Mankey", value: { id: 456 } },
+		{ label: "Primeape", value: { id: 456 } },
+		{ label: "Growlithe", value: { id: 456 } },
+		{ label: "Arcanine", value: { id: 456 } },
+		{ label: "Poliwag", value: { id: 456 } },
+		{ label: "Poliwhirl", value: { id: 456 } },
+		{ label: "Poliwrath", value: { id: 456 } },
+		{ label: "Abra", value: { id: 456 } },
+		{ label: "Kadabra", value: { id: 456 } },
+		{ label: "Alakazam", value: { id: 456 } },
+		{ label: "Machop", value: { id: 456 } },
+		{ label: "Machoke", value: { id: 456 } },
+		{ label: "Machamp", value: { id: 456 } },
+		{ label: "Bellsprout", value: { id: 456 } },
+		{ label: "Weepinbell", value: { id: 456 } },
+		{ label: "Victreebel", value: { id: 456 } },
+		{ label: "Tentacool", value: { id: 456 } },
+		{ label: "Tentacruel", value: { id: 456 } },
+		{ label: "Geodude", value: { id: 456 } },
+		{ label: "Graveler", value: { id: 456 } },
+		{ label: "Golem", value: { id: 456 } },
+		{ label: "Ponyta", value: { id: 456 } },
+		{ label: "Rapidash", value: { id: 456 } },
+		{ label: "Slowpoke", value: { id: 456 } },
+		{ label: "Slowbro", value: { id: 456 } },
+		{ label: "Magnemite", value: { id: 456 } },
+		{ label: "Magneton", value: { id: 456 } },
+		{ label: "Farfetch'd", value: { id: 456 } },
+		{ label: "Doduo", value: { id: 456 } },
+		{ label: "Dodrio", value: { id: 456 } },
+		{ label: "Seel", value: { id: 456 } },
+		{ label: "Dewgong", value: { id: 456 } },
+		{ label: "Grimer", value: { id: 456 } },
+		{ label: "Muk", value: { id: 456 } },
+		{ label: "Shellder", value: { id: 456 } },
+		{ label: "Cloyster", value: { id: 456 } },
+		{ label: "Gastly", value: { id: 456 } },
+		{ label: "Haunter", value: { id: 456 } },
 	];
 	let selectedOption;
 
@@ -351,14 +215,14 @@
 				{options}
 				filterFn={(option, searchTerm) => {
 					// Example: Match if option starts with search term (case-insensitive)
-					return option.toLowerCase().startsWith(searchTerm.toLowerCase());
+					return option.label.toLowerCase().startsWith(searchTerm.toLowerCase());
 				}}
 				bind:selected={selectedOption}
 				placeholder="Search fruits..."
 				on:select={handleSelect}
 			/>
 			{#if selectedOption}
-				<p class="mt-4 text-lg">Selected: {selectedOption}</p>
+				<p class="mt-4 text-lg">Selected: {JSON.stringify(selectedOption)}</p>
 			{/if}
 			<!--  -->
 
diff --git a/src/components/tools/VirtualSelect.svelte b/src/components/tools/VirtualSelect.svelte
index 9e7f2de7..f1f31d04 100644
--- a/src/components/tools/VirtualSelect.svelte
+++ b/src/components/tools/VirtualSelect.svelte
@@ -4,7 +4,11 @@
 	// Props
 	export let options = [];
 	export let selected = null;
-	export let placeholder = "Search options...";
+	export let inputPlaceholder = "Search options...";
+	export let noOptionsText = "No options found";
+	export let inputAriaLabel = "Search and select an option";
+	export let toggleAriaLabel = "Toggle dropdown";
+	export let clearAriaLabel = "Clear selection";
 	export let filterFn = null; // Custom filter function
 
 	// Internal state
@@ -26,7 +30,7 @@
 			? filterFn
 				? options.filter((option) => filterFn(option, searchTerm))
 				: options.filter((option) =>
-						option.toLowerCase().includes(searchTerm.toLowerCase())
+						option.label.toLowerCase().includes(searchTerm.toLowerCase())
 					)
 			: options;
 		// Reset scroll and focus when filtered options change
@@ -63,11 +67,19 @@
 
 	// Handle option selection
 	function selectOption(option) {
-		selected = option;
+		selected = option.value;
 		isOpen = false;
 		searchTerm = "";
 		focusedIndex = -1;
-		dispatch("onSelected", option);
+		dispatch("onSelected", option.value);
+	}
+
+	// Handle clear selection
+	function clearSelection() {
+		selected = null;
+		searchTerm = "";
+		focusedIndex = -1;
+		dispatch("onSelected", null);
 	}
 
 	// Toggle dropdown
@@ -147,6 +159,13 @@
 			return () => resizeObserver.disconnect();
 		}
 	});
+
+	// Get display text for the input
+	function getDisplayText() {
+		if (!selected) return inputPlaceholder;
+		const selectedOption = options.find((option) => option.value === selected);
+		return selectedOption ? selectedOption.label : inputPlaceholder;
+	}
 </script>
 
 <svelte:window on:click={handleClickOutside} />
@@ -154,14 +173,14 @@
 <div class="select-container relative w-full">
 	<!-- Select element with inline search -->
 	<div
-		class="border rounded-md px-3 py-2 bg-white shadow-sm flex items-center"
+		class="border rounded-md px-3 py-2 bg-white shadow-sm flex items-center gap-2"
 		role="combobox"
 		aria-expanded={isOpen}
 	>
 		<input
 			type="text"
 			bind:value={searchTerm}
-			placeholder={selected || placeholder}
+			placeholder={getDisplayText()}
 			class="w-full bg-transparent focus:outline-none {selected
 				? 'text-black'
 				: 'text-gray-700'}"
@@ -173,8 +192,42 @@
 					handleKeydown(e, focusedIndex);
 				}
 			}}
-			aria-label="Search and select an option"
+			aria-label={inputAriaLabel}
 		/>
+		{#if selected}
+			<button
+				type="button"
+				class="w-5 h-5 flex items-center justify-center text-gray-500 hover:text-gray-700"
+				on:click={clearSelection}
+				on:keydown={(e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						clearSelection();
+					} else if (e.key === "Escape") {
+						e.preventDefault();
+						isOpen = false;
+						focusedIndex = -1;
+					}
+				}}
+				role="button"
+				tabindex="0"
+				aria-label={clearAriaLabel}
+			>
+				<svg
+					class="w-4 h-4"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</button>
+		{/if}
 		<svg
 			class="w-4 h-4 text-gray-500 transform {isOpen ? 'rotate-180' : ''}"
 			fill="none"
@@ -186,11 +239,12 @@
 			on:keydown={(e) => {
 				if (e.key === "Enter") toggleDropdown();
 				else if (e.key === "Escape") {
+					e.preventDefault();
 					isOpen = false;
 					focusedIndex = -1;
 				}
 			}}
-			aria-label="Toggle dropdown"
+			aria-label={toggleAriaLabel}
 		>
 			<path
 				stroke-linecap="round"
@@ -213,10 +267,10 @@
 				<!-- Virtualized list container -->
 				<div style="height: {filteredOptions.length * itemHeight}px;">
 					<div style="transform: translateY({startIndex * itemHeight}px);">
-						{#each visibleItems as item, i (item + "-" + (startIndex + i))}
+						{#each visibleItems as item, i (item.label + "-" + (startIndex + i))}
 							<div
 								class="px-3 py-2 hover:bg-blue-100 cursor-pointer {selected ===
-								item
+								item.value
 									? 'bg-blue-50'
 									: ''} {focusedIndex === startIndex + i
 									? 'bg-blue-200 outline outline-2 outline-blue-500'
@@ -225,15 +279,15 @@
 								on:keydown={(e) => handleKeydown(e, startIndex + i)}
 								role="option"
 								tabindex="0"
-								aria-selected={selected === item}
+								aria-selected={selected === item.value}
 							>
-								{item}
+								{item.label}
 							</div>
 						{/each}
 					</div>
 				</div>
 			{:else}
-				<div class="px-3 py-2 text-gray-500">No options found</div>
+				<div class="px-3 py-2 text-gray-500">{noOptionsText}</div>
 			{/if}
 		</div>
 	{/if}
@@ -248,4 +302,8 @@
 		outline: 2px solid #3b82f6;
 		outline-offset: -2px;
 	}
+	:global([role="button"]:focus) {
+		outline: 2px solid #3b82f6;
+		outline-offset: -2px;
+	}
 </style>