diff --git a/web/src/lib/components/repo/issues/IssueSearch.svelte b/web/src/lib/components/repo/issues/IssueSearch.svelte
index 9b7bbfdc..64762404 100644
--- a/web/src/lib/components/repo/issues/IssueSearch.svelte
+++ b/web/src/lib/components/repo/issues/IssueSearch.svelte
@@ -2,6 +2,8 @@
 	import { page } from "$app/state";
 	import Search from "$icon/search";
 	import X from "$icon/x";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
 
 	let form: HTMLFormElement;
 	// seed from the url so the query (and the clear button) survive a submit
@@ -13,30 +15,28 @@
 	};
 </script>
 
-<form bind:this={form} class="flex" method="GET">
+<form bind:this={form} class="flex w-full" method="GET">
 	<!-- TODO: wire up search query submission -->
 	<div class="relative flex w-full items-center">
-		<Search
-			class="pointer-events-none absolute left-2 size-4 text-foreground-placeholder"
-			aria-hidden="true"
-		/>
-		<input
+		<Input
 			bind:value
-			class="h-full w-full rounded border border-border-default bg-background-default py-1.5 pr-8 pl-8 text-sm outline-none focus:border-border-strong"
 			type="text"
 			name="q"
 			placeholder="Search issues..."
 			aria-label="Search issues"
+			iconLeft={Search}
+			class={value ? "w-full pr-9" : "w-full"}
 		/>
 		{#if value}
-			<button
+			<Button
 				type="button"
+				variant="ghost"
+				size="sm"
+				icon={X}
 				onclick={clear}
-				class="absolute right-2 flex items-center text-foreground-placeholder transition-colors hover:text-foreground-default"
 				aria-label="Clear search"
-			>
-				<X class="size-4" aria-hidden="true" />
-			</button>
+				class="absolute right-1"
+			/>
 		{/if}
 	</div>
 </form>