diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/FieldConstructor.js b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/FieldConstructor.js
new file mode 100644
index 0000000..f6848f3
--- /dev/null
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/FieldConstructor.js
@@ -0,0 +1,305 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import AutocompleteInput from 'foremanReact/components/common/AutocompleteInput/AutocompleteInput';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  ExclamationCircleIcon,
+  HelpIcon,
+  PencilAltIcon,
+} from '@patternfly/react-icons';
+import {
+  TextInput,
+  Checkbox,
+  Button,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  Icon,
+  TextArea,
+  FormGroup,
+  Popover,
+  Grid,
+  GridItem,
+} from '@patternfly/react-core';
+
+const FormField = ({
+  name,
+  type,
+  required,
+  options,
+  isLoading,
+  validated,
+  value,
+  disabled,
+  setValue,
+  placeholder,
+  errMsg,
+  ...props
+}) => {
+  const [fieldValidated, setFieldValidated] = useState('default');
+  const [firstLoad, setFirstLoad] = useState(true);
+  const [isDisabled, setIsDisabled] = useState(disabled);
+
+  const requiredValidate = () => {
+    if (firstLoad || !required) return;
+    if (!value || value === '' || validated === 'error')
+      setFieldValidated('error');
+    else setFieldValidated('success');
+  };
+
+  const localHandler = (_event, newValue) => {
+    setValue(name, newValue);
+  };
+
+  useEffect(() => {
+    setFirstLoad(false);
+  }, []);
+
+  useEffect(() => {
+    requiredValidate();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  if (type === 'checkbox') {
+    return (
+      <>
+        <Checkbox
+          ouiaId={name}
+          id={`id-${name}`}
+          isChecked={value || false}
+          onChange={(_, newValue) => {
+            setValue(name, newValue);
+          }}
+          isDisabled={isLoading || isDisabled}
+          isRequired={required}
+          type={type}
+          validated={fieldValidated}
+        />
+        <ValidationComponent localValidated={fieldValidated} errMsg={errMsg} />
+      </>
+    );
+  } else if (type === 'textarea') {
+    return (
+      <>
+        <TextArea
+          rows={6}
+          name={name}
+          id={`id-${name}`}
+          value={value ?? ''}
+          onChange={(_, newValue) => setValue(name, newValue)}
+          isRequired={required}
+          isDisabled={isLoading || isDisabled}
+          type={type}
+          validated={fieldValidated}
+          placeholder={placeholder}
+        />
+        <ValidationComponent localValidated={fieldValidated} errMsg={errMsg} />
+      </>
+    );
+  } else if (options.length !== 0) {
+    return (
+      <>
+        <AutocompleteInput
+          options={options}
+          selected={value ?? ''}
+          onSelect={newValue => setValue(name, newValue)}
+          onChange={() => requiredValidate()}
+          name={name}
+          placeholder={placeholder}
+          validationStatus={fieldValidated}
+          validationMsg={errMsg}
+        />
+      </>
+    );
+  }
+  return (
+    <>
+      {name === 'password' && (isDisabled || disabled) ? (
+        <Grid hasGutter={false}>
+          <GridItem span={11}>
+            <TextInput
+              name={name}
+              value={value ?? ''}
+              id={`id-${name}`}
+              onChange={localHandler}
+              isDisabled={isLoading || isDisabled || disabled}
+              isRequired={required}
+              type={type}
+              validated={fieldValidated}
+              placeholder={placeholder}
+              onBlur={requiredValidate}
+              autoComplete={name}
+            />
+          </GridItem>
+          <GridItem span={1}>
+            <Button
+              ouiaId={`reset-${name}`}
+              onClick={() => setIsDisabled(false)}
+              variant="control"
+              icon={<PencilAltIcon />}
+            />
+          </GridItem>
+        </Grid>
+      ) : (
+        <TextInput
+          name={name}
+          value={value ?? ''}
+          id={`id-${name}`}
+          onChange={localHandler}
+          isDisabled={isLoading || isDisabled}
+          isRequired={required}
+          type={type}
+          validated={fieldValidated}
+          placeholder={placeholder}
+          onBlur={requiredValidate}
+          autoComplete={name}
+        />
+      )}
+
+      <ValidationComponent localValidated={fieldValidated} errMsg={errMsg} />
+    </>
+  );
+};
+
+const ValidationComponent = ({ localValidated, errMsg }) => (
+  <>
+    {localValidated === 'error' && (
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem
+            icon={
+              <Icon>
+                <ExclamationCircleIcon />
+              </Icon>
+            }
+            variant={localValidated}
+          >
+            {errMsg ?? __('Field is required')}
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
+    )}
+  </>
+);
+
+const FieldConstructor = ({
+  label,
+  value,
+  required,
+  labelHelp,
+  fieldId,
+  ...props
+}) => (
+  <FormGroup
+    isInline
+    fieldId={fieldId}
+    label={label}
+    isRequired={required}
+    labelIcon={
+      labelHelp ? (
+        <Popover
+          bodyContent={
+            typeof labelHelp === 'string' ? (
+              <div dangerouslySetInnerHTML={{ __html: labelHelp }} />
+            ) : (
+              labelHelp
+            )
+          }
+        >
+          <Button
+            ouiaId={`label-${label}`}
+            type="button"
+            variant="plain"
+            onClick={e => e.preventDefault()}
+          >
+            <Icon>
+              <HelpIcon />
+            </Icon>
+          </Button>
+        </Popover>
+      ) : (
+        ''
+      )
+    }
+  >
+    <FormField value={value} required={required} {...props} />
+  </FormGroup>
+);
+
+FieldConstructor.propTypes = {
+  label: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  labelHelp: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.node,
+  ]),
+  setValue: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.bool,
+    PropTypes.number,
+  ]),
+  fieldId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+FieldConstructor.defaultProps = {
+  labelHelp: undefined,
+  required: false,
+  disabled: false,
+  value: '',
+  fieldId: undefined,
+};
+
+FormField.propTypes = {
+  disabled: PropTypes.bool,
+  setValue: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  required: PropTypes.bool,
+  allowClear: PropTypes.bool,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+        .isRequired,
+      label: PropTypes.string.isRequired,
+    })
+  ),
+  isLoading: PropTypes.bool,
+  validated: PropTypes.string,
+  placeholder: PropTypes.string,
+  errMsg: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+};
+
+FormField.defaultProps = {
+  label: '',
+  errMsg: null,
+  placeholder: '',
+  validated: 'default',
+  required: false,
+  allowClear: false,
+  options: [],
+  isLoading: false,
+  disabled: false,
+  value: '',
+};
+
+ValidationComponent.propTypes = {
+  localValidated: PropTypes.string.isRequired,
+  errMsg: PropTypes.string,
+};
+
+ValidationComponent.defaultProps = {
+  errMsg: null,
+};
+
+export default FieldConstructor;
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/ForemanFormikField.js b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/ForemanFormikField.js
deleted file mode 100644
index 1ddbdcd..0000000
--- a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/ForemanFormikField.js
+++ /dev/null
@@ -1,152 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Field as FormikField } from 'formik';
-import { Spinner } from '@patternfly/react-core';
-import { TypeAheadSelect } from 'patternfly-react';
-import { filter } from 'lodash';
-
-import { translate as __ } from 'foremanReact/common/I18n';
-
-import FormField from 'foremanReact/components/common/forms/FormField';
-
-const ForemanFormikField = ({
-  name,
-  type,
-  required,
-  label,
-  labelHelp,
-  inputSizeClass,
-  labelSizeClass,
-  rows,
-  placeholder,
-  options,
-  isLoading,
-  disabled,
-  setDisabled,
-}) => (
-  <FormikField name={name}>
-    {({
-      field, // { name, value, onChange, onBlur }
-      form: { touched, errors, setFieldValue, setFieldTouched }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
-    }) => {
-      const defaultSelection = (fieldValue, initialOptions) => {
-        if (!fieldValue) return [];
-
-        return filter(initialOptions, o => o.value === fieldValue);
-      };
-      const passwordInput = (
-        <input
-          {...field}
-          placeholder={disabled ? '********' : ''}
-          type={type}
-          disabled={disabled}
-          className="form-control"
-        />
-      );
-      let content = null;
-      switch (type) {
-        case 'textarea':
-          content = (
-            <textarea
-              {...field}
-              className="form-control"
-              rows={rows}
-              placeholder={placeholder}
-            />
-          );
-          break;
-        case 'select':
-          content = isLoading ? (
-            <Spinner size="md" aria-label="loading icon" />
-          ) : (
-            <TypeAheadSelect
-              id={name}
-              options={options}
-              placeholder={__('Start typing to search')}
-              selected={defaultSelection(field.value, options)}
-              onChange={selected =>
-                setFieldValue(field.name, selected[0]?.value)
-              }
-            />
-          );
-          break;
-        case 'password':
-          content = setDisabled ? (
-            <div className="input-group">
-              {passwordInput}
-              <span className="input-group-btn">
-                <button
-                  className="btn btn-default"
-                  onClick={e => {
-                    e.preventDefault();
-                    setDisabled(!disabled);
-                  }}
-                  title={__('Change the password')}
-                >
-                  <span className="pficon pficon-edit" />
-                </button>
-              </span>
-            </div>
-          ) : (
-            passwordInput
-          );
-          break;
-        default:
-          content = (
-            <input
-              {...field}
-              type={type}
-              checked={type === 'checkbox' ? field.value || '' : undefined}
-              className={type === 'checkbox' ? '' : 'form-control'}
-            />
-          );
-      }
-      return (
-        <FormField
-          {...field}
-          error={touched[name] ? errors[name] : undefined}
-          type={type}
-          inputSizeClass={inputSizeClass}
-          labelSizeClass={labelSizeClass}
-          required={required}
-          label={label}
-          labelHelp={labelHelp}
-          options={options}
-        >
-          {content}
-        </FormField>
-      );
-    }}
-  </FormikField>
-);
-
-ForemanFormikField.propTypes = {
-  name: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  required: PropTypes.bool,
-  label: PropTypes.string.isRequired,
-  labelHelp: PropTypes.string,
-  inputSizeClass: PropTypes.string,
-  labelSizeClass: PropTypes.string,
-  rows: PropTypes.number,
-  placeholder: PropTypes.string,
-  options: PropTypes.array,
-  isLoading: PropTypes.bool,
-  disabled: PropTypes.bool,
-  setDisabled: PropTypes.func,
-};
-
-ForemanFormikField.defaultProps = {
-  required: false,
-  labelHelp: null,
-  inputSizeClass: 'col-md-8',
-  labelSizeClass: 'col-md-3',
-  rows: 1,
-  placeholder: '',
-  options: null,
-  isLoading: false,
-  disabled: false,
-  setDisabled: undefined,
-};
-
-export default ForemanFormikField;
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/WebhookFormTabs.css b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/WebhookFormTabs.css
index 4aecff4..5e91df1 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/WebhookFormTabs.css
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/WebhookFormTabs.css
@@ -1,7 +1,21 @@
-.webhook-form-tab-content {
-  padding-top: 3em;
-}
-
 .webhook-form-tab:focus {
   outline: none;
 }
