diff --git a/app/scripts/controllers/tshirtdesign.js b/app/scripts/controllers/tshirtdesign.js
index 7629165..b3086b3 100644
--- a/app/scripts/controllers/tshirtdesign.js
+++ b/app/scripts/controllers/tshirtdesign.js
@@ -153,6 +153,10 @@ define(['app'], function (app) {
 				case 'path-group' :
 					$rootScope.isShowLeftPanel = 'illustration';
 					break;
+					
+				case 'image':
+					$rootScope.isShowLeftPanel = 'image';
+					break;
 
 				default :
 					$rootScope.isShowLeftPanel = 'default';
@@ -335,5 +339,28 @@ define(['app'], function (app) {
 
 			}
 		}
+		
+		
+		/**** process insert image */
+		$scope.chooseImage = function(e){console.log(e);
+			var reader = new FileReader();
+		    reader.onload = function (event) { console.log('fdsf');
+		        var imgObj = new Image();
+		        imgObj.src = event.target.result;
+		        imgObj.onload = function () {
+		            // start fabricJS stuff
+		            
+		            var image = new fabric.Image(imgObj);
+		            image.set({
+		                left: 50,
+		                top: 50
+		            });
+		            //image.scale(getRandomNum(0.1, 0.25)).setCoords();
+		            image.scaleToWidth(200);
+		            canvas.add(image);
+		        }
+		    }
+    		reader.readAsDataURL(e.target.files[0]);
+		}
 	});
 });
diff --git a/app/styles/main.css b/app/styles/main.css
index a0f3ef7..b0db2a5 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -406,13 +406,12 @@ aside .step .finish-design button{
   padding-left: 0;
   margin-top: 10px;
 }
-.aside .box-design-option li{
 
-}
 .aside .box-design-option li{
   border: 1px solid #cdcdcd;
   position: relative;
   /*cursor: pointer;*/
+  margin-bottom: 10px;
 }
 .aside .box-design-option li .hover{
   background-color: #fddad4;
@@ -450,6 +449,7 @@ aside .step .finish-design button{
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
+  min-height: 65px;
 }
 
 .aside .box-design-option li .content .color-patterns .color-pattern-item{
@@ -553,6 +553,7 @@ aside .step .finish-design button{
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
+  min-height: 350px;
 }
 
 .aside #choice-illustration li .content .illustration-list .illstration-item{
@@ -595,7 +596,42 @@ aside .step .finish-design button{
   background: #999999;
 }
 
+#btn-choose-image {
+  background: #ff0f00;
+  cursor: pointer;
+  margin: 10px 0px;
+  padding: 0 10px;
+  color: #FFF;
+  font-size: 12px;
+}
+
+#btn-choose-image:hover {
+  background: #f8aeae;
+}
+
+.aside #choice-image li .content {
+  margin: 0 10px;
+  padding: 10px 0;
+}
 
+.aside #choice-image li .content .small-text {
+  font-size:10px;
+  margin-bottom: 10px;
+}
+
+.aside #choice-image {
+  font-size: 13px;
+}
+
+.aside #imgLoader{
+  display: none;
+}
+
+.aside #choice-image li .content .list-images {
+  height: 300px;
+  background: #FFF;
+  border: 1px solid #DDD;
+}
 
 /*Design content*/
 .tshirt-design-container{
diff --git a/app/views/design_part/image.html b/app/views/design_part/image.html
index 7a7c6e5..f06f615 100644
--- a/app/views/design_part/image.html
+++ b/app/views/design_part/image.html
@@ -1,12 +1,17 @@
 <li>
     <div class="title">
         <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
-        イラスト・イメージ選択
+        自分の画像・写真
     </div>
     <div class="content clearfix">
-        
+        <input type="file" id="imgLoader" onchange="angular.element(this).scope().chooseImage(event)">
+        <div id="btn-choose-image" onclick="$('#imgLoader').click()">＞　ファイルを選択してアップロード</div>
+        <div class="small-text">ファイルサイズ5MBまで（JPEG、PNG）</div>
+        <div>アップ済み画像・写真リスト</div>
+        <div class="list-images"></div>
     </div>
 </li>
+
 <li>
     <div class="title">
         <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
@@ -14,15 +19,33 @@
         <div class="pull-right">元の色に戻す</div>
     </div>
     <div class="content clearfix">
-        
+        <div class="color-patterns">
+            
+        </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>
\ No newline at end of file