diff --git a/frontend/src/__mocks__/mockConnectionType.ts b/frontend/src/__mocks__/mockConnectionType.ts
index 988f9ae23e..e713e10fc7 100644
--- a/frontend/src/__mocks__/mockConnectionType.ts
+++ b/frontend/src/__mocks__/mockConnectionType.ts
@@ -14,6 +14,7 @@ type MockConnectionTypeConfigMap = {
   username?: string;
   preInstalled?: boolean;
   fields?: ConnectionTypeField[];
+  category?: string[];
 };
 
 export const mockConnectionTypeConfigMap = (
@@ -60,6 +61,7 @@ export const mockConnectionTypeConfigMapObj = ({
       : undefined),
   },
   data: {
+    category: 'category' in rest ? rest.category : ['Database', 'Testing'],
     fields: 'fields' in rest ? rest.fields : mockFields,
   },
 });
diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/connectionTypes/createConnectionType.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/connectionTypes/createConnectionType.cy.ts
index 1a1bef53c2..b4c2495048 100644
--- a/frontend/src/__tests__/cypress/cypress/tests/mocked/connectionTypes/createConnectionType.cy.ts
+++ b/frontend/src/__tests__/cypress/cypress/tests/mocked/connectionTypes/createConnectionType.cy.ts
@@ -89,14 +89,14 @@ describe('duplicate', () => {
     // Row 1 - Short text field
     const row1 = createConnectionTypePage.getFieldsTableRow(1);
     row1.findName().should('contain.text', 'Short text 1');
-    row1.findType().should('have.text', 'Short text');
+    row1.findType().should('have.text', 'Text - Short');
     row1.findDefault().should('have.text', '-');
     row1.findRequired().not('be.checked');
 
     // Row 2 - Short text field
     const row2 = createConnectionTypePage.getFieldsTableRow(2);
     row2.findName().should('contain.text', 'Short text 2');
-    row2.findType().should('have.text', 'Short text');
+    row2.findType().should('have.text', 'Text - Short');
     row2.findDefault().should('have.text', 'This is the default value');
     row2.findRequired().should('be.checked');
   });
diff --git a/frontend/src/concepts/connectionTypes/CategoryLabel.tsx b/frontend/src/concepts/connectionTypes/CategoryLabel.tsx
new file mode 100644
index 0000000000..1ec197c37d
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/CategoryLabel.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Label } from '@patternfly/react-core';
+
+type Props = {
+  category: string;
+};
+
+const CategoryLabel: React.FC<Props> = ({ category }) => <Label color="purple">{category}</Label>;
+
+export default CategoryLabel;
diff --git a/frontend/src/concepts/connectionTypes/ConnectionTypePreview.tsx b/frontend/src/concepts/connectionTypes/ConnectionTypePreview.tsx
index c189395872..dd65e03a20 100644
--- a/frontend/src/concepts/connectionTypes/ConnectionTypePreview.tsx
+++ b/frontend/src/concepts/connectionTypes/ConnectionTypePreview.tsx
@@ -1,44 +1,113 @@
 import * as React from 'react';
-import { Divider, Form, FormGroup, FormSection, Title } from '@patternfly/react-core';
-import FormGroupText from '~/components/FormGroupText';
+import {
+  Button,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Form,
+  FormGroup,
+  FormSection,
+  HelperText,
+  HelperTextItem,
+  LabelGroup,
+  MenuToggleStatus,
+  Popover,
+  Title,
+} from '@patternfly/react-core';
 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 { getDescriptionFromK8sResource } from '~/concepts/k8s/utils';
 import UnspecifiedValue from '~/concepts/connectionTypes/fields/UnspecifiedValue';
+import SimpleSelect from '~/components/SimpleSelect';
+import CategoryLabel from '~/concepts/connectionTypes/CategoryLabel';
+import TruncatedText from '~/components/TruncatedText';
 
 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>
