diff --git a/src/web/maestro/main_menu.html b/src/web/maestro/main_menu.html
index e6ffab8..dcef5df 100644
--- a/src/web/maestro/main_menu.html
+++ b/src/web/maestro/main_menu.html
@@ -2,12 +2,21 @@
 
 
 <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 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">
 	<link rel="stylesheet" type="text/css" href="./../css/maestro_main.css">
+ -->
 
 	<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
 	<script type="text/javascript" src="./../js/main.js"></script>
@@ -44,6 +53,9 @@
 
 	</div>
 
+	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> -->
+	<script src="../../../resources/bootstrap/js/bootstrap.min.js" rel="stylesheet"></script>
+
 </body>
 
 
diff --git a/src/web/module/home_section_faq.html b/src/web/module/home_section_faq.html
index 0500cf7..a455061 100644
--- a/src/web/module/home_section_faq.html
+++ b/src/web/module/home_section_faq.html
@@ -1,7 +1,7 @@
 ﻿<div class="container">
 
 	<div class="px-5 py-4 my-3" style="background-color: #99ccff">
-		<h1>마에스트로 계정</h1>
+		<h5>FAQ : 마에스트로 계정</h5>
 		<ul>
 			<li>
 				계정 생성 요청 후, 입금이 확인되면 계정을 활성화시킵니다.
@@ -16,10 +16,10 @@
 	</div>
 
 	<div class="px-5 py-4 my-3" style="background-color: #ffce54">
-		<h1>플레이어 관리</h1>
+		<h5>FAQ : 플레이어 관리</h5>
 		<ul>
 			<li>
-				플레이어의 입장 코드는 숫자로만 입력을 받습니다.
+				플레이어의 입장 코드는 숫자로만 입력을 받습니다.<br/>
 				한글/영어 타자에 익숙하지 않은 학생들을 고려하였습니다.
 			</li>
 		</ul>
