diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_connectors.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_connectors.test.tsx
index 3b7865e59b9e6..3a2afff03c58f 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_connectors.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_connectors.test.tsx
@@ -36,6 +36,7 @@ describe('WebhookActionConnectorFields renders', () => {
       />
     );
     expect(wrapper.find('[data-test-subj="webhookViewHeadersSwitch"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="webhookHeaderText"]').length > 0).toBeTruthy();
     wrapper.find('[data-test-subj="webhookViewHeadersSwitch"]').first().simulate('click');
     expect(wrapper.find('[data-test-subj="webhookMethodSelect"]').length > 0).toBeTruthy();
     expect(wrapper.find('[data-test-subj="webhookUrlText"]').length > 0).toBeTruthy();
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_connectors.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_connectors.tsx
index 57c88607c0884..2321d5b4b5479 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_connectors.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_connectors.tsx
@@ -31,14 +31,16 @@ const HTTP_VERBS = ['post', 'put'];
 const WebhookActionConnectorFields: React.FunctionComponent<ActionConnectorFieldsProps<
   WebhookActionConnector
 >> = ({ action, editActionConfig, editActionSecrets, errors }) => {
+  const { user, password } = action.secrets;
+  const { method, url, headers } = action.config;
+
   const [httpHeaderKey, setHttpHeaderKey] = useState<string>('');
   const [httpHeaderValue, setHttpHeaderValue] = useState<string>('');
   const [hasHeaders, setHasHeaders] = useState<boolean>(false);
 
-  const { user, password } = action.secrets;
-  const { method, url, headers } = action.config;
-
-  editActionConfig('method', 'post'); // set method to POST by default
+  if (!method) {
+    editActionConfig('method', 'post'); // set method to POST by default
+  }
 
   const headerErrors = {
     keyHeader: new Array<string>(),
@@ -80,7 +82,7 @@ const WebhookActionConnectorFields: React.FunctionComponent<ActionConnectorField
 
   function viewHeaders() {
     setHasHeaders(!hasHeaders);
-    if (!hasHeaders) {
+    if (!hasHeaders && !headers) {
       editActionConfig('headers', {});
     }
   }
@@ -338,8 +340,8 @@ const WebhookActionConnectorFields: React.FunctionComponent<ActionConnectorField
 
       <EuiSpacer size="m" />
       <div>
-        {hasHeaders && Object.keys(headers || {}).length > 0 ? (
-          <Fragment>
+        {Object.keys(headers || {}).length > 0 ? (
+          <>
             <EuiSpacer size="m" />
             <EuiTitle size="xxs">
               <h5>
@@ -351,10 +353,10 @@ const WebhookActionConnectorFields: React.FunctionComponent<ActionConnectorField
             </EuiTitle>
             <EuiSpacer size="s" />
             {headersList}
-          </Fragment>
+          </>
         ) : null}
         <EuiSpacer size="m" />
-        {headerControl}
+        {hasHeaders && headerControl}
         <EuiSpacer size="m" />
       </div>
     </Fragment>