diff --git a/src/main/resources/templates/fragment/head.html b/src/main/resources/templates/fragment/head.html
index fd0f5f4..600ff0b 100644
--- a/src/main/resources/templates/fragment/head.html
+++ b/src/main/resources/templates/fragment/head.html
@@ -10,7 +10,7 @@
     <meta content="index, follow" name="robots"/>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <meta content="https://www.eactive.co.kr/" property="og:url"/>
-    <title th:text="#{title.html}">개발자 포털</title>
+    <title>API Simulator</title>
     <link href="/css/font.css" rel="stylesheet" type="text/css"/>
     <link rel="stylesheet" href="/css/fontawesome/css/all.min.css" type="text/css"/>
     <link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css"/>
diff --git a/src/main/resources/templates/page/routes/mockRouteEdit.html b/src/main/resources/templates/page/routes/mockRouteEdit.html
index 25aaaca..8995872 100644
--- a/src/main/resources/templates/page/routes/mockRouteEdit.html
+++ b/src/main/resources/templates/page/routes/mockRouteEdit.html
@@ -232,23 +232,23 @@
 
                     $('#responseTabContent').on('click', 'button', function () {
                         if ($(this).hasClass('btn_remove_case')) {
-                            controller.removeResponse($(this).attr("data-id"));
+                            controller.removeResponse($(this).data("id"));
                         }
 
                         if ($(this).hasClass('btn_add_condition')) {
-                            controller.addResponseCondition($(this).attr("data-id"));
+                            controller.addResponseCondition($(this).data("id"));
                         }
 
                         if ($(this).hasClass('btn_add_header')) {
-                            controller.addResponseHeader($(this).attr("data-id"));
+                            controller.addResponseHeader($(this).data("id"));
                         }
 
                         if ($(this).hasClass('btn_remove_condition')) {
-                            controller.removeResponseCondition($(this).attr("data-id"), $(this).attr("data-row"));
+                            controller.removeResponseCondition($(this).data("id"), $(this).data("row"));
                         }
 
                         if ($(this).hasClass('btn_remove_header')) {
-                            controller.removeResponseHeader($(this).attr("data-id"), $(this).attr("data-row"));
+                            controller.removeResponseHeader($(this).data("id"), $(this).data("row"));
                         }
                     });
 
@@ -281,18 +281,134 @@
                             };
                             response.headers.push(header);
                         });
-                        console.log(model);
                     });
                     $('#responses').empty();
                     this.render();
                 },
