diff --git a/packages/nc-gui/components/apiClient/headers.vue b/packages/nc-gui/components/apiClient/headers.vue
index 58ff36f810..9712ae1407 100644
--- a/packages/nc-gui/components/apiClient/headers.vue
+++ b/packages/nc-gui/components/apiClient/headers.vue
@@ -27,7 +27,7 @@
               <v-combobox
                 v-ge="['api-client-headers','enable']"
                 class="body-2 caption"
-                :items="headerListAutoWithEnv"
+                :items="headerListAuto"
                 v-model="item.name"
                 :disabled="!item.enabled"
                 hide-details
@@ -90,11 +90,6 @@
           this.$emit('input', value)
         }
       },
-      // populating autocomplete list along with env variables
-      headerListAutoWithEnv() {
-        const envObj = this.isDashboard ? this.$store.getters['project/GtrApiEnvironment'] : this.$store.getters['project/GtrDefaultApiEnvironment'];
-        return [...this.headerListAuto, ...(envObj ? Object.keys(envObj[this.env]).map(e => `{{${e}}}`) : [])];
-      }
     },
 
     beforeCreated() {
diff --git a/packages/nc-gui/components/project/tableTabs/webhook/httpWebhook.vue b/packages/nc-gui/components/project/tableTabs/webhook/httpWebhook.vue
index a0fec4aa50..5a0a3c6e50 100644
--- a/packages/nc-gui/components/project/tableTabs/webhook/httpWebhook.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhook/httpWebhook.vue
@@ -57,9 +57,15 @@
 
       </v-tab-item>
       <v-tab-item>
-        <!--                <monaco-editor-->
-        <!--                  :code.sync="api.auth"-->
-        <!--                  cssStyle="height:250px"></monaco-editor>-->
+        <monaco-json-editor
+          style="height: 250px"
+          class="editor card text-left"
+          theme="vs-dark"
+          v-model="api.auth"
+          language="json"
+          :options="{validate:true,documentFormattingEdits:true,foldingRanges:true}"
+        >
+        </monaco-json-editor>
       </v-tab-item>