diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..34facd4
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,176 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+
+export default function LoginPage() {
+	const [userId, setUserId] = useState("");
+	const [password, setPassword] = useState("");
+	const [rememberId, setRememberId] = useState(false);
+	const [autoLogin, setAutoLogin] = useState(false);
+
+	function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+		e.preventDefault();
+		// TODO: 실제 인증 연동 시 이곳에서 처리
+		// 현재는 UI만 구현
+		console.log({ userId, password, rememberId, autoLogin });
+	}
+
+	return (
+		<div className="min-h-screen w-full flex flex-col items-center justify-center">
+			{/* 카드 컨테이너 */}
+			<div className="w-[480px] rounded-xl border border-[var(--color-input-border)] bg-white p-8 shadow-sm">
+				{/* 로고 영역 */}
+				<div className="mb-10 flex flex-col items-center">
+					<div className="mb-2 flex h-[54px] w-[72px] items-center justify-center rounded-md bg-[var(--color-inactive-button)]/20" />
+					<div
+						className="text-[28px] font-semibold leading-none"
+						style={{ color: "var(--color-logo-text)" }}
+					>
+						XR LMS
+					</div>
+				</div>
+
+				{/* 폼 */}
+				<form onSubmit={handleSubmit} className="space-y-6">
+					<div className="space-y-4">
+						{/* 아이디 */}
+						<div>
+							<label htmlFor="userId" className="sr-only">
+								아이디
+							</label>
+							<input
+								id="userId"
+								name="userId"
+								value={userId}
+								onChange={(e) => setUserId(e.target.value)}
+								placeholder="아이디"
+								className="h-14 w-full rounded-lg border px-4 text-[15px] outline-none transition-shadow"
+								style={{
+									borderColor: "var(--color-input-border)",
+									color: "var(--color-basic-text)",
+									// placeholder 색상
+									// Tailwind v4 arbitrary 적용이 번거로워 인라인 사용
+								}}
+								onFocus={(e) => {
+									e.currentTarget.style.boxShadow =
+										"0 0 0 2px rgba(51,60,71,0.15)";
+									e.currentTarget.style.borderColor =
+										"var(--color-input-border-select)";
+								}}
+								onBlur={(e) => {
+									e.currentTarget.style.boxShadow = "none";
+									e.currentTarget.style.borderColor =
+										"var(--color-input-border)";
+								}}
+							/>
+						</div>
+						{/* 비밀번호 */}
+						<div>
+							<label htmlFor="password" className="sr-only">
+								비밀번호
+							</label>
+							<input
+								id="password"
+								name="password"
+								type="password"
+								value={password}
+								onChange={(e) => setPassword(e.target.value)}
+								placeholder="비밀번호"
+								className="h-14 w-full rounded-lg border px-4 text-[15px] outline-none transition-shadow"
+								style={{
+									borderColor: "var(--color-input-border)",
+									color: "var(--color-basic-text)",
+								}}
+								onFocus={(e) => {
+									e.currentTarget.style.boxShadow =
+										"0 0 0 2px rgba(51,60,71,0.15)";
+									e.currentTarget.style.borderColor =
+										"var(--color-input-border-select)";
+								}}
+								onBlur={(e) => {
+									e.currentTarget.style.boxShadow = "none";
+									e.currentTarget.style.borderColor =
+										"var(--color-input-border)";
+								}}
+							/>
+						</div>
+					</div>
+
+					{/* 체크박스들 */}
+					<div className="flex items-center justify-start gap-6">
+						<label className="flex cursor-pointer select-none items-center gap-2 text-[15px]"
+							style={{ color: "var(--color-basic-text)" }}>
+							<input
+								type="checkbox"
+								checked={rememberId}
+								onChange={(e) => setRememberId(e.target.checked)}
+								className="h-[18px] w-[18px] cursor-pointer rounded border"
+								style={{
+									accentColor: "var(--color-input-border-select)",
+									borderColor: "var(--color-inactive-checkbox)",
+								}}
+							/>
+							아이디 기억하기
+						</label>
+						<label className="flex cursor-pointer select-none items-center gap-2 text-[15px]"
+							style={{ color: "var(--color-basic-text)" }}>
+							<input
+								type="checkbox"
+								checked={autoLogin}
+								onChange={(e) => setAutoLogin(e.target.checked)}
+								className="h-[18px] w-[18px] cursor-pointer rounded border"
+								style={{
+									accentColor: "var(--color-input-border-select)",
+									borderColor: "var(--color-inactive-checkbox)",
+								}}
+							/>
+							자동 로그인
+						</label>
+					</div>
+
+					{/* 로그인 버튼 */}
+					<button
+						type="submit"
+						className="h-14 w-full rounded-lg text-[16px] font-semibold text-white transition-opacity"
+						style={{ backgroundColor: "var(--color-active-button)" }}
+					>
+						로그인
+					</button>
+
+					{/* 하단 링크들 */}
+					<div className="flex items-center justify-between text-[15px]">
+						<Link
+							href="#"
+							className="underline-offset-2 hover:underline"
+							style={{ color: "var(--color-basic-text)" }}
+						>
+							회원가입
+						</Link>
+						<div
+							className="flex items-center gap-3"
+							style={{ color: "var(--color-basic-text)" }}
+						>
+							<Link href="#" className="underline-offset-2 hover:underline">
+								아이디 찾기
+							</Link>
+							<span className="h-3 w-px bg-[var(--color-input-border)]" />
+							<Link href="#" className="underline-offset-2 hover:underline">
+								비밀번호 재설정
+							</Link>
+						</div>
+					</div>
+				</form>
+			</div>
+
+			{/* 카피라이트 */}
+			<p
+				className="mt-10 text-center text-[15px]"
+				style={{ color: "var(--color-basic-text)" }}
+			>
+				Copyright ⓒ 2025 XL LMS. All rights reserved
+			</p>
+		</div>
+	);
+}
+ 
\ No newline at end of file