diff --git a/components/environments/editEnvironment.vue b/components/environments/editEnvironment.vue
index f269ccd04..7a685111d 100644
--- a/components/environments/editEnvironment.vue
+++ b/components/environments/editEnvironment.vue
@@ -35,14 +35,6 @@
               </button>
             </div>
           </div>
-          <textarea
-            id="variableList"
-            readonly
-            v-textarea-auto-height="variableString"
-            v-model="variableString"
-            :placeholder="$t('add_one_variable')"
-            rows="1"
-          ></textarea>
         </li>
       </ul>
       <ul v-for="(variable, index) in this.editingEnvCopy.variables" :key="index">
@@ -114,13 +106,9 @@
 </template>
 
 <script>
-import textareaAutoHeight from "~/directives/textareaAutoHeight"
 import { fb } from "~/helpers/fb"
 
 export default {
-  directives: {
-    textareaAutoHeight,
-  },
   props: {
     show: Boolean,
     editingEnvironment: Object,
diff --git a/directives/textareaAutoHeight.js b/directives/textareaAutoHeight.js
deleted file mode 100644
index 7f64a4784..000000000
--- a/directives/textareaAutoHeight.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default {
-  name: "textareaAutoHeight",
-  update({ scrollHeight, clientHeight, style }) {
-    if (scrollHeight !== clientHeight) {
-      style.minHeight = `${scrollHeight}px`
-    }
-  },
-}
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 7c77e8086..a097110a6 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -27,7 +27,7 @@
         </pw-section>
 
         <pw-section class="orange" :label="$t('headers')" ref="headers">
-          <ul>
+          <ul v-if="headers.length !== 0">
             <li>
               <div class="flex-wrap">
                 <label for="headerList">{{ $t("header_list") }}</label>
@@ -37,14 +37,6 @@
                   </button>
                 </div>
               </div>
-              <textarea
-                id="headerList"
-                readonly
-                v-textarea-auto-height="headerString"
-                v-model="headerString"
-                :placeholder="$t('add_one_header')"
-                rows="1"
-              ></textarea>
             </li>
           </ul>
           <ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
@@ -339,7 +331,6 @@
 <script>
 import axios from "axios"
 import * as gql from "graphql"
-import textareaAutoHeight from "~/directives/textareaAutoHeight"
 import { commonHeaders } from "~/helpers/headers"
 import AceEditor from "~/components/ui/ace-editor"
 import QueryEditor from "~/components/graphql/queryeditor"
@@ -347,9 +338,6 @@ import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { sendNetworkRequest } from "~/helpers/network"
 
 export default {
-  directives: {
-    textareaAutoHeight,
-  },
   components: {
     "pw-section": () => import("~/components/layout/section"),
     "gql-field": () => import("~/components/graphql/field"),
diff --git a/pages/index.vue b/pages/index.vue
index daa91ba0b..daad0003d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -264,15 +264,18 @@
             <div v-if="!rawInput">
               <ul>
                 <li>
-                  <label for="reqParamList">{{ $t("parameter_list") }}</label>
-                  <textarea
-                    id="reqParamList"
-                    readonly
-                    v-textarea-auto-height="rawRequestBody"
-                    v-model="rawRequestBody"
-                    :placeholder="$t('add_one_parameter')"
-                    rows="1"
-                  ></textarea>
+                  <div class="flex-wrap">
+                    <label for="reqParamList">{{ $t("parameter_list") }}</label>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="clearContent('bodyParams', $event)"
+                        v-tooltip.bottom="$t('clear')"
+                      >
+                        <i class="material-icons">clear_all</i>
+                      </button>
+                    </div>
+                  </div>
                 </li>
               </ul>
               <ul v-for="(param, index) in bodyParams" :key="index">
@@ -331,7 +334,18 @@
             <div v-else>
               <ul>
                 <li>
-                  <label for="rawBody">{{ $t("raw_request_body") }}</label>
+                  <div class="flex-wrap">
+                    <label for="rawBody">{{ $t("raw_request_body") }}</label>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="clearContent('rawParams', $event)"
+                        v-tooltip.bottom="$t('clear')"
+                      >
+                        <i class="material-icons">clear_all</i>
+                      </button>
+                    </div>
+                  </div>
                   <Editor
                     v-model="rawParams"
                     :lang="rawInputEditorLang"
@@ -414,7 +428,7 @@
               :selected="true"
             >
               <pw-section class="pink" label="Parameters" ref="parameters">
-                <ul>
+                <ul v-if="params.length !== 0">
                   <li>
                     <div class="flex-wrap">
                       <label for="paramList">{{ $t("parameter_list") }}</label>
@@ -428,14 +442,6 @@
                         </button>
                       </div>
                     </div>
-                    <textarea
-                      id="paramList"
-                      readonly
-                      v-textarea-auto-height="queryString"
-                      v-model="queryString"
-                      :placeholder="$t('add_one_parameter')"
-                      rows="1"
-                    ></textarea>
                   </li>
                 </ul>
                 <ul v-for="(param, index) in params" :key="index">
@@ -721,7 +727,7 @@
               "
             >
               <pw-section class="orange" label="Headers" ref="headers">
-                <ul>
+                <ul v-if="headers.length !== 0">
                   <li>
                     <div class="flex-wrap">
                       <label for="headerList">{{ $t("header_list") }}</label>
@@ -735,14 +741,6 @@
                         </button>
                       </div>
                     </div>
-                    <textarea
-                      id="headerList"
-                      readonly
-                      v-textarea-auto-height="headerString"
-                      v-model="headerString"
-                      :placeholder="$t('add_one_header')"
-                      rows="1"
-                    ></textarea>
                   </li>
                 </ul>
                 <ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
@@ -1251,7 +1249,6 @@ import section from "~/components/layout/section"
 import url from "url"
 import querystring from "querystring"
 import { commonHeaders } from "~/helpers/headers"
-import textareaAutoHeight from "~/directives/textareaAutoHeight"
 import parseCurlCommand from "~/assets/js/curlparser.js"
 import getEnvironmentVariablesFromScript from "~/helpers/preRequest"
 import runTestScriptWithVariables from "~/helpers/postwomanTesting"
@@ -1316,9 +1313,6 @@ const parseHeaders = (xhr) => {
 export const findStatusGroup = (responseStatus) =>
   statusCategories.find(({ statusCodeRegex }) => statusCodeRegex.test(responseStatus))
 export default {
-  directives: {
-    textareaAutoHeight,
-  },
   components: {
     "pw-section": section,
     "pw-toggle": () => import("~/components/ui/toggle"),
@@ -2439,6 +2433,12 @@ export default {
     },
     clearContent(name, { target }) {
       switch (name) {
+        case "bodyParams":
+          this.bodyParams = []
+          break
+        case "rawParams":
+          this.rawParams = "{}"
+          break
         case "parameters":
           this.params = []
           break
@@ -2475,7 +2475,7 @@ export default {
           this.uri = this.url + this.path
           this.label = ""
           this.bodyParams = []
-          this.rawParams = ""
+          this.rawParams = "{}"
           this.files = []
           this.params = []
           this.auth = "None"