diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e43b0f9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/MusicWith b/MusicWith
index d4234dd..34a2178 160000
--- a/MusicWith
+++ b/MusicWith
@@ -1 +1 @@
-Subproject commit d4234ddb1f0ddb55b09f406c317aba066cca09e3
+Subproject commit 34a21783cbcbb527e160b7f27abb39d252799be3
diff --git a/MusicWithServer b/MusicWithServer
index d64599d..9bf076b 160000
--- a/MusicWithServer
+++ b/MusicWithServer
@@ -1 +1 @@
-Subproject commit d64599d7f9b8ab59489610353fd7c25e956314a4
+Subproject commit 9bf076bc7383fe5a7332db14b8d64003762dc9b6
diff --git a/docs/images/git.png b/docs/images/git.png
new file mode 100644
index 0000000..16c46bb
Binary files /dev/null and b/docs/images/git.png differ
diff --git a/docs/images/githubwiki.png b/docs/images/githubwiki.png
new file mode 100644
index 0000000..d376c24
Binary files /dev/null and b/docs/images/githubwiki.png differ
diff --git a/docs/images/jira.png b/docs/images/jira.png
new file mode 100644
index 0000000..a4da752
Binary files /dev/null and b/docs/images/jira.png differ
diff --git a/docs/index.html b/docs/index.html
index 8a0b52b..518d912 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -39,33 +39,32 @@ <h2>Introduction & Planning</h2>
 						</header>
 						<div class="content">
 							<span class="image fit"><img src="images/loginView.png" alt="" /></span>
-							<p>현대인들의 생활에서 음악은 더 이상 단순한 '예술'이 아닌, 상호작용의 매개체로서 동작하고 있습니다.</p>
-							<p>같은 음악을 듣는 사람끼리, 서로 음악에 대한 의견을 공유할 수 있다면 얼마나 좋을까요?</p>
-							<p>우리는 <strong>음악</strong>이라는 공통된 주제를 가지고 사람들이 서로 상호작용하는 공간을 제공하고 싶었습니다. </p>
-							<p><strong>MusicWith</strong>는 음악의 상호작용을, <strong>채팅</strong>이라는 실시간 기반 기능으로 풀어냈습니다.</p>
+							<p>현대인에게 <i>음악</i>은 더 이상 단순한 예술이 아닌, 상호작용의 매개체입니다.</p>
+							<p>저희는 사람들이 <i>음악</i>을 통해 상호작용하는 공간을 제공하려 합니다.</p>
+							<p>지금 이 순간, 누가 나와 같은 <i>음악</i>을 듣고 있을까요?</p>
 							<br>
 							<span class="image left"><img src="images/recommendview.png" alt="" /></span>
 							<span class="image right"><img src="images/chattingview.png" alt="" /></span>
 							<div style="clear:both;"></div>
 							<br>
-							<p><strong>MusicWith</strong>는 현재 어떤 음악을 사람들이 가장 많이 듣고 있는지 알려주며,</p>
-							<p>같은 음악을 들으며 채팅을 통해 실시간으로 서로 의견을 주고받을 수 있습니다. </p>
-							<p>이로써 <strong>MusicWith</strong>는 사람과 사람 사이를 음악으로 연결하는 플랫폼 역할을 할 것입니다.</p>
+							<p><strong>MusicWith</strong>에서는 지금 이 순간 같은 음악을 듣는 사람들끼리 <i>실시간</i>으로 대화할 수 있습니다.</p>
+							<p><i>지금 이 순간</i> 어떤 음악을 사람들이 가장 많이 듣고 있는지도 알 수 있죠.</p>
+							<p>음악은 사람을 잇습니다. 지금 대화에 참여해 보세요!</p>
 						</div>
 					</section>
 
 				<!-- Section -->
 					<section>
 						<header>
-							<h2>Requirements</h2>
+							<h2>Supports</h2>
 						</header>
 						<div class="content">
-							<p><strong>MusicWith</strong> 어플을 사용하기 위해서는 다음과 같은 요구사항이 필요합니다. </p>
 							<ul class="feature-icons">
+								<li class="icon solid fa-mobile">iPhone (iOS 18 이상)</li>
 								<li class="icon solid fa-music">Tidal Premium 계정</li>
-								<li class="icon solid fa-mobile">iPhone</li>
 							</ul>
