diff --git a/src/ui/Button.svelte b/src/ui/Button.svelte
index 89180fd..d51bb11 100644
--- a/src/ui/Button.svelte
+++ b/src/ui/Button.svelte
@@ -14,7 +14,7 @@
 	};
 </script>
 
-<div class="w-auto m-2 {class_div}">
+<div class={class_div !== "" ? class_div : "w-auto m-2"}>
 	<button
 		on:click={async () => {
 			is_hover = false;
@@ -34,14 +34,18 @@
 		on:blur={() => {
 			is_hover = false;
 		}}
-		class="w-full py-1 px-2
+		class="
+		{class_name !== ''
+			? class_name
+			: `
+		w-full py-1 px-2
 		flex justify-center items-center
 		text-[var(--w-text)] dark:text-[var(--b-text)] text-xl
-		{is_border ? 'border-2' : 'border-0'}
+		${is_border ? 'border-2' : 'border-0'}
 		border-[var(--w-border)] dark:border-[var(--b-border)] rounded-xl
-		text-[var(--w-text)] dark:text-[var(--b-text)]
-		{is_hover ? 'opacity-80' : 'opacity-100'}
-		{colors[color]} {class_name}
+		text-[var(--w-text)] dark:text-[var(--b-text)]`}
+		${is_hover ? 'opacity-80' : 'opacity-100'}
+		{colors[color]}
 		transition-all duration-100"
 	>
 		<slot></slot>
diff --git a/src/ui/form/Input.svelte b/src/ui/form/Input.svelte
index 9e21688..df78ba8 100644
--- a/src/ui/form/Input.svelte
+++ b/src/ui/form/Input.svelte
@@ -9,7 +9,7 @@ ${is_border ? "border-2" : "border-0"}
 text-[var(--w-text)] dark:text-[var(--b-text)]
 border-[var(--w-border)] dark:border-[var(--b-border)] rounded-xl`;
 
-	/** @type {'text' | 'password'}*/
+	/** @type {'text' | 'password' | 'number'}*/
 	export let type = "text";
 </script>
 
@@ -20,6 +20,13 @@ border-[var(--w-border)] dark:border-[var(--b-border)] rounded-xl`;
 		{placeholder}
 		class="{d_class} {class_name}"
 	/>
+{:else if type === "number"}
+	<input
+		type="number"
+		bind:value
+		{placeholder}
+		class="{d_class} {class_name}"
+	/>
 {:else}
 	<input
 		type="text"
diff --git a/src/ui/form/TextArea.svelte b/src/ui/form/TextArea.svelte
index 9ad2f1b..ac5630c 100644
--- a/src/ui/form/TextArea.svelte
+++ b/src/ui/form/TextArea.svelte
@@ -5,13 +5,14 @@
 	export let is_border = true;
 	export let is_resize = true;
 	export let class_name = "";
+	export let min_h = "40px";
 	let tx;
 	function resize() {
 		setTimeout(() => {
 			tx.style.height = tx.scrollHeight + "px";
 			const sh = Number(tx.scrollHeight);
 			if (sh <= 60 || value === "") {
-				tx.style.height = "40px";
+				tx.style.height = min_h;
 			} else {
 				tx.style.height = "auto";
 				tx.style.height = tx.scrollHeight + "px";
@@ -31,14 +32,16 @@
 	bind:value
 	bind:this={tx}
 	{placeholder}
-	class="p-2 m-2 h-auto min-h-0
+	class="
+	{class_name !== ''
+		? class_name
+		: `p-2 m-2 h-auto min-h-0
 	overflow-y-hidden
 	focus-visible:outline-none
 	bg-[var(--w-bg)] dark:bg-[var(--b-bg)]
-	{is_border ? 'border-2' : 'border-0'}
+	${is_border ? 'border-2' : 'border-0'}
 	text-[var(--w-text)] dark:text-[var(--b-text)]
 	border-[var(--w-border)] dark:border-[var(--b-border)] rounded-xl
-	{is_resize ? '' : 'resize-none'}
-	transition-all
-	{class_name}"
+	${is_resize ? '' : 'resize-none'}
+	transition-all`}"
 ></textarea>