diff --git a/WebContent/jsp/onl/admin/rule/transform2/transform2ManDetail.jsp b/WebContent/jsp/onl/admin/rule/transform2/transform2ManDetail.jsp
index f676c7b..269818f 100644
--- a/WebContent/jsp/onl/admin/rule/transform2/transform2ManDetail.jsp
+++ b/WebContent/jsp/onl/admin/rule/transform2/transform2ManDetail.jsp
@@ -44,6 +44,9 @@
 		.div-hover {
 			background-color: #EDD5DD
 		}
+		
+		.btn_move { width:32px; min-width: 32px; height: 32px; background-color: #fff; border:1px solid #999; border-radius:4px; margin-bottom: 4px; 	}
+		
 
 	</style>
 	<jsp:include page="/jsp/common/include/script.jsp"/>
@@ -888,7 +891,7 @@
 				}
 			});
 
-			$("input[name=auto]").click(function(){
+			$("#auto").click(function(){
 				//debugger;
 				jsPlumbInstance.deleteEveryConnection();
 
@@ -915,7 +918,7 @@
 				}
 			});
 
-			$("input[name=addAll]").click(function() {
+			$("#addAll").click(function() {
 				console.debug('addAll');
 				var srcRowId = sourceGrid.getGridParam( "selrow" );
 				var tgtRowId = targetGrid.getGridParam( "selrow" );
@@ -966,7 +969,7 @@
 				}
 			});
 
-			$("input[name=removeAll]").click(function(){
+			$("#removeAll").click(function(){
 				var tgtRowId = targetGrid.getGridParam( "selrow" );
 				if (tgtRowId == null) {alert("타겟레이아웃을 선택하여 주십시요.");return;}
 				//grid data
@@ -985,6 +988,49 @@
 					jsPlumbInstance.deleteConnectionsForElement(document.getElementById(targetEndpointElementId));
 				}
 			});
+			
+			$("#add").click(function() {
+				
+				var srcRowId = sourceGrid.getGridParam( "selrow" );
+				var tgtRowId = targetGrid.getGridParam( "selrow" );
+				if (srcRowId == null) {alert('<%=localeMessage.getString("transformManDetail.alert1")%>');return;}
+				if (tgtRowId == null) {alert('<%=localeMessage.getString("transformManDetail.alert2")%>');return;}
+
+				//field, ATTR 여부 판단
+				var sourceRow = sourceGrid.getRowData( srcRowId );
+				var targetRow = targetGrid.getRowData( tgtRowId );
+				if ( (sourceRow["loutItemType"] == 'Field' || sourceRow["loutItemType"] == 'Attr' || sourceRow["loutItemType"] == 'Array') &&
+						(targetRow["loutItemType"] == 'Field' || targetRow["loutItemType"] == 'Attr' || targetRow["loutItemType"] == 'Array')  ){
+					;
+				}else{
+					alert('<%=localeMessage.getString("transformManDetail.alert3")%>');
+					return ;
+				}
+				
+				targetGrid.jqGrid('setCell',tgtRowId,'CNVSNCMDNAME',addArrayTag(sourceRow['loutItemType'], addGroupTag(srcGroup,sourceRow['LOUTITEMPATH'])));
+				targetGrid.jqGrid('setCell',tgtRowId,'CNVSNRSULTITEMPATHNAME',addArrayTag(targetRow['loutItemType'], addGroupTag(tgtGroup,targetRow['LOUTITEMPATH'])));
+				targetGrid.jqGrid('setCell',tgtRowId,'CNVSNITEMSERNO',targetRow['loutItemSerno']);
+				
+				try {
+					jsPlumbConnect(srcRowId, tgtRowId);
+				} catch (e) {console.error(e);}
+			});
+			
+			$("#remove").click(function(){
+				var tgtRowId = targetGrid.getGridParam( "selrow" );
+				if (tgtRowId == null) {alert("타겟레이아웃을 선택하여 주십시요.");return;}
+				//grid data
+				var targetData = targetGrid.getRowData();
+				
+				targetGrid.jqGrid('setCell', tgtRowId, 'CNVSNCMDNAME', null);
+				targetGrid.jqGrid('setCell', tgtRowId, 'CNVSNRSULTITEMPATHNAME', null);
+				targetGrid.jqGrid('setCell', tgtRowId, 'CNVSNITEMSERNO', null);
+				targetGrid.jqGrid('setCell', tgtRowId, 'CNVSNITEMBASCVAL', null);
+
+				const targetEndpointElementId = targetGrid.getEndpointElementId(tgtRowId);
+				jsPlumbInstance.deleteConnectionsForElement(document.getElementById(targetEndpointElementId));
+				
+			});
 
 			$("textarea[name=CNVSNRSULTITEMPATHNAME],textarea[name=CNVSNCMDNAME],input[name=CNVSNITEMBASCVAL],input[name=CNVSNITEMSERNO]").blur(function(){
 				var rowId = targetGrid.getGridParam( "selrow" );
@@ -2161,12 +2207,12 @@
 						<div id="sourcePage"></div>
 					</div>
 				</td>
-				<td style="width:30%; text-align:center; vertical-align: top;">
-
-					<br /><!-- 이 br 이 없을 때 버튼이 제대로 동작 하지 않는다. -->
-					<input type=button id="removeAll" name="removeAll" class="btn_img btn_removeAll"/><br />
-					<input type=button id="addAll" name="addAll" class="btn_img btn_addAll"/><br />
-					<input type=button id="auto" name="auto" class="btn_img btn_auto" />
+				<td style="width:30%; min-width:70px; text-align:center; vertical-align: top; ">
+					<button type=button id="remove" name="remove" class="cssbtn btn_move" title="remove"><</button>
+					<button type=button id="add" name="add" class="cssbtn btn_move" title="add"> > </button><br />
+					<button type=button id="removeAll" name="removeAll" class="cssbtn btn_move" title="remove all"> << </button>
+					<button type=button id="addAll" name="addAll" class="cssbtn btn_move" title="add all"> >> </button><br />
+					<button type=button id="auto" name="auto" class="cssbtn btn_move" style="width: 70px; " title="auto"> Auto </button>
 				</td>
 				<td style="vertical-align:top;">
 					<table class="table_row" cellspacing="0">