diff --git a/src/main/resources/templates/page/apiTester.html b/src/main/resources/templates/page/apiTester.html
index e4b7f38..7b38663 100644
--- a/src/main/resources/templates/page/apiTester.html
+++ b/src/main/resources/templates/page/apiTester.html
@@ -6,7 +6,6 @@
 <section layout:fragment="contentFragment">
     <script>
         require.config({paths: {'vs': '/plugins/vs'}});
-        // require(['vs/editor/editor.main'], function(){});
     </script>
     <div id="loading-overlay" style="display: none;">
         <div class="d-flex justify-content-center align-items-center"
@@ -475,7 +474,6 @@
 
                     let me = this;
 
-
                     require(['vs/editor/editor.main'], function () {
                         let requestBodyEditor = monaco.editor.create(target.find(".request_body")[0], {
                             value: model.requestBody,
@@ -507,6 +505,7 @@
                         });
                         me.responses.push(responseBodyEditor);
                     });
+
                     target.find('.path').val(model.path);
                     target.find('.method').val(model.method);
                     this.renderParam(idx);
diff --git a/src/main/resources/templates/page/routes/mockRouteEdit.html b/src/main/resources/templates/page/routes/mockRouteEdit.html
index 6a85c1f..25aaaca 100644
--- a/src/main/resources/templates/page/routes/mockRouteEdit.html
+++ b/src/main/resources/templates/page/routes/mockRouteEdit.html
@@ -4,6 +4,9 @@
 <body>
 
 <section layout:fragment="contentFragment">
+    <script>
+        require.config({paths: {'vs': '/plugins/vs'}});
+    </script>
     <div class="container mt-1">
         <form name="mockRouteForm" id="mockRouteForm"
               th:action="${mockRoute.id == null}?@{/mgmt/routes/register.do}:@{/mgmt/routes/update.do}"
@@ -130,11 +133,9 @@
                                     <input class="form-control" type="number" name="delay" required/>
                                     <label class="form-label must">응답 지연 시간(ms)</label>
                                 </div>
-                                <div class="form-floating mt-1">
-                                            <textarea class="form-control" style="height: 200px;" name="body">
-                                            </textarea>
-                                    <label class="form-label must">응답 Body</label>
-                                </div>
+                                <label class="form-label mt-1">응답 Body</label>
+                                <div class="response_body" style="width:100%;height:250px;border:1px solid grey;"></div>
+                                <textarea class="form-control" style="display: none;" name="body"></textarea>
                             </div>
                             <div class="card-body">
                                 <table class="table">
@@ -217,6 +218,7 @@
 
             let view = {
                 currentIdx: 0,
+                responseEditors : [],
                 init: function () {
                     $('.btn_add_case').on('click', function () {
                         controller.addResponse();
@@ -255,6 +257,7 @@
                             conditions: [],
                             headers: []
                         };
+                        //statusCode, delay, defaultResponse, body 로 끝나는 항목을 찾음
                         response.statusCode = $(this).find('input[name$="statusCode"]').val();
                         response.delay = $(this).find('input[name$="delay"]').val();
                         response.defaultResponse = $(this).find('input[name$="defaultResponse"]').val()==='true';
@@ -278,7 +281,7 @@
                             };
                             response.headers.push(header);
                         });
-
+                        console.log(model);
                     });
                     $('#responses').empty();
                     this.render();
@@ -327,6 +330,22 @@
                         nodeCopy.find('input[name="responses[' + i + '].statusCode"]').val(model.responses[i].statusCode);
                         nodeCopy.find('input[name="responses[' + i + '].defaultResponse"]').val(model.responses[i].defaultResponse);
                         nodeCopy.find('input[name="responses[' + i + '].delay"]').val(model.responses[i].delay);
+
+                        let me = this;
+
+                        require(['vs/editor/editor.main'], function () {
+                            let editor = monaco.editor.create(nodeCopy.find(".response_body")[0], {
+                                value: model.responses[i].body,
+                                theme: 'vs-light',
+                                automaticLayout: true
+                            });
+                            me.responseEditors.push(editor);
+                            me.responseEditors[i].onDidChangeModelContent(function (e) {
+                                model.responses[i].body = me.responseEditors[i].getValue();
+                                nodeCopy.find('textarea[name="responses[' + i + '].body"]').val(model.responses[i].body);
+                            });
+                        });
+
                         nodeCopy.find('textarea[name="responses[' + i + '].body"]').val(model.responses[i].body);
 
                         nodeCopy.find('input[name="responses[' + i + '].statusCode"]').on('input', function () {
@@ -337,10 +356,6 @@
                             model.responses[i].delay = $(this).val();
                         });
 
-                        nodeCopy.find('textarea[name="responses[' + i + '].body"]').on('input', function () {
-                            model.responses[i].body = $(this).val();
-                        });
-
                         let conditions = nodeCopy.find('.response_conditions');
 
                         for (let c = 0; c < model.responses[i].conditions.length; c++) {