-							<p>MusicWith 어플은 기본적으로 iOS 에서 작동합니다. 또한 tidal Premium 계정이 있어야 정상적으로 노래를 재생할 수 있습니다.</p>
+							<p>MusicWith는 현재 <i>iOS</i> 앱 환경 및 <i>Tidal</i> 로그인만 지원합니다.</p>
+							<p>추후 Android, Web 환경 및 타 스트리밍 서비스 로그인을 지원할 예정입니다.</p>
 						</div>
 					</section>
 
@@ -75,13 +74,12 @@ <h2>Requirements</h2>
 							<h2>Views</h2>
 						</header>
 						<div class="content">
-							<p><strong>MusicWith</strong> 어플의 화면들 입니다.</p>
 
 							<!-- Section -->
 								<section>
 									<header>
 										<h3>MainView</h3>
-										<p>MusicWith 에서 로그인할 때 나오는 메인 화면입니다. 현재 자신의 tidal 계정의 플레이리스트를 확인하거나, 지금 가장 인기 있는 음악들을 확인하거나, 검색을 통해서 당신이 원하는 노래를 들을 수 있습니다.</p>
+										<p>지금 <strong>MusicWith</strong>에서 가장 <i>인기</i> 있는 음악들과 내 Tidal 플레이리스트를 확인하세요. 자유롭게 <i>검색</i>하세요.</p>
 									</header>
 									<div class="content">
 										<div class="gallery">
@@ -92,17 +90,16 @@ <h3>MainView</h3>
 										</div>
 									</div>
 								</section>
-								
+
 							<!-- Section -->
 								<section>
-									
+
 									<header>
-										<h3>Music Player Bar</h3>
-										<p>음악을 재생할 시 다음과 같은 음악 재생 바 가 생성됩니다. 음악 재생 바에서는 현재 음악에 대해서 컨트롤을 할 수 있습니다. 음악 재생 바 를 위로 올릴 시에는 해당 음악에 있는 가사와 채팅이 나옵니다. 가사 탭에서는 현재 재생 중인 부분을 표시해 주고, 채팅 탭 에서는 현재 노래를 듣는 다른 사람들과 채팅을 하거나 이전에 있던 채팅들을 볼 수 있습니다.</p>
+										<h3>Music Control Modal</h3>
+										<p><i>컨트롤 모달</i>에서는 음악의 재생 상태를 관리하거나, 다른 곡으로 넘어갈 수 있습니다. 컨트롤 모달을 위로 올리면 가사와 채팅 탭이 나옵니다. <i>가사 탭</i>에서는 가사와 현재 재생 중인 부분을 알려줍니다. <i>채팅 탭</i>에서는 지금 이 노래를 듣는 사람들과 <i>대화</i>를 나누거나, 과거의 대화를 볼 수 있습니다.</p>
 									</header>
 									<div class="content">
 										<div class="gallery">
-											
 											<a href="images/chattingview.png" class="portrait"><img src="images/chattingview.png" alt="" /></a>
 											<a href="images/lyricview.png" class="portrait"><img src="images/lyricview.png" alt="" /></a>
 											<a href="images/controlcoreview.png" class="portrait"><img src="images/controlcoreview_thumb.png" alt="" /></a>
@@ -114,7 +111,7 @@ <h3>Music Player Bar</h3>
 								<section>
 									<header>
 										<h3>Additional information</h3>
-										<p>MusicWith 어플은 현재 기기의 다크 모드에 따라서 그에 맞게 UI가 변경됩니다. 또한 텍스트가 너무 길 경우에는 텍스트가 흘러가는 방식으로 나오게 됩니다.</p>
+										<p>우리의 눈은 소중하잖아요? MusicWith는 시스템의 설정에 따른 <i>다크 모드</i>를 지원합니다. 또한 긴 텍스트는 일부만 표시되어 흘러갑니다.</p>
 									</header>
 									<div class="content">
 										<div class="gallery">
@@ -126,335 +123,102 @@ <h3>Additional information</h3>
 
 						</div>
 					</section>
+
+					<!-- Section -->
 					<section>
 						<header>
 							<h2>Completeness</h2>
 						</header>
 						<div class="content">
-							<p><strong>MusicWith</strong> 어플은 현재 다음과 같은 완성도를 보입니다. </p>
+							<p><strong>MusicWith</strong>는 아래 기능들을 지원합니다. </p>
 							<ul class="feature-icons">
