diff --git a/app/page.tsx b/app/page.tsx
index 9901120..50a521c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,19 +3,41 @@
 import Link from "next/link";
 import { useState } from "react";
 
+// 이미지 상수
 const logoImage = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
 const chevronIcon = "http://localhost:3845/assets/6abc26b721560f9d3c51cf552531775f54f2f86a.svg";
+const heroImage = "http://localhost:3845/assets/02d8c5116625dec34c335abdf02727a333ee1e42.png";
+const chevronIcon1 = "http://localhost:3845/assets/ad74d16bce8358831f1349a912d7e02bb0efaa84.svg";
+const chevronIcon2 = "http://localhost:3845/assets/f671b394255e49d772f588cdc8bd6e9dfd423281.svg";
+const lineIcon = "http://localhost:3845/assets/2fbce31172577fb51bb8028f779906af08a2aef0.svg";
+
+// 과목 이미지들
+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);
 
   return (
-    <div className="flex flex-col flex-1 bg-white">
+    <div className="flex flex-col flex-1 bg-white items-center">
       {/* 헤더 */}
-      <header className="bg-white shadow-sm sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-16">
-          <div className="flex flex-row justify-between items-center gap-4 py-6">
+      <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 로고 */}
@@ -77,10 +99,13 @@ export default function Home() {
                   </button>
                   {/* 사용자 메뉴 드롭다운 */}
                   {isUserMenuOpen && (
-                    <div className="absolute right-0 mt-2 bg-white border border-gray-200 rounded-md shadow-lg py-2 min-w-[120px]">
-                      <Link href="#" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">프로필</Link>
-                      <Link href="#" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">설정</Link>
-                      <Link href="#" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">로그아웃</Link>
+                    <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>
@@ -147,133 +172,272 @@ export default function Home() {
         </div>
       </header>
 
-      {/* 히어로 섹션 */}
-      <section className="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h2 className="text-5xl font-bold mb-6">
-            혁신적인 XR 학습 플랫폼
-          </h2>
-          <p className="text-xl mb-8 text-blue-100">
-            몰입형 경험을 통해 새로운 차원의 학습을 시작하세요
-          </p>
-          <div className="flex justify-center space-x-4">
-            <Link
-              href="/login"
-              className="px-8 py-3 bg-white text-blue-600 rounded-lg font-semibold hover:bg-gray-100 transition"
-            >
-              시작하기
-            </Link>
-            <button className="px-8 py-3 bg-transparent border-2 border-white text-white rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition">
-              알아보기
-            </button>
+      {/* 메인 콘텐츠 영역 - 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>
-      </section>
 
-      {/* 주요 기능 */}
-      <section className="py-20 bg-gray-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <h3 className="text-3xl font-bold text-center mb-12">주요 기능</h3>
-          <div className="grid md:grid-cols-3 gap-8">
-            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
-              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-                </svg>
-              </div>
-              <h4 className="text-xl font-semibold mb-2">다양한 강의</h4>
-              <p className="text-gray-600">
-                XR 기술을 활용한 몰입형 학습 경험을 제공합니다
-              </p>
-            </div>
-            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
-              <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
-                <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-                </svg>
-              </div>
-              <h4 className="text-xl font-semibold mb-2">커뮤니티</h4>
-              <p className="text-gray-600">
-                학습자들과 함께 소통하고 경험을 공유하세요
-              </p>
-            </div>
-            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
-              <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
-                <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-                </svg>
-              </div>
-              <h4 className="text-xl font-semibold mb-2">학습 추적</h4>
-              <p className="text-gray-600">
-                진도율과 성취도를 한눈에 확인하고 관리하세요
-              </p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* 인기 강의 */}
-      <section className="py-20">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <h3 className="text-3xl font-bold text-center mb-12">인기 강의</h3>
-          <div className="grid md:grid-cols-4 gap-6">
-            {[1, 2, 3, 4].map((item) => (
-              <div key={item} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition cursor-pointer">
-                <div className="h-48 bg-gradient-to-br from-blue-400 to-purple-500"></div>
-                <div className="p-4">
-                  <h4 className="font-semibold mb-2">XR 기초 강의 {item}</h4>
-                  <p className="text-sm text-gray-600 mb-2">강사명 • {item * 10}명 수강</p>
-                  <div className="flex items-center justify-between">
-                    <span className="text-blue-600 font-semibold">무료</span>
-                    <span className="text-yellow-500">⭐ 4.{item + 5}</span>
+        {/* 사이드바 */}
+        <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>
+                      <div className="flex items-center justify-center shrink-0">
+                        <div className="rotate-180">
+                          <img src={chevronIcon1} alt="chevron" className="w-6 h-6" />
+                        </div>
+                      </div>
+                    </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>
         </div>
-      </section>
+      </div>
 
-      {/* 푸터 */}
-      <footer className="bg-gray-900 text-white py-12">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid md:grid-cols-4 gap-8">
-            <div>
-              <h4 className="text-xl font-bold mb-4">XR LMS</h4>
-              <p className="text-gray-400 text-sm">
-                혁신적인 학습 경험을 제공하는 플랫폼
+      {/* 전체 과목 리스트 */}
+      <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]">
+                전체 과목
+              </p>
+              <p className="font-normal leading-[1.5] text-[#030774] text-[19px] tracking-[-0.19px]">
+                4
               </p>
             </div>
-            <div>
-              <h5 className="font-semibold mb-4">학습</h5>
-              <ul className="space-y-2 text-sm text-gray-400">
-                <li><Link href="#" className="hover:text-white transition">강의 목록</Link></li>
-                <li><Link href="#" className="hover:text-white transition">카테고리</Link></li>
-                <li><Link href="#" className="hover:text-white transition">신규 강의</Link></li>
-              </ul>
-            </div>
-            <div>
-              <h5 className="font-semibold mb-4">지원</h5>
-              <ul className="space-y-2 text-sm text-gray-400">
-                <li><Link href="#" className="hover:text-white transition">공지사항</Link></li>
-                <li><Link href="#" className="hover:text-white transition">FAQ</Link></li>
-                <li><Link href="#" className="hover:text-white transition">문의하기</Link></li>
-              </ul>
-            </div>
-            <div>
-              <h5 className="font-semibold mb-4">회사</h5>
-              <ul className="space-y-2 text-sm text-gray-400">
-                <li><Link href="#" className="hover:text-white transition">소개</Link></li>
-                <li><Link href="#" className="hover:text-white transition">이용약관</Link></li>
-                <li><Link href="#" className="hover:text-white transition">개인정보처리방침</Link></li>
-              </ul>
-            </div>
           </div>
-          <div className="mt-8 pt-8 border-t border-gray-800 text-center text-sm text-gray-400">
-            © 2024 XR LMS. All rights reserved.
+          <div 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">
+              <img src={chevronIcon2} alt="chevron" className="block max-w-none w-full h-full" />
+            </div>
           </div>
         </div>
-      </footer>
+        <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>
+              <div 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">
+                  <img src={chevronIcon2} alt="chevron" className="block max-w-none w-full h-full" />
+                </div>
+              </div>
+            </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>
+
+        {/* 푸터 */}
+        <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>
     </div>
   );
 }