diff --git a/backend/internal/web/ui/input.css b/backend/internal/web/ui/input.css
new file mode 100644
index 0000000..222d7fa
--- /dev/null
+++ b/backend/internal/web/ui/input.css
@@ -0,0 +1,22 @@
+.ui-input {
+  appearance: none;
+  background: var(--color-surface-default);
+  border: 1px solid var(--color-border-default);
+  border-radius: 0.75rem;
+  color: var(--color-text-primary);
+  font: inherit;
+  line-height: 1.4;
+  min-height: 44px;
+  padding: 0.75rem 0.95rem;
+  width: 100%;
+}
+
+.ui-input::placeholder {
+  color: var(--color-text-faint);
+}
+
+.ui-input:focus {
+  border-color: var(--color-brand-focus);
+  box-shadow: 0 0 0 3px var(--color-focus-ring-strong);
+  outline: none;
+}
diff --git a/backend/internal/web/ui/input.templ b/backend/internal/web/ui/input.templ
new file mode 100644
index 0000000..0245aaf
--- /dev/null
+++ b/backend/internal/web/ui/input.templ
@@ -0,0 +1,30 @@
+package ui
+
+type InputProps struct {
+	ID          string
+	Name        string
+	Value       string
+	Placeholder string
+	Type        string
+	Disabled    bool
+	Required    bool
+	Attrs       templ.Attributes
+}
+
+templ Input(props InputProps) {
+	<input
+		id={ inputID(props.ID, props.Name) }
+		type={ inputType(props.Type) }
+		name={ props.Name }
+		value={ props.Value }
+		placeholder={ props.Placeholder }
+		class="ui-input"
+		if props.Disabled {
+			disabled
+		}
+		if props.Required {
+			required
+		}
+		{ props.Attrs... }
+	/>
+}
diff --git a/backend/internal/web/ui/textarea.css b/backend/internal/web/ui/textarea.css
new file mode 100644
index 0000000..7142068
--- /dev/null
+++ b/backend/internal/web/ui/textarea.css
@@ -0,0 +1,23 @@
+.ui-textarea {
+  appearance: none;
+  background: var(--color-surface-default);
+  border: 1px solid var(--color-border-default);
+  border-radius: 0.75rem;
+  color: var(--color-text-primary);
+  font: inherit;
+  line-height: 1.4;
+  min-height: 7rem;
+  padding: 0.85rem 0.95rem;
+  resize: vertical;
+  width: 100%;
+}
+
+.ui-textarea::placeholder {
+  color: var(--color-text-faint);
+}
+
+.ui-textarea:focus {
+  border-color: var(--color-brand-focus);
+  box-shadow: 0 0 0 3px var(--color-focus-ring-strong);
+  outline: none;
+}
diff --git a/backend/internal/web/ui/textarea.templ b/backend/internal/web/ui/textarea.templ
new file mode 100644
index 0000000..74c6216
--- /dev/null
+++ b/backend/internal/web/ui/textarea.templ
@@ -0,0 +1,29 @@
+package ui
+
+type TextareaProps struct {
+	ID          string
+	Name        string
+	Value       string
+	Placeholder string
+	Rows        int
+	Disabled    bool
+	Required    bool
+	Attrs       templ.Attributes
+}
+
+templ Textarea(props TextareaProps) {
+	<textarea
+		id={ inputID(props.ID, props.Name) }
+		name={ props.Name }
+		placeholder={ props.Placeholder }
+		rows={ textareaRows(props.Rows) }
+		class="ui-textarea"
+		if props.Disabled {
+			disabled
+		}
+		if props.Required {
+			required
+		}
+		{ props.Attrs... }
+	>{ props.Value }</textarea>
+}
diff --git a/backend/tailwind.input.css b/backend/tailwind.input.css
index c4d4ac6..7e17912 100644
--- a/backend/tailwind.input.css
+++ b/backend/tailwind.input.css
@@ -7,5 +7,7 @@
 @import "./internal/web/ui/base.css";
 @import "./internal/web/ui/auth.css";
 @import "./internal/web/ui/button.css";
-@import "./internal/web/ui/card.css";
 @import "./internal/web/ui/badge.css";
+@import "./internal/web/ui/card.css";
+@import "./internal/web/ui/input.css";
+@import "./internal/web/ui/textarea.css";