diff --git a/app/fonts/font_canvas/font-canvas.css b/app/fonts/font_canvas/font-canvas.css
index 5f534b7..318a77a 100644
--- a/app/fonts/font_canvas/font-canvas.css
+++ b/app/fonts/font_canvas/font-canvas.css
@@ -6,17 +6,60 @@
     font-family: 'gn_fuyu_iro_script_bold';
     src: url(GN-Fuyu-iro_Script_Bold.ttf);
 }
+@font-face {
+    font-family: 'gn_killgothic_u_kanana';
+    src: url(GN-KillGothic-U-KanaNA.ttf);
+}
 
 @font-face {
-    font-family: 'gn_aki_iro_sesami_cookies';
-    src: url(GN-Aki-iro_Sesami_Cookies.ttf);
+    font-family: 'gn_kin_iro_alphabet_cookies';
+    src: url(GN-Kin-iro_Alphabet_Cookies.ttf);
 }
 @font-face {
-    font-family: 'gn_aki_iro_sesami_cookies';
-    src: url(GN-Aki-iro_Sesami_Cookies.ttf);
+    font-family: 'gn_kin_iro_sansserif';
+    src: url(GN-Kin-iro_SansSerif.ttf);
 }
 @font-face {
-    font-family: 'gn_killgothic_u_kanana';
-    src: url(GN-KillGothic-U-KanaNA.ttf);
+    font-family: 'gn_koharuiro_sunray';
+    src: url(GN-Koharuiro_Sunray.ttf);
+}
+@font-face {
+    font-family: 'gn_kyu_pin';
+    src: url(GN-Kyu-pin.ttf);
+}
+@font-face {
+    font-family: 'gn_natsu_iro_schedule';
+    src: url(GN-Natsu-iro-Schedule.ttf);
+}
+@font-face {
+    font-family: 'gn_natsuiro_schedule';
+    src: url(GN-Natsuiro_Schedule.ttf);
+}
+@font-face {
+    font-family: 'gnkana_kiniro_elegance';
+    src: url(GNKana-Kiniro_Elegance.ttf);
+}
+@font-face {
+    font-family: 'gnkana_kiniro_sansserif_l';
+    src: url(GNKana-Kiniro_SansSerif_L.ttf);
+}
+@font-face {
+    font-family: 'gnkana_kiniro_sansserif_st';
+    src: url(GNKana-Kiniro_SansSerif_ST.ttf);
+}
+@font-face {
+    font-family: 'gnkana_kon_iro_nightfall';
+    src: url(GNKana-Kon-iro_Nightfall.ttf);
+}
+@font-face {
+    font-family: 'ms_gothic';
+    src: url(MS-Gothic.ttf);
+}
+@font-face {
+    font-family: 'msmincho';
+    src: url(MSMINCHO.TTF);
+}
+@font-face {
+    font-family: 'ufonts_com_ms_pgothic';
+    src: url(ufonts.com_ms-pgothic.ttf);
 }
