diff --git a/fwt/components/Input/Input.sass b/fwt/components/Input/Input.sass
index fc8e6cf..391937c 100644
--- a/fwt/components/Input/Input.sass
+++ b/fwt/components/Input/Input.sass
@@ -1,3 +1,27 @@
 .input
   font-size: 1rem
   padding: 0.5rem 1rem
+  width: 100%
+  border: 2px solid #ccc
+  border-radius: 4px
+  outline: none
+  transition: border-color 0.3s, box-shadow 0.3s
+
+  &:focus
+    border-color: #3377AC
+    box-shadow: 0 0 5px rgba(51, 119, 168, 0.3)
+
+  &::placeholder
+    color: #888
+    font-style: italic
+
+  &:disabled
+    background-color: #f0f0f0
+    border-color: #ddd
+
+  &--error
+    border-color: #ff4d4f
+    box-shadow: 0 0 5px rgba(255, 77, 79, 0.3)
+
+    &:focus
+      border-color: #e81123
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
new file mode 100644
index 0000000..4cea67c
--- /dev/null
+++ b/src/components/Input/Input.tsx
@@ -0,0 +1,16 @@
+import Input from '../../../fwt/components/Input/Input'
+import { createSignal } from 'solid-js'
+import Column from '../../../fwt/components/Column/Column'
+
+const [sample, setSample] = createSignal('')
+
+export default () => {
+  return (
+    <>
+      <Column content="center">
+        <Input onChange={(val) => setSample(val)}></Input>
+        <span>{sample()}</span>
+      </Column>
+    </>
+  )
+}