diff --git a/frontend/src/__mocks__/mockConnectionType.ts b/frontend/src/__mocks__/mockConnectionType.ts
index 9731c3ad9b..988f9ae23e 100644
--- a/frontend/src/__mocks__/mockConnectionType.ts
+++ b/frontend/src/__mocks__/mockConnectionType.ts
@@ -23,7 +23,7 @@ export const mockConnectionTypeConfigMap = (
 export const mockConnectionTypeConfigMapObj = ({
   name = 'connection-type-sample',
   namespace = 'opendatahub',
-  displayName = name,
+  displayName = name.replace(/-/g, ' '),
   description = 'Connection type description',
   enabled = true,
   username = 'dashboard-admin',
@@ -93,46 +93,66 @@ const mockFields: ConnectionTypeField[] = [
     type: 'short-text',
     name: 'Short text 3',
     description: 'Test short text with default value and read only',
-    envVar: 'short-text-1',
+    envVar: 'short-text-3',
     required: false,
     properties: {
       defaultValue: 'This is the default value and is read only',
       defaultReadOnly: true,
     },
   },
+  {
+    type: 'short-text',
+    name: 'Short text 4',
+    description: 'Test short text with no default value and read only',
+    envVar: 'short-text-4',
+    required: false,
+    properties: {
+      defaultReadOnly: true,
+    },
+  },
 
   {
     type: 'section',
-    name: 'Paragraph',
-    description: 'This section contains paragraph fields.',
+    name: 'Text',
+    description: 'This section contains text fields.',
   },
   {
-    type: 'paragraph',
-    name: 'Paragraph 1',
-    description: 'Test paragraph',
-    envVar: 'paragraph-1',
+    type: 'text',
+    name: 'Text 1',
+    description: 'Test text',
+    envVar: 'text-1',
     required: false,
     properties: {},
   },
   {
-    type: 'paragraph',
-    name: 'Paragraph 2',
-    description: 'Test paragraph with default value',
-    envVar: 'paragraph-2',
+    type: 'text',
+    name: 'Text 2',
+    description: 'Test text with default value',
+    envVar: 'text-2',
     required: true,
     properties: {
-      defaultValue: 'This is the default value',
+      defaultValue: 'This is the default value\nOne\nTwo\nThree\nFour',
       defaultReadOnly: false,
     },
   },
   {
-    type: 'paragraph',
-    name: 'Paragraph 3',
-    description: 'Test paragraph with default value and read only',
-    envVar: 'paragraph-3',
+    type: 'text',
+    name: 'Text 3',
+    description: 'Test text with default value and read only',
+    envVar: 'text-3',
+    required: false,
+    properties: {
+      defaultValue: 'This is the default value\nOne\nTwo\nThree\nFour',
+      defaultReadOnly: true,
+    },
+  },
+  {
+    type: 'text',
+    name: 'Text 4',
+    description: 'Test text with no default value and read only',
+    envVar: 'text-4',
     required: false,
     properties: {
-      defaultValue: 'This is the default value',
       defaultReadOnly: true,
     },
   },
@@ -172,6 +192,16 @@ const mockFields: ConnectionTypeField[] = [
       defaultReadOnly: true,
     },
   },
+  {
+    type: 'hidden',
+    name: 'Hidden 4',
+    description: 'Test hidden with no default value and read only',
+    envVar: 'hidden-4',
+    required: false,
+    properties: {
+      defaultReadOnly: true,
+    },
+  },
 
   {
     type: 'section',
@@ -208,6 +238,16 @@ const mockFields: ConnectionTypeField[] = [
       defaultReadOnly: true,
     },
   },
+  {
+    type: 'uri',
+    name: 'URI 4',
+    description: 'Test URI with no default value and read only',
+    envVar: 'uri-4',
+    required: false,
+    properties: {
+      defaultReadOnly: true,
+    },
+  },
 
   {
     type: 'section',
@@ -244,6 +284,16 @@ const mockFields: ConnectionTypeField[] = [
       defaultReadOnly: true,
     },
   },
+  {
+    type: 'file',
+    name: 'File 4',
+    description: 'Test file with no default value and read only',
+    envVar: 'file-4',
+    required: false,
+    properties: {
+      defaultReadOnly: true,
+    },
+  },
 
   {
     type: 'section',
@@ -278,7 +328,18 @@ const mockFields: ConnectionTypeField[] = [
     required: false,
     properties: {
       label: 'Input label',
-      defaultValue: false,
+      defaultValue: true,
+      defaultReadOnly: true,
+    },
+  },
+  {
+    type: 'boolean',
+    name: 'Boolean 4',
+    description: 'Test boolean with no default value and read only',
+    envVar: 'boolean-4',
+    required: false,
+    properties: {
+      label: 'Input label',
       defaultReadOnly: true,
     },
   },
@@ -314,21 +375,31 @@ const mockFields: ConnectionTypeField[] = [
     envVar: 'numeric-3',
     required: false,
     properties: {
-      defaultValue: 3,
+      defaultValue: 2,
+      defaultReadOnly: true,
+    },
+  },
+  {
+    type: 'numeric',
+    name: 'Numeric 4',
+    description: 'Test numeric with no default value and read only',
+    envVar: 'numeric-4',
+    required: false,
+    properties: {
       defaultReadOnly: true,
     },
   },
 
   {
     type: 'section',
-    name: 'Dropdown',
-    description: 'This section contains dropdown fields.',
+    name: 'Dropdown - single',
+    description: 'This section contains single variant dropdown fields.',
   },
   {
     type: 'dropdown',
-    name: 'Dropdown 1',
+    name: 'Dropdown single 1',
     description: 'Test dropdown single variant',
-    envVar: 'dropdown-1',
+    envVar: 'dropdown-single-1',
     required: false,
     properties: {
       variant: 'single',
@@ -342,7 +413,7 @@ const mockFields: ConnectionTypeField[] = [
   },
   {
     type: 'dropdown',
-    name: 'Dropdown 2',
+    name: 'Dropdown single 2',
     description: 'Test dropdown single variant with default value',
     envVar: 'dropdown-2',
     required: true,
@@ -355,13 +426,55 @@ const mockFields: ConnectionTypeField[] = [
         { value: '4', label: 'Four' },
       ],
       defaultValue: ['3'],
+      defaultReadOnly: false,
     },
   },
   {
     type: 'dropdown',
-    name: 'Dropdown 3',
-    description: 'Test dropdown multi variant',
+    name: 'Dropdown single 3',
+    description: 'Test dropdown single variant with default value and read only',
     envVar: 'dropdown-3',
+    required: true,
+    properties: {
+      variant: 'single',
+      items: [
+        { value: '1', label: 'One' },
+        { value: '2', label: 'Two' },
+        { value: '3', label: 'Three' },
+        { value: '4', label: 'Four' },
+      ],
+      defaultValue: ['3'],
+      defaultReadOnly: true,
+    },
+  },
+  {
+    type: 'dropdown',
+    name: 'Dropdown single 4',
+    description: 'Test dropdown single variant with no default value and read only',
+    envVar: 'dropdown-4',
+    required: true,
+    properties: {
+      variant: 'single',
+      items: [
+        { value: '1', label: 'One' },
+        { value: '2', label: 'Two' },
+        { value: '3', label: 'Three' },
+        { value: '4', label: 'Four' },
+      ],
+      defaultReadOnly: true,
+    },
+  },
+
+  {
+    type: 'section',
+    name: 'Dropdown - multi',
+    description: 'This section contains multi variant dropdown fields.',
+  },
+  {
+    type: 'dropdown',
+    name: 'Dropdown multi 1',
+    description: 'Test dropdown multi variant',
+    envVar: 'dropdown-multi-1',
     required: false,
     properties: {
       variant: 'multi',
@@ -375,9 +488,9 @@ const mockFields: ConnectionTypeField[] = [
   },
   {
     type: 'dropdown',
-    name: 'Dropdown 4',
+    name: 'Dropdown multi 2',
     description: 'Test dropdown multi variant with default values',
-    envVar: 'dropdown-4',
+    envVar: 'dropdown-multi-2',
     required: false,
     properties: {
       variant: 'multi',
@@ -388,6 +501,42 @@ const mockFields: ConnectionTypeField[] = [
         { value: '4', label: 'Four' },
       ],
       defaultValue: ['2', '3'],
+      defaultReadOnly: false,
+    },
+  },
+  {
+    type: 'dropdown',
+    name: 'Dropdown multi 3',
+    description: 'Test dropdown multi variant with default values and read only',
+    envVar: 'dropdown-multi-3',
+    required: false,
+    properties: {
+      variant: 'multi',
+      items: [
+        { value: '1', label: 'One' },
+        { value: '2', label: 'Two' },
+        { value: '3', label: 'Three' },
+        { value: '4', label: 'Four' },
+      ],
+      defaultValue: ['2', '3'],
+      defaultReadOnly: true,
+    },
+  },
+  {
+    type: 'dropdown',
+    name: 'Dropdown multi 4',
+    description: 'Test dropdown multi variant with no default values and read only',
+    envVar: 'dropdown-multi-4',
+    required: false,
+    properties: {
+      variant: 'multi',
+      items: [
+        { value: '1', label: 'One' },
+        { value: '2', label: 'Two' },
+        { value: '3', label: 'Three' },
+        { value: '4', label: 'Four' },
+      ],
+      defaultReadOnly: true,
     },
   },
 ];
diff --git a/frontend/src/components/FormGroupText.scss b/frontend/src/components/FormGroupText.scss
new file mode 100644
index 0000000000..80bc60b0b8
--- /dev/null
+++ b/frontend/src/components/FormGroupText.scss
@@ -0,0 +1,8 @@
+.odh-form-group-text {
+  // applies the same form element font size as overriden by App.scss
+  font-size: var(--pf-v5-global--FontSize--sm);
+
+  @at-root pre#{&} {
+    font-family: var(--pf-v5-global--FontFamily--text);
+  }
+}
diff --git a/frontend/src/components/FormGroupText.tsx b/frontend/src/components/FormGroupText.tsx
new file mode 100644
index 0000000000..bbea3a3a5a
--- /dev/null
+++ b/frontend/src/components/FormGroupText.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import './FormGroupText.scss';
+
+type Props = {
+  component?: 'div' | 'pre';
+  children?: React.ReactNode;
+  id?: string;
+};
+
+const FormGroupText: React.FC<Props> = ({ component: Component = 'div', id, children }) => (
+  <Component id={id} className="odh-form-group-text">
+    {children}
+  </Component>
+);
+
+export default FormGroupText;
diff --git a/frontend/src/components/NumberInputWrapper.tsx b/frontend/src/components/NumberInputWrapper.tsx
index 34cbcd654e..e0373a0bc9 100644
--- a/frontend/src/components/NumberInputWrapper.tsx
+++ b/frontend/src/components/NumberInputWrapper.tsx
@@ -3,7 +3,7 @@ import { NumberInput } from '@patternfly/react-core';
 
 type NumberInputWrapperProps = {
   onBlur?: (blurValue: number) => void;
-  onChange: (newValue: number) => void;
+  onChange?: (newValue: number) => void;
 } & Omit<React.ComponentProps<typeof NumberInput>, 'onChange' | 'onPlus' | 'onMinus'>;
 
 const NumberInputWrapper: React.FC<NumberInputWrapperProps> = ({
@@ -21,24 +21,28 @@ const NumberInputWrapper: React.FC<NumberInputWrapperProps> = ({
     max={max}
     validated={validated}
     value={value}
-    onChange={(e) => {
-      let v = parseInt(e.currentTarget.value);
-      if (min) {
-        v = Math.max(v, min);
-      }
-      if (max) {
-        v = Math.min(v, max);
-      }
-      onChange(v);
-    }}
+    onChange={
+      onChange
+        ? (e) => {
+            let v = parseInt(e.currentTarget.value);
+            if (min) {
+              v = Math.max(v, min);
+            }
+            if (max) {
+              v = Math.min(v, max);
+            }
+            onChange(v);
+          }
+        : undefined
+    }
     onBlur={
       onBlur &&
       ((e) => {
         onBlur(parseInt(e.currentTarget.value));
       })
     }
-    onPlus={() => onChange((value || 0) + 1)}
-    onMinus={() => onChange((value || 0) - 1)}
+    onPlus={onChange ? () => onChange((value || 0) + 1) : undefined}
+    onMinus={onChange ? () => onChange((value || 0) - 1) : undefined}
   />
 );
 
diff --git a/frontend/src/components/PasswordInput.tsx b/frontend/src/components/PasswordInput.tsx
index 787cd66b72..0f16d8bf2c 100644
--- a/frontend/src/components/PasswordInput.tsx
+++ b/frontend/src/components/PasswordInput.tsx
@@ -2,7 +2,16 @@ import * as React from 'react';
 import { Button, InputGroup, TextInput, InputGroupItem } from '@patternfly/react-core';
 import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons';
 
-const PasswordInput: React.FC<React.ComponentProps<typeof TextInput>> = (props) => {
+type Props = React.ComponentProps<typeof TextInput> & {
+  ariaLabelShow?: string;
+  ariaLabelHide?: string;
+};
+
+const PasswordInput: React.FC<Props> = ({
+  ariaLabelShow = 'Show password',
+  ariaLabelHide = 'Hide password',
+  ...props
+}) => {
   const [isPasswordHidden, setPasswordHidden] = React.useState(true);
 
   return (
@@ -12,7 +21,7 @@ const PasswordInput: React.FC<React.ComponentProps<typeof TextInput>> = (props)
       </InputGroupItem>
       <InputGroupItem>
         <Button
-          aria-label={isPasswordHidden ? 'Show password' : 'Hide password'}
+          aria-label={isPasswordHidden ? ariaLabelShow : ariaLabelHide}
           variant="control"
           onClick={() => setPasswordHidden(!isPasswordHidden)}
         >
diff --git a/frontend/src/components/pf-overrides/FormSection.scss b/frontend/src/components/pf-overrides/FormSection.scss
new file mode 100644
index 0000000000..25872ed952
--- /dev/null
+++ b/frontend/src/components/pf-overrides/FormSection.scss
@@ -0,0 +1,8 @@
+.odh-form-section {
+  &__desc {
+    margin-top: var(--pf-v5-global--spacer--sm);
+    font-size: var(--pf-v5-global--FontSize--sm);
+    color: var(--pf-v5-global--Color--200);
+    font-weight: initial;
+  }
+}
diff --git a/frontend/src/components/pf-overrides/FormSection.tsx b/frontend/src/components/pf-overrides/FormSection.tsx
new file mode 100644
index 0000000000..35bb4e3acf
--- /dev/null
+++ b/frontend/src/components/pf-overrides/FormSection.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { FormSection as PFFormSection, FormSectionProps, Text } from '@patternfly/react-core';
+
+import './FormSection.scss';
+
+type Props = FormSectionProps & {
+  description?: React.ReactNode;
+};
+
+// Remove once https://github.com/patternfly/patternfly/issues/6663 is fixed
+const FormSection: React.FC<Props> = ({
+  description,
+  title,
+  titleElement: TitleElement = 'div',
+  ...props
+}) => (
+  <PFFormSection
+    {...props}
+    titleElement={description ? 'div' : TitleElement}
+    title={
+      description ? (
+        <>
+          <TitleElement className="pf-v5-c-form__section-title">{title}</TitleElement>
+          <Text component="p" className="odh-form-section__desc">
+            {description}
+          </Text>
+        </>
+      ) : (
+        title
+      )
+    }
+  />
+);
+
+export default FormSection;
diff --git a/frontend/src/concepts/connectionTypes/ConnectionTypePreview.tsx b/frontend/src/concepts/connectionTypes/ConnectionTypePreview.tsx
new file mode 100644
index 0000000000..c189395872
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/ConnectionTypePreview.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Divider, Form, FormGroup, FormSection, Title } from '@patternfly/react-core';
+import FormGroupText from '~/components/FormGroupText';
+import ConnectionTypeFormFields from '~/concepts/connectionTypes/fields/ConnectionTypeFormFields';
+import { ConnectionTypeConfigMapObj } from '~/concepts/connectionTypes/types';
+import NameDescriptionField from '~/concepts/k8s/NameDescriptionField';
+import { getDescriptionFromK8sResource, getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
+import UnspecifiedValue from '~/concepts/connectionTypes/fields/UnspecifiedValue';
+
+type Props = {
+  obj?: ConnectionTypeConfigMapObj;
+};
+
+const ConnectionTypePreview: React.FC<Props> = ({ obj }) => (
+  <Form>
+    <Title headingLevel="h1">Add connection</Title>
+    <FormSection title="Connection type details" style={{ marginTop: 0 }}>
+      <FormGroup label="Connection type name" fieldId="connection-type-name">
+        <FormGroupText id="connection-type-name">
+          {(obj && getDisplayNameFromK8sResource(obj)) || <UnspecifiedValue />}
+        </FormGroupText>
+      </FormGroup>
+      <FormGroup label="Connection type description" fieldId="connection-type-description">
+        <FormGroupText id="connection-type-description">
+          {(obj && getDescriptionFromK8sResource(obj)) || <UnspecifiedValue />}
+        </FormGroupText>
+      </FormGroup>
+    </FormSection>
+    <Divider />
+    <FormSection title="Connection details" style={{ marginTop: 0 }}>
+      <NameDescriptionField
+        nameFieldId="connection-details-name"
+        descriptionFieldId="connection-details-description"
+        data={{
+          name: '',
+          description: '',
+        }}
+      />
+      <ConnectionTypeFormFields fields={obj?.data?.fields} isPreview />
+    </FormSection>
+  </Form>
+);
+
+export default ConnectionTypePreview;
diff --git a/frontend/src/concepts/connectionTypes/ConnectionTypePreviewDrawer.tsx b/frontend/src/concepts/connectionTypes/ConnectionTypePreviewDrawer.tsx
new file mode 100644
index 0000000000..65d9f8c5ee
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/ConnectionTypePreviewDrawer.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerContentBody,
+  Title,
+  DrawerPanelBody,
+  Card,
+  CardBody,
+  Text,
+} from '@patternfly/react-core';
+import ConnectionTypePreview from '~/concepts/connectionTypes/ConnectionTypePreview';
+import { ConnectionTypeConfigMapObj } from '~/concepts/connectionTypes/types';
+
+type Props = {
+  children?: React.ReactNode;
+  isExpanded: boolean;
+  onClose: () => void;
+  obj: ConnectionTypeConfigMapObj;
+};
+
+const ConnectionTypePreviewDrawer: React.FC<Props> = ({ children, isExpanded, onClose, obj }) => {
+  const panelContent = (
+    <DrawerPanelContent
+      isResizable
+      style={{
+        backgroundColor: 'var(--pf-v5-global--BackgroundColor--200)',
+      }}
+    >
+      <DrawerHead>
+        <Title headingLevel="h2" size="xl">
+          Preview connection type
+        </Title>
+        <DrawerActions>
+          <DrawerCloseButton onClick={() => onClose()} />
+        </DrawerActions>
+      </DrawerHead>
+
+      <DrawerPanelBody>
+        <div
+          style={{
+            paddingBottom: 'var(--pf-v5-global--spacer--lg)',
+          }}
+        >
+          <Text component="small">
+            This preview shows the user view of the connection type form, and is for reference only.
+            Updates in the developer view are automatically in the user view.
+          </Text>
+          <Card
+            isFlat
+            isRounded
+            style={{
+              marginTop: 'var(--pf-v5-global--spacer--md)',
+            }}
+          >
+            <CardBody>
+              <ConnectionTypePreview obj={obj} />
+            </CardBody>
+          </Card>
+        </div>
+      </DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  return (
+    <Drawer isExpanded={isExpanded} isInline>
+      <DrawerContent panelContent={panelContent}>
+        <DrawerContentBody>{children}</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default ConnectionTypePreviewDrawer;
diff --git a/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts b/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts
index 93f7aacc55..3cabf41ca8 100644
--- a/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts
+++ b/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts
@@ -1,10 +1,12 @@
 import { mockConnectionTypeConfigMapObj } from '~/__mocks__/mockConnectionType';
+import { DropdownField, HiddenField, TextField } from '~/concepts/connectionTypes/types';
 import {
+  defaultValueToString,
   toConnectionTypeConfigMap,
   toConnectionTypeConfigMapObj,
 } from '~/concepts/connectionTypes/utils';
 
-describe('utils', () => {
+describe('toConnectionTypeConfigMap / toConnectionTypeConfigMapObj', () => {
   it('should serialize / deserialize connection type fields', () => {
     const ct = mockConnectionTypeConfigMapObj({});
     const configMap = toConnectionTypeConfigMap(ct);
@@ -19,3 +21,183 @@ describe('utils', () => {
     expect(ct).toEqual(toConnectionTypeConfigMapObj(configMap));
   });
 });
+
+describe('defaultValueToString', () => {
+  it('should return default value as string', () => {
+    expect(
+      defaultValueToString({
+        type: 'text',
+        name: 'test',
+        envVar: 'test',
+        properties: {},
+      } satisfies TextField),
+    ).toBe(undefined);
+    expect(
+      defaultValueToString({
+        type: 'text',
+        name: 'test',
+        envVar: 'test',
+        properties: {
+          defaultValue: '',
+        },
+      } satisfies TextField),
+    ).toBe('');
+    expect(
+      defaultValueToString({
+        type: 'text',
+        name: 'test',
+        envVar: 'test',
+        properties: {
+          defaultValue: 'test value',
+        },
+      } satisfies TextField),
+    ).toBe('test value');
+  });
+  it('should return masked hidden value as string', () => {
+    expect(
+      defaultValueToString({
+        type: 'hidden',
+        name: 'test',
+        envVar: 'test',
+        properties: {},
+      } satisfies HiddenField),
+    ).toBe(undefined);
+    expect(
+      defaultValueToString({
+        type: 'hidden',
+        name: 'test',
+        envVar: 'test',
+        properties: {
+          defaultValue: '',
+        },
+      } satisfies HiddenField),
+    ).toBe('');
+    expect(
+      defaultValueToString({
+        type: 'hidden',
+        name: 'test',
+        envVar: 'test',
+        properties: {
+          defaultValue: 'test value',
+        },
+      } satisfies HiddenField),
+    ).toBe('••••••••••');
+  });
+
+  it('should return single variant dropdown value as string', () => {
+    expect(
+      defaultValueToString({
+        type: 'dropdown',
+        name: 'test',
+        envVar: 'test',
+        properties: {
+          variant: 'single',
+          items: [
+            { value: '1', label: 'One' },
+            { value: '2', label: 'Two' },
+            { value: '3', label: 'Three' },
+          ],
+        },
+      } satisfies DropdownField),
+    ).toBe(undefined);
+    expect(
+      defaultValueToString({
+        type: 'dropdown',
+        name: 'test',
+        envVar: 'test',
+        properties: {
+          variant: 'single',
+          items: [
+            { value: '1', label: 'One' },
+            { value: '2', label: 'Two' },
+            { value: '3', label: 'Three' },
+          ],
+          defaultValue: [],
+        },
+      } satisfies DropdownField),
+    ).toBe(undefined);
+    expect(
+      defaultValueToString({
+        type: 'dropdown',
+        name: 'test',
+        envVar: 'test',
+        properties: {
+          variant: 'single',
+          items: [
+            { value: '1', label: 'One' },
+            { value: '2', label: 'Two' },
+            { value: '3', label: 'Three' },
+          ],
+          defaultValue: ['2'],
+        },
+      } satisfies DropdownField),
+    ).toBe('Two');
+    expect(
+      defaultValueToString({
+        type: 'dropdown',
+        name: 'test',
+        envVar: 'test',
+        properties: {
+          variant: 'single',
+          items: [
+            { value: '1', label: 'One' },
+            { value: '2', label: 'Two' },
+            { value: '3', label: 'Three' },
+          ],
+          // supply an array with multiple values for single variant
+          defaultValue: ['2', '3'],
+        },
+      } satisfies DropdownField),
+    ).toBe('Two');
+  });
+
+  it('should return multi variant dropdown value as string', () => {
+    expect(
+      defaultValueToString({
+        type: 'dropdown',
+        name: 'test',
+        envVar: 'test',
+        properties: {
+          variant: 'multi',
+          items: [
+            { value: '1', label: 'One' },
+            { value: '2', label: 'Two' },
+            { value: '3', label: 'Three' },
+          ],
+        },
+      } satisfies DropdownField),
+    ).toBe(undefined);
+    expect(
+      defaultValueToString({
+        type: 'dropdown',
+        name: 'test',
+        envVar: 'test',
+        properties: {
+          variant: 'multi',
+          items: [
+            { value: '1', label: 'One' },
+            { value: '2', label: 'Two' },
+            { value: '3', label: 'Three' },
+          ],
+          defaultValue: [],
+        },
+      } satisfies DropdownField),
+    ).toBe(undefined);
+    expect(
+      defaultValueToString({
+        type: 'dropdown',
+        name: 'test',
+        envVar: 'test',
+        properties: {
+          variant: 'multi',
+          items: [
+            { value: '1', label: 'One' },
+            { value: '2', label: 'Two' },
+            { value: '3', label: 'Three' },
+          ],
+          defaultValue: ['2', '3'],
+        },
+      } satisfies DropdownField),
+    ).toBe('Two, Three');
+  });
+});
diff --git a/frontend/src/concepts/connectionTypes/fields/BooleanFormField.tsx b/frontend/src/concepts/connectionTypes/fields/BooleanFormField.tsx
new file mode 100644
index 0000000000..2f60d3f762
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/BooleanFormField.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+import { BooleanField } from '~/concepts/connectionTypes/types';
+import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+
+type Props = {
+  field: BooleanField;
+  isPreview?: boolean;
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+};
+
+const BooleanFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => (
+  <DataFormFieldGroup field={field} isPreview={!!isPreview} renderDefaultValue={false}>
+    {(id) => (
+      <Checkbox
+        aria-readonly={isPreview}
+        id={id}
+        name={id}
+        label={field.properties.label}
+        aria-label={field.properties.label || field.name}
+        isDisabled={field.properties.defaultReadOnly}
+        isChecked={
+          isPreview || field.properties.defaultReadOnly ? !!field.properties.defaultValue : !!value
+        }
+        onChange={
+          isPreview || field.properties.defaultReadOnly || !onChange
+            ? () => undefined
+            : (_e, v) => onChange(v)
+        }
+      />
+    )}
+  </DataFormFieldGroup>
+);
+
+export default BooleanFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/ConnectionTypeDataFormField.tsx b/frontend/src/concepts/connectionTypes/fields/ConnectionTypeDataFormField.tsx
new file mode 100644
index 0000000000..7a13c20830
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/ConnectionTypeDataFormField.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import BooleanFormField from '~/concepts/connectionTypes/fields/BooleanFormField';
+import DropdownFormField from '~/concepts/connectionTypes/fields/DropdownFormField';
+import FileFormField from '~/concepts/connectionTypes/fields/FileFormField';
+import HiddenFormField from '~/concepts/connectionTypes/fields/HiddenFormField';
+import NumericFormField from '~/concepts/connectionTypes/fields/NumericFormField';
+import TextFormField from '~/concepts/connectionTypes/fields/TextFormField';
+import ShortTextFormField from '~/concepts/connectionTypes/fields/ShortTextFormField';
+import UriFormField from '~/concepts/connectionTypes/fields/UriFormField';
+import { ConnectionTypeDataField, ConnectionTypeFieldType } from '~/concepts/connectionTypes/types';
+
+type Props<T extends ConnectionTypeDataField> = {
+  field: T;
+  isPreview?: boolean;
+  onChange?: (field: T, value: unknown) => void;
+  value?: T['properties']['defaultValue'];
+};
+
+const ConnectionTypeDataFormField = <T extends ConnectionTypeDataField>({
+  field,
+  isPreview,
+  onChange,
+  value,
+}: Props<T>): React.ReactNode => {
+  const commonProps = {
+    isPreview,
+    onChange: onChange ? (v: unknown) => onChange(field, v) : undefined,
+    // even though the value is the type of the field default value, typescript cannot determine this here
+    // or when applied to the element itself within the switch statement
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions,@typescript-eslint/no-explicit-any
+    value: value as any,
+  };
+  switch (field.type) {
+    case ConnectionTypeFieldType.ShortText:
+      return <ShortTextFormField {...commonProps} field={field} />;
+
+    case ConnectionTypeFieldType.Text:
+      return <TextFormField {...commonProps} field={field} />;
+
+    case ConnectionTypeFieldType.URI:
+      return <UriFormField {...commonProps} field={field} />;
+
+    case ConnectionTypeFieldType.Hidden:
+      return <HiddenFormField {...commonProps} field={field} />;
+
+    case ConnectionTypeFieldType.File:
+      return <FileFormField {...commonProps} field={field} />;
+
+    case ConnectionTypeFieldType.Boolean:
+      return <BooleanFormField {...commonProps} field={field} />;
+
+    case ConnectionTypeFieldType.Numeric:
+      return <NumericFormField {...commonProps} field={field} />;
+
+    case ConnectionTypeFieldType.Dropdown:
+      return <DropdownFormField {...commonProps} field={field} />;
+  }
+  return null;
+};
+
+export default ConnectionTypeDataFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/ConnectionTypeFormFields.tsx b/frontend/src/concepts/connectionTypes/fields/ConnectionTypeFormFields.tsx
new file mode 100644
index 0000000000..a155abbdb7
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/ConnectionTypeFormFields.tsx
@@ -0,0 +1,64 @@
+import { FormSection } from '@patternfly/react-core';
+import * as React from 'react';
+import ConnectionTypeDataFormField from '~/concepts/connectionTypes/fields/ConnectionTypeDataFormField';
+import SectionFormField from '~/concepts/connectionTypes/fields/SectionFormField';
+import {
+  ConnectionTypeDataField,
+  ConnectionTypeField,
+  ConnectionTypeFieldType,
+  SectionField,
+} from '~/concepts/connectionTypes/types';
+
+type Props = {
+  fields?: ConnectionTypeField[];
+  isPreview?: boolean;
+  onChange?: (field: ConnectionTypeDataField, value: unknown) => void;
+};
+
+type FieldGroup = { section: SectionField | undefined; fields: ConnectionTypeDataField[] };
+
+const createKey = (field: ConnectionTypeField) =>
+  `${field.type}-${field.type === ConnectionTypeFieldType.Section ? field.name : field.envVar}`;
+
+const ConnectionTypeFormFields: React.FC<Props> = ({ fields, isPreview, onChange }) => {
+  const fieldGroups = React.useMemo(
+    () =>
+      fields?.reduce<FieldGroup[]>((acc, field) => {
+        if (field.type === ConnectionTypeFieldType.Section) {
+          acc.push({ section: field, fields: [] });
+        } else if (acc.length === 0) {
+          acc.push({ section: undefined, fields: [field] });
+        } else {
+          acc[acc.length - 1].fields.push(field);
+        }
+        return acc;
+      }, []),
+    [fields],
+  );
+
+  const renderDataFields = (dataFields: ConnectionTypeDataField[]) =>
+    dataFields.map((field) => (
+      <ConnectionTypeDataFormField
+        key={createKey(field)}
+        field={field}
+        isPreview={isPreview}
+        onChange={onChange}
+      />
+    ));
+
+  return (
+    <>
+      {fieldGroups?.map((fieldGroup) =>
+        fieldGroup.section ? (
+          <SectionFormField field={fieldGroup.section} key={createKey(fieldGroup.section)}>
+            {renderDataFields(fieldGroup.fields)}
+          </SectionFormField>
+        ) : (
+          <FormSection key="ungrouped-fields">{renderDataFields(fieldGroup.fields)}</FormSection>
+        ),
+      )}
+    </>
+  );
+};
+
+export default ConnectionTypeFormFields;
diff --git a/frontend/src/concepts/connectionTypes/fields/DataFormFieldGroup.tsx b/frontend/src/concepts/connectionTypes/fields/DataFormFieldGroup.tsx
new file mode 100644
index 0000000000..2fe67db210
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/DataFormFieldGroup.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { FormGroup } from '@patternfly/react-core';
+import { ConnectionTypeDataField } from '~/concepts/connectionTypes/types';
+import FormGroupText from '~/components/FormGroupText';
+import UnspecifiedValue from '~/concepts/connectionTypes/fields/UnspecifiedValue';
+import { defaultValueToString } from '~/concepts/connectionTypes/utils';
+
+type Props<T extends ConnectionTypeDataField> = {
+  field: T;
+  isPreview: boolean;
+  children: (id: string) => React.ReactNode;
+  renderDefaultValue?: boolean;
+};
+
+const DataFormFieldGroup = <T extends ConnectionTypeDataField>({
+  field,
+  isPreview,
+  children,
+  renderDefaultValue = true,
+}: Props<T>): React.ReactNode => {
+  const id = `${field.type}-${field.envVar}`;
+  return (
+    <FormGroup
+      label={field.name}
+      fieldId={id}
+      data-testid={`field ${field.type} ${field.envVar}`}
+      // do not mark read only fields as required
+      isRequired={field.required && !field.properties.defaultReadOnly}
+    >
+      {field.properties.defaultReadOnly && renderDefaultValue ? (
+        <FormGroupText id={id}>
+          {defaultValueToString(field) ?? (isPreview ? <UnspecifiedValue /> : '-')}
+        </FormGroupText>
+      ) : (
+        children(id)
+      )}
+    </FormGroup>
+  );
+};
+
+export default DataFormFieldGroup;
diff --git a/frontend/src/concepts/connectionTypes/fields/DropdownFormField.tsx b/frontend/src/concepts/connectionTypes/fields/DropdownFormField.tsx
new file mode 100644
index 0000000000..5a6032d23c
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/DropdownFormField.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { Badge, MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';
+import { DropdownField } from '~/concepts/connectionTypes/types';
+import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+
+type Props = {
+  field: DropdownField;
+  isPreview?: boolean;
+  onChange?: (value: string[]) => void;
+  value?: string[];
+};
+
+const DropdownFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const isMulti = field.properties.variant === 'multi';
+  const selected = isPreview ? field.properties.defaultValue : value;
+  return (
+    <DataFormFieldGroup field={field} isPreview={!!isPreview}>
+      {(id) => (
+        <Select
+          isOpen={isOpen}
+          shouldFocusToggleOnSelect
+          selected={selected}
+          onSelect={
+            isPreview || !onChange
+              ? undefined
+              : (_e, v) => {
+                  if (isMulti) {
+                    if (selected?.includes(String(v))) {
+                      onChange(selected.filter((s) => s !== v));
+                    } else {
+                      onChange([...(selected || []), String(v)]);
+                    }
+                  } else {
+                    onChange([String(v)]);
+                    setIsOpen(false);
+                  }
+                }
+          }
+          onOpenChange={(open) => setIsOpen(open)}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              id={id}
+              isFullWidth
+              onClick={() => {
+                setIsOpen((open) => !open);
+              }}
+              isExpanded={isOpen}
+            >
+              {isMulti ? (
+                <>
+                  Count{' '}
+                  <Badge>
+                    {(isPreview ? field.properties.defaultValue?.length : value?.length) ?? 0}{' '}
+                    selected
+                  </Badge>
+                </>
+              ) : (
+                (isPreview
+                  ? field.properties.items?.find(
+                      (i) => i.value === field.properties.defaultValue?.[0],
+                    )?.label
+                  : field.properties.items?.find((i) => value?.includes(i.value))?.label) ||
+                'Select a value'
+              )}
+            </MenuToggle>
+          )}
+        >
+          <SelectList>
+            {field.properties.items?.map((i) => (
+              <SelectOption
+                value={i.value}
+                key={i.value}
+                hasCheckbox={isMulti}
+                selected={selected?.includes(i.value)}
+              >
+                {i.label}
+              </SelectOption>
+            ))}
+          </SelectList>
+        </Select>
+      )}
+    </DataFormFieldGroup>
+  );
+};
+
+export default DropdownFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/FileFormField.tsx b/frontend/src/concepts/connectionTypes/fields/FileFormField.tsx
new file mode 100644
index 0000000000..2ffb22052b
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/FileFormField.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { FileUpload } from '@patternfly/react-core';
+import { FileField } from '~/concepts/connectionTypes/types';
+import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+
+type Props = {
+  field: FileField;
+  isPreview?: boolean;
+  value?: string;
+  onChange?: (value: string) => void;
+};
+
+const FileFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [filename, setFilename] = React.useState('');
+  const readOnly = isPreview || field.properties.defaultReadOnly;
+  return (
+    <DataFormFieldGroup field={field} isPreview={!!isPreview} renderDefaultValue={false}>
+      {(id) => (
+        <FileUpload
+          id={id}
+          name={id}
+          type="text"
+          isLoading={isLoading}
+          value={
+            isPreview || field.properties.defaultReadOnly ? field.properties.defaultValue : value
+          }
+          filename={filename}
+          allowEditingUploadedText
+          isReadOnly={readOnly}
+          isDisabled={readOnly}
+          filenamePlaceholder={readOnly ? '' : 'Drag and drop a file or upload one'}
+          browseButtonText="Upload"
+          clearButtonText="Clear"
+          onDataChange={isPreview || !onChange ? undefined : (e, content) => onChange(content)}
+          onFileInputChange={(_e, file) => setFilename(file.name)}
+          onReadStarted={() => {
+            setIsLoading(true);
+          }}
+          onReadFinished={() => {
+            setIsLoading(false);
+          }}
+        />
+      )}
+    </DataFormFieldGroup>
+  );
+};
+
+export default FileFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/HiddenFormField.tsx b/frontend/src/concepts/connectionTypes/fields/HiddenFormField.tsx
new file mode 100644
index 0000000000..169c51fbfc
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/HiddenFormField.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { HiddenField } from '~/concepts/connectionTypes/types';
+import PasswordInput from '~/components/PasswordInput';
+import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+
+type Props = {
+  field: HiddenField;
+  isPreview?: boolean;
+  value?: string;
+  onChange?: (value: string) => void;
+};
+
+const HiddenFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => (
+  <DataFormFieldGroup field={field} isPreview={!!isPreview}>
+    {(id) => (
+      <PasswordInput
+        aria-readonly={isPreview}
+        autoComplete="off"
+        isRequired={field.required}
+        id={id}
+        name={id}
+        ariaLabelHide="Hide value"
+        ariaLabelShow="Show value"
+        value={(isPreview ? field.properties.defaultValue : value) ?? ''}
+        onChange={isPreview || !onChange ? undefined : (_e, v) => onChange(v)}
+      />
+    )}
+  </DataFormFieldGroup>
+);
+
+export default HiddenFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/NumericFormField.tsx b/frontend/src/concepts/connectionTypes/fields/NumericFormField.tsx
new file mode 100644
index 0000000000..54a1975b40
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/NumericFormField.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { NumericField } from '~/concepts/connectionTypes/types';
+import NumberInputWrapper from '~/components/NumberInputWrapper';
+import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+
+type Props = {
+  field: NumericField;
+  isPreview?: boolean;
+  value?: number;
+  onChange?: (value: number) => void;
+};
+
+const NumericFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => (
+  <DataFormFieldGroup field={field} isPreview={!!isPreview}>
+    {(id) => (
+      <NumberInputWrapper
+        inputProps={{
+          'aria-readonly': isPreview,
+          id,
+          name: id,
+          placeholder: `${field.properties.defaultValue ?? ''}`,
+        }}
+        inputName={id}
+        value={isPreview ? field.properties.defaultValue : value}
+        // NumberInput shows a disabled input if no onChange provided
+        onChange={isPreview || !onChange ? () => undefined : onChange}
+      />
+    )}
+  </DataFormFieldGroup>
+);
+
+export default NumericFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/SectionFormField.tsx b/frontend/src/concepts/connectionTypes/fields/SectionFormField.tsx
new file mode 100644
index 0000000000..5f8cac18b6
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/SectionFormField.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { SectionField } from '~/concepts/connectionTypes/types';
+import FormSection from '~/components/pf-overrides/FormSection';
+
+type Props = {
+  field: SectionField;
+  children?: React.ReactNode;
+};
+
+const SectionFormField: React.FC<Props> = ({ field: { name, description }, children }) => (
+  <FormSection title={name} description={description}>
+    {children}
+  </FormSection>
+);
+
+export default SectionFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/ShortTextFormField.tsx b/frontend/src/concepts/connectionTypes/fields/ShortTextFormField.tsx
new file mode 100644
index 0000000000..99a03f5c2d
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/ShortTextFormField.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { TextInput } from '@patternfly/react-core';
+import { ShortTextField } from '~/concepts/connectionTypes/types';
+import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+
+type Props = {
+  field: ShortTextField;
+  isPreview?: boolean;
+  value?: string;
+  onChange?: (value: string) => void;
+};
+
+const ShortTextFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => (
+  <DataFormFieldGroup field={field} isPreview={!!isPreview}>
+    {(id) => (
+      <TextInput
+        aria-readonly={isPreview}
+        autoComplete="off"
+        isRequired={field.required}
+        id={id}
+        name={id}
+        value={(isPreview ? field.properties.defaultValue : value) ?? ''}
+        onChange={isPreview || !onChange ? undefined : (_e, v) => onChange(v)}
+      />
+    )}
+  </DataFormFieldGroup>
+);
+
+export default ShortTextFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/TextFormField.tsx b/frontend/src/concepts/connectionTypes/fields/TextFormField.tsx
new file mode 100644
index 0000000000..ac101ea88b
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/TextFormField.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { TextArea } from '@patternfly/react-core';
+import { TextField } from '~/concepts/connectionTypes/types';
+import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+
+type Props = {
+  field: TextField;
+  isPreview?: boolean;
+  value?: string;
+  onChange?: (value: string) => void;
+};
+
+const TextFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => (
+  <DataFormFieldGroup field={field} isPreview={!!isPreview}>
+    {(id) => (
+      <TextArea
+        aria-readonly={isPreview}
+        autoComplete="off"
+        isRequired={field.required}
+        id={id}
+        name={id}
+        resizeOrientation="vertical"
+        value={(isPreview ? field.properties.defaultValue : value) ?? ''}
+        onChange={isPreview || !onChange ? undefined : (_e, v) => onChange(v)}
+      />
+    )}
+  </DataFormFieldGroup>
+);
+
+export default TextFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/UnspecifiedValue.tsx b/frontend/src/concepts/connectionTypes/fields/UnspecifiedValue.tsx
new file mode 100644
index 0000000000..7d8b8619a6
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/UnspecifiedValue.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+
+const UnspecifiedValue: React.FC = () => (
+  <>
+    Unspecified{' '}
+    <ExclamationCircleIcon
+      color="var(--pf-v5-global--danger-color--100)"
+      aria-label="unspecified"
+    />
+  </>
+);
+
+export default UnspecifiedValue;
diff --git a/frontend/src/concepts/connectionTypes/fields/UriFormField.tsx b/frontend/src/concepts/connectionTypes/fields/UriFormField.tsx
new file mode 100644
index 0000000000..679db4fea8
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/UriFormField.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { TextInput } from '@patternfly/react-core';
+import { UriField } from '~/concepts/connectionTypes/types';
+import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+
+type Props = {
+  field: UriField;
+  isPreview?: boolean;
+  value?: string;
+  onChange?: (value: string) => void;
+};
+
+const UriFormField: React.FC<Props> = ({ field, isPreview, onChange, value }) => (
+  <DataFormFieldGroup field={field} isPreview={!!isPreview}>
+    {(id) => (
+      <TextInput
+        aria-readonly={isPreview}
+        autoComplete="off"
+        isRequired={field.required}
+        id={id}
+        name={id}
+        value={(isPreview ? field.properties.defaultValue : value) ?? ''}
+        onChange={isPreview || !onChange ? undefined : (_e, v) => onChange(v)}
+      />
+    )}
+  </DataFormFieldGroup>
+);
+
+export default UriFormField;
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/BooleanFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/BooleanFormField.spec.tsx
new file mode 100644
index 0000000000..f2f394d8d0
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/BooleanFormField.spec.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { BooleanField } from '~/concepts/connectionTypes/types';
+import BooleanFormField from '~/concepts/connectionTypes/fields/BooleanFormField';
+
+describe('BooleanFormField', () => {
+  it('should render editable field', () => {
+    const onChange = jest.fn();
+    const field: BooleanField = {
+      type: 'boolean',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        label: 'test-label',
+        defaultValue: false,
+      },
+    };
+
+    render(<BooleanFormField field={field} value onChange={onChange} />);
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeChecked();
+    expect(checkbox).not.toBeDisabled();
+    expect(screen.getByLabelText('test-label')).toBe(checkbox);
+
+    act(() => {
+      checkbox.click();
+    });
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+
+  it('should render preview field', () => {
+    const onChange = jest.fn();
+    const field: BooleanField = {
+      type: 'boolean',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        label: 'test-label',
+        defaultValue: true,
+      },
+    };
+
+    render(<BooleanFormField field={field} value={false} onChange={onChange} isPreview />);
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeChecked();
+    expect(checkbox).not.toBeDisabled();
+    expect(screen.getByLabelText('test-label')).toBe(checkbox);
+
+    act(() => {
+      checkbox.click();
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('should render default value read only field', () => {
+    const onChange = jest.fn();
+    const field: BooleanField = {
+      type: 'boolean',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        label: 'test-label',
+        defaultValue: true,
+        defaultReadOnly: true,
+      },
+    };
+
+    render(<BooleanFormField field={field} value={false} onChange={onChange} />);
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeChecked();
+    expect(checkbox).toBeDisabled();
+    expect(screen.getByLabelText('test-label')).toBe(checkbox);
+
+    act(() => {
+      checkbox.click();
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/ConnectionTypeDataFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/ConnectionTypeDataFormField.spec.tsx
new file mode 100644
index 0000000000..4b5c20979b
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/ConnectionTypeDataFormField.spec.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import { ConnectionTypeDataField, ConnectionTypeFieldType } from '~/concepts/connectionTypes/types';
+import ConnectionTypeDataFormField from '~/concepts/connectionTypes/fields/ConnectionTypeDataFormField';
+
+describe('ConnectionTypeDataFormField', () => {
+  it('should render field', () => {
+    const test = (type: ConnectionTypeFieldType) => {
+      const field = {
+        type,
+        name: 'test-name',
+        envVar: 'test-envVar',
+        properties: {},
+      } as ConnectionTypeDataField;
+      expect(
+        render(<ConnectionTypeDataFormField field={field} />).queryByTestId(
+          `field ${type} test-envVar`,
+        ),
+      ).toBeInTheDocument();
+    };
+    test(ConnectionTypeFieldType.Boolean);
+    test(ConnectionTypeFieldType.ShortText);
+    test(ConnectionTypeFieldType.Text);
+    test(ConnectionTypeFieldType.URI);
+    test(ConnectionTypeFieldType.Hidden);
+    test(ConnectionTypeFieldType.File);
+    test(ConnectionTypeFieldType.Numeric);
+    test(ConnectionTypeFieldType.Dropdown);
+  });
+});
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/ConnectionTypeFormFields.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/ConnectionTypeFormFields.spec.tsx
new file mode 100644
index 0000000000..f71c1b7673
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/ConnectionTypeFormFields.spec.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { render, within } from '@testing-library/react';
+import { ConnectionTypeField } from '~/concepts/connectionTypes/types';
+import ConnectionTypeFormFields from '~/concepts/connectionTypes/fields/ConnectionTypeFormFields';
+
+const testFields: ConnectionTypeField[] = [
+  {
+    type: 'boolean',
+    name: 'Boolean 1',
+    envVar: 'boolean-1',
+    properties: {},
+  },
+  {
+    type: 'section',
+    name: 'section-1',
+  },
+  {
+    type: 'text',
+    name: 'Text 1',
+    envVar: 'text-1',
+    properties: {},
+  },
+  {
+    type: 'text',
+    name: 'Text 2',
+    envVar: 'text-2',
+    properties: {},
+  },
+  {
+    type: 'section',
+    name: 'section-2',
+  },
+  {
+    type: 'numeric',
+    name: 'Numeric 1',
+    envVar: 'numeric-1',
+    properties: {},
+  },
+];
+describe('ConnectionTypeFormFields', () => {
+  it('should render sectioned fields', () => {
+    const result = render(<ConnectionTypeFormFields fields={testFields} isPreview />);
+
+    const ungrouped = result.getByRole('group', { name: '' });
+    const section1 = result.getByRole('group', { name: 'section-1' });
+    const section2 = result.getByRole('group', { name: 'section-2' });
+
+    within(ungrouped).getByTestId('field boolean boolean-1');
+    within(section1).getByTestId('field text text-1');
+    within(section1).getByTestId('field text text-2');
+    within(section2).getByTestId('field numeric numeric-1');
+  });
+});
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/DataFormFieldGroup.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/DataFormFieldGroup.spec.tsx
new file mode 100644
index 0000000000..7ee461309b
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/DataFormFieldGroup.spec.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
+import { TextField } from '~/concepts/connectionTypes/types';
+
+describe('DataFormFieldGroup', () => {
+  it('should conditionally render children', () => {
+    const children = jest.fn();
+    const field: TextField = {
+      type: 'text',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {},
+    };
+    render(
+      <DataFormFieldGroup field={field} isPreview={false}>
+        {children}
+      </DataFormFieldGroup>,
+    );
+    expect(children).toHaveBeenCalledWith('text-test-envVar');
+
+    children.mockReset();
+    field.properties.defaultReadOnly = true;
+    render(
+      <DataFormFieldGroup field={field} isPreview={false} renderDefaultValue={false}>
+        {children}
+      </DataFormFieldGroup>,
+    );
+    expect(children).toHaveBeenCalledWith('text-test-envVar');
+
+    children.mockReset();
+    render(
+      <DataFormFieldGroup field={field} isPreview={false} renderDefaultValue>
+        {children}
+      </DataFormFieldGroup>,
+    );
+    expect(children).not.toHaveBeenCalled();
+
+    children.mockReset();
+    render(
+      <DataFormFieldGroup field={field} isPreview={false} renderDefaultValue={false}>
+        {children}
+      </DataFormFieldGroup>,
+    );
+    expect(children).toHaveBeenCalledWith('text-test-envVar');
+  });
+
+  it('should render default text', () => {
+    const children = jest.fn();
+    const field: TextField = {
+      type: 'text',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'Test value',
+        defaultReadOnly: true,
+      },
+    };
+    let result = render(
+      <DataFormFieldGroup field={field} isPreview={false}>
+        {children}
+      </DataFormFieldGroup>,
+    );
+    expect(result.container).toHaveTextContent('Test value');
+
+    field.properties.defaultValue = '';
+    result = render(
+      <DataFormFieldGroup field={field} isPreview={false}>
+        {children}
+      </DataFormFieldGroup>,
+    );
+    expect(result.container).not.toHaveTextContent('Unspecified');
+
+    result = render(
+      <DataFormFieldGroup field={field} isPreview>
+        {children}
+      </DataFormFieldGroup>,
+    );
+    expect(result.container).not.toHaveTextContent('Unspecified');
+  });
+});
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/DropdownFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/DropdownFormField.spec.tsx
new file mode 100644
index 0000000000..875b59e9fc
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/DropdownFormField.spec.tsx
@@ -0,0 +1,211 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { DropdownField } from '~/concepts/connectionTypes/types';
+import DropdownFormField from '~/concepts/connectionTypes/fields/DropdownFormField';
+
+describe('DropdownFormField', () => {
+  describe('single variant', () => {
+    it('should render editable field', async () => {
+      const onChange = jest.fn();
+      const field: DropdownField = {
+        type: 'dropdown',
+        name: 'test-name',
+        envVar: 'test-envVar',
+        properties: {
+          variant: 'single',
+          items: [
+            { value: '1', label: 'One' },
+            { value: '2', label: 'Two' },
+            { value: '3', label: 'Three' },
+          ],
+          defaultValue: ['3'],
+        },
+      };
+
+      render(<DropdownFormField field={field} value={['2']} onChange={onChange} />);
+      const input = screen.getByRole('button');
+      expect(input).toHaveTextContent('Two');
+      expect(input).not.toBeDisabled();
+
+      act(() => {
+        input.click();
+      });
+      const option = screen.getByRole('option', { name: 'One' });
+      act(() => {
+        option.click();
+      });
+      await waitFor(() => expect(input).toHaveAttribute('aria-expanded', 'false'));
+      expect(onChange).toHaveBeenCalledWith(['1']);
+    });
+
+    it('should render preview field', async () => {
+      const onChange = jest.fn();
+      const field: DropdownField = {
+        type: 'dropdown',
+        name: 'test-name',
+        envVar: 'test-envVar',
+        properties: {
+          variant: 'single',
+          items: [
+            { value: '1', label: 'One' },
+            { value: '2', label: 'Two' },
+            { value: '3', label: 'Three' },
+          ],
+          defaultValue: ['3'],
+        },
+      };
+
+      render(<DropdownFormField field={field} value={['2']} onChange={onChange} isPreview />);
+      const input = screen.getByRole('button');
+      expect(input).toHaveTextContent('Three');
+      expect(input).not.toBeDisabled();
+
+      act(() => {
+        input.click();
+      });
+      const option = screen.getByRole('option', { name: 'One' });
+      act(() => {
+        option.click();
+      });
+      expect(onChange).not.toHaveBeenCalled();
+
+      // close menu to suppress error from popper
+      act(() => {
+        input.click();
+      });
+      await waitFor(() => expect(input).toHaveAttribute('aria-expanded', 'false'));
+    });
+
+    it('should render default value read only field', async () => {
+      const onChange = jest.fn();
+      const field: DropdownField = {
+        type: 'dropdown',
+        name: 'test-name',
+        envVar: 'test-envVar',
+        properties: {
+          variant: 'single',
+          items: [
+            { value: '1', label: 'One' },
+            { value: '2', label: 'Two' },
+            { value: '3', label: 'Three' },
+          ],
+          defaultValue: ['3'],
+          defaultReadOnly: true,
+        },
+      };
+
+      render(<DropdownFormField field={field} value={['2']} onChange={onChange} isPreview />);
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+      expect(screen.queryByText('Three')).toBeInTheDocument();
+    });
+  });
+
+  describe('multi variant', () => {
+    it('should render editable field', async () => {
+      const onChange = jest.fn();
+      const field: DropdownField = {
+        type: 'dropdown',
+        name: 'test-name',
+        envVar: 'test-envVar',
+        properties: {
+          variant: 'multi',
+          items: [
+            { value: '1', label: 'One' },
+            { value: '2', label: 'Two' },
+            { value: '3', label: 'Three' },
+          ],
+          defaultValue: ['3'],
+        },
+      };
+
+      render(<DropdownFormField field={field} value={['1', '2']} onChange={onChange} />);
+      const input = screen.getByRole('button');
+      expect(input).toHaveTextContent('Count 2 selected');
+      expect(input).not.toBeDisabled();
+
+      act(() => {
+        input.click();
+      });
+
+      const checkboxOne = screen.getByLabelText('One');
+      const checkboxThree = screen.getByLabelText('Three');
+
+      // close menu
+      act(() => {
+        checkboxOne.click();
+      });
+      expect(onChange).toHaveBeenCalledWith(['2']);
+
+      onChange.mockReset();
+
+      act(() => {
+        checkboxThree.click();
+        input.click();
+      });
+      await waitFor(() => expect(input).toHaveAttribute('aria-expanded', 'false'));
+      expect(onChange).toHaveBeenCalledWith(['1', '2', '3']);
+    });
+
+    it('should render preview field', async () => {
+      const onChange = jest.fn();
+      const field: DropdownField = {
+        type: 'dropdown',
+        name: 'test-name',
+        envVar: 'test-envVar',
+        properties: {
+          variant: 'multi',
+          items: [
+            { value: '1', label: 'One' },
+            { value: '2', label: 'Two' },
+            { value: '3', label: 'Three' },
+          ],
+          defaultValue: ['3'],
+        },
+      };
+
+      render(<DropdownFormField field={field} value={['1', '2']} onChange={onChange} isPreview />);
+      const input = screen.getByRole('button');
+      expect(input).toHaveTextContent('Count 1 selected');
+      expect(input).not.toBeDisabled();
+
+      act(() => {
+        input.click();
+      });
+
+      const checkboxOne = screen.getByLabelText('One');
+
+      // close menu
+      act(() => {
+        checkboxOne.click();
+        input.click();
+      });
+      expect(onChange).not.toHaveBeenCalled();
+      await waitFor(() => expect(input).toHaveAttribute('aria-expanded', 'false'));
+    });
+
+    it('should render default value read only field', async () => {
+      const onChange = jest.fn();
+      const field: DropdownField = {
+        type: 'dropdown',
+        name: 'test-name',
+        envVar: 'test-envVar',
+        properties: {
+          variant: 'multi',
+          items: [
+            { value: '1', label: 'One' },
+            { value: '2', label: 'Two' },
+            { value: '3', label: 'Three' },
+          ],
+          defaultValue: ['2', '3'],
+          defaultReadOnly: true,
+        },
+      };
+
+      render(<DropdownFormField field={field} value={['1', '2']} onChange={onChange} isPreview />);
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+      expect(screen.queryByText('Two, Three')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/FileFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/FileFormField.spec.tsx
new file mode 100644
index 0000000000..2985248468
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/FileFormField.spec.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { FileField } from '~/concepts/connectionTypes/types';
+import FileFormField from '~/concepts/connectionTypes/fields/FileFormField';
+
+describe('FileFormField', () => {
+  it('should render editable field', () => {
+    const onChange = jest.fn();
+    const field: FileField = {
+      type: 'file',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'default-value',
+      },
+    };
+
+    render(<FileFormField field={field} value="supplied-value" onChange={onChange} />);
+    const [, contentInput] = screen.getAllByRole('textbox');
+    expect(contentInput).toHaveValue('supplied-value');
+    expect(contentInput).not.toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Upload' })).not.toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Clear' })).not.toBeDisabled();
+
+    act(() => {
+      fireEvent.change(contentInput, { target: { value: 'new-value' } });
+    });
+    // TODO why is there no callback?
+    // expect(onChange).toHaveBeenCalledWith('new-value');
+  });
+
+  it('should render preview field', () => {
+    const onChange = jest.fn();
+    const field: FileField = {
+      type: 'file',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'default-value',
+      },
+    };
+
+    render(<FileFormField field={field} value="supplied-value" onChange={onChange} isPreview />);
+    const [, contentInput] = screen.getAllByRole('textbox');
+    expect(contentInput).toHaveValue('default-value');
+    expect(contentInput).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Upload' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Clear' })).toBeDisabled();
+
+    act(() => {
+      fireEvent.change(contentInput, { target: { value: 'new-value' } });
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('should render default value read only field', async () => {
+    const onChange = jest.fn();
+    const field: FileField = {
+      type: 'file',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'default-value',
+        defaultReadOnly: true,
+      },
+    };
+
+    render(<FileFormField field={field} value="supplied-value" onChange={onChange} />);
+    const [, contentInput] = screen.getAllByRole('textbox');
+    expect(contentInput).toHaveValue('default-value');
+    expect(contentInput).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Upload' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Clear' })).toBeDisabled();
+
+    act(() => {
+      fireEvent.change(contentInput, { target: { value: 'new-value' } });
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/HiddenFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/HiddenFormField.spec.tsx
new file mode 100644
index 0000000000..94a3f7b824
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/HiddenFormField.spec.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { HiddenField } from '~/concepts/connectionTypes/types';
+import HiddenFormField from '~/concepts/connectionTypes/fields/HiddenFormField';
+
+describe('HiddenFormField', () => {
+  it('should render editable field', () => {
+    const onChange = jest.fn();
+    const field: HiddenField = {
+      type: 'hidden',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'default-value',
+      },
+    };
+
+    render(<HiddenFormField field={field} value="supplied-value" onChange={onChange} />);
+    const input = screen.getByLabelText('test-name');
+    expect(input.getAttribute('type')).toBe('password');
+    expect(input).toHaveValue('supplied-value');
+    expect(input).not.toBeDisabled();
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'new-value' } });
+    });
+    expect(onChange).toHaveBeenCalledWith('new-value');
+  });
+
+  it('should render preview field', () => {
+    const onChange = jest.fn();
+    const field: HiddenField = {
+      type: 'hidden',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'default-value',
+      },
+    };
+
+    render(<HiddenFormField field={field} value="supplied-value" onChange={onChange} isPreview />);
+    const input = screen.getByLabelText('test-name');
+    expect(input.getAttribute('type')).toBe('password');
+    expect(input).toHaveValue('default-value');
+    expect(input).not.toBeDisabled();
+    expect(input).toHaveAttribute('aria-readonly', 'true');
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'new-value' } });
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('should render default value read only field', async () => {
+    const field: HiddenField = {
+      type: 'hidden',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'default-value',
+        defaultReadOnly: true,
+      },
+    };
+
+    render(<HiddenFormField field={field} value="supplied-value" />);
+    expect(screen.queryByRole('test-name')).not.toBeInTheDocument();
+    expect(screen.queryByText('••••••••••')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/NumericFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/NumericFormField.spec.tsx
new file mode 100644
index 0000000000..bdd6055ee5
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/NumericFormField.spec.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { NumericField } from '~/concepts/connectionTypes/types';
+import NumericFormField from '~/concepts/connectionTypes/fields/NumericFormField';
+
+describe('NumericFormField', () => {
+  it('should render editable field', () => {
+    const onChange = jest.fn();
+    const field: NumericField = {
+      type: 'numeric',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 2,
+      },
+    };
+
+    render(<NumericFormField field={field} value={3} onChange={onChange} />);
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveValue(3);
+    expect(input).not.toBeDisabled();
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 4 } });
+    });
+    expect(onChange).toHaveBeenCalledWith(4);
+  });
+
+  it('should render preview field', () => {
+    const onChange = jest.fn();
+    const field: NumericField = {
+      type: 'numeric',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 2,
+      },
+    };
+
+    render(<NumericFormField field={field} value={3} onChange={onChange} isPreview />);
+    const input = screen.getByRole('spinbutton');
+    expect(input).toHaveValue(2);
+    expect(input).not.toBeDisabled();
+    expect(input).toHaveAttribute('aria-readonly', 'true');
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 4 } });
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('should render default value read only field', async () => {
+    const field: NumericField = {
+      type: 'numeric',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 2,
+        defaultReadOnly: true,
+      },
+    };
+
+    render(<NumericFormField field={field} value={3} />);
+    expect(screen.queryByRole('spinbutton')).not.toBeInTheDocument();
+    expect(screen.queryByText(2)).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/ShortTextFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/ShortTextFormField.spec.tsx
new file mode 100644
index 0000000000..f330dda80e
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/ShortTextFormField.spec.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { ShortTextField } from '~/concepts/connectionTypes/types';
+import ShortTextFormField from '~/concepts/connectionTypes/fields/ShortTextFormField';
+
+describe('ShortTextFormField', () => {
+  it('should render editable field', () => {
+    const onChange = jest.fn();
+    const field: ShortTextField = {
+      type: 'short-text',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'default-value',
+      },
+    };
+
+    render(<ShortTextFormField field={field} value="supplied-value" onChange={onChange} />);
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveValue('supplied-value');
+    expect(input).not.toBeDisabled();
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'new-value' } });
+    });
+    expect(onChange).toHaveBeenCalledWith('new-value');
+  });
+
+  it('should render preview field', () => {
+    const onChange = jest.fn();
+    const field: ShortTextField = {
+      type: 'short-text',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'default-value',
+      },
+    };
+
+    render(
+      <ShortTextFormField field={field} value="supplied-value" onChange={onChange} isPreview />,
+    );
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveValue('default-value');
+    expect(input).not.toBeDisabled();
+    expect(input).toHaveAttribute('aria-readonly', 'true');
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'new-value' } });
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('should render default value read only field', async () => {
+    const field: ShortTextField = {
+      type: 'short-text',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'default-value',
+        defaultReadOnly: true,
+      },
+    };
+
+    render(<ShortTextFormField field={field} value="supplied-value" />);
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+    expect(screen.queryByText('default-value')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/TextFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/TextFormField.spec.tsx
new file mode 100644
index 0000000000..1ca02ccb2f
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/TextFormField.spec.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { TextField } from '~/concepts/connectionTypes/types';
+import TextFormField from '~/concepts/connectionTypes/fields/TextFormField';
+
+describe('TextFormField', () => {
+  it('should render editable field', () => {
+    const onChange = jest.fn();
+    const field: TextField = {
+      type: 'text',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'default-value',
+      },
+    };
+
+    render(<TextFormField field={field} value="supplied-value" onChange={onChange} />);
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveValue('supplied-value');
+    expect(input).not.toBeDisabled();
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'new-value' } });
+    });
+    expect(onChange).toHaveBeenCalledWith('new-value');
+  });
+
+  it('should render preview field', () => {
+    const onChange = jest.fn();
+    const field: TextField = {
+      type: 'text',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'default-value',
+      },
+    };
+
+    render(<TextFormField field={field} value="supplied-value" onChange={onChange} isPreview />);
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveValue('default-value');
+    expect(input).not.toBeDisabled();
+    expect(input).toHaveAttribute('aria-readonly', 'true');
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'new-value' } });
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('should render default value read only field', async () => {
+    const field: TextField = {
+      type: 'text',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'default-value',
+        defaultReadOnly: true,
+      },
+    };
+
+    render(<TextFormField field={field} value="supplied-value" />);
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+    expect(screen.queryByText('default-value')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/UriFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/UriFormField.spec.tsx
new file mode 100644
index 0000000000..5a9376ca4d
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/UriFormField.spec.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { UriField } from '~/concepts/connectionTypes/types';
+import UriFormField from '~/concepts/connectionTypes/fields/UriFormField';
+
+describe('UriFormField', () => {
+  it('should render editable field', () => {
+    const onChange = jest.fn();
+    const field: UriField = {
+      type: 'uri',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'http://foo.com',
+      },
+    };
+
+    render(<UriFormField field={field} value="http://bar.com" onChange={onChange} />);
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveValue('http://bar.com');
+    expect(input).not.toBeDisabled();
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'http://new.com' } });
+    });
+    expect(onChange).toHaveBeenCalledWith('http://new.com');
+  });
+
+  it('should render preview field', () => {
+    const onChange = jest.fn();
+    const field: UriField = {
+      type: 'uri',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'http://foo.com',
+      },
+    };
+
+    render(<UriFormField field={field} value="http://bar.com" onChange={onChange} isPreview />);
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveValue('http://foo.com');
+    expect(input).not.toBeDisabled();
+    expect(input).toHaveAttribute('aria-readonly', 'true');
+
+    act(() => {
+      fireEvent.change(input, { target: { value: 'http://new.com' } });
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('should render default value read only field', async () => {
+    const field: UriField = {
+      type: 'uri',
+      name: 'test-name',
+      envVar: 'test-envVar',
+      properties: {
+        defaultValue: 'http://foo.com',
+        defaultReadOnly: true,
+      },
+    };
+
+    render(<UriFormField field={field} value="http://bar.com" />);
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+    expect(screen.queryByText('http://foo.com')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/concepts/connectionTypes/types.ts b/frontend/src/concepts/connectionTypes/types.ts
index 82a5b959d5..4552db052e 100644
--- a/frontend/src/concepts/connectionTypes/types.ts
+++ b/frontend/src/concepts/connectionTypes/types.ts
@@ -7,9 +7,9 @@ export enum ConnectionTypeFieldType {
   File = 'file',
   Hidden = 'hidden',
   Numeric = 'numeric',
-  Paragraph = 'paragraph',
   Section = 'section',
   ShortText = 'short-text',
+  Text = 'text',
   URI = 'uri',
 }
 
@@ -20,8 +20,8 @@ export const connectionTypeDataFields = [
   ConnectionTypeFieldType.File,
   ConnectionTypeFieldType.Hidden,
   ConnectionTypeFieldType.Numeric,
-  ConnectionTypeFieldType.Paragraph,
   ConnectionTypeFieldType.ShortText,
+  ConnectionTypeFieldType.Text,
   ConnectionTypeFieldType.URI,
 ];
 
@@ -31,47 +31,40 @@ type Field<T extends ConnectionTypeFieldType | string> = {
   description?: string;
 };
 
-type DataField<T extends ConnectionTypeFieldType | string, P> = Field<T> & {
+// P default to an empty set of properties
+// eslint-disable-next-line @typescript-eslint/ban-types
+type DataField<T extends ConnectionTypeFieldType | string, V = string, P = {}> = Field<T> & {
   envVar: string;
   required?: boolean;
-  properties: P;
-};
-
-type TextProps = {
-  defaultValue?: string;
-  defaultReadOnly?: boolean;
+  properties: P & {
+    defaultValue?: V;
+    defaultReadOnly?: boolean;
+  };
 };
 
 export type SectionField = Field<ConnectionTypeFieldType.Section | 'section'>;
 
-export type HiddenField = DataField<ConnectionTypeFieldType.Hidden | 'hidden', TextProps>;
-export type ParagraphField = DataField<ConnectionTypeFieldType.Paragraph | 'paragraph', TextProps>;
-export type FileField = DataField<ConnectionTypeFieldType.File | 'file', TextProps>;
-export type ShortTextField = DataField<ConnectionTypeFieldType.ShortText | 'short-text', TextProps>;
-export type UriField = DataField<ConnectionTypeFieldType.URI | 'uri', TextProps>;
+export type HiddenField = DataField<ConnectionTypeFieldType.Hidden | 'hidden'>;
+export type FileField = DataField<ConnectionTypeFieldType.File | 'file'>;
+export type ShortTextField = DataField<ConnectionTypeFieldType.ShortText | 'short-text'>;
+export type TextField = DataField<ConnectionTypeFieldType.Text | 'text'>;
+export type UriField = DataField<ConnectionTypeFieldType.URI | 'uri'>;
 export type BooleanField = DataField<
   ConnectionTypeFieldType.Boolean | 'boolean',
+  boolean,
   {
     label?: string;
-    defaultValue?: boolean;
-    defaultReadOnly?: boolean;
   }
 >;
 export type DropdownField = DataField<
   ConnectionTypeFieldType.Dropdown | 'dropdown',
+  string[],
   {
-    variant: 'single' | 'multi';
-    items: { label: string; value: string }[];
-    defaultValue?: string[];
-  }
->;
-export type NumericField = DataField<
-  ConnectionTypeFieldType.Numeric | 'numeric',
-  {
-    defaultValue?: number;
-    defaultReadOnly?: boolean;
+    variant?: 'single' | 'multi';
+    items?: { label: string; value: string }[];
   }
 >;
+export type NumericField = DataField<ConnectionTypeFieldType.Numeric | 'numeric', number>;
 
 export type ConnectionTypeField =
   | BooleanField
@@ -79,11 +72,13 @@ export type ConnectionTypeField =
   | FileField
   | HiddenField
   | NumericField
-  | ParagraphField
+  | TextField
   | SectionField
   | ShortTextField
   | UriField;
 
+export type ConnectionTypeDataField = Exclude<ConnectionTypeField, SectionField>;
+
 export type ConnectionTypeConfigMap = K8sResourceCommon & {
   metadata: {
     name: string;
diff --git a/frontend/src/concepts/connectionTypes/utils.ts b/frontend/src/concepts/connectionTypes/utils.ts
index dac5355724..6ed8b7b535 100644
--- a/frontend/src/concepts/connectionTypes/utils.ts
+++ b/frontend/src/concepts/connectionTypes/utils.ts
@@ -1,6 +1,8 @@
 import {
   ConnectionTypeConfigMap,
   ConnectionTypeConfigMapObj,
+  ConnectionTypeDataField,
+  ConnectionTypeFieldType,
 } from '~/concepts/connectionTypes/types';
 
 export const toConnectionTypeConfigMapObj = (
@@ -20,3 +22,27 @@ export const toConnectionTypeConfigMap = (
     ? { fields: obj.data.fields ? JSON.stringify(obj.data.fields) : undefined }
     : undefined,
 });
+
+export const defaultValueToString = <T extends ConnectionTypeDataField>(
+  field: T,
+): string | undefined => {
+  const { defaultValue } = field.properties;
+  switch (field.type) {
+    case ConnectionTypeFieldType.Hidden:
+      if (defaultValue) {
+        return '••••••••••';
+      }
+      break;
+    case ConnectionTypeFieldType.Dropdown:
+      if (Array.isArray(defaultValue)) {
+        const values =
+          field.properties.variant === 'single' ? defaultValue.slice(0, 1) : defaultValue;
+        const items = values
+          .map((v) => field.properties.items?.find(({ value }) => value === v)?.label)
+          .filter((i) => i != null);
+        return items.length > 0 ? items.join(', ') : undefined;
+      }
+      break;
+  }
+  return defaultValue == null ? defaultValue : `${defaultValue}`;
+};
diff --git a/frontend/src/concepts/k8s/NameDescriptionField.tsx b/frontend/src/concepts/k8s/NameDescriptionField.tsx
index 3514e74d56..e8affd3f58 100644
--- a/frontend/src/concepts/k8s/NameDescriptionField.tsx
+++ b/frontend/src/concepts/k8s/NameDescriptionField.tsx
@@ -18,7 +18,7 @@ type NameDescriptionFieldProps = {
   nameFieldId: string;
   descriptionFieldId: string;
   data: NameDescType;
-  setData: (data: NameDescType) => void;
+  setData?: (data: NameDescType) => void;
   autoFocusName?: boolean;
   showK8sName?: boolean;
   disableK8sName?: boolean;
@@ -60,16 +60,21 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
       <StackItem>
         <FormGroup label="Name" isRequired fieldId={nameFieldId}>
           <TextInput
+            aria-readonly={!setData}
             isRequired
             ref={autoSelectNameRef}
             id={nameFieldId}
             data-testid={nameFieldId}
             name={nameFieldId}
             value={data.name}
-            onChange={(_e, value) => {
-              setData({ ...data, name: value });
-              onNameChange?.(value);
-            }}
+            onChange={
+              setData
+                ? (_e, value) => {
+                    setData({ ...data, name: value });
+                    onNameChange?.(value);
+                  }
+                : undefined
+            }
             maxLength={maxLength}
           />
 
@@ -105,15 +110,20 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
             fieldId={`resource-${nameFieldId}`}
           >
             <TextInput
+              aria-readonly={!setData}
               isRequired
               isDisabled={disableK8sName}
               id={`resource-${nameFieldId}`}
               name={`resource-${nameFieldId}`}
               data-testid={`resource-${nameFieldId}`}
               value={data.k8sName ?? k8sName}
-              onChange={(e, value) => {
-                setData({ ...data, k8sName: value });
-              }}
+              onChange={
+                setData
+                  ? (e, value) => {
+                      setData({ ...data, k8sName: value });
+                    }
+                  : undefined
+              }
               validated={!isValidK8sName(data.k8sName) ? 'error' : undefined}
             />
             {!disableK8sName && (
@@ -137,12 +147,13 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
       <StackItem>
         <FormGroup label="Description" fieldId={descriptionFieldId}>
           <TextArea
+            aria-readonly={!setData}
             resizeOrientation="vertical"
             id={descriptionFieldId}
             data-testid={descriptionFieldId}
             name={descriptionFieldId}
             value={data.description}
-            onChange={(e, description) => setData({ ...data, description })}
+            onChange={setData ? (e, description) => setData({ ...data, description }) : undefined}
           />
         </FormGroup>
       </StackItem>
diff --git a/frontend/src/concepts/pipelines/content/configurePipelinesServer/ConfigurePipelinesServerModal.scss b/frontend/src/concepts/pipelines/content/configurePipelinesServer/ConfigurePipelinesServerModal.scss
deleted file mode 100644
index 6a544f6de2..0000000000
--- a/frontend/src/concepts/pipelines/content/configurePipelinesServer/ConfigurePipelinesServerModal.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// targeting specific form section title elements to override --pf-v5-c-form__section-title--FontSize, --pf-v5-c-form__section-title--FontWeight
-.form-subtitle-text {
-  color: var(--pf-v5-global--Color--200);
-  font-size: initial;
-  font-weight: initial;
-}
diff --git a/frontend/src/concepts/pipelines/content/configurePipelinesServer/ConfigurePipelinesServerModal.tsx b/frontend/src/concepts/pipelines/content/configurePipelinesServer/ConfigurePipelinesServerModal.tsx
index 4a16b8725c..4242f596a5 100644
--- a/frontend/src/concepts/pipelines/content/configurePipelinesServer/ConfigurePipelinesServerModal.tsx
+++ b/frontend/src/concepts/pipelines/content/configurePipelinesServer/ConfigurePipelinesServerModal.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Alert, Form, Modal, Stack, StackItem } from '@patternfly/react-core';
-import './ConfigurePipelinesServerModal.scss';
 import { usePipelinesAPI } from '~/concepts/pipelines/context';
 import { createPipelinesCR, deleteSecret } from '~/api';
 import useDataConnections from '~/pages/projects/screens/detail/data-connections/useDataConnections';
diff --git a/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx b/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx
index 408eba0165..b940937fc1 100644
--- a/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx
+++ b/frontend/src/concepts/pipelines/content/configurePipelinesServer/ObjectStorageSection.tsx
@@ -1,9 +1,6 @@
 import React from 'react';
 import {
-  FormSection,
-  Title,
   FormGroup,
-  Text,
   TextInput,
   InputGroup,
   Tooltip,
@@ -14,9 +11,9 @@ import {
 import { DataConnection } from '~/pages/projects/types';
 import { AwsKeys, PIPELINE_AWS_FIELDS } from '~/pages/projects/dataConnections/const';
 import { FieldListField } from '~/components/FieldList';
+import FormSection from '~/components/pf-overrides/FormSection';
 import { PipelineDropdown } from './PipelineDropdown';
 import { PipelineServerConfigType } from './types';
-import './ConfigurePipelinesServerModal.scss';
 
 export type FieldOptions = {
   key: string;
@@ -49,14 +46,8 @@ export const ObjectStorageSection = ({
 
   return (
     <FormSection
-      title={
-        <>
-          <Title headingLevel="h2">Object storage connection</Title>
-          <Text component="p" className="form-subtitle-text">
-            To store pipeline artifacts. Must be S3 compatible
-          </Text>
-        </>
-      }
+      title="Object storage connection"
+      description="To store pipeline artifacts. Must be S3 compatible"
     >
       {PIPELINE_AWS_FIELDS.map((field) =>
         field.key === 'AWS_ACCESS_KEY_ID' ? (
diff --git a/frontend/src/concepts/pipelines/content/configurePipelinesServer/PipelinesDatabaseSection.tsx b/frontend/src/concepts/pipelines/content/configurePipelinesServer/PipelinesDatabaseSection.tsx
index cc69a00c53..122c08c47d 100644
--- a/frontend/src/concepts/pipelines/content/configurePipelinesServer/PipelinesDatabaseSection.tsx
+++ b/frontend/src/concepts/pipelines/content/configurePipelinesServer/PipelinesDatabaseSection.tsx
@@ -1,15 +1,8 @@
-import {
-  FormSection,
-  Title,
-  FormGroup,
-  ExpandableSection,
-  Radio,
-  Text,
-} from '@patternfly/react-core';
 import React from 'react';
+import { FormGroup, ExpandableSection, Radio } from '@patternfly/react-core';
+import FormSection from '~/components/pf-overrides/FormSection';
 import DatabaseConnectionField from './DatabaseConnectionField';
 import { PipelineServerConfigType } from './types';
-import './ConfigurePipelinesServerModal.scss';
 
 type PipelinesDatabaseSectionProps = {
   setConfig: (config: PipelineServerConfigType) => void;
@@ -24,15 +17,8 @@ export const PipelinesDatabaseSection = ({
 
   return (
     <FormSection
-      title={
-        <>
-          <Title headingLevel="h2">Database</Title>
-          <Text component="p" className="form-subtitle-text">
-            This is where your pipeline data is stored. Use the default database to store data on
-            your cluster, or connect to an external database.
-          </Text>
-        </>
-      }
+      title="Database"
+      description="This is where your pipeline data is stored. Use the default database to store data on your cluster, or connect to an external database."
     >
       <FormGroup hasNoPaddingTop isStack>
         <ExpandableSection
diff --git a/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx b/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
index bfb563fb95..99d41362ee 100644
--- a/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
+++ b/frontend/src/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
@@ -8,7 +8,6 @@ import {
   Button,
   Form,
   FormGroup,
-  FormSection,
   HelperText,
   HelperTextItem,
   InputGroupItem,
@@ -19,14 +18,13 @@ import {
   SplitItem,
   Stack,
   StackItem,
-  Text,
   TextArea,
   TextInput,
-  Title,
 } from '@patternfly/react-core';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { useParams, useNavigate } from 'react-router';
 import { Link } from 'react-router-dom';
+import FormSection from '~/components/pf-overrides/FormSection';
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import { ModelRegistryContext } from '~/concepts/modelRegistry/context/ModelRegistryContext';
 import { useAppSelector } from '~/redux/hooks';
@@ -116,16 +114,8 @@ const RegisterModel: React.FC = () => {
             </StackItem>
             <StackItem>
               <FormSection
-                title={
-                  <>
-                    <Title headingLevel="h2" size="md">
-                      Model details
-                    </Title>
-                    <Text component="p" className="form-subtitle-text">
-                      Provide general details that apply to all versions of this model.
-                    </Text>
-                  </>
-                }
+                title="Model details"
+                description="Provide general details that apply to all versions of this model."
               >
                 <FormGroup label="Model name" isRequired fieldId="model-name">
                   <TextInput
@@ -148,14 +138,8 @@ const RegisterModel: React.FC = () => {
                 </FormGroup>
               </FormSection>
               <FormSection
-                title={
-                  <>
-                    <Title headingLevel="h2">Version details</Title>
-                    <Text component="p" className="form-subtitle-text">
-                      Configure details for the first version of this model.
-                    </Text>
-                  </>
-                }
+                title="Version details"
+                description="Configure details for the first version of this model."
               >
                 <FormGroup label="Version name" isRequired fieldId="version-name">
                   <TextInput
@@ -201,15 +185,8 @@ const RegisterModel: React.FC = () => {
                 </FormGroup>
               </FormSection>
               <FormSection
-                title={
-                  <>
-                    <Title headingLevel="h2">Model location</Title>
-                    <Text component="p" className="form-subtitle-text">
-                      Specify the model location by providing either the object storage details or
-                      the URI.
-                    </Text>
-                  </>
-                }
+                title="Model location"
+                description="Specify the model location by providing either the object storage details or the URI."
               >
                 <Radio
                   isChecked={modelLocationType === ModelLocationType.ObjectStorage}
diff --git a/frontend/src/pages/modelRegistrySettings/CreateModal.scss b/frontend/src/pages/modelRegistrySettings/CreateModal.scss
deleted file mode 100644
index 56ae84e93e..0000000000
--- a/frontend/src/pages/modelRegistrySettings/CreateModal.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// targeting specific form section title elements to override --pf-v5-c-form__section-title--FontSize, --pf-v5-c-form__section-title--FontWeight
-.form-subtitle-text {
-    color: var(--pf-v5-global--Color--200);
-    font-size: initial;
-    font-weight: initial;
-}
\ No newline at end of file
diff --git a/frontend/src/pages/modelRegistrySettings/CreateModal.tsx b/frontend/src/pages/modelRegistrySettings/CreateModal.tsx
index e1affd9004..2b06ad574f 100644
--- a/frontend/src/pages/modelRegistrySettings/CreateModal.tsx
+++ b/frontend/src/pages/modelRegistrySettings/CreateModal.tsx
@@ -3,13 +3,10 @@ import {
   Button,
   Form,
   FormGroup,
-  FormSection,
   HelperText,
   HelperTextItem,
   Modal,
-  Text,
   TextInput,
-  Title,
 } from '@patternfly/react-core';
 import PasswordInput from '~/components/PasswordInput';
 import DashboardModalFooter from '~/concepts/dashboard/DashboardModalFooter';
@@ -18,9 +15,9 @@ import { MODEL_REGISTRY_DEFAULT_NAMESPACE } from '~/concepts/modelRegistry/const
 import { ModelRegistryModel } from '~/api';
 import { createModelRegistryBackend } from '~/services/modelRegistrySettingsService';
 import { isValidK8sName, translateDisplayNameForK8s } from '~/concepts/k8s/utils';
-import './CreateModal.scss';
 import NameDescriptionField from '~/concepts/k8s/NameDescriptionField';
 import { NameDescType } from '~/pages/projects/types';
+import FormSection from '~/components/pf-overrides/FormSection';
 
 type CreateModalProps = {
   isOpen: boolean;
@@ -160,14 +157,8 @@ const CreateModal: React.FC<CreateModalProps> = ({ isOpen, onClose, refresh }) =
           }}
         />
         <FormSection
-          title={
-            <>
-              <Title headingLevel="h2">Database</Title>
-              <Text component="p" className="form-subtitle-text">
-                This is where model data is stored. You need to connect to an external database.
-              </Text>
-            </>
-          }
+          title="Database"
+          description="This is where model data is stored. You need to connect to an external database."
         >
           <FormGroup label="Host" isRequired fieldId="mr-host">
             <TextInput