-								<li class="icon solid fa-user">tidal 계정을 통한 로그인</li>
+								<li class="icon solid fa-user">Tidal 계정을 통한 로그인</li>
 								<li class="icon solid fa-music">음악 재생, 가사 제공</li>
-								<li class="icon solid fa-list">tidal 계정 플레이리스트</li>
-								<li class="icon solid fa-star">현재 인기 있는 노래들</li>
-								<li class="icon solid fa-search">원하는 음악 검색</li>
-								<li class="icon solid fa-comment">음악 별 댓글</li>
+								<li class="icon solid fa-list">내 Tidal 계정의 플레이리스트</li>
+								<li class="icon solid fa-star">실시간 인기곡</li>
+								<li class="icon solid fa-search">음악 검색</li>
+								<li class="icon solid fa-comment">실시간 댓글</li>
 							</ul>
 						</div>
 					</section>
 
-				<!-- Section -->
-				<section>
-					<header>
-						<h2>FUTURE TASK</h2>
-					</header>
-					<div class="content">
-						<p><strong>MusicWith</strong>는 아래의 기능들을 향후 구현 및 제공할 예정입니다.</p>
-						<ul>
-							<li>나와 같은 음악을 듣고 있는 주변 유저 표시</li>
-							<li>검색 or 인기 트랙을 통해 Tidal 플레이리스트 편집</li>
-							<li>채팅에 유저 ID 대신 유저 이름 표시</li>
-						</ul>
-					</div>
-				</section>
-			
 				<!-- Section -->
 					<section>
 						<header>
-							<h2>Learn More</h2>
+							<h2>FUTURE TASK</h2>
 						</header>
 						<div class="content">
-							<p><strong>MusicWith</strong> 어플에 대해 더 알아볼 수 있습니다.</p>
-							<ul class="actions">
-								<li><a href="https://github.com/ProjectInTheClass/MusicWith" class="button large">Github</a></li>
-								<li><a href="https://www.youtube.com/shorts/p4K2MMHuLrU" class="button large">Youtube</a></li>
-							</ul>		
+							<p><strong>MusicWith</strong>는 아래의 기능들을 향후 구현할 예정입니다.</p>
+							<ul>
+								<li>나와 같은 음악을 듣고 있는 주변 유저 알림</li>
+								<li>Tidal 플레이리스트 편집</li>
+								<li>채팅에 유저 ID 대신 유저 이름 표시</li>
+							</ul>
 						</div>
 					</section>
+
+				<!-- Section -->
 					<section>
 						<header>
-							<h2>Demo Video</h2>
+							<h2>DEVELOPMENT</h2>
 						</header>
 						<div class="content">
-							<iframe width="560" height="315" 
-            						src="https://www.youtube.com/embed/p4K2MMHuLrU" 
-            						title="YouTube video player" 
-            						frameborder="0" 
-            						allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-            						allowfullscreen>
-    						</iframe>
+							<p>저희 <strong>MusicWith</strong> 팀은 <i>Git</i>을 사용해 버전을 관리합니다.</p>
+							<span class="image fit"><img src="images/git.png" alt="" /></span>
+							<p><i>Jira</i>를 사용해 일정을 관리하고, 현재 자신의 업무를 공유합니다.</p>
+							<span class="image fit"><img src="images/jira.png" alt="" /></span>
+							<p><i>GitHub Wiki</i>를 사용해 기술적인 사항들을 기록합니다.</p>
+							<span class="image fit"><img src="images/githubwiki.png" alt="" /></span>
 						</div>
 					</section>
 
-				<!-- Elements -->
-				<!--
+				<!-- Section -->
 					<section>
 						<header>
-							<h2>Elements</h2>
+							<h2>TECH STACK</h2>
 						</header>
 						<div class="content">
+							<p><strong>MusicWith</strong>는 다음 기술들을 사용해 만들어졌습니다. </p>
+							<ul class="feature-icons">
+								<li class="icon brands fa-swift">Swift 및 SwiftUI (앱)</li>
+								<li class="icon brands fa-rust">Rust (서버)</li>
+								<li class="icon solid fa-music">Tidal SDK (재생, 검색, 플리)</li>
+								<li class="icon brands fa-spotify">Spotify SDK (가사 싱크)</li>
+								<li class="icon solid fa-share">WebSocket (실시간 소통)</li>
+								<li class="icon solid fa-database">PoloDB (히스토리, 캐시)</li>
+							</ul>
+						</div>
+					</section>
 
