diff --git a/web/src/lib/components/profile/ProfileEditForm.svelte b/web/src/lib/components/profile/ProfileEditForm.svelte
index f04172a94..3753ddb57 100644
--- a/web/src/lib/components/profile/ProfileEditForm.svelte
+++ b/web/src/lib/components/profile/ProfileEditForm.svelte
@@ -5,6 +5,10 @@
 	import MapPin from "$icon/map-pin";
 	import X from "$icon/x";
 	import Button from "$lib/components/ui/Button.svelte";
+	import Checkbox from "$lib/components/ui/Checkbox.svelte";
+	import Field from "$lib/components/ui/Field.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import Textarea from "$lib/components/ui/Textarea.svelte";
 	import { getAuth } from "$lib/auth.svelte";
 	import { putProfile } from "$lib/api/profile";
 	import type { ProfileRecord } from "$lib/api/records";
@@ -31,9 +35,6 @@
 			value: (seed?.links?.[index] as string | undefined) ?? ""
 		}))
 	);
-	const inputClass =
-		"w-full rounded border border-border-default bg-background-default px-2 py-1 outline-none focus:border-border-strong focus:ring-1 focus:ring-border-strong";
-
 	const save = createAction(
 		async (event: SubmitEvent) => {
 			event.preventDefault();
@@ -58,51 +59,33 @@
 </script>
 
 <form class="my-2 flex max-w-full flex-col gap-4 typography-paragraph-small" onsubmit={save.run}>
-	<div class="flex flex-col gap-1">
-		<label for="profile-bio">Bio</label>
-		<textarea
-			id="profile-bio"
-			class={inputClass}
-			rows="3"
-			placeholder="Write a bio"
-			bind:value={description}></textarea>
-	</div>
+	<Field label="Bio" labelCase="normal">
+		{#snippet children({ id })}
+			<Textarea {id} rows={3} resizeable placeholder="Write a bio" bind:value={description} />
+		{/snippet}
+	</Field>
 
-	<div class="flex flex-col gap-1">
-		<label for="profile-pronouns">Pronouns</label>
-		<input
-			id="profile-pronouns"
-			type="text"
-			class={inputClass}
-			placeholder="they/them"
-			bind:value={pronouns}
-		/>
-	</div>
+	<Field label="Pronouns" labelCase="normal">
+		{#snippet children({ id })}
+			<Input {id} placeholder="they/them" bind:value={pronouns} />
+		{/snippet}
+	</Field>
 
-	<div class="flex flex-col gap-1">
-		<label for="profile-location">Location</label>
-		<div class="flex w-full items-center gap-2">
-			<MapPin class="size-4 shrink-0" aria-hidden="true" />
-			<input id="profile-location" type="text" class={inputClass} bind:value={location} />
-		</div>
-	</div>
+	<Field label="Location" labelCase="normal">
+		{#snippet children({ id })}
+			<Input {id} iconLeft={MapPin} bind:value={location} />
+		{/snippet}
+	</Field>
 
 	<div class="flex flex-col gap-1">
 		<span>Social links</span>
-		<label class="flex items-center gap-2 py-1">
-			<input type="checkbox" bind:checked={bluesky} />
-			Link to Bluesky account
-		</label>
+		<Checkbox class="py-1" bind:checked={bluesky}>Link to Bluesky account</Checkbox>
 		{#each links as link, index (index)}
-			<div class="flex w-full items-center gap-2">
-				<Link class="size-4 shrink-0" aria-hidden="true" />
-				<input
-					type="text"
-					class={inputClass}
-					placeholder={`Social link ${index + 1}`}
-					bind:value={link.value}
-				/>
-			</div>
+			<Input
+				iconLeft={Link}
+				placeholder={`Social link ${index + 1}`}
+				bind:value={link.value}
+			/>
 		{/each}
 	</div>
 
diff --git a/web/src/lib/components/profile/VouchButton.svelte b/web/src/lib/components/profile/VouchButton.svelte
index 4559ce9db..834b6485a 100644
--- a/web/src/lib/components/profile/VouchButton.svelte
+++ b/web/src/lib/components/profile/VouchButton.svelte
@@ -1,4 +1,43 @@
+<script module lang="ts">
+	import { tv } from "tailwind-variants";
+
+	export const choiceButton = tv({
+		base: "flex flex-col items-center gap-1 rounded-sm border p-2 transition-colors disabled:cursor-not-allowed disabled:opacity-60",
+		variants: {
+			active: {
+				true: "",
+				false: "border-border-default hover:bg-background-subtle"
+			},
+			value: {
+				vouch: "",
+				denounce: "",
+				none: ""
+			}
+		},
+		compoundVariants: [
+			{
+				active: true,
+				value: "vouch",
+				class: "border-border-success bg-background-success-subtle text-foreground-success"
+			},
+			{
+				active: true,
+				value: "denounce",
+				class: "border-border-danger bg-background-danger-subtle text-foreground-danger"
+			},
+			{
+				active: true,
+				value: "none",
+				class: "border-border-strong bg-background-subtle text-foreground-default"
+			}
+		]
+	});
+</script>
+
 <script lang="ts">
+	import { page } from "$app/state";
+	import { resolve } from "$app/paths";
+	import { loginWithReturn } from "$lib/auth/guards";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ShieldCheck from "$icon/shield-check";
 	import ShieldBan from "$icon/shield-ban";
@@ -9,6 +48,7 @@
 	import Check from "$icon/check";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import Modal from "$lib/components/ui/Modal.svelte";
+	import Textarea from "$lib/components/ui/Textarea.svelte";
 	import NetworkVouches from "./NetworkVouches.svelte";
 	import { getAuth } from "$lib/auth.svelte";
 	import { createAction } from "$lib/action.svelte";
@@ -36,6 +76,9 @@
 	const auth = getAuth();
 	const signedIn = $derived(Boolean(auth.currentDid));
 	const isSelf = $derived(auth.currentDid === profileDid);
+	const loginHref = $derived(
+		resolve(loginWithReturn(page.url.pathname + page.url.search) as "/login")
+	);
 
 	let committed = $state<{ did: string; vouch: DirectVouch | null } | null>(null);
 	const current = $derived(committed?.did === profileDid ? committed.vouch : initialVouch);
@@ -111,13 +154,14 @@
 	});
 </script>
 
-{#if !isSelf && signedIn}
+{#if !isSelf}
 	<Button
 		variant={trigger.variant}
 		class="w-full gap-2 {trigger.colorClass}"
 		icon={trigger.icon}
 		{insetShadow}
-		onclick={start}
+		href={signedIn ? undefined : loginHref}
+		onclick={signedIn ? start : undefined}
 	>
 		{trigger.text}
 	</Button>
@@ -157,16 +201,7 @@
 					onclick={() => (choice = option.value)}
 					disabled={save.loading}
 					aria-pressed={active}
-					class={[
-						"flex flex-col items-center gap-1 rounded-sm border p-2 transition-colors disabled:cursor-not-allowed disabled:opacity-60",
-						active
-							? option.value === "vouch"
-								? "border-border-success bg-background-success-subtle text-foreground-success"
-								: option.value === "denounce"
-									? "border-border-danger bg-background-danger-subtle text-foreground-danger"
-									: "border-border-strong bg-background-subtle text-foreground-default"
-							: "border-border-default hover:bg-background-subtle"
-					]}
+					class={choiceButton({ active, value: option.value })}
 				>
 					<Icon class="size-5" aria-hidden="true" />
 					<span class="typography-paragraph-small font-medium">{option.text}</span>
@@ -175,14 +210,15 @@
 		</div>
 
 		{#if choice !== "none"}
-			<textarea
+			<Textarea
 				bind:value={reason}
 				rows={2}
+				size="small"
 				maxlength={256}
+				resizeable
 				placeholder="Write a reason..."
 				disabled={save.loading}
-				class="w-full resize-y rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus-within:border-border-strong focus-within:ring-1 focus-within:ring-border-strong disabled:cursor-not-allowed disabled:opacity-60"
-			></textarea>
+			/>
 		{/if}
 
 		<ErrorAlert label={save.error} />
diff --git a/web/src/lib/components/profile/tabs/RepoListTab.svelte b/web/src/lib/components/profile/tabs/RepoListTab.svelte
index 6fc064245..ca43d0036 100644
--- a/web/src/lib/components/profile/tabs/RepoListTab.svelte
+++ b/web/src/lib/components/profile/tabs/RepoListTab.svelte
@@ -4,6 +4,7 @@
 	import { resolve } from "$app/paths";
 	import { getAuth } from "$lib/auth.svelte";
 	import { createBobbinClient } from "$lib/api/client";
+	import Input from "$lib/components/ui/Input.svelte";
 	import RepoCard from "$lib/components/repo/RepoCard.svelte";
 	import PagedList from "../PagedList.svelte";
 	import { createOffsetPager, discoveredPageCount, pageCount } from "../pagination.svelte";
@@ -25,6 +26,8 @@
 	const auth = getAuth();
 
 	let searchQuery = $derived(page.url.searchParams.get("q") ?? "");
+	let queryValue = $derived(searchQuery);
+	const hasQuery = $derived(queryValue.length > 0);
 	const pager = createOffsetPager(
 		untrack(() => initial),
 		PROFILE_PAGE_LIMIT,
@@ -63,16 +66,18 @@
 			<form class="relative flex" method="GET">
 				<input type="hidden" name="tab" value="repos" />
 				<div class="relative flex flex-1">
-					<input
-						class="peer flex-1 rounded-l border border-border-default bg-background-default py-1.5 pr-10 pl-3 outline-none focus:border-border-strong focus:ring-1 focus:ring-border-strong"
-						type="text"
+					<Input
 						name="q"
-						value={searchQuery}
+						bind:value={queryValue}
 						placeholder="Search repositories..."
+						class="rounded-l rounded-r-none pr-10 pl-3"
 					/>
 					<a
 						href={resolve(`${page.url.pathname}?tab=repos` as "/")}
-						class="absolute top-1/2 right-3 hidden -translate-y-1/2 text-foreground-subtle peer-not-placeholder-shown:block hover:text-foreground-default"
+						class={[
+							"absolute top-1/2 right-3 -translate-y-1/2 text-foreground-subtle hover:text-foreground-default",
+							hasQuery ? "block" : "hidden"
+						]}
 					>
 						<X class="size-4" />
 					</a>
diff --git a/web/src/lib/components/repo/RepoCreationForm.svelte b/web/src/lib/components/repo/RepoCreationForm.svelte
index 7da01ab3c..f2fa6e03b 100644
--- a/web/src/lib/components/repo/RepoCreationForm.svelte
+++ b/web/src/lib/components/repo/RepoCreationForm.svelte
@@ -135,15 +135,14 @@
 							<Avatar did={user?.did} handle={user?.handle} size="regular" />
 							<span>{user?.handle ?? "…"}</span>
 						</div>
-						<input
+						<Input
 							id="repo_name"
 							name="repo_name"
-							type="text"
 							placeholder="repository-name"
 							maxlength={100}
 							bind:value={name}
 							required
-							class="flex-1 rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none md:rounded-l-none md:rounded-r"
+							class="flex-1 md:rounded-l-none md:rounded-r"
 						/>
 					</div>
 					<p class="mt-1 typography-paragraph-small text-foreground-subtle">
@@ -159,14 +158,12 @@
 					>
 						Description
 					</label>
-					<input
+					<Input
 						id="repo_description"
 						name="description"
-						type="text"
 						placeholder="A brief description of your project..."
 						maxlength={140}
 						bind:value={description}
-						class="w-full rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
 					/>
 					<p class="mt-1 typography-paragraph-small text-foreground-subtle">
 						{[...description].length}/140 characters
@@ -198,13 +195,11 @@
 						>
 							Default branch
 						</label>
-						<input
+						<Input
 							id="default_branch"
 							name="branch"
-							type="text"
 							bind:value={defaultBranch}
 							required
-							class="w-full rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
 						/>
 						<p class="mt-1 typography-paragraph-small text-foreground-subtle">
 							The primary branch where development happens. Common choices are "main"
diff --git a/web/src/lib/components/strings/StringForm.svelte b/web/src/lib/components/strings/StringForm.svelte
index 27db31059..a4b309139 100644
--- a/web/src/lib/components/strings/StringForm.svelte
+++ b/web/src/lib/components/strings/StringForm.svelte
@@ -3,8 +3,12 @@
 	import type { Did } from "@atcute/lexicons/syntax";
 	import { now as tidNow } from "@atcute/tid";
 	import Button from "$lib/components/ui/Button.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
+	import Textarea from "$lib/components/ui/Textarea.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import Separator from "$lib/components/ui/Separator.svelte";
 	import ArrowUp from "$icon/arrow-up";
 	import X from "$icon/x";
 	import { getAuth } from "$lib/auth.svelte";
@@ -70,49 +74,48 @@
 	});
 </script>
 
-<div class="rounded-sm border border-border-default bg-background-default">
+<Card padding="none">
 	<form onsubmit={publish.run}>
 		<div class="flex flex-col gap-2 p-4">
 			<div class="flex flex-col gap-2 md:flex-row">
-				<input
-					type="text"
+				<Input
 					id="filename"
 					name="filename"
 					placeholder="Filename"
 					required
 					bind:value={filename}
 					disabled={publish.loading}
-					class="rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50 md:max-w-64"
+					class="md:max-w-64"
 				/>
-				<input
-					type="text"
+				<Input
 					id="description"
 					name="description"
 					placeholder="Description ..."
 					maxlength={280}
 					bind:value={description}
 					disabled={publish.loading}
-					class="flex-1 rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50"
+					class="flex-1"
 				/>
 			</div>
 
-			<textarea
+			<Textarea
 				id="content"
 				name="content"
 				placeholder="Paste your string here!"
 				required
 				rows={20}
 				spellcheck={false}
+				resizeable
 				bind:value={content}
 				disabled={publish.loading}
-				class="w-full resize-y rounded-sm border border-border-default bg-background-default p-2 typography-monospace-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50"
-			></textarea>
+				class="typography-monospace-small"
+			/>
 		</div>
 
 		<div class="flex items-center justify-between px-4 py-3">
 			<div class="typography-paragraph-small text-foreground-subtle">
 				<span>{lineCount} line{lineCount !== 1 ? "s" : ""}</span>
-				<span class="px-1 select-none">·</span>
+				<Separator variant="dot" class="px-1" />
 				<span>{byteCount} byte{byteCount !== 1 ? "s" : ""}</span>
 			</div>
 
@@ -154,4 +157,4 @@
 			</div>
 		{/if}
 	</form>
-</div>
+</Card>
diff --git a/web/src/routes/settings/profile/handle/+page.svelte b/web/src/routes/settings/profile/handle/+page.svelte
index 62db2b92c..63f79a934 100644
--- a/web/src/routes/settings/profile/handle/+page.svelte
+++ b/web/src/routes/settings/profile/handle/+page.svelte
@@ -3,7 +3,6 @@
 	import { resolve } from "$app/paths";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
-	import { inputField } from "$lib/components/ui/inputField";
 	import Toggle from "$lib/components/ui/Toggle.svelte";
 	import DrillDown from "$lib/components/settings/DrillDown.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
@@ -34,19 +33,14 @@
 			{#if ownDomain}
 				<Input id="handle" bind:value={handle} placeholder="example.com" />
 			{:else}
-				<div class={inputField({ class: "gap-0 overflow-hidden py-0 pr-0" })}>
-					<input
-						id="handle"
-						bind:value={handle}
-						placeholder="handle"
-						class="min-w-0 flex-1 bg-transparent py-1 typography-paragraph-regular outline-none placeholder:text-foreground-placeholder"
-					/>
-					<span
-						class="self-stretch border-l border-border-default bg-background-muted px-2 py-1 typography-paragraph-regular text-foreground-muted"
-					>
-						{SUFFIX}
-					</span>
-				</div>
+				<Input
+					id="handle"
+					bind:value={handle}
+					placeholder="handle"
+					suffix={SUFFIX}
+					suffixClass="self-stretch border-l border-border-default bg-background-muted px-2 py-1 text-foreground-muted"
+					class="gap-0 overflow-hidden py-0 pr-0"
+				/>
 			{/if}
 		</FormRow>
 	</SettingsList>