+
+.webhook-form-tab {
+    .pf-v5-c-form__group{
+        margin-top: var(--pf-v5-c-form--GridGap)
+    }
+
+    .autocomplete-input-wrapper {
+        width: 100%;
+    }
+
+    .pf-v5-c-form__group-control {
+        align-content: space-evenly;
+    }
+}
+#select-typeahead-listbox {
+  max-height: 400px;
+  overflow: auto;
+}
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/WebhookFormTabs.js b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/WebhookFormTabs.js
index 7eb91ee..7da160c 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/WebhookFormTabs.js
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/WebhookFormTabs.js
@@ -4,13 +4,12 @@ import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 
-import ForemanFormikField from './ForemanFormikField';
-
 import './WebhookFormTabs.css';
+import FieldConstructor from './FieldConstructor';
 
 const WebhookFormTabs = ({
-  formProps,
-  disabled,
+  inputValues,
+  setInputValues,
   activeTab,
   handleTabClick,
   webhookTemplates,
@@ -19,160 +18,198 @@ const WebhookFormTabs = ({
   isTemplatesLoading,
   isEventsLoading,
   isPasswordDisabled,
-  setIsPasswordDisabled,
-}) => (
-  <Tabs
-    ouiaId="webhook-form-tabs"
-    activeKey={activeTab}
-    onSelect={handleTabClick}
-    isFilled
-  >
-    <Tab
-      ouiaId="webhook-form-tab-general"
-      className="webhook-form-tab"
-      eventKey={0}
-      title={<TabTitleText>{__('General')}</TabTitleText>}
+  urlValidated,
+}) => {
+  const updateFieldValue = (key, value) => {
+    setInputValues(prev => ({ ...prev, [key]: value }));
+  };
+
+  const URL_ERR_STRING = __('Enter valid URL');
+
+  return (
+    <Tabs
+      activeKey={activeTab}
+      onSelect={handleTabClick}
+      isFilled
+      ouiaId="webhook-form-tabs"
     >
-      <div className="webhook-form-tab-content">
-        <ForemanFormikField
-          name="event"
-          type="select"
-          label={__('Subscribe to')}
-          required
-          allowClear={false}
-          options={availableEvents}
-          isLoading={isEventsLoading}
-        />
-        <ForemanFormikField
-          name="name"
-          type="text"
-          required
-          label={__('Name')}
-        />
-        <ForemanFormikField
-          name="target_url"
-          type="text"
-          required
-          label={__('Target URL')}
-          labelHelp={
-            <>
-              <div>
-                {__(
-                  'Target URL that should be called by Foreman (ERB allowed).'
-                )}
-              </div>
+      <Tab
+        ouiaId="webhook-form-tab-general"
+        className="webhook-form-tab"
+        eventKey={0}
+        title={<TabTitleText>{__('General')}</TabTitleText>}
+      >
+        <div className="webhook-form-tab-content">
+          <FieldConstructor
+            name="event"
+            value={inputValues.event}
+            setValue={updateFieldValue}
+            type="select"
+            label={__('Subscribe to')}
+            required
+            allowClear={false}
+            options={availableEvents}
+            isLoading={isEventsLoading}
+            placeholder={__('Start typing to search...')}
+          />
+          <FieldConstructor
+            name="name"
+            value={inputValues.name}
+            setValue={updateFieldValue}
+            type="text"
+            required
+            label={__('Name')}
+          />
+          <FieldConstructor
+            name="target_url"
+            value={inputValues.target_url}
+            setValue={updateFieldValue}
+            validated={urlValidated()}
+            errMsg={urlValidated() === 'error' ? URL_ERR_STRING : null}
+            type="text"
+            required
+            label={__('Target URL')}
+            labelHelp={
               <div>
-                {sprintf(
-                  __('Example: %s'),
-                  'https://host.example.com/inventory/<%= @object.id %>'
-                )}
+                <div>
+                  {__(
+                    'Target URL that should be called by Foreman (ERB allowed).'
+                  )}
+                </div>
+                <div>
+                  {sprintf(
+                    __('Example: %s'),
+                    'https://host.example.com/inventory/<%= @object.id %>'
+                  )}
+                </div>
               </div>
-            </>
-          }
-        />
-        <ForemanFormikField
-          name="webhook_template_id"
-          type="select"
-          label={__('Template')}
-          required
-          allowClear={false}
-          options={webhookTemplates}
-          isLoading={isTemplatesLoading}
-        />
-        <ForemanFormikField
-          name="http_method"
-          type="select"
-          label={__('HTTP Method')}
-          required
-          allowClear={false}
-          options={httpMethods}
-        />
-        <ForemanFormikField
-          name="enabled"
-          type="checkbox"
-          label={__('Enabled')}
-          labelHelp={__('If unchecked, the webhook will be inactive')}
-        />
-      </div>
-    </Tab>
-    <Tab
-      ouiaId="webhook-form-tab-creds"
-      className="webhook-form-tab"
-      eventKey={1}
-      title={<TabTitleText>{__('Credentials')}</TabTitleText>}
-    >
-      <div className="webhook-form-tab-content">
-        <ForemanFormikField
-          name="user"
-          type="text"
-          label={__('User')}
-          labelHelp={__('Authentication credentials')}
-        />
-        <ForemanFormikField
-          name="password"
-          type="password"
-          label={__('Password')}
-          labelHelp={__('Authentication credentials')}
-          disabled={isPasswordDisabled}
-          setDisabled={setIsPasswordDisabled}
-        />
-        <ForemanFormikField
-          name="verify_ssl"
-          type="checkbox"
-          label={__('Verify SSL')}
-          labelHelp={__(
-            "Uncheck this option to disable validation of the receiver's SSL certificate"
-          )}
-        />
-        <ForemanFormikField
-          name="proxy_authorization"
-          type="checkbox"
-          label={__('Proxy Authorization')}
-          labelHelp={__(
-            'Authorize with Foreman client certificate and validate smart-proxy CA from Settings'
-          )}
-        />
-        <ForemanFormikField
-          name="ssl_ca_certs"
-          type="textarea"
-          label={__('X509 Certification Authorities')}
-          placeholder={__(
-            "Optional CAs in PEM format concatenated to verify the receiver's SSL certificate"
-          )}
-          inputSizeClass="col-md-8"
-          rows={8}
-        />
-      </div>
-    </Tab>
-    <Tab
-      ouiaId="webhook-form-tab-add"
-      className="webhook-form-tab"
-      eventKey={2}
-      title={<TabTitleText>{__('Additional')}</TabTitleText>}
-    >
-      <div className="webhook-form-tab-content">
-        <ForemanFormikField
-          name="http_content_type"
-          type="text"
-          label={__('HTTP Content Type')}
-        />
-        <ForemanFormikField
-          name="http_headers"
-          type="textarea"
-          label={__('HTTP Headers')}
-          labelHelp={__('Optional. Must be a JSON object (ERB allowed)')}
-          placeholder='{&#13;&#10;"X-Shellhook-Arg-1": "value",&#13;&#10;"X-Shellhook-Arg-2": "<%= @object.id %>"&#13;&#10;}'
-          inputSizeClass="col-md-8"
-          rows={8}
-        />
-      </div>
-    </Tab>
-  </Tabs>
-);
+            }
+          />
+          <FieldConstructor
+            name="webhook_template_id"
+            value={inputValues.webhook_template_id}
+            setValue={updateFieldValue}
+            type="select"
+            label={__('Template')}
+            required
+            allowClear={false}
+            options={webhookTemplates}
+            isLoading={isTemplatesLoading}
+            placeholder={__('Start typing to search...')}
+          />
+          <FieldConstructor
+            name="http_method"
+            value={inputValues.http_method}
+            setValue={updateFieldValue}
+            type="select"
+            label={__('HTTP Method')}
+            required
+            allowClear={false}
+            options={httpMethods}
+            placeholder={__('Start typing to search...')}
+          />
+          <FieldConstructor
+            name="enabled"
+            value={inputValues.enabled}
+            setValue={updateFieldValue}
+            type="checkbox"
+            label={__('Enabled')}
+            labelHelp={__('If unchecked, the webhook will be inactive')}
+          />
+        </div>
+      </Tab>
+      <Tab
+        ouiaId="webhook-form-tab-creds"
+        className="webhook-form-tab"
+        eventKey={1}
+        title={<TabTitleText>{__('Credentials')}</TabTitleText>}
+      >
+        <div className="webhook-form-tab-content">
+          <FieldConstructor
+            name="user"
+            value={inputValues.user}
+            type="text"
+            label={__('User')}
+            labelHelp={__('Authentication credentials')}
+            setValue={updateFieldValue}
+          />
+          <FieldConstructor
+            name="password"
+            type="password"
+            value={inputValues.password}
+            label={__('Password')}
+            labelHelp={__('Authentication credentials')}
+            disabled={isPasswordDisabled}
+            setValue={updateFieldValue}
+          />
+          <FieldConstructor
+            name="verify_ssl"
+            value={inputValues.verify_ssl}
+            type="checkbox"
+            label={__('Verify SSL')}
+            labelHelp={__(
+              "Uncheck this option to disable validation of the receiver's SSL certificate"
+            )}
+            setValue={updateFieldValue}
+          />
+          <FieldConstructor
+            name="proxy_authorization"
+            type="checkbox"
+            value={inputValues.proxy_authorization}
+            label={__('Proxy Authorization')}
+            labelHelp={__(
+              'Authorize with Foreman client certificate and validate smart-proxy CA from Settings'
+            )}
+            setValue={updateFieldValue}
+          />
+          <FieldConstructor
+            name="ssl_ca_certs"
+            value={inputValues.ssl_ca_certs}
+            type="textarea"
+            label={__('X509 Certificate Authorities')}
+            placeholder={__(
+              "Optional CAs in PEM format concatenated to verify the receiver's SSL certificate"
+            )}
+            inputSizeClass="col-md-8"
+            rows={8}
+            setValue={updateFieldValue}
+          />
+        </div>
+      </Tab>
+      <Tab
+        ouiaId="webhook-form-tab-add"
+        className="webhook-form-tab"
+        eventKey={2}
+        title={<TabTitleText>{__('Additional')}</TabTitleText>}
+      >
+        <div className="webhook-form-tab-content">
+          <FieldConstructor
+            value={inputValues.http_content_type}
+            name="http_content_type"
+            type="text"
+            label={__('HTTP Content Type')}
+            setValue={updateFieldValue}
+          />
+          <FieldConstructor
+            name="http_headers"
+            type="textarea"
+            value={inputValues.http_headers}
+            label={__('HTTP Headers')}
+            labelHelp={__('Optional. Must be a JSON object (ERB allowed)')}
+            placeholder='{&#13;&#10;"X-Shellhook-Arg-1": "value",&#13;&#10;"X-Shellhook-Arg-2": "<%= @object.id %>"&#13;&#10;}'
+            inputSizeClass="col-md-8"
+            rows={8}
+            setValue={updateFieldValue}
+          />
+        </div>
+      </Tab>
+    </Tabs>
+  );
+};
 
 WebhookFormTabs.propTypes = {
-  formProps: PropTypes.object,
-  disabled: PropTypes.bool,
+  inputValues: PropTypes.object.isRequired,
+  setInputValues: PropTypes.func.isRequired,
   activeTab: PropTypes.number.isRequired,
   handleTabClick: PropTypes.func.isRequired,
   webhookTemplates: PropTypes.array.isRequired,
@@ -181,14 +218,11 @@ WebhookFormTabs.propTypes = {
   isTemplatesLoading: PropTypes.bool.isRequired,
   isEventsLoading: PropTypes.bool.isRequired,
   isPasswordDisabled: PropTypes.bool,
-  setIsPasswordDisabled: PropTypes.func,
+  urlValidated: PropTypes.func.isRequired,
 };
 
 WebhookFormTabs.defaultProps = {
-  disabled: false,
-  formProps: {},
   isPasswordDisabled: false,
-  setIsPasswordDisabled: undefined,
 };
 
 export default WebhookFormTabs;
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/__tests__/FieldConstructor.test.js b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/__tests__/FieldConstructor.test.js
new file mode 100644
index 0000000..6b7dbc1
--- /dev/null
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/__tests__/FieldConstructor.test.js
@@ -0,0 +1,216 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import FieldConstructor from '../FieldConstructor';
+
+const defaultProps = {
+  name: 'test-field',
+  setValue: jest.fn(),
+  label: 'Test Field',
+  value: '',
+  type: 'text',
+};
+
+describe('FieldConstructor RTL Tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Text Input Fields', () => {
+    test('renders text input field', () => {
+      render(<FieldConstructor {...defaultProps} type="text" />);
+
+      expect(screen.getByText('Test Field')).toBeInTheDocument();
+      expect(document.getElementById('id-test-field')).toHaveAttribute(
+        'type',
+        'text'
+      );
+    });
+
+    test('renders password input field', () => {
+      render(<FieldConstructor {...defaultProps} type="password" />);
+
+      expect(screen.getByText('Test Field')).toBeInTheDocument();
+      expect(document.getElementById('id-test-field')).toHaveAttribute(
+        'type',
+        'password'
+      );
+    });
+
+    test('calls setValue when text input changes', () => {
+      render(<FieldConstructor {...defaultProps} type="text" />);
+
+      const input = document.getElementById('id-test-field');
+      fireEvent.change(input, { target: { value: 'test value' } });
+
+      expect(defaultProps.setValue).toHaveBeenCalledWith(
+        'test-field',
+        'test value'
+      );
+    });
+
+    test('renders with initial value', () => {
+      render(
+        <FieldConstructor {...defaultProps} type="text" value="initial value" />
+      );
+
+      expect(document.getElementById('id-test-field')).toHaveValue(
+        'initial value'
+      );
+    });
+
+    test('renders as disabled when loading', () => {
+      render(<FieldConstructor {...defaultProps} type="text" isLoading />);
+
+      expect(document.getElementById('id-test-field')).toBeDisabled();
+    });
+  });
+
+  describe('Textarea Fields', () => {
+    test('renders textarea field', () => {
+      render(<FieldConstructor {...defaultProps} type="textarea" />);
+
+      expect(screen.getByText('Test Field')).toBeInTheDocument();
+      expect(document.getElementById('id-test-field').tagName).toBe('TEXTAREA');
+    });
+
+    test('calls setValue when textarea changes', () => {
+      render(<FieldConstructor {...defaultProps} type="textarea" />);
+
+      const textarea = document.getElementById('id-test-field');
+      fireEvent.change(textarea, { target: { value: 'textarea content' } });
+
+      expect(defaultProps.setValue).toHaveBeenCalledWith(
+        'test-field',
+        'textarea content'
+      );
+    });
+
+    test('renders with specified rows', () => {
+      render(<FieldConstructor {...defaultProps} type="textarea" rows={5} />);
+
+      expect(document.getElementsByTagName('textarea')).toHaveLength(1);
+    });
+  });
+
+  describe('Checkbox Fields', () => {
+    test('renders checkbox field', () => {
+      render(<FieldConstructor {...defaultProps} type="checkbox" />);
+
+      expect(screen.getByText('Test Field')).toBeInTheDocument();
+      expect(document.getElementById('id-test-field')).toHaveAttribute(
+        'type',
+        'checkbox'
+      );
+    });
+
+    test('renders unchecked checkbox', () => {
+      render(
+        <FieldConstructor {...defaultProps} type="checkbox" value={false} />
+      );
+
+      expect(document.getElementById('id-test-field')).not.toBeChecked();
+    });
+  });
+
+  describe('Autocomplete render  test', () => {
+    test('renders autocomplete', () => {
+      const props = {
+        ...defaultProps,
+        onChange: defaultProps.setValue,
+        options: [
+          { value: 'host_created.event.foreman', label: 'Host Created' },
+          { value: 'host_updated.event.foreman', label: 'Host Updated' },
+        ],
+      };
+      render(<FieldConstructor {...props} type="select" />);
+
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+  });
+
+  describe('Label Help', () => {
+    test('renders help icon when labelHelp is provided', () => {
+      render(
+        <FieldConstructor {...defaultProps} labelHelp="This is help text" />
+      );
+
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    test('does not render help icon when labelHelp is not provided', () => {
+      render(<FieldConstructor {...defaultProps} />);
+
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    test('renders help icon with JSX content', async () => {
+      const helpContent = <div>JSX help content</div>;
+      render(<FieldConstructor {...defaultProps} labelHelp={helpContent} />);
+
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+
+      userEvent.click(button);
+
+      expect(await screen.findByText('JSX help content')).toBeInTheDocument();
+    });
+  });
+
+  describe('Validation', () => {
+    test('renders error message when validated is error', async () => {
+      render(
+        <>
+          <FieldConstructor {...defaultProps} required type="text" />
+          <button>Dummy</button>
+        </>
+      );
+
+      const input = document.getElementById('id-test-field');
+      await userEvent.click(input);
+      expect(input).toHaveFocus();
+
+      await userEvent.tab();
+      expect(input).not.toHaveFocus();
+
+      expect(screen.getByText('Field is required')).toBeInTheDocument();
+    });
+
+    test('does not render error message when validated is not error', () => {
+      render(
+        <FieldConstructor {...defaultProps} type="text" validated="success" />
+      );
+
+      expect(screen.queryByText('Field is required')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    test('handles undefined value', () => {
+      render(
+        <FieldConstructor {...defaultProps} type="text" value={undefined} />
+      );
+
+      expect(document.getElementById('id-test-field')).toHaveValue('');
+    });
+
+    test('handles null value', () => {
+      render(<FieldConstructor {...defaultProps} type="text" value={null} />);
+
+      expect(document.getElementById('id-test-field')).toHaveValue('');
+    });
+
+    test('handles numeric value', () => {
+      render(<FieldConstructor {...defaultProps} type="text" value={123} />);
+
+      expect(document.getElementById('id-test-field')).toHaveValue('123');
+    });
+
+    test('handles boolean value for checkbox', () => {
+      render(<FieldConstructor {...defaultProps} type="checkbox" value />);
+
+      expect(document.getElementById('id-test-field')).toBeChecked();
+    });
+  });
+});
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/WebhookForm.js b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/WebhookForm.js
index 91c0cb5..1895127 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/WebhookForm.js
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/WebhookForm.js
@@ -1,21 +1,10 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import * as Yup from 'yup';
-
 import { translate as __ } from 'foremanReact/common/I18n';
-import ForemanForm from 'foremanReact/components/common/forms/ForemanForm';
-
+import { Form, ActionGroup, Button } from '@patternfly/react-core';
 import WebhookFormTabs from './Components/WebhookFormTabs';
 
-import { HTTP_METHODS, WEBHOOK_ITEM } from './constants';
-
-const webhookFormSchema = Yup.object().shape({
-  name: Yup.string().required(__('is required')),
-  target_url: Yup.string().required(__('is required')),
-  http_method: Yup.string().required(__('is required')),
-  event: Yup.string().required(__('is required')),
-  webhook_template_id: Yup.string().required(__('is required')),
-});
+import { HTTP_METHODS } from './constants';
 
 const WebhookForm = ({
   onCancel,
@@ -26,7 +15,6 @@ const WebhookForm = ({
   isTemplatesLoading,
   isEventsLoading,
   isPasswordDisabled,
-  setIsPasswordDisabled,
 }) => {
   const webhookTemplates = templates.map(t => ({ value: t.id, label: t.name }));
 
@@ -36,16 +24,44 @@ const WebhookForm = ({
     setActiveTab(tabIndex);
   };
 
+  const [inputValues, setInputValues] = useState(initialValues);
+
+  const requiredFields = [
+    'event',
+    'name',
+    'target_url',
+    'webhook_template_id',
+    'http_method',
+  ];
+
+  const verifyFields = () =>
+    !requiredFields.every(field => {
+      if (field === 'target_url') return urlValidated() === 'success';
+      return (
+        inputValues[field] !== undefined &&
+        inputValues[field] !== null &&
+        String(inputValues[field]).trim() !== ''
+      );
+    });
+
+  const urlValidated = () => {
+    const value = inputValues.target_url;
+    if (!value || !value.trim()) return 'error';
+    try {
+      const u = new URL(value.trim());
+      return u.protocol === 'http:' || u.protocol === 'https:'
+        ? 'success'
+        : 'error';
+    } catch {
+      return 'error';
+    }
+  };
+
   return (
-    <ForemanForm
-      onSubmit={handleSubmit}
-      initialValues={initialValues}
-      validationSchema={webhookFormSchema}
-      onCancel={onCancel}
-      enableReinitialize
-      item={WEBHOOK_ITEM}
-    >
+    <Form isHorizontal>
       <WebhookFormTabs
+        inputValues={inputValues}
+        setInputValues={setInputValues}
         activeTab={activeTab}
         handleTabClick={handleTabClick}
         webhookTemplates={webhookTemplates}
@@ -54,9 +70,22 @@ const WebhookForm = ({
         isEventsLoading={isEventsLoading}
         isTemplatesLoading={isTemplatesLoading}
         isPasswordDisabled={isPasswordDisabled}
-        setIsPasswordDisabled={setIsPasswordDisabled}
+        urlValidated={urlValidated}
       />
-    </ForemanForm>
+      <ActionGroup>
+        <Button
+          ouiaId="submit-webhook-form"
+          isDisabled={verifyFields()}
+          variant="primary"
+          onClick={() => handleSubmit(inputValues)}
+        >
+          {__('Submit')}
+        </Button>
+        <Button ouiaId="cancel-webhook-form" variant="link" onClick={onCancel}>
+          {__('Cancel')}
+        </Button>
+      </ActionGroup>
+    </Form>
   );
 };
 
@@ -69,12 +98,10 @@ WebhookForm.propTypes = {
   isEventsLoading: PropTypes.bool.isRequired,
   isTemplatesLoading: PropTypes.bool.isRequired,
   isPasswordDisabled: PropTypes.bool,
-  setIsPasswordDisabled: PropTypes.func,
 };
 
 WebhookForm.defaultProps = {
   isPasswordDisabled: false,
-  setIsPasswordDisabled: undefined,
 };
 
 export default WebhookForm;
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/__tests__/WebhookForm.test.js b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/__tests__/WebhookForm.test.js
index b9e9119..175951a 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/__tests__/WebhookForm.test.js
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/__tests__/WebhookForm.test.js
@@ -1,51 +1,214 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
-
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 import WebhookForm from '../WebhookForm';
 
-const props = {
+const defaultProps = {
   handleSubmit: jest.fn(),
   onCancel: jest.fn(),
-  onSuccess: jest.fn(),
+  initialValues: {
+    http_method: 'POST',
+    enabled: true,
+    verify_ssl: true,
+    http_content_type: 'application/json',
+    event: 'host_created.event.foreman',
+    name: '',
+    target_url: '',
+    user: '',
+    password: '',
+    webhook_template_id: '',
+    ssl_ca_certs: '',
+    proxy_authorization: false,
+    http_headers: '',
+  },
   templates: [
     { id: 204, name: 'default template' },
     { id: 205, name: 'default template clone' },
   ],
-  availableEvents: ['host_created'],
+  availableEvents: [
+    { value: 'host_created.event.foreman', label: 'Host Created' },
+    { value: 'host_updated.event.foreman', label: 'Host Updated' },
+  ],
   isEventsLoading: false,
   isTemplatesLoading: false,
+  isPasswordDisabled: false,
+  setIsPasswordDisabled: jest.fn(),
 };
 
-const fixtures = {
-  'should render for new page': {
-    ...props,
-    initialValues: {
-      http_method: 'POST',
-      enabled: true,
-      verify_ssl: true,
-      http_content_type: 'application/json',
-      event: 'host_created.event.foreman',
-    },
-  },
-  'should render for edit page': {
-    ...props,
-    initialValues: {
-      id: 54,
-      http_method: 'PUT',
-      enabled: true,
-      verify_ssl: true,
-      http_content_type: 'application/json',
-      event: 'host_created.event.foreman',
-      name: 'first webhook',
-      target_url: 'https://foreman.example.com',
-      user: undefined,
-      password: undefined,
-      webhook_template_id: 204,
-      ssl_ca_certs: undefined,
-    },
-  },
-};
+describe('WebhookForm RTL Tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders General tab fields by default', () => {
+    render(<WebhookForm {...defaultProps} />);
+
+    expect(screen.getByText('General')).toBeInTheDocument();
+    expect(screen.getByText('Credentials')).toBeInTheDocument();
+    expect(screen.getByText('Additional')).toBeInTheDocument();
+
+    expect(screen.getByText('Subscribe to')).toBeInTheDocument();
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Target URL')).toBeInTheDocument();
+    expect(screen.getByText('Template')).toBeInTheDocument();
+    expect(screen.getByText('HTTP Method')).toBeInTheDocument();
+    expect(screen.getByText('Enabled')).toBeInTheDocument();
+
+    expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+  });
+
+  describe('Tab Navigation', () => {
+    test('switches to Credentials tab when clicked', () => {
+      render(<WebhookForm {...defaultProps} />);
+
+      fireEvent.click(screen.getByText('Credentials'));
+
+      expect(screen.getByText('User')).toBeInTheDocument();
+      expect(screen.getByText('Password')).toBeInTheDocument();
+      expect(screen.getByText('Verify SSL')).toBeInTheDocument();
+      expect(screen.getByText('Proxy Authorization')).toBeInTheDocument();
+      expect(
+        screen.getByText('X509 Certificate Authorities')
+      ).toBeInTheDocument();
+    });
+
+    test('switches to Additional tab when clicked', () => {
+      render(<WebhookForm {...defaultProps} />);
+
+      fireEvent.click(screen.getByText('Additional'));
+
+      expect(screen.getByText('HTTP Content Type')).toBeInTheDocument();
+      expect(screen.getByText('HTTP Headers')).toBeInTheDocument();
+    });
+  });
+
+  describe('Form Field Interactions', () => {
+    test('toggles enabled checkbox', () => {
+      render(<WebhookForm {...defaultProps} />);
+
+      const enabledCheckbox = document.querySelector('input#id-enabled');
+      expect(enabledCheckbox).toBeChecked();
+
+      fireEvent.click(enabledCheckbox);
+      expect(enabledCheckbox).not.toBeChecked();
+    });
+
+    test('updates user field in Credentials tab', () => {
+      render(<WebhookForm {...defaultProps} />);
+
+      fireEvent.click(screen.getByText('Credentials'));
+
+      const userInput = document.querySelector('input#id-user');
+      fireEvent.change(userInput, { target: { value: 'testuser' } });
+
+      expect(userInput.value).toBe('testuser');
+    });
+  });
+
+  describe('Form Submission', () => {
+    test('Submit button is disabled should not call handleSubmit', async () => {
+      const handleSubmit = jest.fn();
+      render(<WebhookForm {...defaultProps} handleSubmit={handleSubmit} />);
+
+      const submitBtn = screen.getByRole('button', { name: 'Submit' });
+
+      expect(submitBtn).toBeDisabled();
+      fireEvent.click(submitBtn);
+
+      expect(handleSubmit).toHaveBeenCalledTimes(0);
+    });
+
+    test('calls handleSubmit with form data when Submit button is clicked', async () => {
+      const handleSubmit = jest.fn();
+      const initialValues = {
+        ...defaultProps.initialValues,
+        webhook_template_id: 204,
+      };
+
+      render(
+        <WebhookForm
+          {...defaultProps}
+          initialValues={initialValues}
+          handleSubmit={handleSubmit}
+        />
+      );
+
+      const input = document.querySelector('input#id-name');
+      expect(input).toBeInTheDocument();
+      await userEvent.type(input, 'Test Webhook');
+      fireEvent.change(document.querySelector('input#id-target_url'), {
+        target: { value: 'https://example.com/webhook' },
+      });
+
+      const submitBtn = screen.getByRole('button', { name: 'Submit' });
+
+      expect(submitBtn).not.toBeDisabled();
+      fireEvent.click(submitBtn);
+
+      expect(handleSubmit).toHaveBeenCalledTimes(1);
+      expect(handleSubmit).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'Test Webhook',
+          target_url: 'https://example.com/webhook',
+        })
+      );
+    });
+
+    test('calls onCancel when Cancel button is clicked', () => {
+      const onCancel = jest.fn();
+      render(<WebhookForm {...defaultProps} onCancel={onCancel} />);
+
+      fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+
+      expect(onCancel).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Loading States', () => {
+    test('disables password field when isPasswordDisabled is true', async () => {
+      render(<WebhookForm {...defaultProps} isPasswordDisabled />);
+
+      await fireEvent.click(screen.getByText('Credentials'));
+
+      const passwordInput = document.querySelector('input#id-password');
+      expect(passwordInput).toBeDisabled();
+    });
+
+    test('password field rendered correctly when isPasswordDisabled is false', async () => {
+      render(<WebhookForm {...defaultProps} />);
+
+      await fireEvent.click(screen.getByText('Credentials'));
+
+      const passwordInput = document.querySelector('input#id-password');
+      expect(passwordInput).toBeInTheDocument();
+      expect(passwordInput).not.toBeDisabled();
+    });
+  });
+
+  describe('Initial Values', () => {
+    test('renders with provided initial values', () => {
+      const initialValues = {
+        ...defaultProps.initialValues,
+        name: 'Initial Webhook',
+        target_url: 'https://initial.example.com',
+        enabled: false,
+        verify_ssl: false,
+      };
+
+      render(<WebhookForm {...defaultProps} initialValues={initialValues} />);
+
+      expect(document.querySelector('input#id-name')).toHaveValue(
+        'Initial Webhook'
+      );
+      expect(document.querySelector('input#id-target_url')).toHaveValue(
+        'https://initial.example.com'
+      );
+      expect(document.querySelector('input#id-enabled')).not.toBeChecked();
 
-describe('WebhookForm', () => {
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(WebhookForm, fixtures));
+      fireEvent.click(screen.getByText('Credentials'));
+      expect(document.querySelector('input#id-verify_ssl')).not.toBeChecked();
+    });
+  });
 });
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/__tests__/__snapshots__/WebhookForm.test.js.snap b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/__tests__/__snapshots__/WebhookForm.test.js.snap
deleted file mode 100644
index 907a340..0000000
--- a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/__tests__/__snapshots__/WebhookForm.test.js.snap
+++ /dev/null
@@ -1,512 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`WebhookForm rendering should render for edit page 1`] = `
-<ForemanForm
-  enableReinitialize={true}
-  initialValues={
-    Object {
-      "enabled": true,
-      "event": "host_created.event.foreman",
-      "http_content_type": "application/json",
-      "http_method": "PUT",
-      "id": 54,
-      "name": "first webhook",
-      "password": undefined,
-      "ssl_ca_certs": undefined,
-      "target_url": "https://foreman.example.com",
-      "user": undefined,
-      "verify_ssl": true,
-      "webhook_template_id": 204,
-    }
-  }
-  item="Webhook"
-  onCancel={[MockFunction]}
-  onSubmit={[MockFunction]}
-  validationSchema={
-    ObjectSchema {
-      "_blacklist": RefSet {
-        "list": Array [],
-        "refs": Array [],
-      },
-      "_conditions": Array [],
-      "_defaultDefault": [Function],
-      "_deps": Array [],
-      "_excludedEdges": Array [],
-      "_exclusive": Object {},
-      "_mutate": undefined,
-      "_nodes": Array [
-        "webhook_template_id",
-        "event",
-        "http_method",
-        "target_url",
-        "name",
-      ],
-      "_options": Object {
-        "abortEarly": true,
-        "recursive": true,
-      },
-      "_type": "object",
-      "_typeError": [Function],
-      "_whitelist": RefSet {
-        "list": Array [],
-        "refs": Array [],
-      },
-      "fields": Object {
-        "event": StringSchema {
-          "_blacklist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "_conditions": Array [],
-          "_deps": Array [],
-          "_exclusive": Object {
-            "required": true,
-          },
-          "_mutate": undefined,
-          "_options": Object {
-            "abortEarly": true,
-            "recursive": true,
-          },
-          "_type": "string",
-          "_typeError": [Function],
-          "_whitelist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "tests": Array [
-            [Function],
-          ],
-          "transforms": Array [
-            [Function],
-          ],
-          "type": "string",
-        },
-        "http_method": StringSchema {
-          "_blacklist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "_conditions": Array [],
-          "_deps": Array [],
-          "_exclusive": Object {
-            "required": true,
-          },
-          "_mutate": undefined,
-          "_options": Object {
-            "abortEarly": true,
-            "recursive": true,
-          },
-          "_type": "string",
-          "_typeError": [Function],
-          "_whitelist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "tests": Array [
-            [Function],
-          ],
-          "transforms": Array [
-            [Function],
-          ],
-          "type": "string",
-        },
-        "name": StringSchema {
-          "_blacklist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "_conditions": Array [],
-          "_deps": Array [],
-          "_exclusive": Object {
-            "required": true,
-          },
-          "_mutate": undefined,
-          "_options": Object {
-            "abortEarly": true,
-            "recursive": true,
-          },
-          "_type": "string",
-          "_typeError": [Function],
-          "_whitelist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "tests": Array [
-            [Function],
-          ],
-          "transforms": Array [
-            [Function],
-          ],
-          "type": "string",
-        },
-        "target_url": StringSchema {
-          "_blacklist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "_conditions": Array [],
-          "_deps": Array [],
-          "_exclusive": Object {
-            "required": true,
-          },
-          "_mutate": undefined,
-          "_options": Object {
-            "abortEarly": true,
-            "recursive": true,
-          },
-          "_type": "string",
-          "_typeError": [Function],
-          "_whitelist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "tests": Array [
-            [Function],
-          ],
-          "transforms": Array [
-            [Function],
-          ],
-          "type": "string",
-        },
-        "webhook_template_id": StringSchema {
-          "_blacklist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "_conditions": Array [],
-          "_deps": Array [],
-          "_exclusive": Object {
-            "required": true,
-          },
-          "_mutate": undefined,
-          "_options": Object {
-            "abortEarly": true,
-            "recursive": true,
-          },
-          "_type": "string",
-          "_typeError": [Function],
-          "_whitelist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "tests": Array [
-            [Function],
-          ],
-          "transforms": Array [
-            [Function],
-          ],
-          "type": "string",
-        },
-      },
-      "tests": Array [],
-      "transforms": Array [
-        [Function],
-      ],
-      "type": "object",
-    }
-  }
->
-  <WebhookFormTabs
-    activeTab={0}
-    availableEvents={
-      Array [
-        "host_created",
-      ]
-    }
-    disabled={false}
-    formProps={Object {}}
-    handleTabClick={[Function]}
-    httpMethods={
-      Array [
-        Object {
-          "label": "POST",
-          "value": "POST",
-        },
-        Object {
-          "label": "GET",
-          "value": "GET",
-        },
-        Object {
-          "label": "PUT",
-          "value": "PUT",
-        },
-        Object {
-          "label": "DELETE",
-          "value": "DELETE",
-        },
-        Object {
-          "label": "PATCH",
-          "value": "PATCH",
-        },
-      ]
-    }
-    isEventsLoading={false}
-    isPasswordDisabled={false}
-    isTemplatesLoading={false}
-    webhookTemplates={
-      Array [
-        Object {
-          "label": "default template",
-          "value": 204,
-        },
-        Object {
-          "label": "default template clone",
-          "value": 205,
-        },
-      ]
-    }
-  />
-</ForemanForm>
-`;
-
-exports[`WebhookForm rendering should render for new page 1`] = `
-<ForemanForm
-  enableReinitialize={true}
-  initialValues={
-    Object {
-      "enabled": true,
-      "event": "host_created.event.foreman",
-      "http_content_type": "application/json",
-      "http_method": "POST",
-      "verify_ssl": true,
-    }
-  }
-  item="Webhook"
-  onCancel={[MockFunction]}
-  onSubmit={[MockFunction]}
-  validationSchema={
-    ObjectSchema {
-      "_blacklist": RefSet {
-        "list": Array [],
-        "refs": Array [],
-      },
-      "_conditions": Array [],
-      "_defaultDefault": [Function],
-      "_deps": Array [],
-      "_excludedEdges": Array [],
-      "_exclusive": Object {},
-      "_mutate": undefined,
-      "_nodes": Array [
-        "webhook_template_id",
-        "event",
-        "http_method",
-        "target_url",
-        "name",
-      ],
-      "_options": Object {
-        "abortEarly": true,
-        "recursive": true,
-      },
-      "_type": "object",
-      "_typeError": [Function],
-      "_whitelist": RefSet {
-        "list": Array [],
-        "refs": Array [],
-      },
-      "fields": Object {
-        "event": StringSchema {
-          "_blacklist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "_conditions": Array [],
-          "_deps": Array [],
-          "_exclusive": Object {
-            "required": true,
-          },
-          "_mutate": undefined,
-          "_options": Object {
-            "abortEarly": true,
-            "recursive": true,
-          },
-          "_type": "string",
-          "_typeError": [Function],
-          "_whitelist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "tests": Array [
-            [Function],
-          ],
-          "transforms": Array [
-            [Function],
-          ],
-          "type": "string",
-        },
-        "http_method": StringSchema {
-          "_blacklist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "_conditions": Array [],
-          "_deps": Array [],
-          "_exclusive": Object {
-            "required": true,
-          },
-          "_mutate": undefined,
-          "_options": Object {
-            "abortEarly": true,
-            "recursive": true,
-          },
-          "_type": "string",
-          "_typeError": [Function],
-          "_whitelist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "tests": Array [
-            [Function],
-          ],
-          "transforms": Array [
-            [Function],
-          ],
-          "type": "string",
-        },
-        "name": StringSchema {
-          "_blacklist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "_conditions": Array [],
-          "_deps": Array [],
-          "_exclusive": Object {
-            "required": true,
-          },
-          "_mutate": undefined,
-          "_options": Object {
-            "abortEarly": true,
-            "recursive": true,
-          },
-          "_type": "string",
-          "_typeError": [Function],
-          "_whitelist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "tests": Array [
-            [Function],
-          ],
-          "transforms": Array [
-            [Function],
-          ],
-          "type": "string",
-        },
-        "target_url": StringSchema {
-          "_blacklist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "_conditions": Array [],
-          "_deps": Array [],
-          "_exclusive": Object {
-            "required": true,
-          },
-          "_mutate": undefined,
-          "_options": Object {
-            "abortEarly": true,
-            "recursive": true,
-          },
-          "_type": "string",
-          "_typeError": [Function],
-          "_whitelist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "tests": Array [
-            [Function],
-          ],
-          "transforms": Array [
-            [Function],
-          ],
-          "type": "string",
-        },
-        "webhook_template_id": StringSchema {
-          "_blacklist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "_conditions": Array [],
-          "_deps": Array [],
-          "_exclusive": Object {
-            "required": true,
-          },
-          "_mutate": undefined,
-          "_options": Object {
-            "abortEarly": true,
-            "recursive": true,
-          },
-          "_type": "string",
-          "_typeError": [Function],
-          "_whitelist": RefSet {
-            "list": Array [],
-            "refs": Array [],
-          },
-          "tests": Array [
-            [Function],
-          ],
-          "transforms": Array [
-            [Function],
-          ],
-          "type": "string",
-        },
-      },
-      "tests": Array [],
-      "transforms": Array [
-        [Function],
-      ],
-      "type": "object",
-    }
-  }
->
-  <WebhookFormTabs
-    activeTab={0}
-    availableEvents={
-      Array [
-        "host_created",
-      ]
-    }
-    disabled={false}
-    formProps={Object {}}
-    handleTabClick={[Function]}
-    httpMethods={
-      Array [
-        Object {
-          "label": "POST",
-          "value": "POST",
-        },
-        Object {
-          "label": "GET",
-          "value": "GET",
-        },
-        Object {
-          "label": "PUT",
-          "value": "PUT",
-        },
-        Object {
-          "label": "DELETE",
-          "value": "DELETE",
-        },
-        Object {
-          "label": "PATCH",
-          "value": "PATCH",
-        },
-      ]
-    }
-    isEventsLoading={false}
-    isPasswordDisabled={false}
-    isTemplatesLoading={false}
-    webhookTemplates={
-      Array [
-        Object {
-          "label": "default template",
-          "value": 204,
-        },
-        Object {
-          "label": "default template clone",
-          "value": 205,
-        },
-      ]
-    }
-  />
-</ForemanForm>
-`;
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/index.js b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/index.js
index ac6e5a6..e391eff 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/index.js
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/index.js
@@ -29,7 +29,6 @@ const ConnectedWebhookForm = ({
   handleSubmit,
   initialValues,
   isPasswordDisabled,
-  setIsPasswordDisabled,
 }) => {
   const dispatch = useDispatch();
 
@@ -67,7 +66,6 @@ const ConnectedWebhookForm = ({
       isTemplatesLoading={isTemplatesLoading}
       isEventsLoading={isEventsLoading}
       isPasswordDisabled={isPasswordDisabled}
-      setIsPasswordDisabled={setIsPasswordDisabled}
     />
   );
 };
@@ -77,12 +75,10 @@ ConnectedWebhookForm.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
   initialValues: PropTypes.object.isRequired,
   isPasswordDisabled: PropTypes.bool,
-  setIsPasswordDisabled: PropTypes.func,
 };
 
 ConnectedWebhookForm.defaultProps = {
   isPasswordDisabled: false,
-  setIsPasswordDisabled: undefined,
 };
 
 export default ConnectedWebhookForm;
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookCreateModal.js b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookCreateModal.js
index b0131dd..8160b34 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookCreateModal.js
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookCreateModal.js
@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal } from 'patternfly-react';
+import { Modal, ModalVariant } from '@patternfly/react-core';
 import { useDispatch } from 'react-redux';
 
 import { translate as __ } from 'foremanReact/common/I18n';
-import { submitForm } from 'foremanReact/redux/actions/common/forms';
 import { foremanUrl } from 'foremanReact/common/helpers';
-import ForemanModal from 'foremanReact/components/ForemanModal';
+import { APIActions } from 'foremanReact/redux/API';
 
 import ConnectedWebhookForm from '../../Components/WebhookForm';
 
@@ -14,7 +13,7 @@ import { WEBHOOK_CREATE_MODAL_ID, WEBHOOKS_PATH } from '../../constants';
 
 import './WebhookModal.scss';
 
-const WebhookCreateModal = ({ onSuccess, onCancel }) => {
+const WebhookCreateModal = ({ onSuccess, onCancel, isOpen }) => {
   const dispatch = useDispatch();
 
   const initialWebhookValues = {
@@ -33,39 +32,43 @@ const WebhookCreateModal = ({ onSuccess, onCancel }) => {
     proxy_authorization: false,
   };
 
-  const handleSubmit = (values, actions) =>
+  const handleSubmit = values =>
     dispatch(
-      submitForm({
+      APIActions.post({
         url: foremanUrl(`/api${WEBHOOKS_PATH}`),
-        values: { ...values, controller: 'webhooks' },
-        item: 'Webhook',
-        message: __('Webhook was successfully created.'),
-        successCallback: onSuccess,
-        actions,
+        key: WEBHOOK_CREATE_MODAL_ID,
+        params: { ...values, controller: 'webhooks' },
+        successToast: () => __('Webhook was successfully created.'),
+        handleSuccess: onSuccess,
+        errorToast: ({ response }) =>
+          // eslint-disable-next-line camelcase
+          response?.data?.error?.full_messages?.[0] || response,
       })
     );
 
   return (
-    <ForemanModal
+    <Modal
+      position="top"
+      variant={ModalVariant.medium}
+      isOpen={isOpen}
+      onClose={onCancel}
       id={WEBHOOK_CREATE_MODAL_ID}
-      backdrop="static"
-      className="webhooks-modal"
+      ouiaId={WEBHOOK_CREATE_MODAL_ID}
+      title={__('Create Webhook')}
     >
-      <Modal.Header>
-        <Modal.Title>{__('Create Webhook')}</Modal.Title>
-      </Modal.Header>
       <ConnectedWebhookForm
         handleSubmit={handleSubmit}
         initialValues={initialWebhookValues}
         onCancel={onCancel}
       />
-    </ForemanModal>
+    </Modal>
   );
 };
 
 WebhookCreateModal.propTypes = {
   onSuccess: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
 };
 
 export default WebhookCreateModal;
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookDeleteModal.js b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookDeleteModal.js
index 97a58d3..c5080d1 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookDeleteModal.js
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookDeleteModal.js
@@ -1,40 +1,74 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { APIActions } from 'foremanReact/redux/API';
+import { useDispatch } from 'react-redux';
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
-import ForemanModal from 'foremanReact/components/ForemanModal';
 import { foremanUrl } from 'foremanReact/common/helpers';
+import { Modal, Button, ModalVariant } from '@patternfly/react-core';
 
 import { WEBHOOK_DELETE_MODAL_ID } from '../../constants';
 
-const WebhookDeleteModal = ({ toDelete, onSuccess }) => {
+const WebhookDeleteModal = ({ toDelete, onSuccess, modalState }) => {
   const { id, name } = toDelete;
 
+  const dispatch = useDispatch();
+  const handleSubmit = () =>
+    dispatch(
+      APIActions.delete({
+        url: foremanUrl(`/api/v2/webhooks/${id}`),
+        key: WEBHOOK_DELETE_MODAL_ID,
+        successToast: () =>
+          sprintf(__('Webhook %s was successfully deleted'), name),
+        errorToast: response =>
+          // eslint-disable-next-line camelcase
+          response?.response?.data?.error?.full_messages?.[0] || response,
+        handleSuccess: onSuccess,
+      })
+    );
+
   return (
-    <ForemanModal
+    <Modal
+      position="top"
+      variant={ModalVariant.small}
       id={WEBHOOK_DELETE_MODAL_ID}
+      ouiaId={WEBHOOK_DELETE_MODAL_ID}
       title={__('Confirm Webhook Deletion')}
-      backdrop="static"
-      enforceFocus
-      submitProps={{
-        url: foremanUrl(`/api/v2/webhooks/${id}`),
-        message: sprintf(__('Webhook %s was successfully deleted'), name),
-        onSuccess,
-        submitBtnProps: {
-          bsStyle: 'danger',
-          btnText: __('Delete'),
-        },
-      }}
-    >
-      {sprintf(__('You are about to delete %s. Are you sure?'), name)}
-      <ForemanModal.Footer />
-    </ForemanModal>
+      isOpen={modalState.isOpen}
+      onClose={modalState.closeModal}
+      description={sprintf(
+        __('You are about to delete %s. Are you sure?'),
+        name
+      )}
+      actions={[
+        <Button
+          ouiaId="submitBtn"
+          key="confirm"
+          variant="danger"
+          onClick={handleSubmit}
+        >
+          {__('Delete')}
+        </Button>,
+        <Button
+          ouiaId="cancelBtn"
+          key="cancel"
+          variant="link"
+          onClick={modalState.closeModal}
+        >
+          {__('Cancel')}
+        </Button>,
+      ]}
+    />
   );
 };
 
 WebhookDeleteModal.propTypes = {
   toDelete: PropTypes.object,
   onSuccess: PropTypes.func.isRequired,
+  modalState: PropTypes.shape({
+    isOpen: PropTypes.bool.isRequired,
+    closeModal: PropTypes.func.isRequired,
+  }).isRequired,
 };
 
 WebhookDeleteModal.defaultProps = {
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookEditModal.js b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookEditModal.js
index b718dee..ce35f8d 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookEditModal.js
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookEditModal.js
@@ -1,14 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { Modal } from 'patternfly-react';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { translate as __ } from 'foremanReact/common/I18n';
-import ForemanModal from 'foremanReact/components/ForemanModal';
 import Loading from 'foremanReact/components/Loading';
 import { foremanUrl } from 'foremanReact/common/helpers';
-import { submitForm } from 'foremanReact/redux/actions/common/forms';
-import { get } from 'foremanReact/redux/API';
+import { get, put } from 'foremanReact/redux/API';
+import { Modal, ModalVariant } from '@patternfly/react-core';
 
 import ConnectedWebhookForm from '../../Components/WebhookForm';
 
@@ -27,7 +25,7 @@ import {
 
 import './WebhookModal.scss';
 
-const WebhookEditModal = ({ toEdit, onSuccess, onCancel }) => {
+const WebhookEditModal = ({ toEdit, onSuccess, modalState }) => {
   const dispatch = useDispatch();
 
   const [isPasswordDisabled, setIsPasswordDisabled] = useState(false);
@@ -56,19 +54,20 @@ const WebhookEditModal = ({ toEdit, onSuccess, onCancel }) => {
     setIsPasswordDisabled(isPasswordSet);
   }, [isPasswordSet]);
 
-  const handleSubmit = (values, actions) => {
+  const handleSubmit = values => {
     if (isPasswordDisabled) {
       delete values.password;
     }
     dispatch(
-      submitForm({
+      put({
         url: foremanUrl(`/api${WEBHOOKS_PATH}/${id}`),
-        values: { ...values, controller: 'webhooks' },
-        item: 'Webhook',
-        message: __('Webhook was successfully updated.'),
-        method: 'put',
-        successCallback: onSuccess,
-        actions,
+        key: WEBHOOK_API_REQUEST_KEY,
+        params: { ...values, controller: 'webhooks' },
+        successToast: () => __('Webhook was successfully updated.'),
+        handleSuccess: onSuccess,
+        errorToast: ({ response }) =>
+          // eslint-disable-next-line camelcase
+          response?.data?.error?.full_messages?.[0] || response,
       })
     );
   };
@@ -86,20 +85,19 @@ const WebhookEditModal = ({ toEdit, onSuccess, onCancel }) => {
 
   const onEditCancel = () => {
     if (isPasswordSet) setIsPasswordDisabled(true);
-    onCancel();
+    modalState.closeModal();
   };
 
   return (
-    <ForemanModal
+    <Modal
+      position="top"
+      variant={ModalVariant.medium}
       id={WEBHOOK_EDIT_MODAL_ID}
-      backdrop="static"
-      className="webhooks-modal"
+      ouiaId={WEBHOOK_EDIT_MODAL_ID}
+      isOpen={modalState.isOpen}
+      onClose={modalState.closeModal}
+      title={`${__('Edit')} ${initialWebhookValues.name}`}
     >
-      <Modal.Header>
-        <Modal.Title>
-          {`${__('Edit')} ${initialWebhookValues.name}`}
-        </Modal.Title>
-      </Modal.Header>
       {isLoading ? (
         <Loading />
       ) : (
@@ -111,14 +109,17 @@ const WebhookEditModal = ({ toEdit, onSuccess, onCancel }) => {
           setIsPasswordDisabled={setIsPasswordDisabled}
         />
       )}
-    </ForemanModal>
+    </Modal>
   );
 };
 
 WebhookEditModal.propTypes = {
   onSuccess: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
   toEdit: PropTypes.number,
+  modalState: PropTypes.shape({
+    isOpen: PropTypes.bool.isRequired,
+    closeModal: PropTypes.func.isRequired,
+  }).isRequired,
 };
 
 WebhookEditModal.defaultProps = {
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookTestModal.js b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookTestModal.js
index affdad4..f8438ac 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookTestModal.js
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookTestModal.js
@@ -1,61 +1,66 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
-import ForemanModal from 'foremanReact/components/ForemanModal';
-import ForemanForm from 'foremanReact/components/common/forms/ForemanForm';
 import { foremanUrl } from 'foremanReact/common/helpers';
-import { submitForm } from 'foremanReact/redux/actions/common/forms';
-import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
-
-import ForemanFormikField from '../../../Webhooks/Components/WebhookForm/Components/ForemanFormikField';
+import {
+  Form,
+  Button,
+  ActionGroup,
+  Modal,
+  ModalVariant,
+} from '@patternfly/react-core';
 
+import { APIActions } from 'foremanReact/redux/API';
 import {
   WEBHOOK_TEST_MODAL_ID,
   WEBHOOKS_API_PLAIN_PATH,
 } from '../../constants';
 
 import './WebhookModal.scss';
+import FieldConstructor from '../../Components/WebhookForm/Components/FieldConstructor';
 
-const WebhookTestModal = ({ toTest }) => {
+const WebhookTestModal = ({ toTest, modalState }) => {
   const dispatch = useDispatch();
 
   const { id, name } = toTest;
-  const { setModalClosed: setTestModalClosed } = useForemanModal({
-    id: WEBHOOK_TEST_MODAL_ID,
-  });
   const initialTestValues = {
     payload: '',
   };
+
+  const [value, setValue] = useState(initialTestValues);
+
   const errorToast = error =>
     sprintf(
       __('Webhook test failed: %s'),
       error?.response?.data?.error?.message
     );
 
-  const handleSubmit = (values, actions) => {
+  const handleSubmit = values => {
     dispatch(
-      submitForm({
+      APIActions.post({
+        key: WEBHOOK_TEST_MODAL_ID,
         url: foremanUrl(`${WEBHOOKS_API_PLAIN_PATH}/${id}/test`),
-        values: { ...values, controller: 'webhooks' },
-        item: 'WebhookTest',
-        message: sprintf(__('Webhook %s test was successful'), name),
-        method: 'post',
-        successCallback: () => actions.setSubmitting(false),
-        actions,
-        errorToast,
-        handleError: () => actions.setSubmitting(false),
+        params: {
+          ...values,
+          controller: 'webhooks',
+        },
+        successToast: () => sprintf(__('Webhook %s test was successful'), name),
+        errorToast: error => errorToast(error),
+        handleSuccess: () => modalState.closeModal(),
       })
     );
   };
 
   return (
-    <ForemanModal
+    <Modal
+      variant={ModalVariant.medium}
+      isOpen={modalState.isOpen}
+      onClose={modalState.closeModal}
       id={WEBHOOK_TEST_MODAL_ID}
+      ouiaId={WEBHOOK_TEST_MODAL_ID}
       title={`${__('Test')} ${name}`}
-      backdrop="static"
-      enforceFocus
       className="webhooks-modal"
     >
       {`${sprintf(__('You are about to test %s webhook.'), name)} `}
@@ -68,12 +73,8 @@ const WebhookTestModal = ({ toTest }) => {
       {__('You can specify below a custom payload to test the webhook with.')}
       <br />
       <br />
-      <ForemanForm
-        onSubmit={handleSubmit}
-        initialValues={initialTestValues}
-        onCancel={setTestModalClosed}
-      >
-        <ForemanFormikField
+      <Form>
+        <FieldConstructor
           name="payload"
           type="textarea"
           label={__('Payload')}
@@ -81,14 +82,38 @@ const WebhookTestModal = ({ toTest }) => {
           placeholder="{&#13;&#10;id: 1,&#13;&#10;name: test&#13;&#10;}"
           inputSizeClass="col-md-8"
           rows={8}
+          value={value.payload}
+          setValue={(key, val) => {
+            setValue(prev => ({ ...prev, [key]: val }));
+          }}
         />
-      </ForemanForm>
-    </ForemanModal>
+        <ActionGroup>
+          <Button
+            ouiaId="submit-webhook-form"
+            variant="primary"
+            onClick={() => handleSubmit(value)}
+          >
+            {__('Submit')}
+          </Button>
+          <Button
+            ouiaId="cancel-webhook-form"
+            variant="link"
+            onClick={modalState.closeModal}
+          >
+            {__('Cancel')}
+          </Button>
+        </ActionGroup>
+      </Form>
+    </Modal>
   );
 };
 
 WebhookTestModal.propTypes = {
   toTest: PropTypes.object,
+  modalState: PropTypes.shape({
+    isOpen: PropTypes.bool.isRequired,
+    closeModal: PropTypes.func.isRequired,
+  }).isRequired,
 };
 
 WebhookTestModal.defaultProps = {
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/WebhooksTable.js b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/WebhooksTable.js
index 2308196..d52ffde 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/WebhooksTable.js
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/WebhooksTable.js
@@ -6,7 +6,6 @@ import { isEmpty } from 'lodash';
 import { Table } from 'foremanReact/components/common/table';
 import Pagination from 'foremanReact/components/Pagination';
 import Loading from 'foremanReact/components/Loading';
-import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
 
 import WebhookDeleteModal from '../WebhookDeleteModal';
 import WebhookEditModal from '../WebhookEditModal';
@@ -15,8 +14,6 @@ import EmptyWebhooksTable from './Components/EmptyWebhooksTable';
 
 import createWebhooksTableSchema from './WebhooksTableSchema';
 
-import { WEBHOOK_EDIT_MODAL_ID } from '../../../constants';
-
 import {
   selectWebhooks,
   selectPage,
@@ -38,6 +35,7 @@ const WebhooksTable = ({
   onEditClick,
   reloadWithSearch,
   webhookActions,
+  modalsStates,
 }) => {
   const webhooks = useSelector(selectWebhooks);
   const page = useSelector(selectPage);
@@ -51,15 +49,12 @@ const WebhooksTable = ({
   const message = useSelector(selectMessage);
 
   const onDeleteSuccess = () => {
+    modalsStates.deleteModal.closeModal();
     const currentPage = page;
     const maxPage = Math.ceil((itemCount - 1) / perPage);
     fetchAndPush({ page: maxPage < currentPage ? maxPage : currentPage });
   };
 
-  const { setModalClosed: setEditModalClosed } = useForemanModal({
-    id: WEBHOOK_EDIT_MODAL_ID,
-  });
-
   if (isLoading && !hasError) return <Loading />;
 
   if (!isLoading && !hasData && isEmpty(search)) {
@@ -68,16 +63,20 @@ const WebhooksTable = ({
 
   return (
     <React.Fragment>
-      <WebhookDeleteModal toDelete={toDelete} onSuccess={onDeleteSuccess} />
+      <WebhookDeleteModal
+        toDelete={toDelete}
+        onSuccess={onDeleteSuccess}
+        modalState={modalsStates.deleteModal}
+      />
       <WebhookEditModal
         toEdit={toEdit}
         onSuccess={() => {
-          setEditModalClosed();
+          modalsStates.editModal.closeModal();
           reloadWithSearch(search);
         }}
-        onCancel={setEditModalClosed}
+        modalState={modalsStates.editModal}
       />
-      <WebhookTestModal toTest={toTest} />
+      <WebhookTestModal toTest={toTest} modalState={modalsStates.testModal} />
       <Table
         key="webhooks-table"
         columns={createWebhooksTableSchema(
@@ -103,6 +102,20 @@ WebhooksTable.propTypes = {
   toEdit: PropTypes.number.isRequired,
   reloadWithSearch: PropTypes.func.isRequired,
   webhookActions: PropTypes.object.isRequired,
+  modalsStates: PropTypes.shape({
+    deleteModal: PropTypes.shape({
+      isOpen: PropTypes.bool.isRequired,
+      closeModal: PropTypes.func.isRequired,
+    }).isRequired,
+    editModal: PropTypes.shape({
+      isOpen: PropTypes.bool.isRequired,
+      closeModal: PropTypes.func.isRequired,
+    }).isRequired,
+    testModal: PropTypes.shape({
+      isOpen: PropTypes.bool.isRequired,
+      closeModal: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
 };
 
 export default WebhooksTable;
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/__tests__/__snapshots__/WebhooksTable.test.js.snap b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/__tests__/__snapshots__/WebhooksTable.test.js.snap
index 4ab5bce..2b5576f 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/__tests__/__snapshots__/WebhooksTable.test.js.snap
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/__tests__/__snapshots__/WebhooksTable.test.js.snap
@@ -8,6 +8,22 @@ exports[`WebhooksTable rendering should render when loading 1`] = `
   hasError={false}
   isLoading={true}
   itemCount={0}
+  modalsStates={
+    Object {
+      "deleteModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "editModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "testModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+    }
+  }
   onDeleteClick={[MockFunction]}
   onEditClick={[Function]}
   onTestClick={[Function]}
@@ -54,6 +70,22 @@ exports[`WebhooksTable rendering should render with error 1`] = `
       "type": "error",
     }
   }
+  modalsStates={
+    Object {
+      "deleteModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "editModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "testModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+    }
+  }
   onDeleteClick={[MockFunction]}
   onEditClick={[Function]}
   onTestClick={[Function]}
@@ -94,6 +126,22 @@ exports[`WebhooksTable rendering should render with no data 1`] = `
   hasError={false}
   isLoading={false}
   itemCount={0}
+  modalsStates={
+    Object {
+      "deleteModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "editModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "testModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+    }
+  }
   onDeleteClick={[MockFunction]}
   onEditClick={[Function]}
   onTestClick={[Function]}
@@ -134,6 +182,22 @@ exports[`WebhooksTable rendering should render with webhooks 1`] = `
   hasError={false}
   isLoading={false}
   itemCount={2}
+  modalsStates={
+    Object {
+      "deleteModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "editModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+      "testModal": Object {
+        "closeModal": [Function],
+        "isOpen": false,
+      },
+    }
+  }
   onDeleteClick={[MockFunction]}
   onEditClick={[Function]}
   onTestClick={[Function]}
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/index.js b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/index.js
index 3ee922f..68f14c1 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/index.js
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhooksTable/index.js
@@ -1,43 +1,28 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
-
 import WebhooksTable from './WebhooksTable';
-import {
-  WEBHOOK_DELETE_MODAL_ID,
-  WEBHOOK_EDIT_MODAL_ID,
-  WEBHOOK_TEST_MODAL_ID,
-} from '../../../constants';
 
 const WrappedWebhooksTable = props => {
-  const { setModalOpen: setDeleteModalOpen } = useForemanModal({
-    id: WEBHOOK_DELETE_MODAL_ID,
-  });
-
-  const { setModalOpen: setEditModalOpen } = useForemanModal({
-    id: WEBHOOK_EDIT_MODAL_ID,
-  });
-
-  const { setModalOpen: setTestModalOpen } = useForemanModal({
-    id: WEBHOOK_TEST_MODAL_ID,
-  });
+  const [isTestModalOpen, setIsTestModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 
   const { setToDelete, setToEdit, setToTest, ...rest } = props;
 
   const onDeleteClick = rowData => {
     setToDelete(rowData);
-    setDeleteModalOpen();
+    setIsDeleteModalOpen(true);
   };
 
   const onEditClick = rowData => {
     setToEdit(rowData);
-    setEditModalOpen();
+    setIsEditModalOpen(true);
   };
 
   const onTestClick = rowData => {
     setToTest(rowData);
-    setTestModalOpen();
+    setIsTestModalOpen(true);
   };
 
   const webhookActions = {
@@ -53,6 +38,20 @@ const WrappedWebhooksTable = props => {
     <WebhooksTable
       onEditClick={onEditClick}
       onTestClick={onTestClick}
+      modalsStates={{
+        testModal: {
+          isOpen: isTestModalOpen,
+          closeModal: () => setIsTestModalOpen(false),
+        },
+        deleteModal: {
+          isOpen: isDeleteModalOpen,
+          closeModal: () => setIsDeleteModalOpen(false),
+        },
+        editModal: {
+          isOpen: isEditModalOpen,
+          closeModal: () => setIsEditModalOpen(false),
+        },
+      }}
       webhookActions={webhookActions}
       {...rest}
     />
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/WebhooksIndexPage.js b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/WebhooksIndexPage.js
index 38a4830..f74f3d9 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/WebhooksIndexPage.js
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/WebhooksIndexPage.js
@@ -3,13 +3,8 @@ import { useSelector, useDispatch } from 'react-redux';
 
 import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { useForemanModal } from 'foremanReact/components/ForemanModal/ForemanModalHooks';
 
-import {
-  WEBHOOKS_API_PATH,
-  WEBHOOKS_API_REQUEST_KEY,
-  WEBHOOK_CREATE_MODAL_ID,
-} from '../constants';
+import { WEBHOOKS_API_PATH, WEBHOOKS_API_REQUEST_KEY } from '../constants';
 
 import { selectSearch } from '../WebhooksPageSelectors';
 
@@ -26,29 +21,28 @@ const WebhooksIndexPage = () => {
   const [toDelete, setToDelete] = useState({});
   const [toTest, setToTest] = useState({});
   const [toEdit, setToEdit] = useState(0);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
-  const {
-    setModalOpen: setCreateModalOpen,
-    setModalClosed: setCreateModalClosed,
-  } = useForemanModal({
-    id: WEBHOOK_CREATE_MODAL_ID,
-  });
+  const openModal = () => {
+    setIsCreateModalOpen(true);
+  };
 
   return (
     <>
       <WebhookCreateModal
+        isOpen={isCreateModalOpen}
         onSuccess={() => {
-          setCreateModalClosed();
+          setIsCreateModalOpen(false);
           dispatch(reloadWithSearch(search));
         }}
-        onCancel={setCreateModalClosed}
+        onCancel={() => setIsCreateModalOpen(false)}
       />
       <TableIndexPage
         header={__('Webhooks')}
         controller="webhooks"
         apiUrl={WEBHOOKS_API_PATH}
         apiOptions={{ key: WEBHOOKS_API_REQUEST_KEY }}
-        customCreateAction={() => setCreateModalOpen}
+        customCreateAction={() => openModal}
       >
         <WebhooksTable
           fetchAndPush={params => dispatch(fetchAndPush(params))}
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/__tests__/__snapshots__/integration.test.js.snap b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/__tests__/__snapshots__/integration.test.js.snap
deleted file mode 100644
index a571536..0000000
--- a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/__tests__/__snapshots__/integration.test.js.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`WebhooksIndexPage - Integration Test should flow: initial state 1`] = `
-Object {
-  "action": Array [
-    Array [
-      Object {
-        "key": "WEBHOOK_EVENTS",
-        "type": "get-some-type",
-        "url": "",
-      },
-    ],
-  ],
-  "state": Object {},
-}
-`;
-
-exports[`WebhooksIndexPage - Integration Test should flow: rendered 1`] = `
-Object {
-  "action": Array [
-    Array [
-      Object {
-        "key": "WEBHOOK_EVENTS",
-        "type": "get-some-type",
-        "url": "",
-      },
-    ],
-  ],
-  "state": Object {},
-}
-`;
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/__tests__/integration.test.js b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/__tests__/integration.test.js
index 5f2f7b9..c455ae8 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/__tests__/integration.test.js
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/__tests__/integration.test.js
@@ -24,11 +24,8 @@ describe('WebhooksIndexPage - Integration Test', () => {
         <ConnectedWebhooksIndexPage history={history} />
       </Router>
     );
-    integrationTestHelper.takeStoreAndLastActionSnapshot('rendered');
 
     expect(component.exists('WebhooksTable')).toEqual(true);
     expect(component.exists('WebhookCreateModal')).toEqual(true);
-
-    integrationTestHelper.takeStoreAndLastActionSnapshot('initial state');
   });
 });