diff --git a/docs/images/calendar.png b/docs/images/calendar.png
new file mode 100644
index 0000000..827d652
Binary files /dev/null and b/docs/images/calendar.png differ
diff --git a/docs/images/messages.png b/docs/images/messages.png
new file mode 100644
index 0000000..264e911
Binary files /dev/null and b/docs/images/messages.png differ
diff --git a/docs/images/sample.mp4 b/docs/images/sample.mp4
new file mode 100644
index 0000000..6977169
Binary files /dev/null and b/docs/images/sample.mp4 differ
diff --git a/docs/index.html b/docs/index.html
index e8d88ff..7fd71eb 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -34,7 +34,7 @@ <h1 class="major">Recordiary</h1>
                             <section class="panel">
                                 <div class="image filtered span-1-75">
                                    <video width="100%", height="100%" controls>
-                                   <source src="images/DemoVideo.mp4" type="video/mp4">
+                                   <source src="images/sample.mp4" type="video/mp4">
                                       데모 영상
                                    </video>
                                 </div>
@@ -71,13 +71,27 @@ <h2 class="major">음성 일기 남기기</h2>
                                 <div class="intro color2 span-2-75">
                                     <h2 class="major">캘린더</h2>
                                     <p><b>나의 감정이 완성하는 나의 하루, 나의 한 달</b></p>
-                                    <P>AI 감정 분석을 기반으로 한 색상들이 캘린더에 표시되며, 한 달 동안의 감정에 관한 통계도 확인할 수 있습니다.</p>
+									<p>선택한 날짜를 누르면 그날의 음성 일기를 다시 들으며 감정의 흐름을 되짚어볼 수 있고, 감정 분석 결과와 키워드 요약도 확인해볼 수 있습니다.</p>
+									<p>또한, 월간 감정 통계와 감정 분포 그래프를 통해 나의 감정이 어떤 순간에 영향을 받았는지 돌아볼 수 있습니다.</p>
+									<p>긍정적인 순간들을 기록하고 되새기며, 나만의 감정 힐링 여정을 만들어 보세요.</p>
                                 </div>
                                 <div class="image filtered span-1-75" data-position="25% 25%">
-                                    <img src="images/pic01.jpg" alt="" />
+                                    <img src="images/calendar.png" alt="" />
                                 </div>
                             </section>
                             
+							<section class="panel banner right">
+                                <div class="intro color2 span-2-75">
+                                    <h2 class="major">일기 공유와 방명록</h2>
+                                    <p><b>나의 감정을 나누고 소중한 순간을 함께하는 공간</b></p>
+									<p>친구들과 나의 일기를 통해 감정을 나누고, 서로의 감정을 공감하며 연결되는 소통의 장을 만들어 보세요.</p>
+									<p>친구의 방명록에 메시지를 남기거나 음성 일기를 들으며 함께한 시간을 되돌아볼 수 있습니다.</p>
+									<p>나의 일상과 감정이 친구들과의 특별한 순간으로 이어집니다.</p>
+                                </div>
+                                <div class="image filtered span-1-75" data-position="25% 25%">
+                                    <img src="images/calendar.png" alt="" />
+                                </div>
+                            </section>
 
 						<!-- Panel (Spotlight) -->
 							<section class="panel spotlight medium right" id="first">
@@ -125,7 +139,7 @@ <h2 class="major">개발 과정</h2>
 							</section>
 
 						<!-- Panel (Spotlight) -->
-							<section class="panel spotlight large left">
+							<!-- <section class="panel spotlight large left">
 								<div class="content span-5">
 									<h2 class="major">Magna amet tempus</h2>
 									<p>Mauris a cursus velit. Nunc lacinia sollicitudin egestas bibendum, magna dui bibendum ex, sagittis commodo enim risus sed magna nulla. Vestibulum ut consequat velit. Curabitur vitae libero lorem. Quisque iaculis porttitor blandit. Nullam quis sagittis maximus. Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis congue pulvinar.</p>
@@ -133,10 +147,10 @@ <h2 class="major">Magna amet tempus</h2>
 								<div class="image filtered tinted" data-position="top right">
 									<img src="images/pic03.jpg" alt="" />
 								</div>
-							</section>
+							</section> -->
 
 						<!-- Panel -->
-							<section class="panel">
+							<!-- <section class="panel">
 								<div class="intro color2">
 									<h2 class="major">Elit integer</h2>
 									<p>Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis congue pulvinar. Vivamus sed feugiat finibus. Duis amet bibendum amet sed. Duis mauris ex, dapibus sed ligula tempus volutpat magna etiam.</p>
@@ -156,10 +170,10 @@ <h2 class="major">Elit integer</h2>
 									</div>
 									<a href="images/gallery/fulls/09.jpg" class="image filtered span-2-5" data-position="right"><img src="images/gallery/thumbs/09.jpg" alt="" /></a>
 								</div>
-							</section>
+							</section> -->
 
 						<!-- Panel -->
-							<section class="panel color4-alt">
+							<!-- <section class="panel color4-alt">
 								<div class="intro color4">
 									<h2 class="major">Contact</h2>
 									<p>Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis congue pulvinar. Vivamus sed feugiat finibus. Duis amet bibendum amet sed. Duis mauris ex, dapibus sed ligula tempus volutpat magna etiam.</p>
@@ -196,10 +210,10 @@ <h2 class="major">Contact</h2>
 										</ul>
 									</div>
 								</div>
-							</section>
+							</section> -->
 
 						<!-- Panel -->
-							<section class="panel color2-alt">
+							<!-- <section class="panel color2-alt">
 								<div class="intro color2">
 									<h2 class="major">Elements</h2>
 									<p>Sed vel nibh libero. Mauris et lorem pharetra massa lorem turpis congue pulvinar. Vivamus sed feugiat finibus. Duis amet bibendum amet sed. Duis mauris ex, dapibus sed ligula tempus volutpat magna etiam. </p>
@@ -465,13 +479,11 @@ <h3 class="major">Form</h3>
 										</form>
 									</div>
 								</div>
-							</section>
+							</section> -->
 
 						<!-- Copyright -->
-							<div class="copyright">&copy; Untitled. Design: <a href="https://html5up.net">HTML5 UP</a>.</div>
-
+							<div class="copyright">&copy; Recordiary. Design: <a href="https://html5up.net">HTML5 UP</a>.</div>
 					</div>
-
 			</div>
 
 		<!-- Scripts -->