diff --git a/src/web/module/maestro_header.html b/src/web/module/maestro_header.html
index 84e5ccb..fe88d8f 100644
--- a/src/web/module/maestro_header.html
+++ b/src/web/module/maestro_header.html
@@ -1,27 +1,4 @@
-﻿<style>
-
-.home {
-	display: inline-block;
-	float: left;
-	padding: 0px;
-	margin: 0px;
-}
-
-.header_menu {
-	float: right;
-	padding: 0px;
-	margin: 0px;
-}
-
-.header_menu li {
-	float: left;
-	list-style: none;
-}
-
-</style>
-
-
-<script type="text/javascript">
+﻿<script type="text/javascript">
 
 function loadMaestroTestAccountInfo() {
 	sendRequestServer(	//url, sendParams, onSuccess, onFail, isDebugMode);
@@ -79,32 +56,31 @@ function deleteMaestroAllRecords() {
 
 
 
-<div class="container">
 
-	<span class="home">
-		<span class="col">
-			<a id="login_maestro" class="btn btn-orange" onClick="goHome()">마에스트로 계정<br/>홈</a>
-		</span>
-	</span>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-3">
+	<div class="container">
 
-	<nav>
-		<ul class="header_menu">
-			<li>
-				<span class="col">
-					<a class="btn btn-rouge" onClick="runMaestroAccountApp()">마에스트로 앱<br/>실행</a>
-				</span>
-			</li>
-			<li>
-				<span class="col">
-					<a id="enter_test_player" class="btn btn-sea" id="delete_test_player_history" onClick="deleteMaestroAllRecords()">마에스트로 앱<br/>모든 기록 삭제</a>
-				</span>
-			</li>
-			<li>
-				<span class="col">
-					<a href="#" id="logout_maestro" class="btn btn-sea" onClick="logout()">마에스트로 계정<br/>로그아웃</a>
-				</span>
-			</li>
-		</ul>
-	</nav>
+		<a class="navbar-brand" href="javascript:void(0);" onClick="goHome()" href="">마에스트로 계정 홈</a>
 
-</div>
+		</button>
+
+		<div class="collapse navbar-collapse" id="navbarsExampleDefault">
+			<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
+
+				<li class="nav-item mr-2">
+					<a class="btn btn-warning btn-lg px-3" href="javascript:void(0);" onClick="runMaestroAccountApp()">테스트 계정 로그인</a>
+				</li>
+
+				<li class="nav-item mr-2">
+					<a class="btn btn-primary btn-lg" href="javascript:void(0);" onClick="deleteMaestroAllRecords()">테스트 계정 초기화</a>
+				</li>
+
+				<li class="nav-item">
+					<a class="btn btn-primary btn-lg" href="javascript:void(0);" onClick="logout()">마에스트로 로그아웃</a>
+				</li>
+
+			</ul>
+		</div>
+
+	</div> <!-- container -->
+</nav>
\ No newline at end of file
diff --git a/src/web/module/maestro_section_main.html b/src/web/module/maestro_section_main.html
index 9aeaf11..d1d4127 100644
--- a/src/web/module/maestro_section_main.html
+++ b/src/web/module/maestro_section_main.html
@@ -5,7 +5,7 @@ let maestroInfo = new MaestroInfo();
 
 $(document).ready(function() {
 	$("#section_add_player").load("./../module/maestro_section_add_player.html");
-	$("#search_player").load("./../module/maestro_section_search.html");
+	$("#section_search_player").load("./../module/maestro_section_search.html");
 	$("#mouse_app_list").load("./../module/maestro_section_mouse_app.html");
 	$("#typing_app_list").load("./../module/maestro_section_typing_app.html");
 
@@ -32,32 +32,56 @@ function onChangePlayerCount() {
 
 
 <div class="container">
-	<div id="maestro_info">
-		<span id="maestro_info_id">마에스트로 계정 이름
-		</span>
-		<span id="maestro_info_player_count">학생수 ? / ?
-		</span>
-		<span id="maestro_info_upgrade">업그레이드 버튼
-		</span>
-		<span id="maestro_info_setting">계정 정보 수정 버튼
-		</span>
+	<div class="row bg-primary py-3 my-1">
+		<div id="maestro_info_id" class="col-3">마에스트로 계정 이름</div>
+		<div id="maestro_info_player_count" class="col-2">학생수 ? / ?</div>
+		<div id="maestro_info_upgrade" class="col-4">업그레이드 버튼</div>
+		<div id="maestro_info_setting" class="col-2">계정 정보 수정 버튼</div>
 	</div>
 
 
-	<div id="page-tabs">
-		<ul>
-			<li class="widthQuarter activated" onClick="tabClicked(1)">학생 목록</li>
-			<li class="widthQuarter" onClick="tabClicked(2)">학생 검색</li>
-			<li class="widthQuarter" onClick="tabClicked(3)">마우스 앱 활성화</li>
-			<li class="widthQuarter" onClick="tabClicked(4)">키보드 앱 활성화</li>
-		</ul>
-	</div>
+	<ul class="nav nav-tabs" id="myTab" role="tablist">
+		<li class="nav-item">
+			<a class="nav-link active" id="player_list_tab" data-toggle="tab" href="#player_list_content" role="tab" aria-controls="player_list_content" aria-selected="true">학생 목록</a>
+		</li>
+
+		<li class="nav-item">
+			<a class="nav-link" id="search_player_tab" data-toggle="tab" href="#search_player_content" role="tab" aria-controls="search_player_content" aria-selected="false">학생 검색</a>
+		</li>
+
+		<li class="nav-item">
+			<a class="nav-link" id="activate-mouse_tab" data-toggle="tab" href="#activate_mouse_content" role="tab" aria-controls="activate_mouse_content" aria-selected="false">마우스 앱 활성화</a>
+		</li>
+
+		<li class="nav-item">
+			<a class="nav-link" id="activate-typing_tab" data-toggle="tab" href="#activate_typing_content" role="tab" aria-controls="activate_typing_content-typing_content" aria-selected="false">타자 앱 활성화</a>
+		</li>
+	</ul>	<!-- 탭 -->
 
 
+	<div class="tab-content" id="myTabContent">
+
+		<div class="tab-pane fade show active" id="player_list_content" role="tabpanel" aria-labelledby="player_list_tab">
+			<div id="section_add_player"></div>
+		</div>
+
+		<div class="tab-pane fade" id="search_player_content" role="tabpanel" aria-labelledby="search_player_tab">
+			<div id="section_search_player" class="hide"></div>
+		</div>
+
+		<div class="tab-pane fade" id="activate_mouse_content" role="tabpanel" aria-labelledby="activate-mouse_tab">
+			<div id="mouse_app_list" class="hide"></div>
+		</div>
+
+		<div class="tab-pane fade" id="activate_typing_content" role="tabpanel" aria-labelledby="activate-typing_tab">
+			<div id="typing_app_list" class="hide"></div>
+		</div>
+
+<!-- 
 	<div id="section_add_player">
 	</div>
 
-	<div id="search_player" class="hide">
+	<div id="section_search_player" class="hide">
 	</div>
 
 	<div id="mouse_app_list" class="hide">
@@ -66,5 +90,6 @@ function onChangePlayerCount() {
 	<div id="typing_app_list" class="hide">
 	</div>
 
+ -->
 
-</div>
+ </div> <!-- container -->