-                render: function () {
+                renderCondition: function(i) {
+
+                    $('#response_tab_' + i).find('.response_conditions').empty();
+                    let conditions = $('#response_tab_' + i).find('.response_conditions');
+
+                    for (let c = 0; c < model.responses[i].conditions.length; c++) {
+                        let conditionTemplate = $('#conditionTemplate').children().find('tr').clone();
+                        conditionTemplate.find('select').attr('name', 'responses[' + i + '].conditions[' + c + '].type');
+                        conditionTemplate.find('input[name="key"]').attr('name', 'responses[' + i + '].conditions[' + c + '].key');
+                        conditionTemplate.find('input[name="value"]').attr('name', 'responses[' + i + '].conditions[' + c + '].value');
+                        conditionTemplate.find('button').attr("data-id", i);
+                        conditionTemplate.find('button').attr("data-row", c);
+
+                        conditionTemplate.find('select').val(model.responses[i].conditions[c].type);
+                        conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].key"]').val(model.responses[i].conditions[c].key);
+                        conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].value"]').val(model.responses[i].conditions[c].value);
+
+                        conditionTemplate.find('select').on('change', function () {
+                            model.responses[i].conditions[c].type = $(this).val();
+                        });
+
+                        conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].key"]').on('input', function () {
+                            model.responses[i].conditions[c].key = $(this).val();
+                        });
+
+                        conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].value"]').on('input', function () {
+                            model.responses[i].conditions[c].value = $(this).val();
+                        });
+
+                        $(conditions).append(conditionTemplate);
+                    }
+                },
+                renderHeaders(i){
+
+                    $('#response_tab_' + i).find('.response_headers').empty();
+                    let headers = $('#response_tab_' + i).find('.response_headers');
+
+                    for (let j = 0; j < model.responses[i].headers.length; j++) {
+                        let headerTemplate = $('#responseHeaderTemplate').children().find('tr').clone();
+                        headerTemplate.find('input[name="key"]').attr('name', 'responses[' + i + '].headers[' + j + '].key');
+                        headerTemplate.find('input[name="value"]').attr('name', 'responses[' + i + '].headers[' + j + '].value');
+                        headerTemplate.find('button').attr("data-id", i);
+                        headerTemplate.find('button').attr("data-row", j);
+
+                        headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].key"]').val(model.responses[i].headers[j].key);
+                        headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].value"]').val(model.responses[i].headers[j].value);
+
+                        headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].key"]').on('input', function () {
+                            model.responses[i].headers[j].key = $(this).val();
+                        });
+
+                        headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].value"]').on('input', function () {
+                            model.responses[i].headers[j].value = $(this).val();
+                        });
+
+                        $(headers).append(headerTemplate);
+                    }
+                },
+                renderResponse(i){
+
+                    this.renderResponseTabTitle();
+                    let nodeCopy = $('#template').children().clone();
+
+                    nodeCopy.attr('id', 'response_tab_' + i);
+                    nodeCopy.attr('aria-labelledby', 'response_tab_' + i);
+                    nodeCopy.attr('tabindex', i);
+
+                    console.log(model.responses[i]);
+                    nodeCopy.attr('class', 'tab-pane fade ' + (model.responses[i].defaultResponse? 'show active' : ''));
+                    if (model.responses[i].defaultResponse) {
+                        nodeCopy.find('.condition_name').text('기본 응답');
+                        nodeCopy.find('.condition').attr('class', 'condition')
+                        nodeCopy.find('.condition').attr('style', 'display: none;')
+                    }else {
+                        nodeCopy.find('.condition_name').text('조건 ' + (i + 1));
+                    }
+                    nodeCopy.find('.btn_remove_case').attr("data-id", i);
+                    nodeCopy.find('.btn_add_condition').attr("data-id", i);
+                    nodeCopy.find('.btn_add_header').attr("data-id", i);
+                    nodeCopy.find('input[name="statusCode"]').attr('name', 'responses[' + i + '].statusCode');
+                    nodeCopy.find('input[name="defaultResponse"]').attr('name', 'responses[' + i + '].defaultResponse');
+                    nodeCopy.find('input[name="delay"]').attr('name', 'responses[' + i + '].delay');
+                    nodeCopy.find('textarea[name="body"]').attr('name', 'responses[' + i + '].body');
+
+                    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
+                        });
+
+                        editor.onDidChangeModelContent(function (e) {
+                            model.responses[i].body = editor.getValue();
+                            nodeCopy.find('textarea[name="responses[' + i + '].body"]').val(editor.getValue());
+                        });
+
+                        me.responseEditors.push(editor);
+                    });
+
+                    nodeCopy.find('textarea[name="responses[' + i + '].body"]').val(model.responses[i].body);
+                    nodeCopy.find('input[name="responses[' + i + '].statusCode"]').on('input', function () {
+                        model.responses[i].statusCode = $(this).val();
+                    });
+
+                    nodeCopy.find('input[name="responses[' + i + '].delay"]').on('input', function () {
+                        model.responses[i].delay = $(this).val();
+                    });
+
+                    $('#responseTabContent').append(nodeCopy);
+                    if(view.currentIdx >= model.responses.length){
+                        view.currentIdx = model.responses.length - 1;
+                    }
+                    $('#responseTabTitle li:eq(' + view.currentIdx + ') a').tab('show');
+
+                },
+                renderResponseTabTitle(){
                     $('#responseTabTitle').empty();
-                    $('#responseTabContent').empty();
-
                     for (let i = 0; i < model.responses.length; i++) {
-                        let nodeCopy = $('#template').children().clone();
-
                         let tabButton = $('<a>').attr('class', 'nav-link'+ (model.responses[i].defaultResponse? ' active' : ''))
                             .attr('data-bs-toggle', 'tab')
                             .attr('type', 'button')
@@ -303,113 +419,11 @@
                             .text(model.responses[i].defaultResponse?'기본 응답':('조건 ' + i));
 
                         let li = $('<li>').attr('class', 'nav-item')
-                                .attr('role','presentation')
-                                .append(tabButton);
+                            .attr('role','presentation')
+                            .append(tabButton);
 
                         $('#responseTabTitle').append(li);
-
-                        nodeCopy.attr('id', 'response_tab_' + i);
-                        nodeCopy.attr('aria-labelledby', 'response_tab_' + i);
-                        nodeCopy.attr('tabindex', i);
-                        nodeCopy.attr('class', 'tab-pane fade ' + (model.responses[i].defaultResponse? 'show active' : ''));
-                        if (model.responses[i].defaultResponse) {
-                            nodeCopy.find('.condition_name').text('기본 응답');
-                            nodeCopy.find('.condition').attr('class', 'condition')
-                            nodeCopy.find('.condition').attr('style', 'display: none;')
-                        }else {
-                            nodeCopy.find('.condition_name').text('조건 ' + (i + 1));
-                        }
-                        nodeCopy.find('.btn_remove_case').attr("data-id", i);
-                        nodeCopy.find('.btn_add_condition').attr("data-id", i);
-                        nodeCopy.find('.btn_add_header').attr("data-id", i);
-                        nodeCopy.find('input[name="statusCode"]').attr('name', 'responses[' + i + '].statusCode');
-                        nodeCopy.find('input[name="defaultResponse"]').attr('name', 'responses[' + i + '].defaultResponse');
-                        nodeCopy.find('input[name="delay"]').attr('name', 'responses[' + i + '].delay');
-                        nodeCopy.find('textarea[name="body"]').attr('name', 'responses[' + i + '].body');
-
-                        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 () {
-                            model.responses[i].statusCode = $(this).val();
-                        });
-
-                        nodeCopy.find('input[name="responses[' + i + '].delay"]').on('input', function () {
-                            model.responses[i].delay = $(this).val();
-                        });
-
-                        let conditions = nodeCopy.find('.response_conditions');
-
-                        for (let c = 0; c < model.responses[i].conditions.length; c++) {
-                            let conditionTemplate = $('#conditionTemplate').children().find('tr').clone();
-                            conditionTemplate.find('select').attr('name', 'responses[' + i + '].conditions[' + c + '].type');
-                            conditionTemplate.find('input[name="key"]').attr('name', 'responses[' + i + '].conditions[' + c + '].key');
-                            conditionTemplate.find('input[name="value"]').attr('name', 'responses[' + i + '].conditions[' + c + '].value');
-                            conditionTemplate.find('button').attr("data-id", i);
-                            conditionTemplate.find('button').attr("data-row", c);
-
-                            conditionTemplate.find('select').val(model.responses[i].conditions[c].type);
-                            conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].key"]').val(model.responses[i].conditions[c].key);
-                            conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].value"]').val(model.responses[i].conditions[c].value);
-
-                            conditionTemplate.find('select').on('change', function () {
-                                model.responses[i].conditions[c].type = $(this).val();
-                            });
-
-                            conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].key"]').on('input', function () {
-                                model.responses[i].conditions[c].key = $(this).val();
-                            });
-
-                            conditionTemplate.find('input[name="responses[' + i + '].conditions[' + c + '].value"]').on('input', function () {
-                                model.responses[i].conditions[c].value = $(this).val();
-                            });
-
-                            $(conditions).append(conditionTemplate);
-                        }
-
-                        for (let j = 0; j < model.responses[i].headers.length; j++) {
-                            let headerTemplate = $('#responseHeaderTemplate').children().find('tr').clone();
-                            headerTemplate.find('input[name="key"]').attr('name', 'responses[' + i + '].headers[' + j + '].key');
-                            headerTemplate.find('input[name="value"]').attr('name', 'responses[' + i + '].headers[' + j + '].value');
-                            headerTemplate.find('button').attr("data-id", i);
-                            headerTemplate.find('button').attr("data-row", j);
-
-                            headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].key"]').val(model.responses[i].headers[j].key);
-                            headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].value"]').val(model.responses[i].headers[j].value);
-
-                            headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].key"]').on('input', function () {
-                                model.responses[i].headers[j].key = $(this).val();
-                            });
-
-                            headerTemplate.find('input[name="responses[' + i + '].headers[' + j + '].value"]').on('input', function () {
-                                model.responses[i].headers[j].value = $(this).val();
-                            });
-
-                            $(nodeCopy).find('.response_headers').append(headerTemplate);
-                        }
-
-                        $('#responseTabContent').append(nodeCopy);
-
                     }
