diff --git a/src/lib/components/Username.svelte b/src/lib/components/Username.svelte
new file mode 100644
index 0000000..27321f3
--- /dev/null
+++ b/src/lib/components/Username.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  let { id, name, value = "", disabled = false } = $props();
+</script>
+
+<label for={id} class="input input-bordered mt-2 flex items-center gap-2">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    class="h-4 w-4 opacity-70"
+  >
+    <path
+      d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"
+    />
+  </svg>
+  <input
+    {id}
+    {name}
+    type="text"
+    class="grow"
+    {value}
+    {disabled}
+    required
+    placeholder="Username"
+  />
+</label>