diff --git a/bun.lockb b/bun.lockb
index f9ae40a..f1ef47e 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 054f9cf..f820d9a 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
 		"graphql-yoga": "^5.10.4",
 		"pino": "^9.5.0",
 		"pino-pretty": "^13.0.0",
+		"tailwind-merge": "^2.5.5",
 		"zod": "^3.24.0"
 	}
 }
\ No newline at end of file
diff --git a/src/lib/components/Input.svelte b/src/lib/components/Input.svelte
index 186cc3b..4b58ee1 100644
--- a/src/lib/components/Input.svelte
+++ b/src/lib/components/Input.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
-	import type { HTMLInputTypeAttribute } from 'svelte/elements';
+	import type { HTMLAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
 
-	let {
-		label,
-		name,
-		type = 'text'
-	}: { label?: string; name: string; type?: HTMLInputTypeAttribute } = $props();
+	type InputProps = {
+		label?: string;
+		name: string;
+		type?: HTMLInputTypeAttribute;
+	} & HTMLAttributes<HTMLDivElement>;
+
+	let { label, name, type = 'text', ...props }: InputProps = $props();
 </script>
 
-<div class="hestia-input">
+<div {...props} class={twMerge('hestia-input', props.class)}>
 	{#if label}
 		<label for={name}>{label}</label>
 		<div class="line"></div>