diff --git a/web/src/lib/components/ui/Textarea.stories.svelte b/web/src/lib/components/ui/Textarea.stories.svelte
index 23441593..f0c6feba 100644
--- a/web/src/lib/components/ui/Textarea.stories.svelte
+++ b/web/src/lib/components/ui/Textarea.stories.svelte
@@ -1,5 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Pencil from "$icon/pencil";
+	import Sun from "$icon/sun";
 	import Textarea from "./Textarea.svelte";
 
 	const { Story } = defineMeta({
@@ -11,6 +13,7 @@
 			disabled: { control: "boolean" },
 			loading: { control: "boolean" },
 			readonly: { control: "boolean" },
+			resizeable: { control: "boolean" },
 			placeholder: { control: "text" },
 			rows: { control: "number" }
 		},
@@ -19,18 +22,21 @@
 			disabled: false,
 			loading: false,
 			readonly: false,
+			resizeable: false,
 			placeholder: "Placeholder"
 		}
 	});
 </script>
 
 <Story name="Default" />
-<Story name="Focus" args={{ autofocus: true }} />
+<Story name="Focus" args={{ autofocus: true, resizeable: false }} />
 <Story name="Filled" args={{ value: "Some notes go here" }} />
 <Story name="Error" args={{ error: true, value: "Invalid value" }} />
 <Story name="Disabled" args={{ disabled: true, value: "Can't edit this" }} />
 <Story name="Read-only" args={{ readonly: true, value: "Read-only content" }} />
 <Story name="Loading" args={{ loading: true, value: "Checking..." }} />
+<Story name="With left icon" args={{ iconLeft: Pencil, placeholder: "Write something" }} />
+<Story name="With right icon" args={{ iconRight: Sun, placeholder: "Write something" }} />
 
 <Story name="States">
 	<div class="flex w-64 flex-col gap-3">
diff --git a/web/src/lib/components/ui/Textarea.svelte b/web/src/lib/components/ui/Textarea.svelte
index b91f3c5a..da0511e4 100644
--- a/web/src/lib/components/ui/Textarea.svelte
+++ b/web/src/lib/components/ui/Textarea.svelte
@@ -2,20 +2,36 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const textareaField = tv({
-		base: "min-h-20 w-full resize-y rounded border bg-background-default px-3 py-2 text-sm transition-colors placeholder:text-foreground-placeholder focus:outline-none",
+		slots: {
+			root: "relative flex max-h-64 items-start gap-1 rounded border bg-background-default px-2.5 py-2 transition-colors",
+			textarea:
+				"min-h-24 flex-1 bg-transparent text-sm leading-6 outline-none placeholder:text-foreground-placeholder read-only:resize-none disabled:cursor-not-allowed disabled:resize-none"
+		},
 		variants: {
 			error: {
-				false:
-					"border-border-default focus:border-border-strong focus:ring-1 focus:ring-border-strong",
-				true: "border-border-danger bg-background-danger-subtle text-foreground-danger focus:border-border-focus-danger focus:ring-1 focus:ring-border-focus-danger"
+				false: {
+					root: "border-border-default focus-within:border-border-strong focus-within:ring-1 focus-within:ring-border-strong"
+				},
+				true: {
+					root: "border-border-danger bg-background-danger-subtle text-foreground-danger focus-within:border-border-focus-danger focus-within:ring-1 focus-within:ring-border-focus-danger",
+					textarea: "placeholder:text-foreground-danger"
+				}
 			},
 			disabled: {
 				false: "",
-				true: "cursor-not-allowed resize-none bg-background-inset text-foreground-disabled"
+				true: {
+					root: "cursor-not-allowed border-border-disabled bg-background-subtle text-foreground-muted"
+				}
 			},
 			readonly: {
 				false: "",
-				true: "cursor-default resize-none bg-background-subtle"
+				true: {
+					root: "cursor-default border-border-disabled bg-background-subtle text-foreground-muted"
+				}
+			},
+			resizeable: {
+				false: { textarea: "resize-none" },
+				true: { textarea: "resize-y" }
 			}
 		},
 		defaultVariants: {
@@ -29,7 +45,8 @@
 </script>
 
 <script lang="ts">
-	import type { HTMLTextareaAttributes } from "svelte/elements";
+	import type { Component } from "svelte";
+	import type { HTMLTextareaAttributes, SvelteHTMLElements } from "svelte/elements";
 	import Spinner from "./Spinner.svelte";
 
 	interface Props extends Omit<HTMLTextareaAttributes, "class" | "value"> {
@@ -38,6 +55,9 @@
 		disabled?: boolean;
 		loading?: boolean;
 		readonly?: boolean;
+		resizeable?: boolean;
+		iconLeft?: Component<SvelteHTMLElements["svg"]>;
+		iconRight?: Component<SvelteHTMLElements["svg"]>;
 		class?: string;
 	}
 
@@ -47,23 +67,33 @@
 		disabled = false,
 		loading = false,
 		readonly = false,
+		resizeable = false,
+		iconLeft,
+		iconRight,
 		class: className,
 		...rest
 	}: Props = $props();
 
-	const classes = $derived(textareaField({ error, disabled, readonly, class: className }));
+	const { root, textarea } = $derived(textareaField({ error, disabled, readonly, resizeable }));
 </script>
 
-<div class="relative">
+<div class={root({ class: className })}>
+	{#if iconLeft}
+		{@const IconLeft = iconLeft}
+		<IconLeft class="size-4 mt-0.5 mr-1 shrink-0 text-foreground-subtle" aria-hidden="true" />
+	{/if}
 	<textarea
 		bind:value
 		{disabled}
 		{readonly}
 		aria-invalid={error}
 		aria-busy={loading}
-		class={classes}
+		class={textarea({ class: loading ? "pr-5" : undefined })}
 		{...rest}></textarea>
 	{#if loading}
-		<Spinner class="absolute right-2 top-2 size-4" />
+		<Spinner class="absolute right-2.5 top-2 size-4" />
+	{:else if iconRight}
+		{@const IconRight = iconRight}
+		<IconRight class="size-4 mt-0.5 ml-1 shrink-0 text-foreground-subtle" aria-hidden="true" />
 	{/if}
 </div>