diff --git a/src/components/ui/Input.module.scss b/src/components/ui/Input.module.scss
new file mode 100644
index 0000000..192f0a4
--- /dev/null
+++ b/src/components/ui/Input.module.scss
@@ -0,0 +1 @@
+@reference "../../index.scss";
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
new file mode 100644
index 0000000..7beb4b5
--- /dev/null
+++ b/src/components/ui/Input.tsx
@@ -0,0 +1,17 @@
+import { FunctionComponent } from "preact";
+import { tv } from "tailwind-variants";
+
+const input = tv({
+  base: "rounded-md border border-gray-300 p-2",
+});
+
+interface InputProps {
+  isPassword?: boolean;
+  placeholder?: string;
+}
+
+const Input: FunctionComponent<InputProps> = ({ isPassword = false, placeholder = "" }: InputProps) => {
+  return <input type={isPassword ? "password" : "text"} class={input()} placeholder={placeholder} />;
+};
+
+export default Input;
diff --git a/src/pages/login.module.scss b/src/pages/login.module.scss
new file mode 100644
index 0000000..8acccad
--- /dev/null
+++ b/src/pages/login.module.scss
@@ -0,0 +1,5 @@
+@reference "../index.scss";
+
+.login_container {
+  @apply flex flex-row justify-center gap-2 align-middle;
+}
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
new file mode 100644
index 0000000..0042254
--- /dev/null
+++ b/src/pages/login.tsx
@@ -0,0 +1,15 @@
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
+import { FunctionComponent } from "preact";
+import classes from "./login.module.scss";
+const LoginPage: FunctionComponent = () => {
+  return (
+    <div class={classes.login_container}>
+      <Input placeholder="Login" />
+      <Input isPassword placeholder="Password" />
+      <Button onClick={() => {}}>Login</Button>
+    </div>
+  );
+};
+
+export default LoginPage;