diff --git a/index.html b/index.html
index 4fb8031..806eeb3 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
 	<script type="text/javascript">
 		$(document).ready(function() {
 			$("#header").load("./src/web/module/header.html");
+			$("#section").load("./src/web/module/home_section.html");
 			$("#footer").load("./src/web/module/footer.html");
 		});
 	</script>
@@ -26,12 +27,10 @@
 		<header id="header">
 		</header>
 
-		<section>
-			section
+		<section id="section">
 		</section>
 
 		<footer id="footer">
-			footer
 		</footer>
 
 	</div>
diff --git a/src/web/css/color_button.css b/src/web/css/color_button.css
index d2799fb..9232825 100644
--- a/src/web/css/color_button.css
+++ b/src/web/css/color_button.css
@@ -59,7 +59,7 @@ GENERIC BUTTON STYLES
 .btn.btn-dark:hover{background-color:#202d3d;}
 .btn.btn-dark:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
 
-/*DARK BUTTON STYLES*/
+/*ORANGE BUTTON STYLES*/
 .btn.btn-orange{color: #000; background-color: #f59e00; border-color: #f59e00; -webkit-box-shadow: 0 3px 0 #b37401; box-shadow: 0 3px 0 #b37401;}
 .btn.btn-orange:hover{background-color:#dd9003;}
 .btn.btn-orange:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
diff --git a/src/web/css/module.css b/src/web/css/module.css
index 7d85d48..1ddae3b 100644
--- a/src/web/css/module.css
+++ b/src/web/css/module.css
@@ -37,8 +37,20 @@ footer {
 
 
 
-#id {
-	color: black;
+#home {
+	/*color: red;*/
+}
+
+.player_free {
+	display: inline-block;
+	width: 100%;
+	background-color: #f00;
+}
+
+.maestro_free {
+	display: inline-block;
+	width: 100%;
+	background-color: #0ff;
 }
 
 </style>
\ No newline at end of file
diff --git a/src/web/module/header.html b/src/web/module/header.html
index 31d5d57..48da28b 100644
--- a/src/web/module/header.html
+++ b/src/web/module/header.html
@@ -4,11 +4,11 @@
 	</span>
 
 	<span class="col two" style="float: right;">
-		<a href="#" id="login_player" class="btn btn-sunflower">플레이어<br/>로그인</a>
+		<a href="#" id="login_maestro" class="btn btn-sea">마에스트로<br/>로그인</a>
 	</span>
 
 	<span class="col two" style="float: right;">
-		<a href="#" id="login_maestro" class="btn btn-sunflower">마에스트로<br/>로그인</a>
+		<a href="#" id="login_player" class="btn btn-rouge">플레이어<br/>로그인</a>
 	</span>
 
 </div>
diff --git a/src/web/module/home_section.html b/src/web/module/home_section.html
new file mode 100644
index 0000000..bb6c858
--- /dev/null
+++ b/src/web/module/home_section.html
@@ -0,0 +1,44 @@
+<div class="container">
+	<div class="player_free">
+		<span class="col four" style="float: center;">
+			<a href="#" id="faq" class="btn btn-rouge">플레이어<br/>무료체험</a>
+		</span>
+	</div>
+
+	<div class="maestro_free">
+		<div class="col four" style="float: center;">
+			<a href="#" id="faq" class="btn btn-sea">마에스트로<br/>무료체험</a>
+		</div>
+		<ol>
+			<li>
+				플레이어 관리
+			</li>
+			<li>
+				과목 관리
+			</li>
+			<li>
+				랭킹
+			</li>
+			<li>
+				기록
+			</li>
+		</ol>
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		<div class="col four" style="float: center;">
+			<a href="#" id="faq" class="btn btn-sea">마에스트로<br/>가입</a>
+		</div>
+		<ol>
+			<li>
+				1만원 : 플레이어 20명
+			</li>
+			<li>
+				2만원 : 플레이어 50명
+			</li>
+			<li>
+				3만원 : 플레이어 100명
+			</li>
+		</ol>
+	</div>
+</div>