diff --git a/src/web/main/index.html b/src/web/main/index.html
index bed4bf5..05557f3 100644
--- a/src/web/main/index.html
+++ b/src/web/main/index.html
@@ -2,11 +2,20 @@
 
 
 <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
 	<title>마우스 타자 연습</title>
+
 	<link rel="icon" href="/favicon.ico" type="image/x-icon" />
 	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-	<link rel="stylesheet" type="text/css" href="./../css/module.css">
+    <link href="../../../resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+<!-- 	<link rel="stylesheet" type="text/css" href="./../css/module.css">
 	<link rel="stylesheet" type="text/css" href="./../css/color_button.css">
+ -->
+
 
 	<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
 	<script type="text/javascript" src="./../js/main.js"></script>
diff --git a/src/web/module/footer.html b/src/web/module/footer.html
index 11449a0..8a953c9 100644
--- a/src/web/module/footer.html
+++ b/src/web/module/footer.html
@@ -1,49 +1,13 @@
-﻿<style>
-
-.container span {
-	display: inline-block;
-	padding: 0px;
-	margin: 0px;
-	line-height: 70px;
-}
-
-
-#company {
-	width: 200px;
-	/*float: left;*/
-	padding: 0px 0px 0px 20px;
-	text-align: left;
-}
-
-#support_email {
-	width: 400px;
-	margin: 0 auto;
-	text-align: center;
-}
-
-#faq {
-	width: 200px;
-	float: right;
-	padding: 14px 20px 0px 0px;
-	text-align: right;
-}
-
-</style>
-
-
-
-<div class="container" style="line-height: 40px;">
-
-	<span id="company">
-		Copyright @JINAJU
-	</span>
-
-	<span id="support_email">
-		문의 : support@jinaju.com
-	</span>
-
-	<span id="faq" class="col">
-		<a href="./../main/faq.html" class="btn btn-sunflower">FAQ</a>
-	</span>
-
-</div>
+﻿<div class="container">
+  <div class="row bg-dark p-3">
+    <div class="col-sm text-white text-left align-middle">
+      Copyright @JINAJU
+    </div>
+    <div class="col-sm text-white text-center align-middle">
+      문의 : support@jinaju.com
+    </div>
+    <div class="col-sm text-right align-middle">
+      <a class="btn btn-primary" href="./../main/faq.html">FAQ</a>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/web/module/header.html b/src/web/module/header.html
index fe9be97..371924e 100644
--- a/src/web/module/header.html
+++ b/src/web/module/header.html
@@ -1,47 +1,23 @@
-﻿<style>
+﻿<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+	<div class="container">
 
-.home {
-	display: inline-block;
-	float: left;
-	padding: 0px;
-	margin: 0px;
-}
+		<a class="navbar-brand" href="javascript:void(0);" onClick="goHome()" href="">마우스 타자 연습</a>
 
-.header_menu {
-	float: right;
-	padding: 0px;
-	margin: 0px;
-}
+		</button>
 
-.header_menu li {
-	float: left;
-	list-style: none;
-}
+		<div class="collapse navbar-collapse" id="navbarsExampleDefault">
+			<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
 
-</style>
+				<li class="nav-item mx-1">
+					<a class="btn btn-warning px-4" href="./../client/login.html">등록 학생<br/>로그인</a>
+				</li>
 
+				<li class="nav-item mx-1">
+					<a class="btn btn-primary px-4" href="./../main/login.html">마에스트로<br/>로그인</a>
+				</li>
 
-<div class="container">
+			</ul>
+		</div>
 
