diff --git a/resources/assets/js/components/home/debugger/Debugger.vue b/resources/assets/js/components/home/debugger/Debugger.vue
index 747c1d51c..1241724e4 100644
--- a/resources/assets/js/components/home/debugger/Debugger.vue
+++ b/resources/assets/js/components/home/debugger/Debugger.vue
@@ -30,10 +30,15 @@
         <div>
           <v-client-table
             :data="dataTableTriggers"
-            :columns="columns"
-            :options="options"
+            :columns="columnsTriggers"
+            :options="optionsTriggers"
             ref="vueTableTriggers"
-          />
+          >
+          <span 
+            slot="code"
+            v-html="props.row.code"
+            slot-scope="props">{{props.row.code}}</span>
+          </v-client-table>
         </div>
       </tab>
     </tabs>
@@ -51,7 +56,7 @@ export default {
   },
   components: {
     Tabs,
-    Tab,
+    Tab
   },
   data() {
     return {
@@ -64,6 +69,7 @@ export default {
       dataTable: [],
       dataTableTriggers: [],
       columns: ["key", "value"],
+      columnsTriggers: ["name", "execution","code"],
       options: {
         perPage: 200,
         filterable: true,
@@ -73,7 +79,19 @@ export default {
         headings: {
           key: this.$i18n.t("ID_NAME"),
           value: this.$i18n.t("ID_FIELD_DYNAFORM_TEXT")
+        }
+      },
+      optionsTriggers: {
+        perPage: 200,
+        filterable: true,
+        pagination: {
+          show: false
         },
+        headings: {
+          name: this.$i18n.t("ID_NAME"),
+          execution: this.$i18n.t("ID_EXECUTION"),
+          code: this.$i18n.t("ID_CAPTCHA_CODE"),
+        }
       },
       optionsDebugVars: {
         selected: "all",
@@ -86,8 +104,7 @@ export default {
     };
   },
   mounted() {
-    this.getDebugVars({ filter: "all" });
-    this.getDebugVarsTriggers();
+    this.loadData();
   },
   methods: {
     classBtn(cls) {
@@ -96,6 +113,13 @@ export default {
     showDebugger() {
       this.$refs["modal-debugger"].show();
     },
+    /**
+     * Load the data for debugger
+     */
+    loadData() {
+      this.getDebugVars({ filter: "all" });
+      this.getDebugVarsTriggers();
+    },
     /**
      * Get debug variables
      */
@@ -119,11 +143,12 @@ export default {
       let that = this,
         dt = [];
       api.cases.debugVarsTriggers(data).then((response) => {
-        if (response.data.length > 0) {
-          _.forIn(response.data.data[0], function (value, key) {
+        if (response.data.data.length > 0) {
+          _.each(response.data.data, function (o) {
             dt.push({
-              key,
-              value
+              name: o.name,
+              execution: o.execution_time,
+              code: o.code
             });
           });
           this.dataTableTriggers = dt;
@@ -136,7 +161,7 @@ export default {
     changeOption(opt) {
       this.getDebugVars({ filter: opt });
     }
-  },
+  }
 };
 </script>
 
@@ -305,4 +330,16 @@ input[type="radio"] {
     line-height: 1.5;
     border-radius: .2rem;
 }
+
+.debugger-container .php{
+    font-family: Consolas, monospace;
+    color: #000;
+    margin-bottom: 0px;
+    margin-top: 0px;
+    background: #fff;
+     border-radius: 0px; 
+     padding: 0px; 
+     line-height: 1.5; 
+    overflow: auto;
+}
 </style>
\ No newline at end of file
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index f272713b8..d02d46ab0 100644
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -121,12 +121,14 @@ export default {
                     eventMethod === "attachEvent" ? "onmessage" : "message";
 
             eventer(messageEvent, function(e) {
-                if (
-                    e.data === "redirect=todo" ||
-                    e.message === "redirect=todo"
-                ) {
+                if ( e.data === "redirect=todo" || e.message === "redirect=todo"){
                     that.page = "todo";
                 }
+                if ( e.data === "update=debugger" || e.message === "update=debugger"){
+                    if(that.$refs["component"].updateView){
+                        that.$refs["component"].updateView();
+                    }
+                }
             });
         },
         /**
diff --git a/resources/assets/js/home/ModalNewRequest.vue b/resources/assets/js/home/ModalNewRequest.vue
index a87c0a507..cbe39d478 100644
--- a/resources/assets/js/home/ModalNewRequest.vue
+++ b/resources/assets/js/home/ModalNewRequest.vue
@@ -164,6 +164,7 @@ export default {
             APP_UID: data.data.APPLICATION,
             DEL_INDEX: 1,
             ACTION: "draft",
+            PRO_UID: data.data.PROCESS
           };
           self.disable = false;
           self.$parent.$parent.page = "XCase";
diff --git a/resources/assets/js/home/XCase.vue b/resources/assets/js/home/XCase.vue
index 85a2e3afb..3049e26d7 100644
--- a/resources/assets/js/home/XCase.vue
+++ b/resources/assets/js/home/XCase.vue
@@ -9,7 +9,7 @@
       allowfullscreen
       @load="onLoadIframe"
     ></iframe>
-    <Debugger v-if="openDebug === true" :style="'height:' + height + 'px'" />
+    <Debugger v-if="openDebug === true" :style="'height:' + height + 'px'" ref="debugger"/>
   </div>
 </template>
 
@@ -62,6 +62,14 @@ export default {
     classBtn(cls) {
       return "btn v-btn-request " + cls;
     },
+    /**
+     * update view in component
+     */
+    updateView(){
+      if(this.openDebug){
+        this.$refs["debugger"].loadData();
+      }
+    },
     onLoadIframe() {},
   },
 };
diff --git a/workflow/engine/templates/cases/open.js b/workflow/engine/templates/cases/open.js
index 3db76870c..8c8e2ac13 100644
--- a/workflow/engine/templates/cases/open.js
+++ b/workflow/engine/templates/cases/open.js
@@ -598,6 +598,14 @@ Ext.onReady(function(){
   Ext.getCmp('actionMenu').hide();
   Ext.getCmp('returnButton').hide();
 
+  // Hacky Code for update the debugger in new UI
+  document.getElementById("openCaseFrame").onload = function ()
+  {
+      if(window.parent){
+        window.parent.postMessage("update=debugger","*");
+      }
+  };
+  
   hideCaseNavigatorPanel();
   if(typeof appStatus !== "undefined") {
       showCaseNavigatorPanel(appStatus);