-
diff --git a/app/scripts/controllers/tshirtdesign.js b/app/scripts/controllers/tshirtdesign.js
index fa54950..7629165 100644
--- a/app/scripts/controllers/tshirtdesign.js
+++ b/app/scripts/controllers/tshirtdesign.js
@@ -144,8 +144,10 @@ define(['app'], function (app) {
 			$scope.typeObject = object.type;
 			switch ($scope.typeObject) {
 				case 'i-text' :
-					$('#input-design-text').focus();
 					$rootScope.isShowLeftPanel = 'text';
+					$('#input-design-text').focus(function() {
+
+					});
 					break;
 
 				case 'path-group' :
@@ -183,6 +185,72 @@ define(['app'], function (app) {
 			'#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
 			'#333333'
 		];
+		//Font
+		$scope.listFontFamily = [
+			{
+				name : 'GN Aki iro Sesami Cookies',
+				slug : 'gn_aki_iro_sesami_cookies',
+			},
+			{
+				name : 'GN-Fuyu-iro_Script_Bold',
+				slug : 'gn_fuyu_iro_script_bold'
+			},
+			{
+				name : 'GN Killgothic U Kanana',
+				slug : 'gn_killgothic_u_kanana'
+			},
+			{
+				name : 'GN-Kin-iro_Alphabet_Cookies',
+				slug : 'gn_kin_iro_alphabet_cookies'
+
+			},
+			{
+				name : 'GN-Kin-iro_SansSerif',
+				slug : 'gn_kin_iro_sansserif'
+
+			},
+			{
+				name : 'GN-Koharuiro_Sunray',
+				slug : 'gn_koharuiro_sunray'
+
+			},
+			{
+				name : 'GN-Kyu-pin',
+				slug : 'gn_kyu_pin'
+			},
+			{
+				name : 'gn_natsu_iro_schedule',
+				slug : 'gn_natsu_iro_schedule'
+
+			},
+			{
+				name : 'gnkana_kiniro_sansserif_l',
+				slug : 'gnkana_kiniro_sansserif_l'
+
+			},
+			{
+				name : 'gnkana_kiniro_sansserif_st',
+				slug : 'gnkana_kiniro_sansserif_st'
+			},
+			{
+				name : 'gnkana_kon_iro_nightfall',
+				slug : 'gnkana_kon_iro_nightfall'
+
+			},
+			{
+				name : 'ms_gothic',
+				slug : 'ms_gothic'
+
+			},
+			{
+				name : 'msmincho',
+				slug : 'msmincho'
+			},
+			{
+				name : 'ufonts_com_ms_pgothic',
+				slug : 'ufonts_com_ms_pgothic'
+			}
+		];
 		
 		$scope.changeColorPattern = function(color){
 			if (canvas.getActiveObject()){
@@ -211,27 +279,9 @@ define(['app'], function (app) {
 				}
     	        canvas.renderAll();
 			}
-		}
+		};
 		
-		$scope.listFontFamily = [
-			{
-				name : 'GN-Aki-iro_Sesami_Cookies',
-				slug : 'gn_aki_iro_sesami_cookies',
-			},
-			{
-				name : 'Tahoma',
-				slug : 'tahoma',
-			},
-			{
-				name : 'GN-Fuyu-iro_Script_Bold',
-				slug : 'gn_fuyu_iro_script_bold'
-			},
-			{
-				name : 'GN Killgothic U Kanana',
-				slug : 'gn_killgothic_u_kanana'
 
-			}
-		];
 
 		$scope.focusInputText = function() {
 			if($scope.typeObject != 'i-text')
@@ -260,18 +310,30 @@ define(['app'], function (app) {
 			if(canvas.getActiveObject()) {
 				var currentObject = canvas.getActiveObject();
 				if(currentObject.type == 'i-text') {
-					console.log(font);
-
 					currentObject.set('fontFamily', font);
-					currentObject.selectWord();
-
 					canvas.renderAll();
-					// currentObject.getActiveObject();
 					canvas.setActiveObject(currentObject);
 				}
 
 			}
+		};
+		//Set letter spacing text
+		var spacingNum = 0;
+		$scope.setLetterSpacingText = function(e) {
+			if(canvas.getActiveObject()) {
+				var currentObject = canvas.getActiveObject();
+				if(currentObject.type == 'i-text') {
+					if(e == 'plus')
+						spacingNum = spacingNum + 30;
+					else if (spacingNum>=30){
+						spacingNum = spacingNum - 30;
+					}
+					currentObject.set('charSpacing', spacingNum);
+					canvas.renderAll();
+					canvas.setActiveObject(currentObject);
+				}
 
+			}
 		}
 	});
 });
diff --git a/app/styles/main.css b/app/styles/main.css
index a2c3faa..a0f3ef7 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -5,7 +5,17 @@ body {
   font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
   /*font-family: 'gn_aki_iro_sesami_cookies';*/
 }
-
+/*Scroll bar style*/
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0,0,0,.5);
+  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+}
+/*End scroll bar style*/
 .padding-right-0{
   padding-right: 0!important;
 }
@@ -435,7 +445,100 @@ aside .step .finish-design button{
 .aside .box-design-option li .content .des{
   padding: 3px 10px 3px 0;
 }
+.aside .box-design-option li .content .color-patterns {
+  width: 100%;
+  border: #bbb solid 1px;
+  background: #FFF;
+  margin-top: 5px;
+}
+
+.aside .box-design-option li .content .color-patterns .color-pattern-item{
+  height: 20px;
+  float: left;
+  margin-left: 4px;
+  margin-top: 2px;
+  width: 20px;
+  cursor: pointer;
+  border: 1px solid #ddd;
+}
+
+.aside .box-design-option li .content .color-patterns .color-pattern-item:hover {
+  outline: 1px solid #ed1d24;
+}
+.aside .box-design-option li .content .layer-item {
+  text-align: center;
+  border: 1px #ddd solid;
+  background: #FFF;
+  padding: 5px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.aside .box-design-option li .content .layer-item:hover {
+  background: #ffcccc;
+}
+
+
+/*Design Text*/
+.aside #choice-text{
+
+}
+.aside #choice-text .content{
+  padding: 10px 10px;
+}
+.aside #choice-text .content ul.font-family-box{
+  list-style: none;
+  margin: 10px 0;
+  padding-left: 0;
+  height: 180px;
+  width: 100%;
+  overflow-y: scroll;
+  border: 1px solid #c0c0c0;
+}
 