-	<span class="home">
-		<span class="col">
-			<a id="login_maestro" class="btn btn-orange" onClick="goHome()">마우스 타자 연습<br/>홈</a>
-		</span>
-	</span>
-
-	<nav>
-		<ul class="header_menu">
-			<li>
-				<span class="col">
-					<a href="./../client/login.html" target="_blank" id="login_player" class="btn btn-rouge">등록 학생 앱<br/>실행</a>
-				</span>
-			</li>
-			<li>
-				<span class="col">
-					<a href="./../main/login.html" id="login_maestro" class="btn btn-sea">마에스트로 계정<br/>로그인</a>
-				</span>
-			</li>
-		</ul>
-	</nav>
-
-</div>
+	</div> <!-- container -->
+</nav>
\ No newline at end of file
diff --git a/src/web/module/home_section.html b/src/web/module/home_section.html
index df04f7c..2939474 100644
--- a/src/web/module/home_section.html
+++ b/src/web/module/home_section.html
@@ -1,18 +1,4 @@
-﻿<style>
-.player_free {
-	/*background-color: #ff0000;*/
-	padding: 20px;
-}
-
-.maestro_free {
-	/*background-color: #0000ff;*/
-	padding: 20px;
-}
-</style>
-
-
-
-<script>
+﻿<script>
 
 function loadMaestroExperienceAccount() {
 	sendRequestServer(	//url, sendParams, onSuccess, onFail, isDebugMode);
@@ -53,61 +39,59 @@ function experienceMaestro() {
 
 
 
+<p>&nbsp;</p>
+
 <div class="container">
-	<div class="player_free">
-		<div class="col alignCenter">
-			<a href="./../main/free_player_app_menu.html" target="_blank" id="player_free_play" class="btn btn-rouge width400" >미등록 학생 앱<br/>무료 체험</a>
-		</div>
 
-		<ul id="free_app_list">
-			<li>
-				마우스 클릭 연습
-			</li>
-			<li>
-				마우스 더블 클릭 연습
-			</li>
-			<li>
-				한글 키보드 연습
-			</li>
+	<div class="jumbotron bg-warning">
+		<div class="container">
+
+		<h1 class="display-3 font-weight-bold">마우스 타자 연습</h1>
+
+		<p>방과후 컴퓨터 강사를 하며, 아직 컴퓨터 사용이 익숙하지 않은 학생들을 위해 준비한 서비스입니다.<br/>학생들이 좋아할만한 여러 가지 앱들을 준비했습니다. 재미있게 플레이하면서 자연스럽게 마우스 사용법과 타자를 배우고 익히게 됩니다.</p>
+
+		<ul>
+			<li>(무료 체험 가능 앱) 마우스 클릭 연습</li>
+			<li>(무료 체험 가능 앱) 마우스 더블 클릭 연습</li>
+			<li>(무료 체험 가능 앱) 한글 타자 연습</li>
 		</ul>
 
-	</div>
+		<p><a class="btn btn-outline-dark btn-lg" href="./../main/free_player_app_menu.html" target="_blank" role="button">학생 무료 체험 »</a></p>
 
-	<div class="maestro_free">
-		<div class="col alignCenter">
-			<a id="maestro_free_menu" class="btn btn-sea width400" onClick="experienceMaestro()" >마에스트로<br/>관리자 메뉴 체험</a>
 		</div>
+	</div> <!-- jumbotron -->
 
-		<ul id="maestro_preview">
-			<li>
-				플레이어 관리
-			</li>
-			<li>
-				과목 관리
-			</li>
-			<li>
-				랭킹
-			</li>
-			<li>
-				기록
-			</li>
+	<div class="jumbotron bg-primary">
+		<div class="container">
+
+		<h1 class="display-3 font-weight-bold">마에스트로, 관리자</h1>
+
+		<p>마에스트로 계정을 등록하시면 학생 목록을 등록하고 관리하실 수 있습니다. 학생들이 플레이 할 수 있는 앱의 목록도 편집이 가능합니다.<br/>등록된 학생들은 추가적인 마우스, 타자 연습 앱을 모두 사용할 수 있게 됩니다. 추가적으로 연습 앱을 플레이한 점수와 타수 등의 기록이 서버에 저장되고 내역을 확인할 수 있게 됩니다.</p>
+
+		<ul>
+			<li>학생 등록 및 삭제</li>
+			<li>학생 정보 수정</li>
+			<li>앱 활성화 / 비활성화</li>
+<!--
+			<li>랭킹</li>
+			<li>기록</li>
+ -->
+ 		</ul>
+
+		<p><a class="btn btn-outline-light btn-lg" role="button" href="javascript:void(0);" onClick="experienceMaestro()">마에스트로 무료 체험 »</a></p>
+
+ 		<p>&nbsp;</p>
+		<h2 class="display-5">가격 (1년 기준)</h2>
+
+		<ul class="mt-3 mb-4">
+			<li>1만원 : 학생 20명</li>
+			<li>2만원 : 학생 30명</li>
+			<li>3만원 : 학생 100명</li>
 		</ul>
 
-		<div class="col alignCenter">
-			<a href="./../main/register.html" id="maestro_register" class="btn btn-sea width400">마에스트로<br/>가입</a>
+		<p><a class="btn btn-light text-dark btn-block btn-lg" role="button" href="./../main/register.html">마에스트로 가입</a></p>
+
 		</div>
+	</div> <!-- jumbotron -->
 
-		<ul id="register_tip">
-			<li>
-				학생 20명 (1만원 / 1년)
-			</li>
-			<li>
-				학생 50명 (2만원 / 1년)
-			</li>
-			<li>
-				학생 100명 (3만원 / 1년)
-			</li>
-		</ul>
-
-	</div>
-</div>
+</div>
\ No newline at end of file