+// TODO consider refactoring this form for reuse when creating connection type instances
+const ConnectionTypePreview: React.FC<Props> = ({ obj }) => {
+  const connectionTypeName = obj && obj.metadata.annotations?.['openshift.io/display-name'];
+  const connectionTypeDescription = (obj && getDescriptionFromK8sResource(obj)) ?? undefined;
+  return (
+    <Form>
+      <Title headingLevel="h1">Add connection</Title>
+      <FormGroup label="Connection type" fieldId="connection-type" isRequired>
+        <SimpleSelect
+          id="connection-type"
+          isFullWidth
+          toggleLabel={connectionTypeName || 'Unspecified'}
+          isDisabled={!!connectionTypeName}
+          toggleProps={connectionTypeName ? undefined : { status: MenuToggleStatus.danger }}
+          onChange={() => undefined}
+        />
+        <HelperText>
+          {connectionTypeDescription ? (
+            <HelperTextItem>
+              <TruncatedText maxLines={2} content={connectionTypeDescription} />
+            </HelperTextItem>
+          ) : undefined}
+          <HelperTextItem>
+            <Popover
+              headerContent="Connection type details"
+              bodyContent={
+                <DescriptionList>
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>Connection type name</DescriptionListTerm>
+                    <DescriptionListDescription>
+                      {connectionTypeName || <UnspecifiedValue />}
+                    </DescriptionListDescription>
+                  </DescriptionListGroup>
+                  {connectionTypeDescription ? (
+                    <DescriptionListGroup>
+                      <DescriptionListTerm>Connection type description</DescriptionListTerm>
+                      <DescriptionListDescription>
+                        {connectionTypeDescription || <UnspecifiedValue />}
+                      </DescriptionListDescription>
+                    </DescriptionListGroup>
+                  ) : undefined}
+                  <DescriptionListGroup>
+                    <DescriptionListTerm>Category</DescriptionListTerm>
+                    <DescriptionListDescription>
+                      {obj?.data?.category?.length ? (
+                        <LabelGroup>
+                          {obj.data.category.map((category) => (
+                            <CategoryLabel key={category} category={category} />
+                          ))}
+                        </LabelGroup>
+                      ) : (
+                        <UnspecifiedValue />
+                      )}
+                    </DescriptionListDescription>
+                  </DescriptionListGroup>
+                </DescriptionList>
+              }
+            >
+              <Button variant="link" isInline>
+                View connection type details
+              </Button>
+            </Popover>
+          </HelperTextItem>
+        </HelperText>
       </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>
-);
+      <FormSection title="Connection details" style={{ marginTop: 0 }}>
+        <NameDescriptionField
+          nameFieldId="connection-details-name"
+          descriptionFieldId="connection-details-description"
+          nameFieldLabel="Connection name"
+          descriptionFieldLabel="Connection 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
index 38d00e074b..b2f990ce7e 100644
--- a/frontend/src/concepts/connectionTypes/ConnectionTypePreviewDrawer.tsx
+++ b/frontend/src/concepts/connectionTypes/ConnectionTypePreviewDrawer.tsx
@@ -7,10 +7,10 @@ import {
   DrawerCloseButton,
   DrawerContent,
   Title,
-  DrawerPanelBody,
   Card,
   CardBody,
-  Text,
+  Divider,
+  DrawerContentBody,
 } from '@patternfly/react-core';
 import ConnectionTypePreview from '~/concepts/connectionTypes/ConnectionTypePreview';
 import { ConnectionTypeConfigMapObj } from '~/concepts/connectionTypes/types';
@@ -24,44 +24,39 @@ type Props = {
 
 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>
+    <DrawerPanelContent isResizable>
+      <DrawerContentBody>
+        <DrawerHead hasNoPadding>
+          <Title headingLevel="h2" size="xl">
+            Preview connection type
+          </Title>
+          <DrawerActions>
+            <DrawerCloseButton onClick={() => onClose()} />
+          </DrawerActions>
+        </DrawerHead>
         <div
           style={{
-            paddingBottom: 'var(--pf-v5-global--spacer--lg)',
+            fontSize: 'var(--pf-v5-global--FontSize--sm)',
+            paddingTop: 'var(--pf-v5-global--spacer--sm)',
           }}
         >
-          <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>
+          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.
         </div>
-      </DrawerPanelBody>
+      </DrawerContentBody>
+      <Divider />
+      <DrawerContentBody
+        style={{
+          backgroundColor: 'var(--pf-v5-global--BackgroundColor--200)',
+          overflow: 'auto',
+        }}
+      >
+        <Card isFlat isRounded>
+          <CardBody>
+            <ConnectionTypePreview obj={obj} />
+          </CardBody>
+        </Card>
+      </DrawerContentBody>
     </DrawerPanelContent>
   );
 
diff --git a/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts b/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts
index 5ff9f247dd..7be6062f76 100644
--- a/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts
+++ b/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts
@@ -1,5 +1,10 @@
 import { mockConnectionTypeConfigMapObj } from '~/__mocks__/mockConnectionType';
-import { DropdownField, HiddenField, TextField, UriField } from '~/concepts/connectionTypes/types';
+import {
+  ConnectionTypeFieldType,
+  DropdownField,
+  HiddenField,
+  TextField,
+} from '~/concepts/connectionTypes/types';
 import {
   defaultValueToString,
   fieldNameToEnvVar,
@@ -12,13 +17,15 @@ describe('toConnectionTypeConfigMap / toConnectionTypeConfigMapObj', () => {
   it('should serialize / deserialize connection type fields', () => {
     const ct = mockConnectionTypeConfigMapObj({});
     const configMap = toConnectionTypeConfigMap(ct);
+    expect(typeof configMap.data?.category).toBe('string');
     expect(typeof configMap.data?.fields).toBe('string');
     expect(ct).toEqual(toConnectionTypeConfigMapObj(toConnectionTypeConfigMap(ct)));
   });
 
   it('should serialize / deserialize connection type with missing fields', () => {
-    const ct = mockConnectionTypeConfigMapObj({ fields: undefined });
+    const ct = mockConnectionTypeConfigMapObj({ fields: undefined, category: undefined });
     const configMap = toConnectionTypeConfigMap(ct);
+    expect(configMap.data?.category).toBeUndefined();
     expect(configMap.data?.fields).toBeUndefined();
     expect(ct).toEqual(toConnectionTypeConfigMapObj(configMap));
   });
@@ -83,7 +90,7 @@ describe('defaultValueToString', () => {
           defaultValue: 'test value',
         },
       } satisfies HiddenField),
-    ).toBe('••••••••••');
+    ).toBe('test value');
   });
 
   it('should return single variant dropdown value as string', () => {
@@ -133,7 +140,7 @@ describe('defaultValueToString', () => {
           defaultValue: ['2'],
         },
       } satisfies DropdownField),
-    ).toBe('Two');
+    ).toBe('Two (Value: 2)');
     expect(
       defaultValueToString({
         type: 'dropdown',
@@ -150,7 +157,7 @@ describe('defaultValueToString', () => {
           defaultValue: ['2', '3'],
         },
       } satisfies DropdownField),
-    ).toBe('Two');
+    ).toBe('Two (Value: 2)');
   });
 
   it('should return multi variant dropdown value as string', () => {
@@ -200,30 +207,22 @@ describe('defaultValueToString', () => {
           defaultValue: ['2', '3'],
         },
       } satisfies DropdownField),
-    ).toBe('Two, Three');
+    ).toBe('Two (Value: 2), Three (Value: 3)');
   });
 });
 
 describe('fieldTypeToString', () => {
   it('should return default value as string', () => {
-    expect(
-      fieldTypeToString({
-        type: 'text',
-        name: 'test',
-        envVar: 'test',
-        properties: {},
-      } satisfies TextField),
-    ).toBe('Text');
-    expect(
-      fieldTypeToString({
-        type: 'uri',
-        name: 'test',
-        envVar: 'test',
-        properties: {
-          defaultValue: '',
-        },
-      } satisfies UriField),
-    ).toBe('URI');
+    expect(fieldTypeToString('text')).toBe('Text - Long');
+    expect(fieldTypeToString(ConnectionTypeFieldType.Text)).toBe('Text - Long');
+    expect(fieldTypeToString('short-text')).toBe('Text - Short');
+    expect(fieldTypeToString(ConnectionTypeFieldType.ShortText)).toBe('Text - Short');
+    expect(fieldTypeToString('hidden')).toBe('Text - Hidden');
+    expect(fieldTypeToString(ConnectionTypeFieldType.Hidden)).toBe('Text - Hidden');
+    expect(fieldTypeToString('uri')).toBe('URI');
+    expect(fieldTypeToString(ConnectionTypeFieldType.URI)).toBe('URI');
+    expect(fieldTypeToString('numeric')).toBe('Numeric');
+    expect(fieldTypeToString(ConnectionTypeFieldType.Numeric)).toBe('Numeric');
   });
 });
 