+.aside #choice-text .content .font-family-box li{
+  cursor: pointer;
+  padding: 4px 8px;
+  border: 0;
+  border-bottom: 1px solid #c0c0c0;
+  border-right: 1px solid #c0c0c0;
+  font-size: 16px;
+}
+.aside #choice-text .content .spacing-letter{
+
+}
+.aside #choice-text .content .spacing-letter .text-label{
+  font-size: 16px;
+  padding: 4px 0;
+}
+.aside #choice-text .content .spacing-letter .box{
+  border: 1px solid #8c8c8c;
+  box-shadow: 0 0 5px #888888;
+  background-color: #f0f0f0;
+}
+.aside #choice-text .content .spacing-letter .item{
+  float: left;
+}
+
+.aside #choice-text .content .spacing-letter .item i.fa{
+  font-size: 22px;
+  margin: 0 0;
+  color: #000000;
+}
+.aside #choice-text .content .spacing-letter .item-text{
+  padding: 6px 20px;
+  font-size: 12px;
+}
+.aside #choice-text .content .spacing-letter .item-plus{
+  border-right: 1px solid #8c8c8c;
+}
+.aside #choice-text .content .spacing-letter .item-minus{
+  border-left: 1px solid #8c8c8c;
+}
+.aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
+  padding: 5px 6px 1px 6px;
+  cursor: pointer;
+}
 /*Design Choice Illustration*/
 .aside #choice-illustration li .content {
   padding: 10px 10px;
@@ -492,39 +595,7 @@ aside .step .finish-design button{
   background: #999999;
 }
 
-.aside #choice-illustration li .content .color-patterns {
-  width: 100%;
-  border: #bbb solid 1px;
-  background: #FFF;
-  margin-top: 5px;
-}
 
-.aside #choice-illustration li .content .color-patterns .color-pattern-item{
-  height: 20px;
-  float: left;
-  margin-left: 4px;
-  margin-top: 2px;
-  width: 20px;
-  cursor: pointer;
-  border: 1px solid #ddd;
-}
-
-.aside #choice-illustration li .content .color-patterns .color-pattern-item:hover {
-  outline: 1px solid #ed1d24;
-}
-
-.aside #choice-illustration li .content .layer-item {
-  text-align: center;
-  border: 1px #ddd solid;
-  background: #FFF;
-  padding: 5px;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.aside #choice-illustration li .content .layer-item:hover {
-  background: #ffcccc;
-}
 
 /*Design content*/
 .tshirt-design-container{
diff --git a/app/views/design_part/text.html b/app/views/design_part/text.html
index 113ca12..0372608 100644
--- a/app/views/design_part/text.html
+++ b/app/views/design_part/text.html
@@ -1,25 +1,76 @@
 <li>
     <div class="title">
-        <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
-        Text
+        <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
+        文字入力
     </div>
     <div class="content clearfix">
         <div>
-            <input type="text" class="form-control" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">
+            <input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">
         </div>
         <div>
-            <ul>
+            <ul class="font-family-box">
                 <li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li>
             </ul>
         </div>
         <div>
-            <div></div>
+            <div>文字を変形する</div>
         </div>
-        <div>
-            <label>Letter Spacing</label>
-            <div class="group">
-                <i class="fa fa-minus-square" aria-hidden="true"></i> Letter Spacing <i class="fa fa-plus-square" aria-hidden="true"></i>
+        <div class="clearfix spacing-letter ">
+            <div class="pull-left text-label">
+                文字間隔 :
+            </div>
+            <div class="pull-right">
+                <div class="box clearfix">
+                    <div class="item item-plus" ng-click="setLetterSpacingText('plus')">
+                        <i class="fa fa-plus-square-o" aria-hidden="true"></i>
+                    </div>
+                    <div class="item item-text">
+                        リセット
+                    </div>
+                    <div class="item item-minus" ng-click="setLetterSpacingText('minus')">
+                        <i class="fa fa-minus-square-o" aria-hidden="true"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</li>
+<li>
+    <div class="title">
+        <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
+        カラー変更
+        <!--<div class="pull-right">元の色に戻す</div>-->
+    </div>
+    <div class="content clearfix">
+        <div class="color-patterns">
+            <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
             </div>
+            <div class="clearfix"></div>
+        </div>
+    </div>
+</li>
+
+<li>
+    <div class="title">
+        <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
+        重ね順変更
+    </div>
+    <div class="content clearfix">
+        <div class="col-xs-3 layer-item" ng-click="layerProcess(1)">
+            <img src="images/layer-icon-1.png"/>
+            <div>前面へ</div>
+        </div>
+        <div class="col-xs-3 layer-item" ng-click="layerProcess(2)">
+            <img src="images/layer-icon-2.png"/>
+            <div>背面へ</div>
+        </div>
+        <div class="col-xs-3 layer-item" ng-click="layerProcess(3)">
+            <img src="images/layer-icon-3.png"/>
+            <div>最前面へ</div>
+        </div>
+        <div class="col-xs-3 layer-item" ng-click="layerProcess(4)">
+            <img src="images/layer-icon-4.png"/>
+            <div>最前面へ</div>
         </div>
     </div>
 </li>