diff --git a/awx/ui_next/src/screens/NotificationTemplate/shared/CustomMessagesSubForm.jsx b/awx/ui_next/src/screens/NotificationTemplate/shared/CustomMessagesSubForm.jsx
index ede9ac1d79..7dd5b2b4bd 100644
--- a/awx/ui_next/src/screens/NotificationTemplate/shared/CustomMessagesSubForm.jsx
+++ b/awx/ui_next/src/screens/NotificationTemplate/shared/CustomMessagesSubForm.jsx
@@ -8,7 +8,7 @@ import {
   FormFullWidthLayout,
   SubFormLayout,
 } from '../../../components/FormLayout';
-import { CodeMirrorField } from '../../../components/CodeMirrorInput';
+import CodeMirrorField from '../../../components/CodeMirrorInput/CodeMirrorField';
 
 function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
   const [useCustomField, , useCustomHelpers] = useField('useCustomMessages');
diff --git a/awx/ui_next/src/screens/NotificationTemplate/shared/NotificationTemplateForm.jsx b/awx/ui_next/src/screens/NotificationTemplate/shared/NotificationTemplateForm.jsx
index 5f3b6d3df5..6999ff62dd 100644
--- a/awx/ui_next/src/screens/NotificationTemplate/shared/NotificationTemplateForm.jsx
+++ b/awx/ui_next/src/screens/NotificationTemplate/shared/NotificationTemplateForm.jsx
@@ -121,6 +121,8 @@ function NotificationTemplateForm({
     };
   };
 
+  const { headers } = template?.notification_configuration || {};
+
   return (
     <Formik
       initialValues={{
@@ -130,6 +132,7 @@ function NotificationTemplateForm({
         notification_configuration: {
           ...initialConfigValues,
           ...template.notification_configuration,
+          headers: headers ? JSON.stringify(headers, null, 2) : null,
         },
         emailOptions,
         organization: template.summary_fields?.organization,
@@ -262,6 +265,9 @@ function normalizeTypeFields(values) {
     stripped.use_ssl = values.emailOptions === 'ssl';
     stripped.use_tls = !stripped.use_ssl;
   }
+  if (values.notification_type === 'webhook') {
+    stripped.headers = stripped.headers ? JSON.parse(stripped.headers) : {};
+  }
   const { emailOptions, ...rest } = values;
 
   return {
diff --git a/awx/ui_next/src/screens/NotificationTemplate/shared/TypeInputsSubForm.jsx b/awx/ui_next/src/screens/NotificationTemplate/shared/TypeInputsSubForm.jsx
index 434c0e6633..e6a2829fcc 100644
--- a/awx/ui_next/src/screens/NotificationTemplate/shared/TypeInputsSubForm.jsx
+++ b/awx/ui_next/src/screens/NotificationTemplate/shared/TypeInputsSubForm.jsx
@@ -11,11 +11,10 @@ import {
 import FormField, {
   PasswordField,
   CheckboxField,
-  FieldTooltip,
   ArrayTextField,
 } from '../../../components/FormField';
 import AnsibleSelect from '../../../components/AnsibleSelect';
-import CodeMirrorInput from '../../../components/CodeMirrorInput';
+import { CodeMirrorField } from '../../../components/CodeMirrorInput';
 import {
   combine,
   required,
@@ -438,10 +437,6 @@ function TwilioFields({ i18n }) {
 }
 
 function WebhookFields({ i18n }) {
-  const [headersField, headersMeta, headersHelpers] = useField({
-    name: 'notification_configuration.headers',
-    validate: required(i18n._(t`Select enter a value for this field`), i18n),
-  });
   const [methodField, methodMeta] = useField({
     name: 'notification_configuration.http_method',
     validate: required(i18n._(t`Select a value for this field`), i18n),
@@ -473,31 +468,15 @@ function WebhookFields({ i18n }) {
         name="notification_configuration.disable_ssl_verification"
       />
       <FormFullWidthLayout>
-        <FormGroup
-          fieldId="webhook-headers"
-          helperTextInvalid={headersMeta.error}
-          isRequired
-          validated={
-            !headersMeta.touched || !headersMeta.error ? 'default' : 'error'
-          }
-          label={i18n._(t`HTTP headers`)}
-          labelIcon={
-            <FieldTooltip
-              content={i18n._(t`Specify HTTP Headers in JSON format. Refer to
-              the Ansible Tower documentation for example syntax.`)}
-            />
-          }
-        >
-          <CodeMirrorInput
-            {...headersField}
-            id="webhook-headers"
-            onChange={value => {
-              headersHelpers.setValue(value);
-            }}
-            mode="javascript"
-            rows={5}
-          />
-        </FormGroup>
+        <CodeMirrorField
+          id="webhook-headers"
+          name="notification_configuration.headers"
+          label={i18n._(t`HTTP Headers`)}
+          mode="javascript"
+          tooltip={i18n._(t`Specify HTTP Headers in JSON format. Refer to
+        the Ansible Tower documentation for example syntax.`)}
+          rows={5}
+        />
       </FormFullWidthLayout>
       <FormGroup
         fieldId="webhook-http-method"