diff --git a/packages/common/src/components/FormGroupWithHelpText/FormGroupWithHelpText.tsx b/packages/common/src/components/FormGroupWithHelpText/FormGroupWithHelpText.tsx
new file mode 100644
index 000000000..b0b960ffb
--- /dev/null
+++ b/packages/common/src/components/FormGroupWithHelpText/FormGroupWithHelpText.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+
+import {
+  FormGroup,
+  FormGroupProps,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
+
+export interface FormGroupWithHelpTextProps extends FormGroupProps {
+  /**
+   * Sets the FormGroup validated. If you set to success, text color of helper text will be modified to indicate valid state.
+   * If set to error, text color of helper text will be modified to indicate error state.
+   * If set to warning, text color of helper text will be modified to indicate warning state.
+   */
+  validated?: 'success' | 'warning' | 'error' | 'default';
+  /**
+   * Helper text regarding the field. It can be a simple text or an object.
+   */
+  helperText?: React.ReactNode;
+  /**
+   * Helper text after the field when the field is invalid. It can be a simple text or an object.
+   */
+  helperTextInvalid?: React.ReactNode;
+}
+
+/**
+ * Convert the formGroup validated mode into the variant styling of the helper text item
+ * If validated mode was not set or if it's the 'default', set the  variant styling to 'indeterminate'
+ * for being consistent with PF4 behavior
+ */
+const validatedToVariant = (validated) =>
+  !validated || validated === 'default' ? 'indeterminate' : validated;
+
+/**
+ *  A FormGroup component that supports helperTexts
+ *
+ *  This component wraps the FormGroup with an option to use the following helper text related properties
+ *  (since not supported anymore as part of the FormGroup component in PatternFly 5):
+ *  helperText, helperTextInvalid, validated
+ *
+ * `See` https://www.patternfly.org/get-started/release-highlights/#helper-text
+ *
+ * [<img src="static/media/src/components-stories/assets/github-logo.svg"><i class="fi fi-brands-github">
+ * <font color="green">View component source on GitHub</font>](https://github.com/kubev2v/forklift-console-plugin/blob/main/packages/common/src/components/FormGroupWithHelpText/FormGroupWithHelpText.tsx)
+ */
+export const FormGroupWithHelpText: React.FC<FormGroupWithHelpTextProps> = ({
+  label,
+  isRequired,
+  fieldId,
+  labelIcon,
+  role,
+  children,
+  validated,
+  helperText,
+  helperTextInvalid,
+}) => {
+  const helperTextMsg = validated === 'error' && helperTextInvalid ? helperTextInvalid : helperText;
+  const variant = validatedToVariant(validated);
+
+  return (
+    <FormGroup
+      label={label}
+      isRequired={isRequired}
+      fieldId={fieldId}
+      labelIcon={labelIcon}
+      role={role}
+    >
+      {children}
+      <FormHelperText isHidden={false}>
+        <HelperText>
+          <HelperTextItem variant={variant}>{helperTextMsg}</HelperTextItem>
+        </HelperText>
+      </FormHelperText>
+    </FormGroup>
+  );
+};
diff --git a/packages/common/src/components/FormGroupWithHelpText/index.ts b/packages/common/src/components/FormGroupWithHelpText/index.ts
new file mode 100644
index 000000000..a7e07a3af
--- /dev/null
+++ b/packages/common/src/components/FormGroupWithHelpText/index.ts
@@ -0,0 +1,3 @@
+// @index(['./*', /__/g], f => `export * from '${f.path}';`)
+export * from './FormGroupWithHelpText';
+// @endindex
diff --git a/packages/common/src/components/index.ts b/packages/common/src/components/index.ts
index 3d9e1082c..3657960e2 100644
--- a/packages/common/src/components/index.ts
+++ b/packages/common/src/components/index.ts
@@ -3,6 +3,7 @@ export * from './ActionServiceDropdown';
 export * from './ExternalLink';
 export * from './Filter';
 export * from './FilterGroup';
+export * from './FormGroupWithHelpText';
 export * from './Icons';
 export * from './LoadingDots';
 export * from './Page';
diff --git a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/MapsSection/components/MapsEdit.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/MapsSection/components/MapsEdit.tsx
index 98bd73c1a..1c9687c37 100644
--- a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/MapsSection/components/MapsEdit.tsx
+++ b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/MapsSection/components/MapsEdit.tsx
@@ -1,9 +1,10 @@
 import React, { ReactNode, useState } from 'react';
 import { DetailsItem } from 'src/modules/Providers/utils';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { ProviderModelGroupVersionKind, V1beta1Provider } from '@kubev2v/types';
 import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
-import { Form, FormGroup, FormSelect, FormSelectOption } from '@patternfly/react-core';
+import { Form, FormSelect, FormSelectOption } from '@patternfly/react-core';
 
 export const MapsEdit: React.FC<MapsEditProps> = ({
   providers,
@@ -33,7 +34,7 @@ export const MapsEdit: React.FC<MapsEditProps> = ({
   if (isEdit) {
     return (
       <Form isWidthLimited>
-        <FormGroup
+        <FormGroupWithHelpText
           label={label}
           isRequired
           fieldId="targetProvider"
@@ -58,7 +59,7 @@ export const MapsEdit: React.FC<MapsEditProps> = ({
               ...providers.map(ProviderOption),
             ]}
           </FormSelect>
-        </FormGroup>
+        </FormGroupWithHelpText>
       </Form>
     );
   } else {
diff --git a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx
index 644ca57b6..ab6d23dae 100644
--- a/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx
+++ b/packages/forklift-console-plugin/src/modules/NetworkMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx
@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
 import { DetailsItem } from 'src/modules/Providers/utils';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { ProviderModelGroupVersionKind, V1beta1Provider } from '@kubev2v/types';
 import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
-import { Form, FormGroup, FormSelect, FormSelectOption } from '@patternfly/react-core';
+import { Form, FormSelect, FormSelectOption } from '@patternfly/react-core';
 
 export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
   providers,
@@ -24,7 +25,7 @@ export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
   if (mode === 'edit') {
     return (
       <Form isWidthLimited>
-        <FormGroup
+        <FormGroupWithHelpText
           label={label}
           isRequired
           fieldId="targetProvider"
@@ -49,7 +50,7 @@ export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
               ...providers.map(ProviderOption),
             ]}
           </FormSelect>
-        </FormGroup>
+        </FormGroupWithHelpText>
       </Form>
     );
   } else {
diff --git a/packages/forklift-console-plugin/src/modules/Plans/modals/DuplicateModal.tsx b/packages/forklift-console-plugin/src/modules/Plans/modals/DuplicateModal.tsx
index b7e0d5abc..0b1a87e40 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/modals/DuplicateModal.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/modals/DuplicateModal.tsx
@@ -5,6 +5,7 @@ import { AlertMessageForModals, useModal } from 'src/modules/Providers/modals';
 import { validateK8sName, Validation } from 'src/modules/Providers/utils';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import {
   K8sResourceCommon,
   NetworkMapModel,
@@ -19,7 +20,7 @@ import {
 } from '@kubev2v/types';
 import { k8sCreate, k8sPatch } from '@openshift-console/dynamic-plugin-sdk';
 import { K8sModel, useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
-import { Button, Form, FormGroup, Modal, ModalVariant, TextInput } from '@patternfly/react-core';
+import { Button, Form, Modal, ModalVariant, TextInput } from '@patternfly/react-core';
 
 import { Suspend } from '../views/details/components';
 
@@ -221,7 +222,7 @@ export const DuplicateModal: React.FC<DuplicateModalProps> = ({ title, resource,
             <br />
 
             <Form>
-              <FormGroup
+              <FormGroupWithHelpText
                 label="New migration plan name"
                 fieldId="name"
                 validated={newNameValidation}
@@ -237,7 +238,7 @@ export const DuplicateModal: React.FC<DuplicateModalProps> = ({ title, resource,
                   aria-describedby="name-helper"
                   onChange={onChange}
                 />
-              </FormGroup>
+              </FormGroupWithHelpText>
             </Form>
             <br />
 
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanCreateForm.tsx
index 03a0c2cb6..2a7262bc8 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanCreateForm.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanCreateForm.tsx
@@ -3,8 +3,9 @@ import { SelectableCard } from 'src/modules/Providers/utils/components/Galerry/S
 import { SelectableGallery } from 'src/modules/Providers/utils/components/Galerry/SelectableGallery';
 import { VmData } from 'src/modules/Providers/views';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { V1beta1Provider } from '@kubev2v/types';
-import { Flex, FlexItem, Form, FormGroup } from '@patternfly/react-core';
+import { Flex, FlexItem, Form } from '@patternfly/react-core';
 
 import { PlanCreatePageState } from '../states';
 
@@ -39,7 +40,7 @@ export const PlanCreateForm: React.FC<PlanCreateFormProps> = ({
   return (
     <div className="forklift-create-provider-edit-section">
       <Form isWidthLimited className="forklift-section-secret-edit">
-        <FormGroup fieldId="type">
+        <FormGroupWithHelpText fieldId="type">
           <FiltersToolbarProviders
             className="forklift--create-plan--filters-toolbar"
             filterState={filterState}
@@ -66,7 +67,7 @@ export const PlanCreateForm: React.FC<PlanCreateFormProps> = ({
               onChange={onChange}
             />
           )}
-        </FormGroup>
+        </FormGroupWithHelpText>
       </Form>
     </div>
   );
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/ProvidersSection/components/ProvidersEdit.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/ProvidersSection/components/ProvidersEdit.tsx
index 644ca57b6..ab6d23dae 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/ProvidersSection/components/ProvidersEdit.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/ProvidersSection/components/ProvidersEdit.tsx
@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
 import { DetailsItem } from 'src/modules/Providers/utils';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { ProviderModelGroupVersionKind, V1beta1Provider } from '@kubev2v/types';
 import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
-import { Form, FormGroup, FormSelect, FormSelectOption } from '@patternfly/react-core';
+import { Form, FormSelect, FormSelectOption } from '@patternfly/react-core';
 
 export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
   providers,
@@ -24,7 +25,7 @@ export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
   if (mode === 'edit') {
     return (
       <Form isWidthLimited>
-        <FormGroup
+        <FormGroupWithHelpText
           label={label}
           isRequired
           fieldId="targetProvider"
@@ -49,7 +50,7 @@ export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
               ...providers.map(ProviderOption),
             ]}
           </FormSelect>
-        </FormGroup>
+        </FormGroupWithHelpText>
       </Form>
     );
   } else {
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Hooks/PlanHooks.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Hooks/PlanHooks.tsx
index f39edba6b..09b2daa4f 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Hooks/PlanHooks.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Hooks/PlanHooks.tsx
@@ -3,6 +3,7 @@ import { Base64 } from 'js-base64';
 import SectionHeading from 'src/components/headers/SectionHeading';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { CodeEditor } from '@openshift-console/dynamic-plugin-sdk';
 import {
   Button,
@@ -10,7 +11,6 @@ import {
   Flex,
   FlexItem,
   Form,
-  FormGroup,
   HelperText,
   HelperTextItem,
   PageSection,
@@ -107,7 +107,7 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
       <PageSection variant="light">
         <SectionHeading text={t('Pre migration hook')} />
         <Form>
-          <FormGroup label="Enable hook" isRequired fieldId="pre-hook-set">
+          <FormGroupWithHelpText label="Enable hook" isRequired fieldId="pre-hook-set">
             <Switch
               id="pre-hook-set"
               label="Enable pre migration hook"
@@ -115,11 +115,11 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
               isChecked={state.preHookSet}
               onChange={(value) => dispatch({ type: 'PRE_HOOK_SET', payload: value })}
             />
-          </FormGroup>
+          </FormGroupWithHelpText>
 
           {state.preHookSet && (
             <>
-              <FormGroup label="Hook runner image" isRequired fieldId="pre-hook-image">
+              <FormGroupWithHelpText label="Hook runner image" isRequired fieldId="pre-hook-image">
                 <TextInput
                   value={state.preHook?.spec?.image}
                   type="url"
@@ -132,8 +132,8 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
                     quay.io/konveyor/hook-runner .
                   </HelperTextItem>
                 </HelperText>
-              </FormGroup>
-              <FormGroup label="Ansible playbook" fieldId="pre-hook-image">
+              </FormGroupWithHelpText>
+              <FormGroupWithHelpText label="Ansible playbook" fieldId="pre-hook-image">
                 <CodeEditor
                   language="yaml"
                   value={Base64.decode(state.preHook?.spec?.playbook || '')}
@@ -147,7 +147,7 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
                     hook-runner.
                   </HelperTextItem>
                 </HelperText>
-              </FormGroup>
+              </FormGroupWithHelpText>
             </>
           )}
         </Form>
@@ -156,7 +156,7 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
       <PageSection variant="light">
         <SectionHeading text={t('Post migration hook')} />
         <Form>
-          <FormGroup label="Enable hook" isRequired fieldId="post-hook-set">
+          <FormGroupWithHelpText label="Enable hook" isRequired fieldId="post-hook-set">
             <Switch
               id="post-hook-set"
               label="Enable post migration hook"
@@ -164,11 +164,11 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
               isChecked={state.postHookSet}
               onChange={(value) => dispatch({ type: 'POST_HOOK_SET', payload: value })}
             />
-          </FormGroup>
+          </FormGroupWithHelpText>
 
           {state.postHookSet && (
             <>
-              <FormGroup label="Hook runner image" isRequired fieldId="post-hook-image">
+              <FormGroupWithHelpText label="Hook runner image" isRequired fieldId="post-hook-image">
                 <TextInput
                   value={state.postHook?.spec?.image}
                   type="url"
@@ -181,8 +181,8 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
                     quay.io/konveyor/hook-runner .
                   </HelperTextItem>
                 </HelperText>
-              </FormGroup>
-              <FormGroup label="Ansible playbook" fieldId="post-hook-image">
+              </FormGroupWithHelpText>
+              <FormGroupWithHelpText label="Ansible playbook" fieldId="post-hook-image">
                 <CodeEditor
                   language="yaml"
                   value={Base64.decode(state.postHook?.spec?.playbook || '')}
@@ -196,7 +196,7 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
                     hook-runner.
                   </HelperTextItem>
                 </HelperText>
-              </FormGroup>
+              </FormGroupWithHelpText>
             </>
           )}
         </Form>
diff --git a/packages/forklift-console-plugin/src/modules/Providers/modals/EditModal/EditModal.tsx b/packages/forklift-console-plugin/src/modules/Providers/modals/EditModal/EditModal.tsx
index 4c3691e9d..806723412 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/modals/EditModal/EditModal.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/modals/EditModal/EditModal.tsx
@@ -2,15 +2,8 @@ import React, { ReactNode, useCallback, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import {
-  Button,
-  Form,
-  FormGroup,
-  Modal,
-  ModalVariant,
-  Popover,
-  TextInput,
-} from '@patternfly/react-core';
+import { FormGroupWithHelpText } from '@kubev2v/common';
+import { Button, Form, Modal, ModalVariant, Popover, TextInput } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 import { useToggle } from '../../hooks';
@@ -171,7 +164,7 @@ export const EditModal: React.FC<EditModalProps> = ({
       <div className="forklift-edit-modal-body">{body}</div>
 
       <Form id="modal-with-form-form" className="forklift-edit-modal-form">
-        <FormGroup
+        <FormGroupWithHelpText
           label={label}
           labelIcon={LabelIcon}
           fieldId="modal-with-form-form-field"
@@ -180,7 +173,7 @@ export const EditModal: React.FC<EditModalProps> = ({
           validated={validation.type}
         >
           {InputComponent_}
-        </FormGroup>
+        </FormGroupWithHelpText>
       </Form>
 
       {typeof owner === 'object' && <ItemIsOwnedAlert owner={owner} namespace={namespace} />}
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/EsxiProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/EsxiProviderCreateForm.tsx
index 4259691ac..9597407b3 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/EsxiProviderCreateForm.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/EsxiProviderCreateForm.tsx
@@ -2,9 +2,9 @@ import React, { useCallback, useReducer } from 'react';
 import { validateEsxiURL, validateVDDKImage } from 'src/modules/Providers/utils';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
-import { ExternalLink } from '@kubev2v/common';
+import { ExternalLink, FormGroupWithHelpText } from '@kubev2v/common';
 import { V1beta1Provider } from '@kubev2v/types';
-import { Form, FormGroup, Popover, Radio, TextInput } from '@patternfly/react-core';
+import { Form, Popover, Radio, TextInput } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 const CREATE_VDDK_HELP_LINK =
@@ -119,7 +119,7 @@ export const EsxiProviderCreateForm: React.FC<EsxiProviderCreateFormProps> = ({
 
   return (
     <Form isWidthLimited className="forklift-section-provider-edit">
-      <FormGroup
+      <FormGroupWithHelpText
         role="radiogroup"
         fieldId="sdkEndpoint"
         label={t('Endpoint type')}
@@ -139,9 +139,9 @@ export const EsxiProviderCreateForm: React.FC<EsxiProviderCreateFormProps> = ({
           isChecked={sdkEndpoint === 'esxi'}
           onChange={() => handleChange('sdkEndpoint', 'esxi')}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('URL')}
         isRequired
         fieldId="url"
@@ -158,9 +158,9 @@ export const EsxiProviderCreateForm: React.FC<EsxiProviderCreateFormProps> = ({
           validated={state.validation.url.type}
           onChange={(value) => handleChange('url', value)}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('VDDK init image')}
         fieldId="vddkInitImage"
         helperText={state.validation.vddkInitImage.msg}
@@ -190,7 +190,7 @@ export const EsxiProviderCreateForm: React.FC<EsxiProviderCreateFormProps> = ({
           validated={state.validation.vddkInitImage.type}
           onChange={(value) => handleChange('vddkInitImage', value)}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </Form>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OVAProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OVAProviderCreateForm.tsx
index 6792ba1e8..7b8e71f0d 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OVAProviderCreateForm.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OVAProviderCreateForm.tsx
@@ -2,8 +2,9 @@ import React, { useCallback, useReducer } from 'react';
 import { validateOvaNfsPath } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { V1beta1Provider } from '@kubev2v/types';
-import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { Form, TextInput } from '@patternfly/react-core';
 
 export interface OVAProviderCreateFormProps {
   provider: V1beta1Provider;
@@ -58,7 +59,7 @@ export const OVAProviderCreateForm: React.FC<OVAProviderCreateFormProps> = ({
 
   return (
     <Form isWidthLimited className="forklift-section-provider-edit">
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('URL')}
         fieldId="url"
         isRequired
@@ -75,7 +76,7 @@ export const OVAProviderCreateForm: React.FC<OVAProviderCreateFormProps> = ({
           validated={state.validation.url.type}
           onChange={(value) => handleChange('url', value)}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </Form>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenshiftProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenshiftProviderCreateForm.tsx
index 59ec44842..31281a9ca 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenshiftProviderCreateForm.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenshiftProviderCreateForm.tsx
@@ -2,8 +2,9 @@ import React, { useCallback, useReducer } from 'react';
 import { validateOpenshiftURL } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { V1beta1Provider } from '@kubev2v/types';
-import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { Form, TextInput } from '@patternfly/react-core';
 
 export interface OpenshiftProviderCreateFormProps {
   provider: V1beta1Provider;
@@ -60,7 +61,7 @@ export const OpenshiftProviderFormCreate: React.FC<OpenshiftProviderCreateFormPr
 
   return (
     <Form isWidthLimited className="forklift-section-provider-edit">
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('URL')}
         fieldId="url"
         validated={state.validation.url.type}
@@ -75,7 +76,7 @@ export const OpenshiftProviderFormCreate: React.FC<OpenshiftProviderCreateFormPr
           validated={state.validation.url.type}
           onChange={(value) => handleChange('url', value)}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </Form>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenstackProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenstackProviderCreateForm.tsx
index 56638b21f..6efd3eac1 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenstackProviderCreateForm.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OpenstackProviderCreateForm.tsx
@@ -2,8 +2,9 @@ import React, { useCallback, useReducer } from 'react';
 import { validateOpenstackURL } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { V1beta1Provider } from '@kubev2v/types';
-import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { Form, TextInput } from '@patternfly/react-core';
 
 export interface OpenstackProviderCreateFormProps {
   provider: V1beta1Provider;
@@ -60,7 +61,7 @@ export const OpenstackProviderCreateForm: React.FC<OpenstackProviderCreateFormPr
 
   return (
     <Form isWidthLimited className="forklift-section-provider-edit">
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('URL')}
         isRequired
         fieldId="url"
@@ -77,7 +78,7 @@ export const OpenstackProviderCreateForm: React.FC<OpenstackProviderCreateFormPr
           validated={state.validation.url.type}
           onChange={(value) => handleChange('url', value)}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </Form>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OvirtProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OvirtProviderCreateForm.tsx
index 9ac293e79..a90f65622 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OvirtProviderCreateForm.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OvirtProviderCreateForm.tsx
@@ -2,8 +2,9 @@ import React, { useCallback, useReducer } from 'react';
 import { validateOvirtURL } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { V1beta1Provider } from '@kubev2v/types';
-import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { Form, TextInput } from '@patternfly/react-core';
 
 export interface OvirtProviderCreateFormProps {
   provider: V1beta1Provider;
@@ -60,7 +61,7 @@ export const OvirtProviderCreateForm: React.FC<OvirtProviderCreateFormProps> = (
 
   return (
     <Form isWidthLimited className="forklift-section-provider-edit">
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('URL')}
         isRequired
         fieldId="url"
@@ -77,7 +78,7 @@ export const OvirtProviderCreateForm: React.FC<OvirtProviderCreateFormProps> = (
           validated={state.validation.url.type}
           onChange={(value) => handleChange('url', value)}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </Form>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/ProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/ProviderCreateForm.tsx
index e15dcb114..7acc4d37f 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/ProviderCreateForm.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/ProviderCreateForm.tsx
@@ -6,8 +6,9 @@ import { SelectableCard } from 'src/modules/Providers/utils/components/Galerry/S
 import { SelectableGallery } from 'src/modules/Providers/utils/components/Galerry/SelectableGallery';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { IoK8sApiCoreV1Secret, ProviderType, V1beta1Provider } from '@kubev2v/types';
-import { Flex, FlexItem, Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { Flex, FlexItem, Form, TextInput } from '@patternfly/react-core';
 
 import { EditProvider } from './EditProvider';
 import { EditProviderSectionHeading } from './EditProviderSectionHeading';
@@ -90,7 +91,7 @@ export const ProvidersCreateForm: React.FC<ProvidersCreateFormProps> = ({
         <EditProviderSectionHeading text={t('Provider details')} />
 
         <Form isWidthLimited className="forklift-section-secret-edit">
-          <FormGroup label={t('Select provider type')} isRequired fieldId="type">
+          <FormGroupWithHelpText label={t('Select provider type')} isRequired fieldId="type">
             {newProvider?.spec?.type ? (
               <Flex>
                 <FlexItem className="forklift--create-provider-edit-card-selected">
@@ -110,12 +111,12 @@ export const ProvidersCreateForm: React.FC<ProvidersCreateFormProps> = ({
                 onChange={handleTypeChange}
               />
             )}
-          </FormGroup>
+          </FormGroupWithHelpText>
         </Form>
 
         {newProvider?.spec?.type && (
           <Form isWidthLimited className="forklift-create-provider-edit-section">
-            <FormGroup
+            <FormGroupWithHelpText
               label={t('Provider resource name')}
               isRequired
               fieldId="k8sName"
@@ -132,7 +133,7 @@ export const ProvidersCreateForm: React.FC<ProvidersCreateFormProps> = ({
                 validated={state.validation.name.type}
                 onChange={(value) => handleNameChange(value)} // Call the custom handler method
               />
-            </FormGroup>
+            </FormGroupWithHelpText>
           </Form>
         )}
       </div>
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/VCenterProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/VCenterProviderCreateForm.tsx
index fc4501af2..ac01cc88b 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/VCenterProviderCreateForm.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/VCenterProviderCreateForm.tsx
@@ -2,9 +2,9 @@ import React, { useCallback, useReducer } from 'react';
 import { validateVCenterURL, validateVDDKImage } from 'src/modules/Providers/utils';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
-import { ExternalLink } from '@kubev2v/common';
+import { ExternalLink, FormGroupWithHelpText } from '@kubev2v/common';
 import { V1beta1Provider } from '@kubev2v/types';
-import { Form, FormGroup, Popover, Radio, TextInput } from '@patternfly/react-core';
+import { Form, Popover, Radio, TextInput } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 const CREATE_VDDK_HELP_LINK =
@@ -119,7 +119,7 @@ export const VCenterProviderCreateForm: React.FC<VCenterProviderCreateFormProps>
 
   return (
     <Form isWidthLimited className="forklift-section-provider-edit">
-      <FormGroup
+      <FormGroupWithHelpText
         role="radiogroup"
         fieldId="sdkEndpoint"
         label={t('Endpoint type')}
@@ -139,9 +139,9 @@ export const VCenterProviderCreateForm: React.FC<VCenterProviderCreateFormProps>
           isChecked={sdkEndpoint === 'esxi'}
           onChange={() => handleChange('sdkEndpoint', 'esxi')}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('URL')}
         isRequired
         fieldId="url"
@@ -158,9 +158,9 @@ export const VCenterProviderCreateForm: React.FC<VCenterProviderCreateFormProps>
           validated={state.validation.url.type}
           onChange={(value) => handleChange('url', value)}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('VDDK init image')}
         fieldId="vddkInitImage"
         helperText={state.validation.vddkInitImage.msg}
@@ -190,7 +190,7 @@ export const VCenterProviderCreateForm: React.FC<VCenterProviderCreateFormProps>
           validated={state.validation.vddkInitImage.type}
           onChange={(value) => handleChange('vddkInitImage', value)}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </Form>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx
index b12f2a5bf..f01138977 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx
@@ -4,15 +4,8 @@ import { esxiSecretFieldValidator, safeBase64Decode } from 'src/modules/Provider
 import { CertificateUpload } from 'src/modules/Providers/utils/components/CertificateUpload';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
-import {
-  Button,
-  Divider,
-  Form,
-  FormGroup,
-  Popover,
-  Switch,
-  TextInput,
-} from '@patternfly/react-core';
+import { FormGroupWithHelpText } from '@kubev2v/common';
+import { Button, Divider, Form, Popover, Switch, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -102,7 +95,7 @@ export const EsxiCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onCh
 
   return (
     <Form isWidthLimited className="forklift-section-secret-edit">
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Username')}
         isRequired
         fieldId="username"
@@ -119,8 +112,8 @@ export const EsxiCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onCh
           value={user}
           validated={state.validation.user.type}
         />
-      </FormGroup>
-      <FormGroup
+      </FormGroupWithHelpText>
+      <FormGroupWithHelpText
         label={t('Password')}
         isRequired
         fieldId="password"
@@ -144,11 +137,11 @@ export const EsxiCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onCh
         >
           {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
         </Button>
-      </FormGroup>
+      </FormGroupWithHelpText>
 
       <Divider />
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Skip certificate validation')}
         labelIcon={
           <Popover
@@ -178,9 +171,9 @@ export const EsxiCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onCh
           hasCheckIcon
           onChange={(value) => handleChange('insecureSkipVerify', value ? 'true' : 'false')}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('CA certificate')}
         labelIcon={
           <Popover
@@ -212,7 +205,7 @@ export const EsxiCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onCh
           onClearClick={() => handleChange('cacert', '')}
           isDisabled={insecureSkipVerify === 'true'}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </Form>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx
index abf5edeb5..082860129 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx
@@ -4,15 +4,8 @@ import { openshiftSecretFieldValidator, safeBase64Decode } from 'src/modules/Pro
 import { CertificateUpload } from 'src/modules/Providers/utils/components/CertificateUpload';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
-import {
-  Button,
-  Divider,
-  Form,
-  FormGroup,
-  Popover,
-  Switch,
-  TextInput,
-} from '@patternfly/react-core';
+import { FormGroupWithHelpText } from '@kubev2v/common';
+import { Button, Divider, Form, Popover, Switch, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -102,7 +95,7 @@ export const OpenshiftCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
 
   return (
     <Form isWidthLimited className="forklift-section-secret-edit">
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Service account bearer token')}
         isRequired
         fieldId="token"
@@ -126,11 +119,11 @@ export const OpenshiftCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
         >
           {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
         </Button>
-      </FormGroup>
+      </FormGroupWithHelpText>
 
       <Divider />
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Skip certificate validation')}
         labelIcon={
           <Popover
@@ -160,9 +153,9 @@ export const OpenshiftCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
           hasCheckIcon
           onChange={(value) => handleChange('insecureSkipVerify', value ? 'true' : 'false')}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('CA certificate')}
         labelIcon={
           <Popover
@@ -197,7 +190,7 @@ export const OpenshiftCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
           url={url}
           isDisabled={insecureSkipVerify === 'true'}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </Form>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEdit.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEdit.tsx
index bdb41f1aa..4e0f0f132 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEdit.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEdit.tsx
@@ -4,7 +4,8 @@ import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Pro
 import { CertificateUpload } from 'src/modules/Providers/utils/components/CertificateUpload';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
-import { Divider, Form, FormGroup, Popover, Radio, Switch } from '@patternfly/react-core';
+import { FormGroupWithHelpText } from '@kubev2v/common';
+import { Divider, Form, Popover, Radio, Switch } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 import { EditComponentProps } from '../BaseCredentialsSection';
@@ -161,7 +162,7 @@ export const OpenstackCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
 
   return (
     <Form isWidthLimited className="forklift-section-secret-edit">
-      <FormGroup
+      <FormGroupWithHelpText
         role="radiogroup"
         fieldId="authType"
         label={t('Authentication type')}
@@ -204,7 +205,7 @@ export const OpenstackCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
           isChecked={state.authenticationType === 'passwordSecretFields'}
           onChange={() => handleAuthTypeChange('passwordSecretFields')}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
       <Divider />
 
@@ -226,7 +227,7 @@ export const OpenstackCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
 
       <Divider />
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Skip certificate validation')}
         labelIcon={
           <Popover
@@ -258,8 +259,8 @@ export const OpenstackCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
           hasCheckIcon
           onChange={(value) => handleChange('insecureSkipVerify', value ? 'true' : 'false')}
         />
-      </FormGroup>
-      <FormGroup
+      </FormGroupWithHelpText>
+      <FormGroupWithHelpText
         label={
           insecureSkipVerify === 'true'
             ? t("CA certificate - disabled when 'Skip certificate validation' is selected")
@@ -283,7 +284,7 @@ export const OpenstackCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
           url={url}
           isDisabled={insecureSkipVerify === 'true'}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </Form>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationCredentialNameSecretFieldsFormGroup.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationCredentialNameSecretFieldsFormGroup.tsx
index 4162d292f..2d3653e8f 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationCredentialNameSecretFieldsFormGroup.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationCredentialNameSecretFieldsFormGroup.tsx
@@ -3,7 +3,8 @@ import { Base64 } from 'js-base64';
 import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { Button, FormGroup, TextInput } from '@patternfly/react-core';
+import { FormGroupWithHelpText } from '@kubev2v/common';
+import { Button, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
@@ -77,7 +78,7 @@ export const ApplicationCredentialNameSecretFieldsFormGroup: React.FC<EditCompon
 
   return (
     <>
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Application credential name')}
         isRequired
         fieldId="applicationCredentialName"
@@ -94,9 +95,9 @@ export const ApplicationCredentialNameSecretFieldsFormGroup: React.FC<EditCompon
           onChange={(value) => handleChange('applicationCredentialName', value)}
           validated={state.validation.applicationCredentialName.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Application credential secret')}
         isRequired
         fieldId="applicationCredentialSecret"
@@ -121,9 +122,9 @@ export const ApplicationCredentialNameSecretFieldsFormGroup: React.FC<EditCompon
         >
           {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
         </Button>
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Username')}
         isRequired
         fieldId="username"
@@ -140,9 +141,9 @@ export const ApplicationCredentialNameSecretFieldsFormGroup: React.FC<EditCompon
           onChange={(value) => handleChange('username', value)}
           validated={state.validation.username.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Region')}
         isRequired
         fieldId="regionName"
@@ -159,9 +160,9 @@ export const ApplicationCredentialNameSecretFieldsFormGroup: React.FC<EditCompon
           onChange={(value) => handleChange('regionName', value)}
           validated={state.validation.regionName.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Project')}
         isRequired
         fieldId="projectName"
@@ -178,9 +179,9 @@ export const ApplicationCredentialNameSecretFieldsFormGroup: React.FC<EditCompon
           onChange={(value) => handleChange('projectName', value)}
           validated={state.validation.projectName.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Domain')}
         isRequired
         fieldId="domainName"
@@ -197,7 +198,7 @@ export const ApplicationCredentialNameSecretFieldsFormGroup: React.FC<EditCompon
           onChange={(value) => handleChange('domainName', value)}
           validated={state.validation.domainName.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationWithCredentialsIDFormGroup.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationWithCredentialsIDFormGroup.tsx
index e848f62cf..bf46f997c 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationWithCredentialsIDFormGroup.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/ApplicationWithCredentialsIDFormGroup.tsx
@@ -3,7 +3,8 @@ import { Base64 } from 'js-base64';
 import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { Button, FormGroup, TextInput } from '@patternfly/react-core';
+import { FormGroupWithHelpText } from '@kubev2v/common';
+import { Button, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
@@ -73,7 +74,7 @@ export const ApplicationWithCredentialsIDFormGroup: React.FC<EditComponentProps>
 
   return (
     <>
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Application credential ID')}
         isRequired
         fieldId="applicationCredentialID"
@@ -90,9 +91,9 @@ export const ApplicationWithCredentialsIDFormGroup: React.FC<EditComponentProps>
           onChange={(value) => handleChange('applicationCredentialID', value)}
           validated={state.validation.applicationCredentialID.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Application credential Secret')}
         isRequired
         fieldId="applicationCredentialSecret"
@@ -117,9 +118,9 @@ export const ApplicationWithCredentialsIDFormGroup: React.FC<EditComponentProps>
         >
           {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
         </Button>
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Region')}
         isRequired
         fieldId="regionName"
@@ -136,9 +137,9 @@ export const ApplicationWithCredentialsIDFormGroup: React.FC<EditComponentProps>
           onChange={(value) => handleChange('regionName', value)}
           validated={state.validation.regionName.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Project')}
         isRequired
         fieldId="projectName"
@@ -155,7 +156,7 @@ export const ApplicationWithCredentialsIDFormGroup: React.FC<EditComponentProps>
           onChange={(value) => handleChange('projectName', value)}
           validated={state.validation.projectName.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/PasswordSecretFieldsFormGroup.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/PasswordSecretFieldsFormGroup.tsx
index a5a104b1e..7dd0dfbfd 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/PasswordSecretFieldsFormGroup.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/PasswordSecretFieldsFormGroup.tsx
@@ -3,7 +3,8 @@ import { Base64 } from 'js-base64';
 import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { Button, FormGroup, TextInput } from '@patternfly/react-core';
+import { FormGroupWithHelpText } from '@kubev2v/common';
+import { Button, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
@@ -69,7 +70,7 @@ export const PasswordSecretFieldsFormGroup: React.FC<EditComponentProps> = ({
 
   return (
     <>
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Username')}
         isRequired
         fieldId="username"
@@ -86,9 +87,9 @@ export const PasswordSecretFieldsFormGroup: React.FC<EditComponentProps> = ({
           onChange={(value) => handleChange('username', value)}
           validated={state.validation.username.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Password')}
         isRequired
         fieldId="password"
@@ -112,9 +113,9 @@ export const PasswordSecretFieldsFormGroup: React.FC<EditComponentProps> = ({
         >
           {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
         </Button>
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Region')}
         isRequired
         fieldId="regionName"
@@ -131,9 +132,9 @@ export const PasswordSecretFieldsFormGroup: React.FC<EditComponentProps> = ({
           onChange={(value) => handleChange('regionName', value)}
           validated={state.validation.regionName.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Project')}
         isRequired
         fieldId="projectName"
@@ -150,9 +151,9 @@ export const PasswordSecretFieldsFormGroup: React.FC<EditComponentProps> = ({
           onChange={(value) => handleChange('projectName', value)}
           validated={state.validation.projectName.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Domain')}
         isRequired
         fieldId="domainName"
@@ -169,7 +170,7 @@ export const PasswordSecretFieldsFormGroup: React.FC<EditComponentProps> = ({
           onChange={(value) => handleChange('domainName', value)}
           validated={state.validation.domainName.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUserIDSecretFieldsFormGroup.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUserIDSecretFieldsFormGroup.tsx
index b834dc669..b4fa7cd9e 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUserIDSecretFieldsFormGroup.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUserIDSecretFieldsFormGroup.tsx
@@ -3,7 +3,8 @@ import { Base64 } from 'js-base64';
 import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { Button, FormGroup, TextInput } from '@patternfly/react-core';
+import { FormGroupWithHelpText } from '@kubev2v/common';
+import { Button, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
@@ -66,7 +67,7 @@ export const TokenWithUserIDSecretFieldsFormGroup: React.FC<EditComponentProps>
 
   return (
     <>
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Token')}
         isRequired
         fieldId="token"
@@ -91,9 +92,9 @@ export const TokenWithUserIDSecretFieldsFormGroup: React.FC<EditComponentProps>
         >
           {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
         </Button>
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('User ID')}
         isRequired
         fieldId="userID"
@@ -110,9 +111,9 @@ export const TokenWithUserIDSecretFieldsFormGroup: React.FC<EditComponentProps>
           onChange={(value) => handleChange('userID', value)}
           validated={state.validation.userID.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Project ID')}
         isRequired
         fieldId="projectID"
@@ -129,9 +130,9 @@ export const TokenWithUserIDSecretFieldsFormGroup: React.FC<EditComponentProps>
           onChange={(value) => handleChange('projectID', value)}
           validated={state.validation.projectID.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Region')}
         isRequired
         fieldId="regionName"
@@ -148,7 +149,7 @@ export const TokenWithUserIDSecretFieldsFormGroup: React.FC<EditComponentProps>
           onChange={(value) => handleChange('regionName', value)}
           validated={state.validation.regionName.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUsernameSecretFieldsFormGroup.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUsernameSecretFieldsFormGroup.tsx
index f4d53cfc5..3c64486cd 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUsernameSecretFieldsFormGroup.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEditFormGroups/TokenWithUsernameSecretFieldsFormGroup.tsx
@@ -3,7 +3,8 @@ import { Base64 } from 'js-base64';
 import { openstackSecretFieldValidator, safeBase64Decode } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import { Button, FormGroup, TextInput } from '@patternfly/react-core';
+import { FormGroupWithHelpText } from '@kubev2v/common';
+import { Button, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 
@@ -68,7 +69,7 @@ export const TokenWithUsernameSecretFieldsFormGroup: React.FC<EditComponentProps
 
   return (
     <>
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Token')}
         isRequired
         fieldId="token"
@@ -93,9 +94,9 @@ export const TokenWithUsernameSecretFieldsFormGroup: React.FC<EditComponentProps
         >
           {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
         </Button>
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Username')}
         isRequired
         fieldId="username"
@@ -112,9 +113,9 @@ export const TokenWithUsernameSecretFieldsFormGroup: React.FC<EditComponentProps
           onChange={(value) => handleChange('username', value)}
           validated={state.validation.username.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Region')}
         isRequired
         fieldId="regionName"
@@ -131,9 +132,9 @@ export const TokenWithUsernameSecretFieldsFormGroup: React.FC<EditComponentProps
           onChange={(value) => handleChange('regionName', value)}
           validated={state.validation.regionName.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Project')}
         isRequired
         fieldId="projectName"
@@ -150,9 +151,9 @@ export const TokenWithUsernameSecretFieldsFormGroup: React.FC<EditComponentProps
           onChange={(value) => handleChange('projectName', value)}
           validated={state.validation.projectName.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Domain name')}
         isRequired
         fieldId="domainName"
@@ -169,7 +170,7 @@ export const TokenWithUsernameSecretFieldsFormGroup: React.FC<EditComponentProps
           onChange={(value) => handleChange('domainName', value)}
           validated={state.validation.domainName.type}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OvirtCredentialsEdit.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OvirtCredentialsEdit.tsx
index 3ee874a2b..4c1994e3d 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OvirtCredentialsEdit.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/OvirtCredentialsEdit.tsx
@@ -4,15 +4,8 @@ import { ovirtSecretFieldValidator, safeBase64Decode } from 'src/modules/Provide
 import { CertificateUpload } from 'src/modules/Providers/utils/components/CertificateUpload';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
-import {
-  Button,
-  Divider,
-  Form,
-  FormGroup,
-  Popover,
-  Switch,
-  TextInput,
-} from '@patternfly/react-core';
+import { FormGroupWithHelpText } from '@kubev2v/common';
+import { Button, Divider, Form, Popover, Switch, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -108,7 +101,7 @@ export const OvirtCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onC
 
   return (
     <Form isWidthLimited className="forklift-section-secret-edit">
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Username')}
         isRequired
         fieldId="user"
@@ -125,8 +118,8 @@ export const OvirtCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onC
           validated={state.validation.user.type}
           onChange={(value) => handleChange('user', value)}
         />
-      </FormGroup>
-      <FormGroup
+      </FormGroupWithHelpText>
+      <FormGroupWithHelpText
         label={t('Password')}
         isRequired
         fieldId="password"
@@ -150,11 +143,11 @@ export const OvirtCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onC
         >
           {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
         </Button>
-      </FormGroup>
+      </FormGroupWithHelpText>
 
       <Divider />
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Skip certificate validation')}
         labelIcon={
           <Popover
@@ -184,9 +177,9 @@ export const OvirtCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onC
           hasCheckIcon
           onChange={(value) => handleChange('insecureSkipVerify', value ? 'true' : 'false')}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('CA certificate')}
         labelIcon={
           <Popover
@@ -221,7 +214,7 @@ export const OvirtCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onC
           url={url}
           isDisabled={insecureSkipVerify === 'true'}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </Form>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx
index 788ec3eff..9980a9c2f 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx
@@ -4,15 +4,8 @@ import { safeBase64Decode, vcenterSecretFieldValidator } from 'src/modules/Provi
 import { CertificateUpload } from 'src/modules/Providers/utils/components/CertificateUpload';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
-import {
-  Button,
-  Divider,
-  Form,
-  FormGroup,
-  Popover,
-  Switch,
-  TextInput,
-} from '@patternfly/react-core';
+import { FormGroupWithHelpText } from '@kubev2v/common';
+import { Button, Divider, Form, Popover, Switch, TextInput } from '@patternfly/react-core';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -102,7 +95,7 @@ export const VCenterCredentialsEdit: React.FC<EditComponentProps> = ({ secret, o
 
   return (
     <Form isWidthLimited className="forklift-section-secret-edit">
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Username')}
         isRequired
         fieldId="username"
@@ -119,8 +112,8 @@ export const VCenterCredentialsEdit: React.FC<EditComponentProps> = ({ secret, o
           value={user}
           validated={state.validation.user.type}
         />
-      </FormGroup>
-      <FormGroup
+      </FormGroupWithHelpText>
+      <FormGroupWithHelpText
         label={t('Password')}
         isRequired
         fieldId="password"
@@ -144,11 +137,11 @@ export const VCenterCredentialsEdit: React.FC<EditComponentProps> = ({ secret, o
         >
           {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
         </Button>
-      </FormGroup>
+      </FormGroupWithHelpText>
 
       <Divider />
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('Skip certificate validation')}
         labelIcon={
           <Popover
@@ -178,9 +171,9 @@ export const VCenterCredentialsEdit: React.FC<EditComponentProps> = ({ secret, o
           hasCheckIcon
           onChange={(value) => handleChange('insecureSkipVerify', value ? 'true' : 'false')}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
 
-      <FormGroup
+      <FormGroupWithHelpText
         label={t('CA certificate')}
         labelIcon={
           <Popover
@@ -212,7 +205,7 @@ export const VCenterCredentialsEdit: React.FC<EditComponentProps> = ({ secret, o
           onClearClick={() => handleChange('cacert', '')}
           isDisabled={insecureSkipVerify === 'true'}
         />
-      </FormGroup>
+      </FormGroupWithHelpText>
     </Form>
   );
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx
index 667390e35..dc43b9d98 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Hosts/modals/VSphereNetworkModal.tsx
@@ -3,11 +3,11 @@ import { AlertMessageForModals, useModal } from 'src/modules/Providers/modals';
 import { validateNoSpaces } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { NetworkAdapters, V1beta1Provider } from '@kubev2v/types';
 import {
   Button,
   Form,
-  FormGroup,
   Modal,
   ModalVariant,
   Select,
@@ -202,7 +202,7 @@ export const VSphereNetworkModal: React.FC<VSphereNetworkModalProps> = ({
       </div>
 
       <Form id="modal-with-form-form">
-        <FormGroup label="Network" isRequired fieldId="network">
+        <FormGroupWithHelpText label="Network" isRequired fieldId="network">
           <Select
             variant={SelectVariant.single}
             placeholderText="Select a network"
@@ -224,11 +224,11 @@ export const VSphereNetworkModal: React.FC<VSphereNetworkModalProps> = ({
               />
             ))}
           </Select>
-        </FormGroup>
+        </FormGroupWithHelpText>
 
         {endpointType !== 'esxi' && (
           <>
-            <FormGroup
+            <FormGroupWithHelpText
               label="ESXi host admin username"
               isRequired
               fieldId="username"
@@ -244,8 +244,8 @@ export const VSphereNetworkModal: React.FC<VSphereNetworkModalProps> = ({
                 onChange={(value) => dispatch({ type: 'SET_USERNAME', payload: value })}
                 validated={state.validation.username}
               />
-            </FormGroup>
-            <FormGroup
+            </FormGroupWithHelpText>
+            <FormGroupWithHelpText
               label="ESXi host admin password"
               isRequired
               fieldId="password"
@@ -265,7 +265,7 @@ export const VSphereNetworkModal: React.FC<VSphereNetworkModalProps> = ({
               <Button variant="control" onClick={togglePasswordHidden}>
                 {state.passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
               </Button>
-            </FormGroup>
+            </FormGroupWithHelpText>
           </>
         )}
       </Form>
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx
index 71f4d7b76..b9a3dc81c 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx
@@ -3,6 +3,7 @@ import SectionHeading from 'src/components/headers/SectionHeading';
 import { useForkliftTranslation } from 'src/utils/i18n';
 import { isProviderLocalOpenshift } from 'src/utils/resources';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import {
   NetworkMapModelGroupVersionKind,
   ProviderModelGroupVersionKind,
@@ -16,7 +17,6 @@ import {
   DescriptionListGroup,
   DescriptionListTerm,
   Form,
-  FormGroup,
   FormSelect,
   FormSelectOption,
   TextInput,
@@ -158,7 +158,7 @@ export const PlansCreateForm = ({
       >
         {isNameEdited || validation.planName === 'error' ? (
           <Form isWidthLimited>
-            <FormGroup
+            <FormGroupWithHelpText
               label={t('Plan name')}
               isRequired
               fieldId="planName"
@@ -176,7 +176,7 @@ export const PlansCreateForm = ({
                 isDisabled={flow.editingDone}
                 onChange={(value) => dispatch(setPlanName(value?.trim() ?? ''))}
               />
-            </FormGroup>
+            </FormGroupWithHelpText>
           </Form>
         ) : (
           <EditableDescriptionItem
@@ -219,7 +219,7 @@ export const PlansCreateForm = ({
         validation.targetProvider === 'error' ||
         !plan.spec.provider?.destination ? (
           <Form isWidthLimited>
-            <FormGroup
+            <FormGroupWithHelpText
               label={t('Target provider')}
               isRequired
               fieldId="targetProvider"
@@ -256,7 +256,7 @@ export const PlansCreateForm = ({
                     )),
                 ]}
               </FormSelect>
-            </FormGroup>
+            </FormGroupWithHelpText>
           </Form>
         ) : (
           <EditableDescriptionItem
@@ -277,7 +277,7 @@ export const PlansCreateForm = ({
         validation.targetNamespace === 'error' ||
         !plan.spec.targetNamespace ? (
           <Form isWidthLimited>
-            <FormGroup
+            <FormGroupWithHelpText
               label={t('Target namespace')}
               isRequired
               id="targetNamespace"
@@ -311,7 +311,7 @@ export const PlansCreateForm = ({
                   )),
                 ]}
               </FormSelect>
-            </FormGroup>
+            </FormGroupWithHelpText>
           </Form>
         ) : (
           <EditableDescriptionItem
diff --git a/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/MapsSection/components/MapsEdit.tsx b/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/MapsSection/components/MapsEdit.tsx
index 98bd73c1a..1c9687c37 100644
--- a/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/MapsSection/components/MapsEdit.tsx
+++ b/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/MapsSection/components/MapsEdit.tsx
@@ -1,9 +1,10 @@
 import React, { ReactNode, useState } from 'react';
 import { DetailsItem } from 'src/modules/Providers/utils';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { ProviderModelGroupVersionKind, V1beta1Provider } from '@kubev2v/types';
 import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
-import { Form, FormGroup, FormSelect, FormSelectOption } from '@patternfly/react-core';
+import { Form, FormSelect, FormSelectOption } from '@patternfly/react-core';
 
 export const MapsEdit: React.FC<MapsEditProps> = ({
   providers,
@@ -33,7 +34,7 @@ export const MapsEdit: React.FC<MapsEditProps> = ({
   if (isEdit) {
     return (
       <Form isWidthLimited>
-        <FormGroup
+        <FormGroupWithHelpText
           label={label}
           isRequired
           fieldId="targetProvider"
@@ -58,7 +59,7 @@ export const MapsEdit: React.FC<MapsEditProps> = ({
               ...providers.map(ProviderOption),
             ]}
           </FormSelect>
-        </FormGroup>
+        </FormGroupWithHelpText>
       </Form>
     );
   } else {
diff --git a/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx b/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx
index d88b7c78c..6960a5cc1 100644
--- a/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx
+++ b/packages/forklift-console-plugin/src/modules/StorageMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx
@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
 import { DetailsItem } from 'src/modules/Providers/utils';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { ProviderModelGroupVersionKind, V1beta1Provider } from '@kubev2v/types';
 import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
-import { Form, FormGroup, FormSelect, FormSelectOption } from '@patternfly/react-core';
+import { Form, FormSelect, FormSelectOption } from '@patternfly/react-core';
 
 export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
   providers,
@@ -32,7 +33,7 @@ export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
   if (mode === 'edit') {
     return (
       <Form isWidthLimited>
-        <FormGroup
+        <FormGroupWithHelpText
           label={label}
           isRequired
           fieldId="targetProvider"
@@ -57,7 +58,7 @@ export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
               ...providers.map(ProviderOption),
             ]}
           </FormSelect>
-        </FormGroup>
+        </FormGroupWithHelpText>
       </Form>
     );
   } else {