diff --git a/index/js/request.list.js b/index/js/request.list.js
index f4a88c8..06a7193 100644
--- a/index/js/request.list.js
+++ b/index/js/request.list.js
@@ -1,4 +1,4 @@
-$('#save-request').click(function(){
+$('#save-request').click(function () {
     let requestName = document.getElementById("input-request-name").value;
     if (requestName === "") {
         alert("request name is require")
@@ -16,7 +16,7 @@ $('#save-request').click(function(){
 $('#show-modal-save-request').click(function () {
     const reqData = getReqResData();
     const activeRequestName = getActiveRequestListName();
-    if ( activeRequestName === ""){
+    if (activeRequestName === "") {
         console.log(activeRequestName);
         // generate name
         // name format will be method
@@ -43,37 +43,46 @@ function getReqResData() {
     const selectFunction = document.getElementById("select-function").value;
     const responseHTML = document.getElementById("json-response").innerHTML;
     const schemaProtoHTML = document.getElementById("schema-proto").innerHTML;
+    const metadata = document.getElementById("ctx-metadata-switch").checked ? document.querySelector('div#ctx-metadata-table > table > tbody').innerHTML : "";
     editor = ace.edit("editor");
-    return  {
-        server_target:serverTarget,
-        selected_service:selectService,
-        selected_function:selectFunction,
-        raw_request:editor.getValue(),
-        response_html:responseHTML,
-        schema_proto_html:schemaProtoHTML,
+
+    return {
+        server_target: serverTarget,
+        selected_service: selectService,
+        selected_function: selectFunction,
+        raw_request: editor.getValue(),
+        response_html: responseHTML,
+        schema_proto_html: schemaProtoHTML,
+        raw_metadata: metadata,
     }
 }
 
 function setReqResData(data) {
     $('#server-target').val(data.server_target);
     target = data.server_target;
-    $("#select-service").html(new Option(data.selected_service, data.selected_service,true,true));
+    $("#select-service").html(new Option(data.selected_service, data.selected_service, true, true));
     $('#choose-service').show();
-    $("#select-function").html(new Option(data.selected_function.substr(data.selected_service.length), data.selected_function,true,true));
+    $("#select-function").html(new Option(data.selected_function.substr(data.selected_service.length), data.selected_function, true, true));
     $('#choose-function').show();
     generate_editor(data.raw_request);
     $('#body-request').show();
     $('#schema-proto').html(data.schema_proto_html);
     $('#json-response').html(data.response_html);
     $('#response').show();
+    if (!!data.raw_metadata) {
+        $('#ctx-metadata-switch').trigger("click");
+        $('#ctx-metadata-table > table > tbody').html(data.raw_metadata);
+    }
 }
 
 function resetReqResData() {
-    target="";
+    target = "";
     $('#choose-service').hide();
     $('#choose-function').hide();
     $('#body-request').hide();
     $('#response').hide();
+    $('#ctx-metadata-switch').prop('checked', false);
+    $('#ctx-metadata-input').hide();
 }
 
 async function renderRequestList() {
@@ -82,11 +91,11 @@ async function renderRequestList() {
 
     const nameList = await getAllRequestKey();
 
-    nameList.forEach(function (item){
+    nameList.forEach(function (item) {
         let node = document.createElement("li")
-        node.classList.add("list-group-item","request-list")
-        node.setAttribute("request-name",item)
-        node.addEventListener("click", function(el){
+        node.classList.add("list-group-item", "request-list")
+        node.setAttribute("request-name", item)
+        node.addEventListener("click", function (el) {
             updateRequestView(el.target.children[1])
         });
         node.innerHTML = `
@@ -97,14 +106,14 @@ async function renderRequestList() {
     })
 }
 
-function removeRequestSelectedClass(){
+function removeRequestSelectedClass() {
     const elems = document.querySelectorAll(".request-list");
-    [].forEach.call(elems, function(el) {
+    [].forEach.call(elems, function (el) {
         el.classList.remove("selected");
     });
 }
 
-function getActiveRequestListName(){
+function getActiveRequestListName() {
     const elems = document.querySelectorAll(".request-list");
     for (let i = 0; i < elems.length; i++) {
         const e = elems[i]
@@ -117,7 +126,7 @@ function getActiveRequestListName(){
 
 function setServerTargetActive() {
     const elems = document.querySelectorAll('[for="server-target"]');
-    [].forEach.call(elems, function(el) {
+    [].forEach.call(elems, function (el) {
         el.classList.add("active");
     });
 }
@@ -138,9 +147,9 @@ function updateRequestView(elm) {
 
 function removeRequest(elm) {
     const requestName = elm.parentElement.lastElementChild.innerText;
-    deleteRequest(requestName).then(()=>{
+    deleteRequest(requestName).then(() => {
         window.location.reload()
-    }).catch((error)=>{
+    }).catch((error) => {
         alert(error)
     })
 }
@@ -148,15 +157,15 @@ function removeRequest(elm) {
 function search(elm) {
     const li = document.querySelectorAll(".request-list")
     li.forEach(function (el) {
-        if (el.getAttribute("request-name").toLowerCase().includes(elm.value.toLowerCase())){
+        if (el.getAttribute("request-name").toLowerCase().includes(elm.value.toLowerCase())) {
             el.style.display = ""
-        }else{
+        } else {
             el.style.display = "none"
         }
 
     })
 }
 
-$(document).ready(function(){
+$(document).ready(function () {
     renderRequestList()
 });
\ No newline at end of file