diff --git a/app/page.tsx b/app/page.tsx
index 8993b7d..5ae8f73 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -17,6 +17,7 @@ export default function HomePage() {
   const router = useRouter();
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
+  const [currentHeroSlide, setCurrentHeroSlide] = useState(0);
 
   // 임시 데이터 - 실제로는 API에서 가져올 데이터
   const [courses, setCourses] = useState([
@@ -67,7 +68,7 @@ export default function HomePage() {
 
   // 로그인되었으면 메인 페이지 표시
   return (
-    <div className="bg-white relative min-h-screen w-full">
+    <div className="bg-white relative min-h-screen w-full pb-[199px]">
       {/* 헤더 */}
       <header className="absolute content-stretch flex items-center justify-between left-[332px] top-[43px] w-[1332px]">
         <div className="content-stretch flex gap-[99px] items-center relative shrink-0">
@@ -154,10 +155,8 @@ export default function HomePage() {
       </div>
 
       {/* Hero 배너 */}
-      <div className="absolute h-[402px] left-[-1px] top-[272px] w-full">
-        <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <img alt="" className="absolute h-[257.2%] left-[-0.04%] max-w-none top-0 w-[100.07%]" src={imgImage7} />
-        </div>
+      <div className="absolute h-[402px] left-[-1px] top-[272px] w-full bg-[#b9b9b9]">
+        {/* TODO: DB에서 이미지를 가져와서 표시 */}
       </div>
 
       {/* 전체 교육 과정 (4개) */}
@@ -171,9 +170,17 @@ export default function HomePage() {
         </div>
       </div>
 
-      {/* 지도보기 아이콘 */}
-      <div className="absolute h-[17px] left-[calc(43.75%+28.313px)] top-[692px] w-[128px]">
-        <img alt="" className="block max-w-none size-full" src={imgFrame2616314} />
+      {/* Hero 배너 인디케이터 버튼 */}
+      <div className="absolute h-[17px] left-[calc(43.75%+28.313px)] top-[692px] w-[128px] flex gap-[20px] items-center justify-center">
+        {[0, 1, 2, 3].map((index) => (
+          <button
+            key={index}
+            onClick={() => setCurrentHeroSlide(index)}
+            className={`h-[17px] w-[17px] rounded-full transition-colors ${currentHeroSlide === index ? 'bg-[#050404]' : 'bg-[#D9D9D9]'
+              }`}
+            aria-label={`Hero 배너 ${index + 1}번 슬라이드로 이동`}
+          />
+        ))}
       </div>
 
       {/* 교육 과정 카드들 - 데이터가 있을 때 */}
@@ -181,10 +188,12 @@ export default function HomePage() {
         <div className="absolute content-stretch flex gap-[23px] items-center left-[43px] top-[817px]">
           {courses.map((course) => (
             <div key={course.id} className="content-stretch flex flex-col gap-[18px] h-[326px] items-start relative shrink-0 w-[437px]">
-              <div className="h-[253px] relative shrink-0 w-full">
-                <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
-                  <img alt="" className="absolute max-w-none object-50%-50% object-cover size-full" src={course.image} />
-                </div>
+              <div className="h-[253px] relative shrink-0 w-full bg-[#b9b9b9]">
+                {course.image ? (
+                  <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
+                    <img alt="" className="absolute max-w-none object-50%-50% object-cover size-full" src={course.image} />
+                  </div>
+                ) : null}
               </div>
               <div className="content-stretch flex flex-col gap-[10px] items-start relative shrink-0 w-[392px]">
                 <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[20px] w-full">
@@ -262,6 +271,9 @@ export default function HomePage() {
           )}
         </div>
       </div>
+
+      {/* 공지사항 하단 여백 (공지사항 최하단: 1213 + 제목영역 + gap + 박스높이 + 199px) */}
+      <div className="absolute left-0 top-[1967px] w-full h-[199px]" />
     </div>
   );
 }