diff --git a/lib/foreman_webhooks/engine.rb b/lib/foreman_webhooks/engine.rb
index a1af628..29eab34 100644
--- a/lib/foreman_webhooks/engine.rb
+++ b/lib/foreman_webhooks/engine.rb
@@ -14,7 +14,7 @@ class Engine < ::Rails::Engine
     initializer 'foreman_webhooks.register_plugin', before: :finisher_hook do |app|
       app.reloader.to_prepare do
         Foreman::Plugin.register :foreman_webhooks do
-          requires_foreman '>= 3.18'
+          requires_foreman '>= 5.0'
           register_gettext
 
           apipie_documented_controllers ["#{ForemanWebhooks::Engine.root}/app/controllers/api/v2/*.rb"]
diff --git a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/FieldConstructor.js b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/FieldConstructor.js
deleted file mode 100644
index f7e8197..0000000
--- a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/FieldConstructor.js
+++ /dev/null
@@ -1,312 +0,0 @@
-/* eslint-disable max-lines */
-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,
-  validated,
-  value,
-  disabled,
-  setValue,
-  placeholder,
-  errMsg,
-  fieldId,
-  setIsPasswordDisabled,
-  ...props
-}) => {
-  const [fieldValidated, setFieldValidated] = useState('default');
-  const [firstLoad, setFirstLoad] = useState(true);
-
-  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={fieldId ?? `id-${name}`}
-          isChecked={value || false}
-          onChange={(_, newValue) => {
-            setValue(name, newValue);
-          }}
-          isDisabled={disabled}
-          isRequired={required}
-          type={type}
-          validated={fieldValidated}
-        />
-        <ValidationComponent localValidated={fieldValidated} errMsg={errMsg} />
-      </>
-    );
-  } else if (type === 'textarea') {
-    return (
-      <>
-        <TextArea
-          rows={6}
-          name={name}
-          id={fieldId ?? `id-${name}`}
-          value={value ?? ''}
-          onChange={(_, newValue) => setValue(name, newValue)}
-          isRequired={required}
-          isDisabled={disabled}
-          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}
-          fieldId={fieldId}
-        />
-      </>
-    );
-  }
-  return (
-    <>
-      {name === 'password' && disabled && setIsPasswordDisabled ? (
-        <Grid hasGutter={false}>
-          <GridItem span={11}>
-            <TextInput
-              name={name}
-              value={value ?? ''}
-              id={fieldId ?? `id-${name}`}
-              onChange={localHandler}
-              isDisabled={disabled}
-              isRequired={required}
-              type={type}
-              validated={fieldValidated}
-              placeholder={placeholder}
-              onBlur={requiredValidate}
-              autoComplete="off"
-            />
-          </GridItem>
-          <GridItem span={1}>
-            <Button
-              ouiaId={`reset-${name}`}
-              onClick={() => setIsPasswordDisabled(!disabled)}
-              variant="control"
-              icon={<PencilAltIcon />}
-            />
-          </GridItem>
-        </Grid>
-      ) : (
-        <TextInput
-          name={name}
-          value={value ?? ''}
-          id={fieldId ?? `id-${name}`}
-          onChange={localHandler}
-          isRequired={required}
-          type={type}
-          validated={fieldValidated}
-          onBlur={requiredValidate}
-          autoComplete={type === 'password' ? 'new-password' : null}
-        />
-      )}
-
-      <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,
-  name,
-  ...props
-}) => (
-  <FormGroup
-    isInline
-    fieldId={fieldId ?? `id-${name}`}
-    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}
-      name={name}
-      {...props}
-      fieldId={fieldId}
-    />
-  </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,
-    })
-  ),
-  validated: PropTypes.string,
-  placeholder: PropTypes.string,
-  errMsg: PropTypes.string,
-  value: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-  fieldId: PropTypes.string,
-};
-
-FormField.defaultProps = {
-  label: '',
-  errMsg: null,
-  placeholder: '',
-  validated: 'default',
-  required: false,
-  allowClear: false,
-  options: [],
-  disabled: false,
-  value: '',
-  fieldId: undefined,
-};
-
-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/WebhookFormTabs.js b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/WebhookFormTabs.js
index 9004778..8fae619 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/WebhookFormTabs.js
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/WebhookFormTabs.js
@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 
+import FieldConstructor from 'foremanReact/components/common/FieldConstructor/FieldConstructor';
 import { sprintf, translate as __ } from 'foremanReact/common/I18n';
 
 import './WebhookFormTabs.css';
-import FieldConstructor from './FieldConstructor';
 
 const WebhookFormTabs = ({
   inputValues,
@@ -48,7 +48,7 @@ const WebhookFormTabs = ({
             type="select"
             label={__('Subscribe to')}
             required
-            allowClear={false}
+            allowClear
             options={availableEvents}
             isLoading={isEventsLoading}
             placeholder={__('Start typing to search...')}
@@ -93,7 +93,7 @@ const WebhookFormTabs = ({
             type="select"
             label={__('Template')}
             required
-            allowClear={false}
+            allowClear
             options={webhookTemplates}
             isLoading={isTemplatesLoading}
             placeholder={__('Start typing to search...')}
@@ -105,7 +105,7 @@ const WebhookFormTabs = ({
             type="select"
             label={__('HTTP Method')}
             required
-            allowClear={false}
+            allowClear
             options={httpMethods}
             placeholder={__('Start typing to search...')}
           />
@@ -173,7 +173,6 @@ const WebhookFormTabs = ({
             placeholder={__(
               "Optional CAs in PEM format concatenated to verify the receiver's SSL certificate"
             )}
-            inputSizeClass="col-md-8"
             rows={8}
             setValue={updateFieldValue}
           />
@@ -200,7 +199,6 @@ const WebhookFormTabs = ({
             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}
           />
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
deleted file mode 100644
index ef1cc05..0000000
--- a/webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookForm/Components/__tests__/FieldConstructor.test.js
+++ /dev/null
@@ -1,216 +0,0 @@
-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 enabled when loading', () => {
-      render(<FieldConstructor {...defaultProps} type="text" isLoading />);
-
-      expect(document.getElementById('id-test-field')).toBeEnabled();
-    });
-  });
-
-  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/WebhooksIndexPage/Components/WebhookTestModal.js b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookTestModal.js
index f8438ac..0acf5c9 100644
--- a/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookTestModal.js
+++ b/webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/Components/WebhookTestModal.js
@@ -12,6 +12,7 @@ import {
   ModalVariant,
 } from '@patternfly/react-core';
 
+import FieldConstructor from 'foremanReact/components/common/FieldConstructor/FieldConstructor';
 import { APIActions } from 'foremanReact/redux/API';
 import {
   WEBHOOK_TEST_MODAL_ID,
@@ -19,7 +20,6 @@ import {
 } from '../../constants';
 
 import './WebhookModal.scss';
-import FieldConstructor from '../../Components/WebhookForm/Components/FieldConstructor';
 
 const WebhookTestModal = ({ toTest, modalState }) => {
   const dispatch = useDispatch();
@@ -80,7 +80,6 @@ const WebhookTestModal = ({ toTest, modalState }) => {
           label={__('Payload')}
           labelHelp={__('Will be sent as is')}
           placeholder="{&#13;&#10;id: 1,&#13;&#10;name: test&#13;&#10;}"
-          inputSizeClass="col-md-8"
           rows={8}
           value={value.payload}
           setValue={(key, val) => {