diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..999fca0afca01b8a07a0978212b0aef481f9c98b
--- /dev/null
+++ b/src/components/login-form.tsx
@@ -0,0 +1,41 @@
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+export function LoginForm({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+  return (
+    <div className={cn('flex flex-col gap-6', className)} {...props}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-2xl">로그인</CardTitle>
+          <CardDescription>아올다 통합 계정을 사용하여 로그인합니다</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form>
+            <div className="flex flex-col gap-6">
+              <div className="grid gap-2">
+                <Label htmlFor="username">사용자 이름</Label>
+                <Input id="username" type="text" placeholder="사용자 이름" required />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="password">비밀번호</Label>
+                <Input id="password" type="password" placeholder="비밀번호" required />
+              </div>
+              <Button type="submit" className="w-full">
+                로그인
+              </Button>
+            </div>
+            <div className="mt-4 text-center text-sm">
+              계정이 없으신가요?
+              <a href="#" className="ml-2 underline underline-offset-4">
+                아올다 프로젝트 신청하기
+              </a>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cddce64281e586a7facc54f37bb732f1a547fd20
--- /dev/null
+++ b/src/pages/Login.tsx
@@ -0,0 +1,11 @@
+import { LoginForm } from '@/components/login-form';
+
+export default function Page() {
+  return (
+    <div className="flex min-h-svh w-full justify-center p-6 md:p-10">
+      <div className="w-full max-w-sm">
+        <LoginForm />
+      </div>
+    </div>
+  );
+}
diff --git a/src/routes.tsx b/src/routes.tsx
index 0d9719dba1c6a69adf89094e42a2a4a7a708585c..91344997ec71ec9db0c8d244d11f7335d3af5c97 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,12 +1,14 @@
 import { Routes, Route } from 'react-router';
 import Root from '@/pages/Root';
 import Home from '@/pages/Home';
+import Login from '@/pages/Login';
 
 export default function AppRoutes() {
   return (
     <Routes>
       <Route path="/" element={<Root />}>
         <Route index element={<Home />} />
+        <Route path="login" element={<Login />} />
       </Route>
     </Routes>
   );