diff --git a/frontend/src/concepts/connectionTypes/createConnectionTypeUtils.ts b/frontend/src/concepts/connectionTypes/createConnectionTypeUtils.ts
index 06fd1320ed..5c55875c98 100644
--- a/frontend/src/concepts/connectionTypes/createConnectionTypeUtils.ts
+++ b/frontend/src/concepts/connectionTypes/createConnectionTypeUtils.ts
@@ -9,6 +9,7 @@ export const extractConnectionTypeFromMap = (
   enabled: boolean;
   username: string;
   fields: ConnectionTypeField[];
+  category: string[];
 } => ({
   k8sName: configMap?.metadata.name ?? '',
   name: configMap?.metadata.annotations?.['openshift.io/display-name'] ?? '',
@@ -16,6 +17,7 @@ export const extractConnectionTypeFromMap = (
   enabled: configMap?.metadata.annotations?.['opendatahub.io/enabled'] === 'true',
   username: configMap?.metadata.annotations?.['opendatahub.io/username'] ?? '',
   fields: configMap?.data?.fields ?? [],
+  category: configMap?.data?.category ?? [],
 });
 
 export const createConnectionTypeObj = (
@@ -25,6 +27,7 @@ export const createConnectionTypeObj = (
   enabled: boolean,
   username: string,
   fields: ConnectionTypeField[],
+  category: string[],
 ): ConnectionTypeConfigMapObj => ({
   kind: 'ConfigMap',
   apiVersion: 'v1',
@@ -39,6 +42,7 @@ export const createConnectionTypeObj = (
     labels: { 'opendatahub.io/dashboard': 'true', 'opendatahub.io/connection-type': 'true' },
   },
   data: {
+    category,
     fields,
   },
 });
diff --git a/frontend/src/concepts/connectionTypes/fields/BooleanFormField.tsx b/frontend/src/concepts/connectionTypes/fields/BooleanFormField.tsx
index 28875c0ace..c2b7a1210a 100644
--- a/frontend/src/concepts/connectionTypes/fields/BooleanFormField.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/BooleanFormField.tsx
@@ -12,13 +12,23 @@ const BooleanFormField: React.FC<FieldProps<BooleanField>> = ({
   'data-testid': dataTestId,
 }) => {
   const isPreview = mode === 'preview';
+
+  // ensure the value is not undefined
+  React.useEffect(() => {
+    if (value == null) {
+      onChange?.(field.properties.defaultValue ?? false);
+    }
+    // do not run when callback changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
   return (
     <Checkbox
       aria-readonly={isPreview}
       id={id}
       name={id}
       data-testid={dataTestId}
-      label={field.properties.label}
+      label={mode === 'default' ? 'Checkbox is selected' : field.properties.label}
       aria-label={field.properties.label || field.name}
       isDisabled={field.properties.defaultReadOnly}
       isChecked={
diff --git a/frontend/src/concepts/connectionTypes/fields/ConnectionTypeFormFields.tsx b/frontend/src/concepts/connectionTypes/fields/ConnectionTypeFormFields.tsx
index a05ba90d06..d285a18977 100644
--- a/frontend/src/concepts/connectionTypes/fields/ConnectionTypeFormFields.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/ConnectionTypeFormFields.tsx
@@ -1,4 +1,3 @@
-import { FormSection } from '@patternfly/react-core';
 import * as React from 'react';
 import ConnectionTypeDataFormField from '~/concepts/connectionTypes/fields/ConnectionTypeDataFormField';
 import DataFormFieldGroup from '~/concepts/connectionTypes/fields/DataFormFieldGroup';
@@ -56,11 +55,11 @@ const ConnectionTypeFormFields: React.FC<Props> = ({ fields, isPreview, onChange
             {renderDataFields(fieldGroup.fields)}
           </SectionFormField>
         ) : (
-          <FormSection key="ungrouped-fields">{renderDataFields(fieldGroup.fields)}</FormSection>
+          <React.Fragment key={i}>{renderDataFields(fieldGroup.fields)}</React.Fragment>
         ),
       )}
     </>
   );
 };
 
-export default ConnectionTypeFormFields;
+export default React.memo(ConnectionTypeFormFields);
diff --git a/frontend/src/concepts/connectionTypes/fields/DataFormFieldGroup.tsx b/frontend/src/concepts/connectionTypes/fields/DataFormFieldGroup.tsx
index 7ab2dd984e..022efaba0f 100644
--- a/frontend/src/concepts/connectionTypes/fields/DataFormFieldGroup.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/DataFormFieldGroup.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
-import { FormGroup, GenerateId } from '@patternfly/react-core';
+import { FormGroup, GenerateId, Popover } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { ConnectionTypeDataField } from '~/concepts/connectionTypes/types';
+import DashboardPopupIconButton from '~/concepts/dashboard/DashboardPopupIconButton';
 
 type Props = {
   field: ConnectionTypeDataField;
@@ -16,6 +18,16 @@ const DataFormFieldGroup: React.FC<Props> = ({ field, children }): React.ReactNo
         data-testid={`field ${field.type} ${field.envVar}`}
         // do not mark read only fields as required
         isRequired={field.required && !field.properties.defaultReadOnly}
+        labelIcon={
+          field.description ? (
+            <Popover bodyContent={field.description}>
+              <DashboardPopupIconButton
+                icon={<OutlinedQuestionCircleIcon />}
+                aria-label="More info"
+              />
+            </Popover>
+          ) : undefined
+        }
       >
         {children(id)}
       </FormGroup>
diff --git a/frontend/src/concepts/connectionTypes/fields/DefaultValueTextRenderer.tsx b/frontend/src/concepts/connectionTypes/fields/DefaultValueTextRenderer.tsx
index 7ffdc17d25..0800ef6e4e 100644
--- a/frontend/src/concepts/connectionTypes/fields/DefaultValueTextRenderer.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/DefaultValueTextRenderer.tsx
@@ -10,11 +10,12 @@ type Props = {
   field: ConnectionTypeDataField;
   mode?: FieldMode;
   children: React.ReactNode;
+  component?: 'div' | 'pre';
 };
 
-const DefaultValueTextRenderer: React.FC<Props> = ({ id, field, mode, children }) =>
+const DefaultValueTextRenderer: React.FC<Props> = ({ id, field, mode, children, component }) =>
   mode !== 'default' && field.properties.defaultReadOnly ? (
-    <FormGroupText id={id}>
+    <FormGroupText id={id} component={component}>
       {defaultValueToString(field) ?? (mode === 'preview' ? <UnspecifiedValue /> : '-')}
     </FormGroupText>
   ) : (
diff --git a/frontend/src/concepts/connectionTypes/fields/DropdownFormField.tsx b/frontend/src/concepts/connectionTypes/fields/DropdownFormField.tsx
index c9e1de730f..f720dc985b 100644
--- a/frontend/src/concepts/connectionTypes/fields/DropdownFormField.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/DropdownFormField.tsx
@@ -52,7 +52,7 @@ const DropdownFormField: React.FC<FieldProps<DropdownField>> = ({
           >
             {isMulti ? (
               <>
-                Count{' '}
+                Select {field.name}{' '}
                 <Badge>
                   {(isPreview ? field.properties.defaultValue?.length : value?.length) ?? 0}{' '}
                   selected
@@ -64,7 +64,7 @@ const DropdownFormField: React.FC<FieldProps<DropdownField>> = ({
                     (i) => i.value === field.properties.defaultValue?.[0],
                   )?.label
                 : field.properties.items?.find((i) => value?.includes(i.value))?.label) ||
-              'Select a value'
+              `Select ${field.name}`
             )}
           </MenuToggle>
         )}
@@ -76,6 +76,7 @@ const DropdownFormField: React.FC<FieldProps<DropdownField>> = ({
               key={i.value}
               hasCheckbox={isMulti}
               selected={selected?.includes(i.value)}
+              description={`Value: ${i.value}`}
             >
               {i.label}
             </SelectOption>
diff --git a/frontend/src/concepts/connectionTypes/fields/HiddenFormField.tsx b/frontend/src/concepts/connectionTypes/fields/HiddenFormField.tsx
index 8e1ea1ce87..4b56519eb9 100644
--- a/frontend/src/concepts/connectionTypes/fields/HiddenFormField.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/HiddenFormField.tsx
@@ -1,8 +1,11 @@
 import * as React from 'react';
+import { EyeIcon } from '@patternfly/react-icons';
+import { Button, Flex, FlexItem, Popover } from '@patternfly/react-core';
 import { HiddenField } from '~/concepts/connectionTypes/types';
 import PasswordInput from '~/components/PasswordInput';
 import { FieldProps } from '~/concepts/connectionTypes/fields/types';
-import DefaultValueTextRenderer from '~/concepts/connectionTypes/fields/DefaultValueTextRenderer';
+import FormGroupText from '~/components/FormGroupText';
+import UnspecifiedValue from '~/concepts/connectionTypes/fields/UnspecifiedValue';
 
 const HiddenFormField: React.FC<FieldProps<HiddenField>> = ({
   id,
@@ -13,21 +16,47 @@ const HiddenFormField: React.FC<FieldProps<HiddenField>> = ({
   'data-testid': dataTestId,
 }) => {
   const isPreview = mode === 'preview';
-  return (
-    <DefaultValueTextRenderer id={id} field={field} mode={mode}>
-      <PasswordInput
-        aria-readonly={isPreview}
-        autoComplete="off"
-        isRequired={field.required}
-        id={id}
-        name={id}
-        data-testid={dataTestId}
-        ariaLabelHide="Hide value"
-        ariaLabelShow="Show value"
-        value={(isPreview ? field.properties.defaultValue : value) ?? ''}
-        onChange={isPreview || !onChange ? undefined : (_e, v) => onChange(v)}
-      />
-    </DefaultValueTextRenderer>
+  return mode !== 'default' && field.properties.defaultReadOnly ? (
+    <FormGroupText id={id}>
+      {field.properties.defaultValue ? (
+        <Flex
+          display={{ default: 'inlineFlex' }}
+          flexWrap={{ default: 'nowrap' }}
+          gap={{ default: 'gapSm' }}
+          style={{ maxWidth: '100%' }}
+        >
+          <FlexItem
+            style={{ flexGrow: 1, flexShrink: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}
+          >
+            {field.properties.defaultValue.replace(/./g, '•')}
+          </FlexItem>
+          <FlexItem style={{ flexShrink: 0 }}>
+            <Popover bodyContent={field.properties.defaultValue}>
+              <Button isInline variant="link" icon={<EyeIcon />}>
+                View value
+              </Button>
+            </Popover>
+          </FlexItem>
+        </Flex>
+      ) : isPreview ? (
+        <UnspecifiedValue />
+      ) : (
+        '-'
+      )}
+    </FormGroupText>
+  ) : (
+    <PasswordInput
+      aria-readonly={isPreview}
+      autoComplete="off"
+      isRequired={field.required}
+      id={id}
+      name={id}
+      data-testid={dataTestId}
+      ariaLabelHide="Hide value"
+      ariaLabelShow="Show value"
+      value={(isPreview ? field.properties.defaultValue : value) ?? ''}
+      onChange={isPreview || !onChange ? undefined : (_e, v) => onChange(v)}
+    />
   );
 };
 
diff --git a/frontend/src/concepts/connectionTypes/fields/TextFormField.tsx b/frontend/src/concepts/connectionTypes/fields/TextFormField.tsx
index d2d21921fe..8837edbd5e 100644
--- a/frontend/src/concepts/connectionTypes/fields/TextFormField.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/TextFormField.tsx
@@ -7,7 +7,7 @@ import DefaultValueTextRenderer from '~/concepts/connectionTypes/fields/DefaultV
 const TextFormField: React.FC<FieldProps<TextField>> = ({ id, field, mode, onChange, value }) => {
   const isPreview = mode === 'preview';
   return (
-    <DefaultValueTextRenderer id={id} field={field} mode={mode}>
+    <DefaultValueTextRenderer id={id} field={field} mode={mode} component="pre">
       <TextArea
         aria-readonly={isPreview}
         autoComplete="off"
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/ConnectionTypeFormFields.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/ConnectionTypeFormFields.spec.tsx
index f71c1b7673..b578f858da 100644
--- a/frontend/src/concepts/connectionTypes/fields/__tests__/ConnectionTypeFormFields.spec.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/ConnectionTypeFormFields.spec.tsx
@@ -42,11 +42,14 @@ 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');
+    // test unground
+    within(result.container).getByTestId('field boolean boolean-1');
+    expect(within(section1).queryByTestId('field boolean boolean-1')).toBe(null);
+    expect(within(section2).queryByTestId('field boolean boolean-1')).toBe(null);
+
     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__/DropdownFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/DropdownFormField.spec.tsx
index ad9bb4fdfd..865788f462 100644
--- a/frontend/src/concepts/connectionTypes/fields/__tests__/DropdownFormField.spec.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/DropdownFormField.spec.tsx
@@ -32,7 +32,7 @@ describe('DropdownFormField', () => {
       act(() => {
         input.click();
       });
-      const option = screen.getByRole('option', { name: 'One' });
+      const option = screen.getByRole('option', { name: /One/ });
       act(() => {
         option.click();
       });
@@ -73,7 +73,7 @@ describe('DropdownFormField', () => {
       act(() => {
         input.click();
       });
-      const option = screen.getByRole('option', { name: 'One' });
+      const option = screen.getByRole('option', { name: /One/ });
       act(() => {
         option.click();
       });
@@ -114,7 +114,7 @@ describe('DropdownFormField', () => {
         />,
       );
       expect(screen.queryByRole('button')).not.toBeInTheDocument();
-      expect(screen.queryByText('Three')).toBeInTheDocument();
+      expect(screen.queryByText('Three (Value: 3)')).toBeInTheDocument();
     });
   });
 
@@ -138,15 +138,15 @@ describe('DropdownFormField', () => {
 
       render(<DropdownFormField id="test" field={field} value={['1', '2']} onChange={onChange} />);
       const input = screen.getByRole('button');
-      expect(input).toHaveTextContent('Count 2 selected');
+      expect(input).toHaveTextContent('Select test-name 2 selected');
       expect(input).not.toBeDisabled();
 
       act(() => {
         input.click();
       });
 
-      const checkboxOne = screen.getByLabelText('One');
-      const checkboxThree = screen.getByLabelText('Three');
+      const checkboxOne = screen.getByLabelText('OneValue: 1');
+      const checkboxThree = screen.getByLabelText('ThreeValue: 3');
 
       // close menu
       act(() => {
@@ -191,14 +191,14 @@ describe('DropdownFormField', () => {
         />,
       );
       const input = screen.getByRole('button');
-      expect(input).toHaveTextContent('Count 1 selected');
+      expect(input).toHaveTextContent('Select test-name 1 selected');
       expect(input).not.toBeDisabled();
 
       act(() => {
         input.click();
       });
 
-      const checkboxOne = screen.getByLabelText('One');
+      const checkboxOne = screen.getByLabelText('OneValue: 1');
 
       // close menu
       act(() => {
@@ -237,7 +237,7 @@ describe('DropdownFormField', () => {
         />,
       );
       expect(screen.queryByRole('button')).not.toBeInTheDocument();
-      expect(screen.queryByText('Two, Three')).toBeInTheDocument();
+      expect(screen.queryByText('Two (Value: 2), Three (Value: 3)')).toBeInTheDocument();
     });
   });
 });
diff --git a/frontend/src/concepts/connectionTypes/fields/__tests__/HiddenFormField.spec.tsx b/frontend/src/concepts/connectionTypes/fields/__tests__/HiddenFormField.spec.tsx
index 103ae2392b..945797c60c 100644
--- a/frontend/src/concepts/connectionTypes/fields/__tests__/HiddenFormField.spec.tsx
+++ b/frontend/src/concepts/connectionTypes/fields/__tests__/HiddenFormField.spec.tsx
@@ -76,6 +76,6 @@ describe('HiddenFormField', () => {
 
     render(<HiddenFormField id="test" field={field} value="supplied-value" />);
     expect(screen.queryByRole('test-name')).not.toBeInTheDocument();
-    expect(screen.queryByText('••••••••••')).toBeInTheDocument();
+    expect(screen.queryByText('•••••••••••••')).toBeInTheDocument();
   });
 });
diff --git a/frontend/src/concepts/connectionTypes/types.ts b/frontend/src/concepts/connectionTypes/types.ts
index 853cb48d8f..79d7311b17 100644
--- a/frontend/src/concepts/connectionTypes/types.ts
+++ b/frontend/src/concepts/connectionTypes/types.ts
@@ -25,7 +25,19 @@ export const connectionTypeDataFields = [
   ConnectionTypeFieldType.URI,
 ];
 
-type Field<T extends ConnectionTypeFieldType | string> = {
+export type ConnectionTypeFieldTypeUnion =
+  | ConnectionTypeFieldType
+  | 'boolean'
+  | 'dropdown'
+  | 'file'
+  | 'hidden'
+  | 'numeric'
+  | 'section'
+  | 'short-text'
+  | 'text'
+  | 'uri';
+
+type Field<T extends ConnectionTypeFieldTypeUnion> = {
   type: T;
   name: string;
   description?: string;
@@ -38,7 +50,7 @@ export type ConnectionTypeCommonProperties<V = string> = {
 
 // P default to an empty set of properties
 // eslint-disable-next-line @typescript-eslint/ban-types
-export type DataField<T extends ConnectionTypeFieldType | string, V = string, P = {}> = Field<T> & {
+export type DataField<T extends ConnectionTypeFieldTypeUnion, V = string, P = {}> = Field<T> & {
   envVar: string;
   required?: boolean;
   properties: P & ConnectionTypeCommonProperties<V>;
@@ -93,6 +105,7 @@ export type ConnectionTypeConfigMap = K8sResourceCommon & {
     };
   };
   data?: {
+    category?: string;
     // JSON of type ConnectionTypeField
     fields?: string;
   };
@@ -100,6 +113,7 @@ export type ConnectionTypeConfigMap = K8sResourceCommon & {
 
 export type ConnectionTypeConfigMapObj = Omit<ConnectionTypeConfigMap, 'data'> & {
   data?: {
+    category?: string[];
     fields?: ConnectionTypeField[];
   };
 };
diff --git a/frontend/src/concepts/connectionTypes/utils.ts b/frontend/src/concepts/connectionTypes/utils.ts
index 30c40d98cc..ee12abc53d 100644
--- a/frontend/src/concepts/connectionTypes/utils.ts
+++ b/frontend/src/concepts/connectionTypes/utils.ts
@@ -3,6 +3,7 @@ import {
   ConnectionTypeConfigMapObj,
   ConnectionTypeDataField,
   ConnectionTypeFieldType,
+  ConnectionTypeFieldTypeUnion,
 } from '~/concepts/connectionTypes/types';
 
 export const toConnectionTypeConfigMapObj = (
@@ -10,7 +11,10 @@ export const toConnectionTypeConfigMapObj = (
 ): ConnectionTypeConfigMapObj => ({
   ...configMap,
   data: configMap.data
-    ? { fields: configMap.data.fields ? JSON.parse(configMap.data.fields) : undefined }
+    ? {
+        category: configMap.data.category ? JSON.parse(configMap.data.category) : undefined,
+        fields: configMap.data.fields ? JSON.parse(configMap.data.fields) : undefined,
+      }
     : undefined,
 });
 
@@ -19,7 +23,10 @@ export const toConnectionTypeConfigMap = (
 ): ConnectionTypeConfigMap => ({
   ...obj,
   data: obj.data
-    ? { fields: obj.data.fields ? JSON.stringify(obj.data.fields) : undefined }
+    ? {
+        category: obj.data.category ? JSON.stringify(obj.data.category) : undefined,
+        fields: obj.data.fields ? JSON.stringify(obj.data.fields) : undefined,
+      }
     : undefined,
 });
 
@@ -28,17 +35,18 @@ export const defaultValueToString = <T extends ConnectionTypeDataField>(
 ): 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)
+          .map((v) => {
+            const item = field.properties.items?.find(({ value }) => value === v);
+            if (item) {
+              return `${item.label} (Value: ${item.value})`;
+            }
+            return null;
+          })
           .filter((i) => i != null);
         return items.length > 0 ? items.join(', ') : undefined;
       }
@@ -47,15 +55,19 @@ export const defaultValueToString = <T extends ConnectionTypeDataField>(
   return defaultValue == null ? defaultValue : `${defaultValue}`;
 };
 
-export const fieldTypeToString = <T extends ConnectionTypeDataField>(field: T): string => {
-  if (field.type === ConnectionTypeFieldType.URI) {
-    return field.type.toUpperCase();
+export const fieldTypeToString = (type: ConnectionTypeFieldTypeUnion): string => {
+  switch (type) {
+    case ConnectionTypeFieldType.URI:
+      return 'URI';
+    case ConnectionTypeFieldType.ShortText:
+      return 'Text - Short';
+    case ConnectionTypeFieldType.Text:
+      return 'Text - Long';
+    case ConnectionTypeFieldType.Hidden:
+      return 'Text - Hidden';
+    default:
+      return (type.charAt(0).toUpperCase() + type.slice(1)).replace(/-/g, ' ');
   }
-
-  const withSpaces = field.type.replace(/-/g, ' ');
-  const withCapitalized = withSpaces[0].toUpperCase() + withSpaces.slice(1);
-
-  return withCapitalized;
 };
 
 export const fieldNameToEnvVar = (name: string): string => {
diff --git a/frontend/src/pages/connectionTypes/ConnectionTypesTableRow.tsx b/frontend/src/pages/connectionTypes/ConnectionTypesTableRow.tsx
index 8003a72c5d..0e072d7a50 100644
--- a/frontend/src/pages/connectionTypes/ConnectionTypesTableRow.tsx
+++ b/frontend/src/pages/connectionTypes/ConnectionTypesTableRow.tsx
@@ -13,6 +13,7 @@ import {
   getDisplayNameFromK8sResource,
   ownedByDSC,
 } from '~/concepts/k8s/utils';
+import { connectionTypeColumns } from '~/pages/connectionTypes/columns';
 
 type ConnectionTypesTableRowProps = {
   obj: ConnectionTypeConfigMapObj;
@@ -71,25 +72,29 @@ const ConnectionTypesTableRow: React.FC<ConnectionTypesTableRowProps> = ({
 
   return (
     <Tr>
-      <Td dataLabel="Name" width={50}>
+      <Td dataLabel={connectionTypeColumns[0].label} width={50}>
         <TableRowTitleDescription
           title={getDisplayNameFromK8sResource(obj)}
           description={getDescriptionFromK8sResource(obj)}
         />
       </Td>
-      <Td dataLabel="Creator" data-testid="connection-type-creator">
+      <Td dataLabel={connectionTypeColumns[1].label} data-testid="connection-type-creator">
         {ownedByDSC(obj) ? (
           <Label data-testid="connection-type-user-label">{creator}</Label>
         ) : (
           creator
         )}
       </Td>
-      <Td dataLabel="Created" data-testid="connection-type-created" modifier="nowrap">
+      <Td
+        dataLabel={connectionTypeColumns[2].label}
+        data-testid="connection-type-created"
+        modifier="nowrap"
+      >
         <Timestamp date={createdDate} tooltip={{ variant: TimestampTooltipVariant.default }}>
           {createdDate ? relativeTime(Date.now(), createdDate.getTime()) : 'Unknown'}
         </Timestamp>
       </Td>
-      <Td dataLabel="Enabled">
+      <Td dataLabel={connectionTypeColumns[3].label}>
         <Switch
           isChecked={isEnabled}
           aria-label="toggle enabled"
diff --git a/frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx b/frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx
index ac0e82bfe7..37ec563409 100644
--- a/frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx
+++ b/frontend/src/pages/connectionTypes/manage/ConnectionTypeDataFieldModal.tsx
@@ -27,6 +27,7 @@ import { fieldNameToEnvVar } from '~/concepts/connectionTypes/utils';
 import { isEnumMember } from '~/utilities/utils';
 import DashboardPopupIconButton from '~/concepts/dashboard/DashboardPopupIconButton';
 import DataFieldPropertiesForm from '~/pages/connectionTypes/manage/DataFieldPropertiesForm';
+import { fieldTypeToString } from '~/concepts/connectionTypes/utils';
 
 const ENV_VAR_NAME_REGEX = new RegExp('^[-._a-zA-Z][-._a-zA-Z0-9]*$');
 
@@ -43,17 +44,6 @@ type Props = {
   isEdit?: boolean;
 };
 
-const fieldTypeLabels: { [key: string]: string } = {
-  [ConnectionTypeFieldType.Boolean]: 'Boolean',
-  [ConnectionTypeFieldType.Dropdown]: 'Dropdown',
-  [ConnectionTypeFieldType.File]: 'File',
-  [ConnectionTypeFieldType.Hidden]: 'Hidden',
-  [ConnectionTypeFieldType.Numeric]: 'Numeric',
-  [ConnectionTypeFieldType.ShortText]: 'Short text',
-  [ConnectionTypeFieldType.Text]: 'Text',
-  [ConnectionTypeFieldType.URI]: 'URI',
-};
-
 export const ConnectionTypeDataFieldModal: React.FC<Props> = ({
   field,
   isOpen,
@@ -230,13 +220,13 @@ export const ConnectionTypeDataFieldModal: React.FC<Props> = ({
                 }}
                 isExpanded={isOpen}
               >
-                {fieldType ? fieldTypeLabels[fieldType] : ''}
+                {fieldType ? fieldTypeToString(fieldType) : ''}
               </MenuToggle>
             )}
           >
             <SelectList>
               {connectionTypeDataFields
-                .map((value) => ({ label: fieldTypeLabels[value], value }))
+                .map((value) => ({ label: fieldTypeToString(value), value }))
                 .toSorted((a, b) => a.label.localeCompare(b.label))
                 .map(({ value, label }) => (
                   <SelectOption key={value} value={value} data-testid={`field-${value}-select`}>
diff --git a/frontend/src/pages/connectionTypes/manage/DataFieldPropertiesForm.tsx b/frontend/src/pages/connectionTypes/manage/DataFieldPropertiesForm.tsx
index f00bc90df4..c0993b5a48 100644
--- a/frontend/src/pages/connectionTypes/manage/DataFieldPropertiesForm.tsx
+++ b/frontend/src/pages/connectionTypes/manage/DataFieldPropertiesForm.tsx
@@ -17,6 +17,8 @@ const DataFieldPropertiesForm = <T extends ConnectionTypeDataField>({
 }: Props<T>): React.ReactNode => {
   const [isDefaultValueValid, setDefaultValueValid] = React.useState(true);
   const [isAdvancedValid, setAdvancedValid] = React.useState(true);
+  const isReadOnlyDisabled =
+    field.properties.defaultValue === '' || field.properties.defaultValue == null;
 
   const isValid = isDefaultValueValid && isAdvancedValid;
   React.useEffect(() => {
@@ -46,8 +48,8 @@ const DataFieldPropertiesForm = <T extends ConnectionTypeDataField>({
         <Checkbox
           id="defaultReadOnly"
           label="Default value is read-only"
-          isDisabled={field.properties.defaultValue === '' || field.properties.defaultValue == null}
-          isChecked={(field.properties.defaultValue && field.properties.defaultReadOnly) || false}
+          isDisabled={isReadOnlyDisabled}
+          isChecked={!isReadOnlyDisabled && !!field.properties.defaultReadOnly}
           onChange={(_ev, checked) => onChange({ ...field.properties, defaultReadOnly: checked })}
           data-testid="field-default-value-readonly-checkbox"
         />
diff --git a/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTable.tsx b/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTable.tsx
index 2044155eb9..072026c7cd 100644
--- a/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTable.tsx
+++ b/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTable.tsx
@@ -13,7 +13,7 @@ import {
   EmptyStateVariant,
 } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons';
-import { Table, Thead, Tbody, Tr, Th } from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, ThProps } from '@patternfly/react-table';
 import { ConnectionTypeField, ConnectionTypeFieldType } from '~/concepts/connectionTypes/types';
 import useDraggableTableControlled from '~/utilities/useDraggableTableControlled';
 import ConnectionTypeFieldModal from './ConnectionTypeFieldModal';
@@ -52,6 +52,14 @@ type Props = {
   onFieldsChange: (fields: ConnectionTypeField[]) => void;
 };
 
+const columns: ThProps[] = [
+  { label: 'Section heading/field name', width: 30 },
+  { label: 'Type', width: 10 },
+  { label: 'Default value', width: 30 },
+  { label: 'Environment variable', width: 20 },
+  { label: 'Required', width: 10 },
+];
+
 const ManageConnectionTypeFieldsTable: React.FC<Props> = ({ fields, onFieldsChange }) => {
   const [modalField, setModalField] = React.useState<
     { field?: ConnectionTypeField; index?: number; isEdit?: boolean } | undefined
@@ -61,14 +69,6 @@ const ManageConnectionTypeFieldsTable: React.FC<Props> = ({ fields, onFieldsChan
     index: number;
   }>();
 
-  const columns = [
-    'Section heading/field name',
-    'Type',
-    'Default value',
-    'Environment variable',
-    'Required',
-  ];
-
   const { tableProps, rowsToRender } = useDraggableTableControlled<ConnectionTypeField>(
     fields,
     onFieldsChange,
@@ -83,8 +83,11 @@ const ManageConnectionTypeFieldsTable: React.FC<Props> = ({ fields, onFieldsChan
               <Tr>
                 <Th screenReaderText="Drag and drop" />
                 {columns.map((column, columnIndex) => (
-                  <Th key={columnIndex}>{column}</Th>
+                  <Th key={columnIndex} width={column.width}>
+                    {column.label}
+                  </Th>
                 ))}
+                <Th screenReaderText="Actions" />
               </Tr>
             </Thead>
             <Tbody {...tableProps.tbodyProps}>
@@ -205,4 +208,4 @@ const ManageConnectionTypeFieldsTable: React.FC<Props> = ({ fields, onFieldsChan
   );
 };
 
-export default ManageConnectionTypeFieldsTable;
+export default React.memo(ManageConnectionTypeFieldsTable);
diff --git a/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTableRow.tsx b/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTableRow.tsx
index 89ad1ac561..29715645a8 100644
--- a/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTableRow.tsx
+++ b/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTableRow.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ActionsColumn, Td, Tr } from '@patternfly/react-table';
-import { Button, Label, Switch, Truncate } from '@patternfly/react-core';
+import { ActionsColumn, Td, ThProps, Tr } from '@patternfly/react-table';
+import { Button, Label, Switch } from '@patternfly/react-core';
 import {
   ConnectionTypeField,
   ConnectionTypeFieldType,
@@ -8,10 +8,11 @@ import {
 } from '~/concepts/connectionTypes/types';
 import { defaultValueToString, fieldTypeToString } from '~/concepts/connectionTypes/utils';
 import type { RowProps } from '~/utilities/useDraggableTableControlled';
+import TruncatedText from '~/components/TruncatedText';
 
 type Props = {
   row: ConnectionTypeField;
-  columns: string[];
+  columns: ThProps[];
   fields: ConnectionTypeField[];
   onEdit: () => void;
   onRemove: () => void;
@@ -51,15 +52,18 @@ const ManageConnectionTypeFieldsTableRow: React.FC<Props> = ({
             id: `draggable-row-${props.id}`,
           }}
         />
-        <Td dataLabel={columns[0]} colSpan={5} data-testid="field-name">
-          {row.name}{' '}
-          <Label color="blue" data-testid="section-heading">
-            Section heading
-          </Label>
-          <div className="pf-v5-u-color-200">
-            <Truncate content={row.description ?? ''} />
+        <Td dataLabel={columns[0].label} data-testid="field-name">
+          <div>
+            {row.name}{' '}
+            <Label color="blue" data-testid="section-heading">
+              Section heading
+            </Label>
+            <div className="pf-v5-u-color-200">
+              <TruncatedText content={row.description ?? ''} maxLines={2} />
+            </div>
           </div>
         </Td>
+        <Td colSpan={4} />
         <Td isActionCell modifier="nowrap">
           <Button variant="secondary" onClick={() => onAddField(row)}>
             Add field
@@ -92,22 +96,24 @@ const ManageConnectionTypeFieldsTableRow: React.FC<Props> = ({
           id: `draggable-row-${props.id}`,
         }}
       />
-      <Td dataLabel={columns[0]} data-testid="field-name">
-        {row.name}
-        <div className="pf-v5-u-color-200">
-          <Truncate content={row.description ?? ''} />
+      <Td dataLabel={columns[0].label} data-testid="field-name">
+        <div>
+          {row.name}
+          <div className="pf-v5-u-color-200">
+            <TruncatedText content={row.description ?? ''} maxLines={2} />
+          </div>
         </div>
       </Td>
-      <Td dataLabel={columns[1]} data-testid="field-type">
-        {fieldTypeToString(row)}
+      <Td dataLabel={columns[1].label} data-testid="field-type">
+        {fieldTypeToString(row.type)}
       </Td>
-      <Td dataLabel={columns[2]} data-testid="field-default">
+      <Td dataLabel={columns[2].label} data-testid="field-default" modifier="truncate">
         {defaultValueToString(row) || '-'}
       </Td>
-      <Td dataLabel={columns[3]} data-testid="field-env">
+      <Td dataLabel={columns[3].label} data-testid="field-env">
         {row.envVar || '-'}
       </Td>
-      <Td dataLabel={columns[4]}>
+      <Td dataLabel={columns[4].label}>
         <Switch
           aria-label="toggle field required"
           isChecked={row.required || false}
diff --git a/frontend/src/pages/connectionTypes/manage/ManageConnectionTypePage.tsx b/frontend/src/pages/connectionTypes/manage/ManageConnectionTypePage.tsx
index 882fcb4316..c6b7ec6794 100644
--- a/frontend/src/pages/connectionTypes/manage/ManageConnectionTypePage.tsx
+++ b/frontend/src/pages/connectionTypes/manage/ManageConnectionTypePage.tsx
@@ -44,6 +44,7 @@ const ManageConnectionTypePage: React.FC<Props> = ({ prefill, isEdit, onSave })
     enabled: prefillEnabled,
     fields: prefillFields,
     username: prefillUsername,
+    category: prefillCategory,
   } = extractConnectionTypeFromMap(prefill);
 
   const username = prefillUsername || currentUsername;
@@ -56,8 +57,9 @@ const ManageConnectionTypePage: React.FC<Props> = ({ prefill, isEdit, onSave })
   const [connectionEnabled, setConnectionEnabled] = React.useState<boolean>(prefillEnabled);
   const [connectionFields, setConnectionFields] =
     React.useState<ConnectionTypeField[]>(prefillFields);
+  const [category] = React.useState<string[]>(prefillCategory);
 
-  const previewConnectionTypeObj = React.useMemo(
+  const connectionTypeObj = React.useMemo(
     () =>
       createConnectionTypeObj(
         connectionNameDesc.k8sName || translateDisplayNameForK8s(connectionNameDesc.name),
@@ -66,8 +68,9 @@ const ManageConnectionTypePage: React.FC<Props> = ({ prefill, isEdit, onSave })
         connectionEnabled,
         username,
         connectionFields,
+        category,
       ),
-    [connectionNameDesc, connectionEnabled, connectionFields, username],
+    [connectionNameDesc, connectionEnabled, connectionFields, username, category],
   );
 
   const isValid = React.useMemo(() => {
@@ -83,7 +86,7 @@ const ManageConnectionTypePage: React.FC<Props> = ({ prefill, isEdit, onSave })
     <ConnectionTypePreviewDrawer
       isExpanded={isDrawerExpanded}
       onClose={() => setIsDrawerExpanded(false)}
-      obj={previewConnectionTypeObj}
+      obj={connectionTypeObj}
     >
       <ApplicationsPage
         title={isEdit ? 'Edit connection type' : 'Create connection type'}
@@ -143,7 +146,7 @@ const ManageConnectionTypePage: React.FC<Props> = ({ prefill, isEdit, onSave })
               <FormGroup>
                 <ManageConnectionTypeFieldsTable
                   fields={connectionFields}
-                  onFieldsChange={(fields) => setConnectionFields(fields)}
+                  onFieldsChange={setConnectionFields}
                 />
               </FormGroup>
             </FormSection>
@@ -156,7 +159,7 @@ const ManageConnectionTypePage: React.FC<Props> = ({ prefill, isEdit, onSave })
         >
           <CreateConnectionTypeFooter
             onSave={() =>
-              onSave(previewConnectionTypeObj).then(() => {
+              onSave(connectionTypeObj).then(() => {
                 navigate('/connectionTypes');
               })
             }