-
                     let tabButton = $('<button>').attr('class', 'nav-link btn_add_case')
                         .attr('type', 'button')
                         .attr('aria-selected', 'false')
@@ -420,8 +434,15 @@
                         .append(tabButton);
 
                     $('#responseTabTitle').append(li);
+                },
+                render: function () {
+                    $('#responseTabContent').empty();
 
-                    $('#responseTabTitle li:eq(' + view.currentIdx + ') a').tab('show');
+                    for (let i = 0; i < model.responses.length; i++) {
+                        view.renderResponse(i);
+                        view.renderCondition(i);
+                        view.renderHeaders(i);
+                    }
                 }
             };
 
@@ -439,7 +460,7 @@
                     });
 
                     view.currentIdx = model.responses.length - 1;
-                    view.render();
+                    view.renderResponse(view.currentIdx);
                 },
                 removeResponse: function (idx) {
                     if (model.responses[idx].defaultResponse) {
@@ -457,12 +478,12 @@
                         value: ''
                     });
                     view.currentIdx = idx;
-                    view.render();
+                    view.renderCondition(idx);
                 },
                 removeResponseCondition: function (idx, conditionIdx) {
                     model.responses[idx].conditions.splice(conditionIdx, 1);
                     view.currentIdx = idx;
-                    view.render();
+                    view.renderCondition(idx);
                 },
                 addResponseHeader: function (idx) {
                     model.responses[idx].headers.push({
@@ -470,12 +491,12 @@
                         value: ''
                     });
                     view.currentIdx = idx;
-                    view.render();
+                    view.renderHeaders(idx);
                 },
                 removeResponseHeader: function (idx, headerIdx) {
                     model.responses[idx].headers.splice(headerIdx, 1);
                     view.currentIdx = idx;
-                    view.render();
+                    view.renderHeaders(idx);
                 }
             }