diff --git a/app/app/components/Login/Login.tsx b/app/app/components/Login/Login.tsx
new file mode 100644
index 0000000..0d08151
--- /dev/null
+++ b/app/app/components/Login/Login.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from "react"
+import { Flex, FormControl, Input } from "@chakra-ui/react"
+
+export const Login = (props) => {
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+
+  const handleLogin = () => {
+    // handle login
+  }
+
+  return (
+    <>
+      <Flex flexDirection="column" gap={4} width="auto">
+        <FormControl>
+          <Input
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="Email"
+            type="email"
+            value={email}
+          />
+        </FormControl>
+
+        <FormControl>
+          <Input
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Password"
+            type="password"
+            value={password}
+          />
+        </FormControl>
+
+        <Flex
+          width="100%"
+          color="white"
+          background="chakras.violet"
+          borderRadius={6}
+          cursor="pointer"
+          paddingX={5}
+          paddingY={2}
+        >
+          Login
+        </Flex>
+      </Flex>
+    </>
+  )
+}
diff --git a/app/app/routes/login.tsx b/app/app/routes/login.tsx
new file mode 100644
index 0000000..1d2fadb
--- /dev/null
+++ b/app/app/routes/login.tsx
@@ -0,0 +1,21 @@
+import { Flex } from "@chakra-ui/react"
+
+import { Login } from "~/components/Login/Login"
+
+export default function login() {
+  const template = (
+    <>
+      <Flex
+        alignItems="center"
+        justifyContent="center"
+        width="100%"
+        height="100%"
+        minHeight="100vh"
+      >
+        <Login></Login>
+      </Flex>
+    </>
+  )
+
+  return template
+}