-							<section>
-								<header>
-									<h3>Text</h3>
-								</header>
-								<div class="content">
-									<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
-									This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
-									This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
-									<hr />
-									<h2>Heading Level 2</h2>
-									<h3>Heading Level 3</h3>
-									<h4>Heading Level 4</h4>
-									<h5>Heading Level 5</h5>
-									<hr />
-									<h5>Blockquote</h5>
-									<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
-									<h5>Preformatted</h5>
-									<pre><code>i = 0;
-
-while (!deck.isInOrder()) {
-  print 'Iteration ' + i;
-  deck.shuffle();
-  i++;
-}
-
-print 'Sorted in ' + i + ' iterations.';</code></pre>
-								</div>
-							</section>
-
-							<section>
-								<header>
-									<h3>Lists</h3>
-								</header>
-								<div class="content">
-
-									<h4>Unordered</h4>
-									<ul>
-										<li>Dolor pulvinar etiam.</li>
-										<li>Sagittis adipiscing.</li>
-										<li>Felis enim feugiat.</li>
-									</ul>
-
-									<h4>Alternate</h4>
-									<ul class="alt">
-										<li>Dolor pulvinar etiam.</li>
-										<li>Sagittis adipiscing.</li>
-										<li>Felis enim feugiat.</li>
-									</ul>
-
-									<h4>Ordered</h4>
-									<ol>
-										<li>Dolor pulvinar etiam.</li>
-										<li>Etiam vel felis viverra.</li>
-										<li>Felis enim feugiat.</li>
-										<li>Dolor pulvinar etiam.</li>
-										<li>Etiam vel felis lorem.</li>
-										<li>Felis enim et feugiat.</li>
-									</ol>
-									<h4>Icons</h4>
-									<ul class="icons">
-										<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
-										<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
-										<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
-										<li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
-									</ul>
-
-									<h4>Actions</h4>
-									<ul class="actions">
-										<li><a href="#" class="button primary">Default</a></li>
-										<li><a href="#" class="button">Default</a></li>
-									</ul>
-									<ul class="actions stacked">
-										<li><a href="#" class="button primary">Default</a></li>
-										<li><a href="#" class="button">Default</a></li>
-									</ul>
-								</div>
-							</section>
-
-							<section>
-								<header>
-									<h3>Table</h3>
-								</header>
-								<div class="content">
-									<h4>Default</h4>
-									<div class="table-wrapper">
-										<table>
-											<thead>
-												<tr>
-													<th>Name</th>
-													<th>Description</th>
-													<th>Price</th>
-												</tr>
-											</thead>
-											<tbody>
-												<tr>
-													<td>Item One</td>
-													<td>Ante turpis integer aliquet porttitor.</td>
-													<td>29.99</td>
-												</tr>
-												<tr>
-													<td>Item Two</td>
-													<td>Vis ac commodo adipiscing arcu aliquet.</td>
-													<td>19.99</td>
-												</tr>
-												<tr>
-													<td>Item Three</td>
-													<td> Morbi faucibus arcu accumsan lorem.</td>
-													<td>29.99</td>
-												</tr>
-												<tr>
-													<td>Item Four</td>
-													<td>Vitae integer tempus condimentum.</td>
-													<td>19.99</td>
-												</tr>
-												<tr>
-													<td>Item Five</td>
-													<td>Ante turpis integer aliquet porttitor.</td>
-													<td>29.99</td>
-												</tr>
-											</tbody>
-											<tfoot>
-												<tr>
-													<td colspan="2"></td>
-													<td>100.00</td>
-												</tr>
-											</tfoot>
-										</table>
-									</div>
-
-									<h4>Alternate</h4>
-									<div class="table-wrapper">
-										<table class="alt">
-											<thead>
-												<tr>
-													<th>Name</th>
-													<th>Description</th>
-													<th>Price</th>
-												</tr>
-											</thead>
-											<tbody>
-												<tr>
-													<td>Item One</td>
-													<td>Ante turpis integer aliquet porttitor.</td>
-													<td>29.99</td>
-												</tr>
-												<tr>
-													<td>Item Two</td>
-													<td>Vis ac commodo adipiscing arcu aliquet.</td>
-													<td>19.99</td>
-												</tr>
-												<tr>
-													<td>Item Three</td>
-													<td> Morbi faucibus arcu accumsan lorem.</td>
-													<td>29.99</td>
-												</tr>
-												<tr>
-													<td>Item Four</td>
-													<td>Vitae integer tempus condimentum.</td>
-													<td>19.99</td>
-												</tr>
-												<tr>
-													<td>Item Five</td>
-													<td>Ante turpis integer aliquet porttitor.</td>
-													<td>29.99</td>
-												</tr>
-											</tbody>
-											<tfoot>
-												<tr>
-													<td colspan="2"></td>
-													<td>100.00</td>
-												</tr>
-											</tfoot>
-										</table>
-									</div>
-								</div>
-							</section>
-
-							<section>
-								<header>
-									<h3>Buttons</h3>
-								</header>
-								<div class="content">
-									<ul class="actions">
-										<li><a href="#" class="button primary">Primary</a></li>
-										<li><a href="#" class="button">Default</a></li>
-									</ul>
-									<ul class="actions">
-										<li><a href="#" class="button large">Large</a></li>
-										<li><a href="#" class="button">Default</a></li>
-										<li><a href="#" class="button small">Small</a></li>
-									</ul>
-									<ul class="actions">
-										<li><a href="#" class="button primary icon solid fa-download">Icon</a></li>
-										<li><a href="#" class="button icon solid fa-download">Icon</a></li>
-									</ul>
-									<ul class="actions">
-										<li><span class="button primary disabled">Disabled</span></li>
-										<li><span class="button disabled">Disabled</span></li>
-									</ul>
-								</div>
-							</section>
-
-							<section>
-								<header>
-									<h3>Form</h3>
-								</header>
-								<div class="content">
-									<form method="post" action="#">
-										<div class="fields">
-											<div class="field half">
-												<label for="demo-name">Name</label>
-												<input type="text" name="demo-name" id="demo-name" value="" placeholder="Jane Doe" />
-											</div>
-											<div class="field half">
-												<label for="demo-email">Email</label>
-												<input type="email" name="demo-email" id="demo-email" value="" placeholder="jane@untitled.tld" />
-											</div>
-											<div class="field">
-												<label for="demo-category">Category</label>
-												<select name="demo-category" id="demo-category">
-													<option value="">-</option>
-													<option value="1">Manufacturing</option>
-													<option value="1">Shipping</option>
-													<option value="1">Administration</option>
-													<option value="1">Human Resources</option>
-												</select>
-											</div>
-											<div class="field half">
-												<input type="radio" id="demo-priority-low" name="demo-priority" checked>
-												<label for="demo-priority-low">Low</label>
-											</div>
-											<div class="field half">
-												<input type="radio" id="demo-priority-high" name="demo-priority">
-												<label for="demo-priority-high">High</label>
-											</div>
-											<div class="field half">
-												<input type="checkbox" id="demo-copy" name="demo-copy">
-												<label for="demo-copy">Email me a copy</label>
-											</div>
-											<div class="field half">
-												<input type="checkbox" id="demo-human" name="demo-human" checked>
-												<label for="demo-human">Not a robot</label>
-											</div>
-											<div class="field">
-												<label for="demo-message">Message</label>
-												<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
-											</div>
-										</div>
-										<ul class="actions">
-											<li><input type="submit" value="Send Message" class="primary" /></li>
-											<li><input type="reset" value="Reset" /></li>
-										</ul>
-									</form>
-								</div>
-							</section>
-
+				<!-- Section -->
+					<section>
+						<header>
+							<h2>Learn More</h2>
+						</header>
+						<div class="content">
+							<p><strong>MusicWith</strong> 어플에 대해 더 알아볼 수 있습니다.</p>
+							<ul class="actions">
+								<li><a href="https://github.com/ProjectInTheClass/MusicWith" class="button large">Github</a></li>
+								<li><a href="https://www.youtube.com/shorts/p4K2MMHuLrU" class="button large">Youtube</a></li>
+							</ul>
 						</div>
 					</section>
-				-->
 
 				<!-- Section -->
+					<section>
+						<header>
+							<h2>Demo Video</h2>
+						</header>
+						<div class="content">
+							<iframe width="560" height="315"
+            						src="https://www.youtube.com/embed/p4K2MMHuLrU"
+            						title="YouTube video player"
+            						frameborder="0"
+            						allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            						allowfullscreen>
+    						</iframe>
+						</div>
+					</section>
 
 				<!-- Copyright -->
 					<div class="copyright">&copy; Untitled. All rights reserved. Design: <a href="https://html5up.net">HTML5 UP</a>.</div>