diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js
index bf00457..b2e0255 100644
--- a/app/scripts/controllers/main.js
+++ b/app/scripts/controllers/main.js
@@ -3,7 +3,15 @@ define(['app'], function (app) {
 	app.controller('MainCtrl', function ($scope) {
 		$scope.modalTShirtDesign = function() {
 			// console.log($('#tshirt-design').length);
-			$('#tshirt-design').modal();
+			$('#tshirt-design').modal(
+				{
+					backdrop: 'static',
+					keyboard: false
+				}
+			);
+		};
+		$scope.modalClose = function(){
+			$('#tshirt-design').modal('hide');
 		}
 	});
 });
diff --git a/app/styles/main.css b/app/styles/main.css
index d05f22f..511ffac 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -259,8 +259,48 @@ aside .step .finish-design button{
 #tshirt-content .tshirt-choice ul li.focus .image{
   border: 1px solid #ff0000;
 }
+/*MODAL Design*/
+#tshirt-design{
+  background-color: #000;
+}
+#tshirt-design .modal-dialog{
+  width: 75%;
+  margin: 0 auto;
+}
+#tshirt-design .modal-dialog .modal-content{
+  background-color: transparent;
+  border-radius: 0;
+  border: 0;
+}
+#tshirt-design .modal-dialog .modal-content .modal-header{
+  padding: 0 0 10px 0;
+  border-bottom: 0;
+}
+#tshirt-design .modal-dialog .modal-content .modal-body{
+  background-color: #ffffff;
+  padding: 0 0;
+}
+#tshirt-design header{
+  border-bottom: 1px solid #DDDDDD;
+}
+#tshirt-design header ul.nav{
+  padding-left: 0;
+  list-style: none;
+}
+#tshirt-design header ul.nav li{
+  float: left;
+  padding: 10px 15px;
+  border-right: 1px solid #DDDDDD;
+}
 
+/*Aside modal*/
+.aside{
 
+}
+.aside #choice-design-option{
+  list-style: none;
+  padding-left: 0;
+}
 /* Customize container */
 @media (min-width: 768px) {
   .container {
diff --git a/app/views/tshirt-design.html b/app/views/tshirt-design.html
index 665490a..24ded64 100644
--- a/app/views/tshirt-design.html
+++ b/app/views/tshirt-design.html
@@ -1,16 +1,94 @@
 <!-- Modal -->
 <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <button class="" ng-click="modalClose()">Close</button>
             </div>
             <div class="modal-body">
-                <h1>Content Design</h1>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-primary">Save changes</button>
+                <header>
+                    <ul class="nav">
+                        <li>
+                            <i class="fa fa-jpy" aria-hidden="true"></i> 文字
+                        </li>
+                        <li>
+                            <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ
+                        </li>
+                        <li>
+                            <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真
+                        </li>
+                        <li>
+                            <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去
+                        </li>
+                    </ul>
+                </header>
+                <section class="tshirt-design-container clearfix">
+                    <div class="aside col-xs-4">
+                        <ul id="choice-design-option">
+                            <li>
+                                <div class="title">
+                                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
+                                    文字を追加
+                                </div>
+                                <div class="clearfix">
+                                    <div class="col-xs-2 text-center">
+                                        <i class="fa fa-jpy" aria-hidden="true"></i>
+                                    </div>
+                                    <div class="col-xs-10">
+                                        書体を選んでお好きな文字を入力できます
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="title">
+                                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
+                                    イラストやイメージを追加
+                                </div>
+                                <div class="clearfix">
+                                    <div class="col-xs-2 text-center">
+                                        <i class="fa fa-btc" aria-hidden="true"></i>
+                                    </div>
+                                    <div class="col-xs-10">
+                                        自由にお使いいただけるデザイン画像をご用意しました
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="title">
+                                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
+                                    自分の画像・写真を追加
+                                </div>
+                                <div class="clearfix">
+                                    <div class="col-xs-2 text-center">
+                                        <i class="fa fa-jpy" aria-hidden="true"></i>
+                                    </div>
+                                    <div class="col-xs-10">
+                                        ご自分で用意した画像をアップロードして使えます
+                                    </div>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="title">
+                                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
+                                    おすすめデザインを使う
+                                </div>
+                                <div class="clearfix">
+                                    <div class="col-xs-2 text-center">
+                                        <i class="fa fa-jpy" aria-hidden="true"></i>
+                                    </div>
+                                    <div class="col-xs-10">
+                                        おすすめデザインデータをご自由にカスタマイズしてお使いください
+                                    </div>
+                                </div>
+                            </li>
+
+                        </ul>
+                    </div>
+                    <div class="design-contetn col-xs-8">
+
+                    </div>
+                </section>
             </div>
         </div>
     </div>