diff --git a/app/login/page.tsx b/app/login/page.tsx
index 2388020..715ed38 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -38,7 +38,7 @@ export default function LoginPage() {
           </div>
 
           {/* 체크박스 */}
-          <div className="flex items-center space-x-4">
+          <div className="flex items-center space-x-4 justify-start">
             <label className="flex items-center">
               <input type="checkbox" className="mr-2" />
               <span className="text-sm">아이디 기억하기</span>
diff --git a/app/page.tsx b/app/page.tsx
index fe86d48..d7dacaa 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,452 +1,164 @@
 "use client";
 
 import Link from "next/link";
-import { useState } from "react";
 
 // 이미지 상수
-const logoImage = "/logo.png";
-const chevronIcon = "/chevron.svg";
-const heroImage = "http://localhost:3845/assets/02d8c5116625dec34c335abdf02727a333ee1e42.png";
-const lineIcon = "http://localhost:3845/assets/2fbce31172577fb51bb8028f779906af08a2aef0.svg";
+const imgLogo = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
 
-// 과목 이미지들
-const courseImages = [
-  "http://localhost:3845/assets/dbcdb3a62893cc1bbf618aaa03d3991209730907.png",
-  "http://localhost:3845/assets/926321498bba6094d98b0306e038328654b5e72c.png",
-  "http://localhost:3845/assets/27a46837f82b972822bc9dc0c568d32bf2ff368a.png",
-  "http://localhost:3845/assets/603bee236c3ff989d503608d3ebe12eea354fefb.png",
-  "http://localhost:3845/assets/b7e4617653e0115d927ad34a0c2e4e7be0cbb3df.png",
-];
-
-const courses = [
-  { title: "원자로 운전 및 계통", image: courseImages[0], hasNew: true },
-  { title: "방사선 안전", image: courseImages[1], hasNew: true },
-  { title: "핵 연료", image: courseImages[2], hasNew: true },
-  { title: "방사선 안전", image: courseImages[3], hasNew: false },
-  { title: "방사성 폐기물", image: courseImages[4], hasNew: false },
-];
-
-export default function Home() {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
-  const [isCourseExpanded, setIsCourseExpanded] = useState(false);
-  const [isMoreExpanded, setIsMoreExpanded] = useState(false);
-  const [isNoticeExpanded, setIsNoticeExpanded] = useState(false);
+type CheckboxProps = {
+  className?: string;
+  status?: "Inactive" | "Focused" | "Disabled";
+};
 
+function Checkbox({ className, status = "Inactive" }: CheckboxProps) {
   return (
-    <div className="flex flex-col flex-1 bg-white items-center">
-      {/* 헤더 */}
-      <header className="border-b border-black/10 w-full">
-        <div className="max-w-full mx-auto px-16">
-          <div className="flex items-center justify-between h-[95px] py-6 gap-4">
-            {/* 로고/메뉴 그룹 */}
-            <div className="flex items-center gap-9 flex-1">
-              {/* Company 로고 */}
-              <div className="flex items-center gap-2">
-                <div className="h-9 relative w-[46.703px]">
-                  <img
-                    alt="XR LMS Logo"
-                    className="h-full w-full object-contain"
-                    src={logoImage}
-                  />
-                </div>
-                <h1 className="text-2xl font-bold text-black leading-[1.45] whitespace-pre">XR LMS</h1>
-              </div>
+    <div className={className}>
+      <div className="absolute border border-[#b9b9b9] border-solid left-0 rounded-[4px] size-[18px] top-0" />
+    </div>
+  );
+}
 
-              {/* 네비게이션 메뉴 */}
-              <nav className="hidden md:flex items-center">
-                <div className="flex gap-0.5">
-                  <Link href="#" className="px-4 py-2 text-[#111111] font-bold text-base hover:text-blue-600 transition">
-                    과목 목록
-                  </Link>
-                  <Link href="#" className="px-4 py-2 text-[#111111] font-bold text-base hover:text-blue-600 transition">
-                    학습 자료실
-                  </Link>
-                  <Link href="#" className="px-4 py-2 text-[#111111] font-bold text-base hover:text-blue-600 transition">
-                    공지사항
-                  </Link>
-                  <Link href="#" className="px-4 py-2 text-[#111111] font-bold text-base hover:text-blue-600 transition">
-                    기관소개
-                  </Link>
-                  <Link href="#" className="px-4 py-2 text-[#111111] font-bold text-base hover:text-blue-600 transition">
-                    교육소개
-                  </Link>
-                </div>
-              </nav>
-            </div>
-
-            {/* 사용자 메뉴 그룹 */}
-            <nav className="flex items-center gap-6 shrink-0">
-              <div className="hidden md:flex items-center gap-6">
-                <Link
-                  href="#"
-                  className="px-4 py-2 text-[#5f5f5f] font-bold text-base hover:text-blue-600 transition h-9 flex items-center"
-                >
-                  내 강의실
-                </Link>
-                <div className="relative">
-                  <button
-                    onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
-                    className="flex items-center gap-1 px-4 py-2 text-[#5f5f5f] font-bold text-base hover:text-blue-600 transition h-9"
-                  >
-                    <span>조유주</span>
-                    <div className={`transition-transform duration-200 ${isUserMenuOpen ? 'rotate-180' : ''}`}>
-                      <img
-                        src={chevronIcon}
-                        alt="chevron"
-                        className="w-6 h-6"
-                      />
-                    </div>
-                  </button>
-                  {/* 사용자 메뉴 드롭다운 */}
-                  {isUserMenuOpen && (
-                    <div className="absolute right-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-lg py-0 min-w-[160px] overflow-hidden">
-                      <Link href="#" className="block px-2 py-2.5 text-[#333c47] font-semibold text-base hover:bg-gray-100 transition">
-                        내 정보 수정
-                      </Link>
-                      <Link href="#" className="block px-2 py-2.5 text-[#333c47] font-semibold text-base hover:bg-gray-100 transition">
-                        로그아웃
-                      </Link>
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {/* 모바일 햄버거 메뉴 아이콘 */}
-              <button
-                className="md:hidden p-2 text-gray-700 hover:text-blue-600 transition"
-                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-                aria-label="메뉴"
-              >
-                <svg
-                  className="w-6 h-6"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  {isMobileMenuOpen ? (
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M6 18L18 6M6 6l12 12"
-                    />
-                  ) : (
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M4 6h16M4 12h16M4 18h16"
-                    />
-                  )}
-                </svg>
-              </button>
-            </nav>
-          </div>
-
-          {/* 모바일 메뉴 */}
-          {isMobileMenuOpen && (
-            <div className="md:hidden border-t border-gray-200 py-4">
-              <nav className="flex flex-col space-y-4">
-                <Link href="#" className="text-gray-700 hover:text-blue-600 transition px-2 font-bold">과목 목록</Link>
-                <Link href="#" className="text-gray-700 hover:text-blue-600 transition px-2 font-bold">학습 자료실</Link>
-                <Link href="#" className="text-gray-700 hover:text-blue-600 transition px-2 font-bold">공지사항</Link>
-                <Link href="#" className="text-gray-700 hover:text-blue-600 transition px-2 font-bold">기관소개</Link>
-                <Link href="#" className="text-gray-700 hover:text-blue-600 transition px-2 font-bold">교육소개</Link>
-                <div className="pt-4 border-t border-gray-200 flex flex-col space-y-2">
-                  <Link
-                    href="#"
-                    className="px-4 py-2 text-gray-700 hover:text-blue-600 transition font-bold"
-                  >
-                    내 강의실
-                  </Link>
-                  <Link
-                    href="#"
-                    className="px-4 py-2 text-gray-700 hover:text-blue-600 transition font-bold"
-                  >
-                    조유주
-                  </Link>
-                </div>
-              </nav>
-            </div>
-          )}
-        </div>
-      </header>
-
-      {/* 메인 콘텐츠 영역 - Hero 배너 + 사이드바 */}
-      <div className="flex gap-8 items-start justify-center pt-8 pb-0 px-16 w-full">
-        {/* Hero 배너 */}
-        <div className="flex-1 min-h-0 overflow-hidden relative rounded-xl self-stretch">
-          <div className="absolute inset-0">
-            <img
-              alt="Hero Banner"
-              className="absolute inset-0 max-w-none object-cover w-full h-full"
-              src={heroImage}
-            />
-          </div>
-          <div className="absolute bottom-[60px] left-1/2 -translate-x-1/2 flex flex-col gap-2 items-start text-white text-center w-[496px]">
-            <p className="relative text-[32px] font-bold text-nowrap tracking-[-0.32px] whitespace-pre">
-              미래 에너지, 안전의 길을 열다
-            </p>
-            <p className="min-w-full relative text-2xl tracking-[-0.24px] w-min">
-              지속 가능한 내일을 만들어가는 여정, 지금 시작하세요.
-            </p>
-          </div>
-        </div>
-
-        {/* 사이드바 */}
-        <div className="flex flex-col gap-3 items-start shrink-0 w-[460px]">
-          {/* 나의 수강현황 */}
-          <div className="bg-white border border-black/10 rounded-xl w-full">
-            <div className="flex flex-col items-start overflow-hidden rounded-inherit w-full">
-              <div className="flex flex-col gap-6 items-start justify-center pb-8 pt-6 px-6 w-full">
-                <div className="flex flex-col gap-5 items-start w-full">
-                  <div className="flex gap-2 items-center">
-                    <p className="font-bold leading-[1.5] text-[#333c47] text-base tracking-[-0.16px] whitespace-pre">
-                      나의 수강현황
-                    </p>
-                  </div>
-                  <div className="flex gap-3 items-center justify-center w-full">
-                    {[
-                      { value: "4", label: "수강중" },
-                      { value: "12", label: "수강 완료" },
-                      { value: "8", label: "학습 제출" },
-                      { value: "4", label: "수료증" },
-                    ].map((stat, idx) => (
-                      <div key={idx} className="flex-1 flex flex-col gap-1 items-center justify-center">
-                        <div className="bg-[rgba(222,225,230,0.2)] flex flex-col gap-6 h-20 items-center justify-center px-4 py-2 rounded-xl w-[92px]">
-                          <p className="font-extrabold leading-[1.5] text-[#3230e2] text-[28px] text-nowrap">
-                            {stat.value}
-                          </p>
-                        </div>
-                        <p className="font-semibold leading-[1.5] text-[#333c47] text-[15px] text-nowrap">
-                          {stat.label}
-                        </p>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* 최근 수강 과목 */}
-          <div className="bg-white border border-black/10 rounded-xl w-full">
-            <div className="flex flex-col items-start overflow-hidden rounded-inherit w-full">
-              <div className="flex flex-col gap-6 items-start justify-center pb-8 pt-6 px-6 w-full">
-                <div className="flex flex-col gap-5 items-start w-full">
-                  <div className="flex gap-2 items-center">
-                    <p className="font-bold leading-[1.5] text-[#333c47] text-base tracking-[-0.16px] whitespace-pre">
-                      최근 수강 과목
-                    </p>
-                  </div>
-                  <div className="flex flex-col gap-3 items-start w-full">
-                    <div className="bg-[#f8f9fa] flex items-start justify-between p-3 rounded-lg w-full">
-                      <div className="flex-1 flex gap-1 items-center">
-                        <div className="flex flex-col gap-1 items-start justify-center text-black text-[15px]">
-                          <h5 className="block font-semibold leading-[1.2] text-nowrap whitespace-pre">
-                            원자로 운전 및 계통
-                          </h5>
-                          <h5 className="block font-normal leading-[1.2] text-nowrap whitespace-pre">
-                            2. 원자로 냉각재 계통 (RCS) 및 열수력
-                          </h5>
-                        </div>
-                      </div>
-                      <button
-                        onClick={() => setIsCourseExpanded(!isCourseExpanded)}
-                        className="flex items-center justify-center shrink-0"
-                      >
-                        <div className={`transition-transform duration-200 ${isCourseExpanded ? 'rotate-180' : ''}`}>
-                          <img src={chevronIcon} alt="chevron" className="w-6 h-6" />
-                        </div>
-                      </button>
-                    </div>
-                    <div className="flex items-center justify-between w-full">
-                      <div className="flex gap-10 items-start">
-                        <p className="font-medium leading-[18px] text-[15px]">
-                          <span className="text-black/50">진도율: </span>40%
-                        </p>
-                      </div>
-                      <button className="bg-[#3230e2] flex gap-2 h-10 items-center justify-center px-4 py-3 rounded-lg">
-                        <div className="flex gap-1 items-center justify-center">
-                          <p className="font-medium leading-[1.5] text-base text-white tracking-[-0.16px] whitespace-pre">
-                            이어서 수강하기
-                          </p>
-                        </div>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+export default function LoginPage() {
+  return (
+    <div className="bg-white min-h-screen flex flex-col items-center justify-center py-8">
+      {/* 로고 */}
+      <div className="mb-16 w-[179px] h-[185px] flex items-center justify-center">
+        <div className="relative w-full h-full overflow-hidden pointer-events-none">
+          <img
+            alt="Logo"
+            className="absolute h-[291.74%] left-[-100%] max-w-none top-[-95.73%] w-[301.18%]"
+            src={imgLogo}
+          />
         </div>
       </div>
 
-      {/* 전체 과목 리스트 */}
-      <div className="flex flex-col items-start px-0 py-16 w-full max-w-[1792px]">
-        <div className="flex h-[60px] items-center justify-between w-full">
-          <div className="flex flex-col h-[44px] items-center">
-            <div className="flex gap-2.5 h-[42px] items-center justify-center px-0.5 py-0 text-center text-nowrap w-full whitespace-pre">
-              <p className="font-bold leading-[1.7] text-[20px] text-[#1f1f1f] tracking-[-0.2px]">
-                전체 과목
+      {/* 콘텐츠 영역 */}
+      <div className="flex flex-col gap-[54px] items-center w-full max-w-[480px] px-4">
+        {/* 입력 폼 영역 */}
+        <div className="flex flex-col gap-[20px] items-start w-full">
+          {/* 아이디 입력 필드 */}
+          <div className="flex flex-col gap-[8px] items-center w-full">
+            <div className="flex flex-col gap-[4px] items-center w-full">
+              <div className="bg-white border border-[#b9b9b9] border-solid relative rounded-[8px] w-full">
+                <div className="box-border flex gap-[10px] items-center px-[16px] py-[10px] rounded-[inherit] w-full">
+                  <input
+                    type="text"
+                    placeholder="아이디(이메일)"
+                    className="basis-0 font-['Pretendard_Variable',sans-serif] grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[16px] text-[#b9b9b9] w-full outline-none bg-transparent"
+                    style={{ fontVariationSettings: "'wght' 500" }}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 비밀번호 입력 필드 */}
+          <div className="flex flex-col gap-[8px] items-center w-full">
+            <div className="flex flex-col gap-[4px] items-center rounded-[8px] w-full">
+              <div className="bg-white border border-[#b9b9b9] border-solid relative rounded-[8px] w-full">
+                <div className="box-border flex gap-[10px] items-center px-[16px] py-[10px] rounded-[inherit] w-full">
+                  <input
+                    type="password"
+                    placeholder="비밀번호"
+                    className="basis-0 font-['Pretendard_Variable',sans-serif] grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[16px] text-[#b9b9b9] w-full outline-none bg-transparent"
+                    style={{ fontVariationSettings: "'wght' 500" }}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 체크박스 영역 */}
+          <div className="flex gap-[46px] items-center justify-start w-full">
+            <div className="flex gap-[10px] items-center">
+              <Checkbox className="relative shrink-0 size-[18px]" />
+              <p
+                className="font-['Pretendard_Variable',sans-serif] leading-[1.6] not-italic relative shrink-0 text-[14px] text-[#515151] whitespace-pre"
+                style={{ fontVariationSettings: "'wght' 500" }}
+              >
+                아이디 기억하기
               </p>
-              <p className="font-normal leading-[1.5] text-[#030774] text-[19px] tracking-[-0.19px]">
-                4
+            </div>
+            <div className="flex gap-[10px] items-center">
+              <Checkbox className="relative shrink-0 size-[18px]" />
+              <p
+                className="font-['Pretendard_Variable',sans-serif] leading-[1.6] not-italic relative shrink-0 text-[14px] text-[#515151] whitespace-pre"
+                style={{ fontVariationSettings: "'wght' 500" }}
+              >
+                자동 로그인
               </p>
             </div>
           </div>
+        </div>
+
+        {/* 로그인 버튼 */}
+        <div className="flex flex-col gap-[16px] items-center w-full">
           <button
-            onClick={() => setIsMoreExpanded(!isMoreExpanded)}
-            className="flex gap-0.5 items-center"
+            type="submit"
+            className="bg-[#2b82e8] box-border flex gap-[10px] items-center justify-center px-[120px] py-[13px] rounded-[8px] w-full hover:bg-[#1e6bc7] transition-colors"
           >
-            <p className="font-semibold leading-[1.6] text-[14px] text-[#6e6e6e] text-nowrap tracking-[-0.14px]">
-              더보기
+            <p
+              className="font-['Pretendard_Variable',sans-serif] leading-[1.6] not-italic relative shrink-0 text-[16px] text-white text-center whitespace-pre"
+              style={{ fontVariationSettings: "'wght' 700" }}
+            >
+              로그인
             </p>
-            <div className={`overflow-hidden shrink-0 w-4 h-4 transition-transform duration-200 ${isMoreExpanded ? 'rotate-180' : ''}`}>
-              <img src={chevronIcon} alt="chevron" className="block max-w-none w-full h-full" />
-            </div>
           </button>
         </div>
-        <div className="flex gap-8 items-center justify-center w-full">
-          {courses.map((course, idx) => (
-            <div key={idx} className="flex-1 flex flex-col gap-4 items-start rounded-lg">
-              <div className="h-[230px] overflow-hidden relative rounded-xl w-full">
-                <div className="absolute inset-0">
-                  <img
-                    alt={course.title}
-                    className="absolute inset-0 max-w-none object-cover w-full h-full"
-                    src={course.image}
-                  />
-                </div>
-                {course.hasNew && (
-                  <div className="absolute bg-[#fd0a0a] flex flex-col gap-2.5 items-center justify-center p-2.5 right-[-166.2px] rounded-full w-8 h-8 top-2.5">
-                    <p className="font-extrabold leading-[1.45] text-base text-white w-full">
-                      N
-                    </p>
-                  </div>
-                )}
-              </div>
-              <div className="flex flex-col gap-1 items-start text-black w-full">
-                <h5 className="block font-semibold text-[17px] w-full leading-[1.2]">
-                  {course.title}
-                </h5>
-                <p className="font-medium text-[#7a7c85] text-sm tracking-[-0.07px] w-full leading-[1.45]">
-                  영상 44개 · 총 12시간 56분
-                </p>
-              </div>
-            </div>
-          ))}
-        </div>
       </div>
 
-      {/* 공지사항 */}
-      <div className="flex flex-col items-start w-full">
-        <div className="bg-[#f2f3f7] flex items-center justify-center px-16 py-12 rounded-xl w-full">
-          <div className="flex-1 flex gap-8 items-start">
-            <div className="flex flex-col items-start shrink-0">
-              <div className="flex flex-col h-[44px] justify-center text-[#333c47] text-[19px] text-center tracking-[-0.19px] w-[66px]">
-                <p className="font-bold leading-[1.5]">공지사항</p>
-              </div>
-              <button
-                onClick={() => setIsNoticeExpanded(!isNoticeExpanded)}
-                className="flex gap-0.5 items-center"
-              >
-                <p className="font-semibold leading-[1.6] text-[14px] text-[#6e6e6e] text-nowrap tracking-[-0.14px]">
-                  목록보기
-                </p>
-                <div className={`overflow-hidden shrink-0 w-4 h-4 transition-transform duration-200 ${isNoticeExpanded ? 'rotate-180' : ''}`}>
-                  <img src={chevronIcon} alt="chevron" className="block max-w-none w-full h-full" />
-                </div>
-              </button>
-            </div>
-            <div className="flex-1 flex flex-col items-start">
-              {[
-                { category: "점검", title: "방사선 폐기 VR 실습 서버 정기점검 안내", date: "2025. 12. 12. (화)" },
-                { category: "점검", title: "방사선 폐기 VR 실습 서버 정기점검 안내", date: "2025. 12. 12. (화)" },
-                { category: "점검", title: "방사선 폐기 VR 실습 서버 정기점검 안내", date: "2025. 12. 12. (화)" },
-              ].map((notice, idx) => (
-                <div
-                  key={idx}
-                  className={`flex gap-2 h-11 items-center px-2 py-3 w-full ${idx < 2 ? 'border-b border-black/10' : ''}`}
-                >
-                  <div className="bg-[#030774] flex gap-2.5 items-center justify-center px-2 py-1 rounded-lg shrink-0">
-                    <p className="font-semibold leading-normal text-[13px] text-white text-nowrap whitespace-pre">
-                      {notice.category}
-                    </p>
-                  </div>
-                  <p className="flex-1 font-medium leading-normal min-w-0 text-[#515151] text-base">
-                    {notice.title}
-                  </p>
-                  <p className="font-medium leading-normal text-[#515151] text-base text-nowrap text-right whitespace-pre">
-                    {notice.date}
-                  </p>
-                </div>
-              ))}
-            </div>
-          </div>
+      {/* 하단 링크 영역 */}
+      <div className="mt-8 flex gap-[6px] items-center justify-center flex-wrap">
+        <Link
+          href="/registeragreement"
+          className="box-border flex gap-[10px] h-[46px] items-center justify-center py-[13px] hover:opacity-80 transition-opacity"
+        >
+          <p
+            className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
+            style={{ fontVariationSettings: "'wght' 500" }}
+          >
+            회원가입
+          </p>
+        </Link>
+        <div className="box-border flex gap-[10px] h-[46px] items-center justify-center px-0 py-[13px] shrink-0">
+          <p
+            className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
+            style={{ fontVariationSettings: "'wght' 500" }}
+          >
+            |
+          </p>
         </div>
+        <button className="box-border flex gap-[10px] h-[46px] items-center justify-center py-[13px] shrink-0 hover:opacity-80 transition-opacity cursor-pointer">
+          <p
+            className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
+            style={{ fontVariationSettings: "'wght' 500" }}
+          >
+            아이디 찾기
+          </p>
+        </button>
+        <div className="box-border flex gap-[10px] h-[46px] items-center justify-center px-0 py-[13px] shrink-0">
+          <p
+            className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
+            style={{ fontVariationSettings: "'wght' 500" }}
+          >
+            |
+          </p>
+        </div>
+        <button className="box-border flex gap-[10px] h-[46px] items-center justify-center py-[13px] shrink-0 hover:opacity-80 transition-opacity cursor-pointer">
+          <p
+            className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
+            style={{ fontVariationSettings: "'wght' 500" }}
+          >
+            비밀번호 재설정
+          </p>
+        </button>
+      </div>
 
-        {/* 푸터 */}
-        <footer className="bg-[#030774] border-t border-black/10 w-full">
-          <div className="flex gap-24 items-center justify-center overflow-hidden px-16 py-0 rounded-inherit w-full">
-            <div className="flex-1 flex gap-8 items-start px-0 py-20">
-              <nav className="flex-1 flex gap-8 items-start">
-                <div className="flex flex-col gap-2 items-center shrink-0">
-                  <div className="h-[54px] relative shrink-0 w-[72px]">
-                    <img alt="Logo" className="absolute inset-0 max-w-none w-full h-full" src={logoImage} />
-                  </div>
-                  <div className="flex flex-col font-extrabold justify-center text-base text-white text-nowrap tracking-[-0.08px]">
-                    <p className="leading-[1.45] whitespace-pre">XL LMS</p>
-                  </div>
-                </div>
-                <div className="flex-1 flex flex-col gap-6 items-start justify-end">
-                  <div className="flex gap-6 items-center">
-                    <p className="font-semibold leading-[1.45] text-base text-white text-nowrap tracking-[-0.08px]">
-                      이용 약관
-                    </p>
-                    <div className="flex items-center justify-center w-[18px] h-0">
-                      <div className="rotate-90">
-                        <div className="h-0 relative w-[18px]">
-                          <img alt="line" className="block max-w-none w-full h-full" src={lineIcon} />
-                        </div>
-                      </div>
-                    </div>
-                    <p className="font-semibold leading-[1.45] text-base text-white text-nowrap tracking-[-0.08px]">
-                      개인정보처리방침
-                    </p>
-                    <div className="flex items-center justify-center w-[18px] h-0">
-                      <div className="rotate-90">
-                        <div className="h-0 relative w-[18px]">
-                          <img alt="line" className="block max-w-none w-full h-full" src={lineIcon} />
-                        </div>
-                      </div>
-                    </div>
-                    <p className="font-semibold leading-[1.45] text-base text-white text-nowrap tracking-[-0.08px]">
-                      고객센터
-                    </p>
-                  </div>
-                  <div className="flex gap-6 items-end justify-end text-base text-white/80 text-nowrap tracking-[-0.08px] w-full">
-                    <div className="flex-1 flex flex-col gap-2 items-start">
-                      <p className="leading-[1.45] text-nowrap whitespace-pre font-medium">
-                        (12345) 서울특별시 광진구 구의동 123-12(구의타워1)
-                      </p>
-                      <p className="leading-[1.45] text-nowrap whitespace-pre font-medium">
-                        문의: 1234-1234 (평일 09:00 ~ 18:00)
-                      </p>
-                      <p className="leading-[1.45] text-nowrap whitespace-pre font-medium">
-                        이메일: qwer1234@go.or.kr
-                      </p>
-                    </div>
-                    <p className="font-medium leading-[1.45] text-nowrap whitespace-pre">
-                      Copyright ⓒ 2025 XL LMS. All rights reserved
-                    </p>
-                  </div>
-                </div>
-              </nav>
-            </div>
-          </div>
-        </footer>
+      {/* 카피라이트 */}
+      <div className="mt-8 flex flex-col font-['Pretendard','Noto_Sans',sans-serif] justify-center text-[16px] text-[rgba(0,0,0,0.55)] text-center tracking-[-0.08px]">
+        <p className="leading-[1.45] whitespace-pre" style={{ fontVariationSettings: "'CTGR' 0, 'wdth' 100, 'wght' 500" }}>
+          Copyright ⓒ 2025 XL LMS. All rights reserved
+        </p>
       </div>
     </div>
   );
diff --git a/public/hero.png b/public/hero.png
new file mode 100644
index 0000000..7dabfbd
Binary files /dev/null and b/public/hero.png differ