diff --git a/frontend/src/__tests__/cypress/cypress/pages/connectionTypes.ts b/frontend/src/__tests__/cypress/cypress/pages/connectionTypes.ts
new file mode 100644
index 0000000000..0b4d98a250
--- /dev/null
+++ b/frontend/src/__tests__/cypress/cypress/pages/connectionTypes.ts
@@ -0,0 +1,69 @@
+import { TableRow } from './components/table';
+
+class CreateConnectionTypeTableRow extends TableRow {
+  findSectionHeading() {
+    return this.find().findByTestId('section-heading');
+  }
+
+  findName() {
+    return this.find().findByTestId('field-name');
+  }
+
+  findType() {
+    return this.find().findByTestId('field-type');
+  }
+
+  findDefault() {
+    return this.find().findByTestId('field-default');
+  }
+
+  findEnvVar() {
+    return this.find().findByTestId('field-env');
+  }
+
+  findRequired() {
+    return this.find().findByTestId('field-required');
+  }
+}
+
+class CreateConnectionTypePage {
+  visitCreatePage() {
+    cy.visitWithLogin('/connectionTypes/create');
+    cy.findAllByText('Create connection type').should('exist');
+  }
+
+  visitDuplicatePage(name = 'existing') {
+    cy.visitWithLogin(`/connectionTypes/duplicate/${name}`);
+    cy.findAllByText('Create connection type').should('exist');
+  }
+
+  connectionTypeName() {
+    return cy.findByTestId('connection-type-name');
+  }
+
+  connectionTypeDesc() {
+    return cy.findByTestId('connection-type-description');
+  }
+
+  connectionTypeEnable() {
+    return cy.findByTestId('connection-type-enable');
+  }
+
+  findFieldsTable() {
+    return cy.findByTestId('connection-type-fields-table');
+  }
+
+  findAllFieldsTableRows() {
+    return this.findFieldsTable().findAllByTestId('row');
+  }
+
+  getFieldsTableRow(index: number) {
+    return new CreateConnectionTypeTableRow(() => this.findAllFieldsTableRows().eq(index));
+  }
+
+  findSubmitButton() {
+    return cy.findByTestId('submit-button');
+  }
+}
+
+export const createConnectionTypePage = new CreateConnectionTypePage();
diff --git a/frontend/src/__tests__/cypress/cypress/support/commands/odh.ts b/frontend/src/__tests__/cypress/cypress/support/commands/odh.ts
index 51838eb9a3..452ac6275c 100644
--- a/frontend/src/__tests__/cypress/cypress/support/commands/odh.ts
+++ b/frontend/src/__tests__/cypress/cypress/support/commands/odh.ts
@@ -50,6 +50,7 @@ import type {
 } from '~/concepts/pipelines/kfTypes';
 import type { GrpcResponse } from '~/__mocks__/mlmd/utils';
 import type { BuildMockPipelinveVersionsType } from '~/__mocks__';
+import type { ConnectionTypeConfigMap } from '~/concepts/connectionTypes/types';
 
 type SuccessErrorResponse = {
   success: boolean;
@@ -581,6 +582,24 @@ declare global {
             path: { namespace: string };
           },
           response: OdhResponse<number>,
+        ) => Cypress.Chainable<null>) &
+        ((
+          type: 'GET /api/connection-types',
+          response: ConnectionTypeConfigMap[],
+        ) => Cypress.Chainable<null>) &
+        ((
+          type: 'PATCH /api/connection-types/:name',
+          options: {
+            path: { name: string };
+          },
+          response: { success: boolean; error: string },
+        ) => Cypress.Chainable<null>) &
+        ((
+          type: 'GET /api/connection-types/:name',
+          options: {
+            path: { name: string };
+          },
+          response: ConnectionTypeConfigMap,
         ) => Cypress.Chainable<null>);
     }
   }
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
new file mode 100644
index 0000000000..2478475491
--- /dev/null
+++ b/frontend/src/__tests__/cypress/cypress/tests/mocked/connectionTypes/createConnectionType.cy.ts
@@ -0,0 +1,84 @@
+import {
+  mockConnectionTypeConfigMap,
+  mockConnectionTypeConfigMapObj,
+} from '~/__mocks__/mockConnectionType';
+import { createConnectionTypePage } from '~/__tests__/cypress/cypress/pages/connectionTypes';
+import { asClusterAdminUser } from '~/__tests__/cypress/cypress/utils/mockUsers';
+
+describe('create', () => {
+  it('Display base page', () => {
+    asClusterAdminUser();
+    createConnectionTypePage.visitCreatePage();
+
+    createConnectionTypePage.connectionTypeName().should('exist');
+    createConnectionTypePage.connectionTypeDesc().should('exist');
+    createConnectionTypePage.connectionTypeEnable().should('exist');
+    createConnectionTypePage.findFieldsTable().should('exist');
+  });
+
+  it('Allows create button with valid name', () => {
+    asClusterAdminUser();
+    createConnectionTypePage.visitCreatePage();
+
+    createConnectionTypePage.connectionTypeName().should('have.value', '');
+    createConnectionTypePage.findSubmitButton().should('be.disabled');
+
+    createConnectionTypePage.connectionTypeName().type('hello');
+    createConnectionTypePage.findSubmitButton().should('be.enabled');
+  });
+});
+
+describe('duplicate', () => {
+  const existing = mockConnectionTypeConfigMapObj({ name: 'existing' });
+
+  beforeEach(() => {
+    asClusterAdminUser();
+    cy.interceptOdh(
+      'GET /api/connection-types/:name',
+      { path: { name: 'existing' } },
+      mockConnectionTypeConfigMap({ name: 'existing' }),
+    );
+  });
+
+  it('Prefill details from existing connection', () => {
+    createConnectionTypePage.visitDuplicatePage('existing');
+
+    createConnectionTypePage
+      .connectionTypeName()
+      .should(
+        'have.value',
+        `Duplicate of ${existing.metadata.annotations['openshift.io/display-name']}`,
+      );
+    createConnectionTypePage
+      .connectionTypeDesc()
+      .should('have.value', existing.metadata.annotations['openshift.io/description']);
+    createConnectionTypePage.connectionTypeEnable().should('be.checked');
+  });
+
+  it('Prefill fields table from existing connection', () => {
+    createConnectionTypePage.visitDuplicatePage('existing');
+
+    createConnectionTypePage
+      .findAllFieldsTableRows()
+      .should('have.length', existing.data?.fields?.length);
+
+    // Row 0 - Section
+    const row0 = createConnectionTypePage.getFieldsTableRow(0);
+    row0.findName().should('contain.text', 'Short text');
+    row0.findSectionHeading().should('exist');
+
+    // 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.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.findDefault().should('have.text', 'This is the default value');
+    row2.findRequired().should('be.checked');
+  });
+});
diff --git a/frontend/src/app/AppRoutes.tsx b/frontend/src/app/AppRoutes.tsx
index cc6ee4516d..bd227c0b21 100644
--- a/frontend/src/app/AppRoutes.tsx
+++ b/frontend/src/app/AppRoutes.tsx
@@ -14,6 +14,7 @@ import { useCheckJupyterEnabled } from '~/utilities/notebookControllerUtils';
 import { SupportedArea } from '~/concepts/areas';
 import useIsAreaAvailable from '~/concepts/areas/useIsAreaAvailable';
 import ModelRegistrySettingsRoutes from '~/pages/modelRegistrySettings/ModelRegistrySettingsRoutes';
+import ConnectionTypeRoutes from '~/pages/connectionTypes/ConnectionTypeRoutes';
 
 const HomePage = React.lazy(() => import('../pages/home/Home'));
 
@@ -125,6 +126,7 @@ const AppRoutes: React.FC = () => {
             <Route path="/servingRuntimes/*" element={<CustomServingRuntimeRoutes />} />
             <Route path="/modelRegistrySettings/*" element={<ModelRegistrySettingsRoutes />} />
             <Route path="/groupSettings" element={<GroupSettingsPage />} />
+            <Route path="/connectionTypes/*" element={<ConnectionTypeRoutes />} />
           </>
         )}
 
diff --git a/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts b/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts
index 3cabf41ca8..cf93a5b726 100644
--- a/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts
+++ b/frontend/src/concepts/connectionTypes/__tests__/utils.spec.ts
@@ -1,7 +1,8 @@
 import { mockConnectionTypeConfigMapObj } from '~/__mocks__/mockConnectionType';
-import { DropdownField, HiddenField, TextField } from '~/concepts/connectionTypes/types';
+import { DropdownField, HiddenField, TextField, UriField } from '~/concepts/connectionTypes/types';
 import {
   defaultValueToString,
+  fieldTypeToString,
   toConnectionTypeConfigMap,
   toConnectionTypeConfigMapObj,
 } from '~/concepts/connectionTypes/utils';
@@ -201,3 +202,26 @@ describe('defaultValueToString', () => {
     ).toBe('Two, Three');
   });
 });
+
+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');
+  });
+});
diff --git a/frontend/src/concepts/connectionTypes/useConnectionType.ts b/frontend/src/concepts/connectionTypes/useConnectionType.ts
new file mode 100644
index 0000000000..49462210e6
--- /dev/null
+++ b/frontend/src/concepts/connectionTypes/useConnectionType.ts
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ConnectionTypeConfigMapObj } from '~/concepts/connectionTypes/types';
+import { fetchConnectionType } from '~/services/connectionTypesService';
+
+export const useConnectionType = (
+  name?: string,
+): [boolean, Error | undefined, ConnectionTypeConfigMapObj | undefined] => {
+  const [loaded, setLoaded] = React.useState(false);
+  const [error, setError] = React.useState<Error>();
+  const [connectionType, setConnectionType] = React.useState<ConnectionTypeConfigMapObj>();
+
+  React.useEffect(() => {
+    if (name) {
+      fetchConnectionType(name)
+        .then((res) => {
+          setLoaded(true);
+          setConnectionType(res);
+        })
+        .catch((err) => {
+          setLoaded(true);
+          setError(err);
+        });
+    }
+  }, [name]);
+
+  return [loaded, error, connectionType];
+};
diff --git a/frontend/src/concepts/connectionTypes/utils.ts b/frontend/src/concepts/connectionTypes/utils.ts
index 6ed8b7b535..473fc7cac8 100644
--- a/frontend/src/concepts/connectionTypes/utils.ts
+++ b/frontend/src/concepts/connectionTypes/utils.ts
@@ -46,3 +46,14 @@ 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();
+  }
+
+  const withSpaces = field.type.replace(/-/g, ' ');
+  const withCapitalized = withSpaces[0].toUpperCase() + withSpaces.slice(1);
+
+  return withCapitalized;
+};
diff --git a/frontend/src/concepts/k8s/NameDescriptionField.tsx b/frontend/src/concepts/k8s/NameDescriptionField.tsx
index e8affd3f58..53d07703e5 100644
--- a/frontend/src/concepts/k8s/NameDescriptionField.tsx
+++ b/frontend/src/concepts/k8s/NameDescriptionField.tsx
@@ -16,10 +16,13 @@ import { isValidK8sName, translateDisplayNameForK8s } from '~/concepts/k8s/utils
 
 type NameDescriptionFieldProps = {
   nameFieldId: string;
+  nameFieldLabel?: string;
   descriptionFieldId: string;
+  descriptionFieldLabel?: string;
   data: NameDescType;
   setData?: (data: NameDescType) => void;
   autoFocusName?: boolean;
+  K8sLabelName?: string;
   showK8sName?: boolean;
   disableK8sName?: boolean;
   maxLength?: number;
@@ -29,10 +32,13 @@ type NameDescriptionFieldProps = {
 
 const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
   nameFieldId,
+  nameFieldLabel = 'Name',
   descriptionFieldId,
+  descriptionFieldLabel = 'Description',
   data,
   setData,
   autoFocusName,
+  K8sLabelName = 'Resource name',
   showK8sName,
   disableK8sName,
   maxLength,
@@ -58,7 +64,7 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
   return (
     <Stack hasGutter>
       <StackItem>
-        <FormGroup label="Name" isRequired fieldId={nameFieldId}>
+        <FormGroup label={nameFieldLabel} isRequired fieldId={nameFieldId}>
           <TextInput
             aria-readonly={!setData}
             isRequired
@@ -90,7 +96,7 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
       {showK8sName && (
         <StackItem>
           <FormGroup
-            label="Resource name"
+            label={K8sLabelName}
             labelIcon={
               <Tooltip
                 position="right"
@@ -145,7 +151,7 @@ const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
         </StackItem>
       )}
       <StackItem>
-        <FormGroup label="Description" fieldId={descriptionFieldId}>
+        <FormGroup label={descriptionFieldLabel} fieldId={descriptionFieldId}>
           <TextArea
             aria-readonly={!setData}
             resizeOrientation="vertical"
diff --git a/frontend/src/pages/connectionTypes/ConnectionTypeRoutes.tsx b/frontend/src/pages/connectionTypes/ConnectionTypeRoutes.tsx
new file mode 100644
index 0000000000..175c3eeec5
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/ConnectionTypeRoutes.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Navigate, Routes, Route } from 'react-router-dom';
+import { CreateConnectionTypePage } from './CreateConnectionType/CreateConnectionTypePage';
+import { DuplicateConnectionTypePage } from './CreateConnectionType/DuplicateConnectionTypePage';
+import { EditConnectionTypePage } from './CreateConnectionType/EditConnectionTypePage';
+
+const ConnectionTypeRoutes: React.FC = () => (
+  <Routes>
+    <Route path="/">
+      <Route path="create" element={<CreateConnectionTypePage />} />
+      <Route path="duplicate/:name" element={<DuplicateConnectionTypePage />} />
+      <Route path="edit/:name" element={<EditConnectionTypePage />} />
+      <Route path="*" element={<Navigate to="." />} />
+    </Route>
+  </Routes>
+);
+
+export default ConnectionTypeRoutes;
diff --git a/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeBreadcrumbs.tsx b/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeBreadcrumbs.tsx
new file mode 100644
index 0000000000..c13b7de2ca
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeBreadcrumbs.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
+
+export const CreateConnectionTypeBreadcrumbs: React.FunctionComponent = () => (
+  <Breadcrumb ouiaId="BasicBreadcrumb">
+    <BreadcrumbItem to="/connectionTypes">Connection types</BreadcrumbItem>
+    <BreadcrumbItem to="#" isActive>
+      Create connection type
+    </BreadcrumbItem>
+  </Breadcrumb>
+);
diff --git a/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeFieldsTable.tsx b/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeFieldsTable.tsx
new file mode 100644
index 0000000000..acb8e82d89
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeFieldsTable.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Table, Thead, Tbody, Tr, Th } from '@patternfly/react-table';
+import { ConnectionTypeField } from '~/concepts/connectionTypes/types';
+import { CreateConnectionTypeFieldsTableRow } from './CreateConnectionTypeFieldsTableRow';
+
+type CreateConnectionTypeFieldsTableProps = {
+  fields: ConnectionTypeField[];
+};
+
+export const CreateConnectionTypeFieldsTable: React.FC<CreateConnectionTypeFieldsTableProps> = ({
+  fields,
+}) => {
+  const columns = [
+    'Section heading/field name',
+    'Type',
+    'Default value',
+    'Environment variable',
+    'Required',
+  ];
+
+  return (
+    <Table data-testid="connection-type-fields-table">
+      <Thead>
+        <Tr>
+          {columns.map((column, columnIndex) => (
+            <Th key={columnIndex}>{column}</Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {fields.map((row, index) => (
+          <CreateConnectionTypeFieldsTableRow key={index} row={row} />
+        ))}
+      </Tbody>
+    </Table>
+  );
+};
diff --git a/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeFieldsTableRow.tsx b/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeFieldsTableRow.tsx
new file mode 100644
index 0000000000..89af53aea7
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeFieldsTableRow.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Td, Tr } from '@patternfly/react-table';
+import { Label, Switch, Text, TextVariants } from '@patternfly/react-core';
+import { ConnectionTypeField, ConnectionTypeFieldType } from '~/concepts/connectionTypes/types';
+import { defaultValueToString, fieldTypeToString } from '~/concepts/connectionTypes/utils';
+
+type CreateConnectionTypeFieldsTableRowProps = {
+  row: ConnectionTypeField;
+};
+
+export const CreateConnectionTypeFieldsTableRow: React.FC<
+  CreateConnectionTypeFieldsTableRowProps
+> = ({ row }) => {
+  if (row.type === ConnectionTypeFieldType.Section) {
+    return (
+      <Tr id={row.name} isStriped data-testid="row">
+        <Td data-testid="field-name">
+          <Text component={TextVariants.p}>
+            {row.name}{' '}
+            <Label color="blue" data-testid="section-heading">
+              Section heading
+            </Label>
+          </Text>
+          <Text component={TextVariants.small}>{row.description}</Text>
+        </Td>
+        <Td />
+        <Td />
+        <Td />
+        <Td />
+      </Tr>
+    );
+  }
+  return (
+    <Tr id={row.name} data-testid="row">
+      <Td data-testid="field-name">
+        <Text component={TextVariants.p}>{row.name}</Text>
+        <Text component={TextVariants.small}>{row.description}</Text>
+      </Td>
+      <Td data-testid="field-type">{fieldTypeToString(row)}</Td>
+      <Td data-testid="field-default">{defaultValueToString(row) || '-'}</Td>
+      <Td data-testid="field-env">{row.envVar || '-'}</Td>
+      <Td>
+        <Switch
+          aria-label="switch"
+          isChecked={row.required}
+          isDisabled
+          data-testid="field-required"
+        />
+      </Td>
+    </Tr>
+  );
+};
diff --git a/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeFooter.tsx b/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeFooter.tsx
new file mode 100644
index 0000000000..724558bdd3
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeFooter.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { ActionList, ActionListItem, Button, Stack, StackItem } from '@patternfly/react-core';
+import { useNavigate } from 'react-router';
+import { NameDescType } from '~/pages/projects/types';
+import { createConnectionType } from '~/services/connectionTypesService';
+import { ConnectionTypeField } from '~/concepts/connectionTypes/types';
+import { translateDisplayNameForK8s } from '~/concepts/k8s/utils';
+import { createConnectionTypeObj } from './CreateConnectionTypeUtils';
+
+type CreateConnectionTypeFooterProps = {
+  nameDesc: NameDescType;
+  enabled: boolean;
+  fields: ConnectionTypeField[];
+};
+
+export const CreateConnectionTypeFooter: React.FC<CreateConnectionTypeFooterProps> = ({
+  nameDesc,
+  enabled,
+  fields,
+}) => {
+  const navigate = useNavigate();
+
+  const isValid = React.useMemo(() => Boolean(nameDesc.name), [nameDesc.name]);
+
+  const onSave = async () => {
+    if (isValid) {
+      const connection = createConnectionTypeObj(
+        {
+          k8sName: translateDisplayNameForK8s(nameDesc.name),
+          displayName: nameDesc.name,
+          description: nameDesc.description,
+          enabled,
+          username: '',
+        },
+        fields,
+      );
+      try {
+        await createConnectionType(connection);
+        navigate('/connectionTypes');
+      } catch (e) {
+        alert(`Could not create connect type: ${e}`);
+      }
+    }
+  };
+
+  const onCancel = () => {
+    navigate('/connectionTypes');
+  };
+
+  return (
+    <Stack>
+      <StackItem>
+        <ActionList>
+          <ActionListItem>
+            <Button
+              isDisabled={!isValid}
+              variant="primary"
+              data-testid="submit-button"
+              id="create-button"
+              onClick={onSave}
+            >
+              Create
+            </Button>
+          </ActionListItem>
+          <ActionListItem>
+            <Button variant="link" id="cancel-button" onClick={onCancel}>
+              Cancel
+            </Button>
+          </ActionListItem>
+        </ActionList>
+      </StackItem>
+    </Stack>
+  );
+};
diff --git a/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypePage.tsx b/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypePage.tsx
new file mode 100644
index 0000000000..4dc51a1cd1
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypePage.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Checkbox, Form, FormGroup, FormSection, PageSection } from '@patternfly/react-core';
+import ApplicationsPage from '~/pages/ApplicationsPage';
+import { ConnectionTypeField } from '~/concepts/connectionTypes/types';
+import NameDescriptionField from '~/concepts/k8s/NameDescriptionField';
+import { NameDescType } from '~/pages/projects/types';
+import { CreateConnectionTypeFooter } from './CreateConnectionTypeFooter';
+import { CreateConnectionTypeFieldsTable } from './CreateConnectionTypeFieldsTable';
+import { CreateConnectionTypeBreadcrumbs } from './CreateConnectionTypeBreadcrumbs';
+
+type CreateConnectionTypePageProps = {
+  prefillNameDesc?: NameDescType;
+  prefillEnabled?: boolean;
+  prefillFields?: ConnectionTypeField[];
+};
+
+export const CreateConnectionTypePage: React.FC<CreateConnectionTypePageProps> = ({
+  prefillNameDesc,
+  prefillEnabled,
+  prefillFields,
+}) => {
+  const [connectionNameDesc, setConnectionNameDesc] = React.useState<NameDescType>(
+    prefillNameDesc || {
+      name: '',
+      k8sName: undefined,
+      description: '',
+    },
+  );
+  const [connectionEnabled, setConnectionEnabled] = React.useState<boolean>(
+    prefillEnabled || false,
+  );
+  const [connectionFields] = React.useState<ConnectionTypeField[]>(prefillFields || []);
+
+  return (
+    <ApplicationsPage
+      title="Create connection type"
+      loaded
+      empty={false}
+      errorMessage="Unable load to connection types"
+      breadcrumb={<CreateConnectionTypeBreadcrumbs />}
+    >
+      <PageSection isFilled variant="light">
+        <Form>
+          <FormSection title="Type details" style={{ maxWidth: 625 }}>
+            <NameDescriptionField
+              nameFieldId="connection-type-name"
+              nameFieldLabel="Connection type name"
+              descriptionFieldId="connection-type-description"
+              descriptionFieldLabel="Connection type description"
+              data={connectionNameDesc}
+              setData={setConnectionNameDesc}
+              autoFocusName
+            />
+            <FormGroup label="Enable">
+              <Checkbox
+                label="Connection is enabled and therefore available to use by users in your org"
+                id="connection-type-enable"
+                name="connection-type-enable"
+                data-testid="connection-type-enable"
+                isChecked={connectionEnabled}
+                onChange={(_e, value) => setConnectionEnabled(value)}
+              />
+            </FormGroup>
+          </FormSection>
+          <FormSection title="Fields">
+            <FormGroup>
+              <CreateConnectionTypeFieldsTable fields={connectionFields} />
+            </FormGroup>
+          </FormSection>
+        </Form>
+      </PageSection>
+      <PageSection stickyOnBreakpoint={{ default: 'bottom' }} variant="light">
+        <CreateConnectionTypeFooter
+          nameDesc={connectionNameDesc}
+          enabled={connectionEnabled}
+          fields={connectionFields}
+        />
+      </PageSection>
+    </ApplicationsPage>
+  );
+};
diff --git a/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeUtils.ts b/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeUtils.ts
new file mode 100644
index 0000000000..bcd162f32d
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/CreateConnectionType/CreateConnectionTypeUtils.ts
@@ -0,0 +1,41 @@
+import { ConnectionTypeConfigMapObj, ConnectionTypeField } from '~/concepts/connectionTypes/types';
+import { NameDescType } from '~/pages/projects/types';
+
+export const extractConnectionTypeFromMap = (
+  configMap?: ConnectionTypeConfigMapObj,
+): [nameDesc: NameDescType, enabled: boolean, fields: ConnectionTypeField[]] => [
+  {
+    k8sName: configMap?.metadata.name ?? '',
+    name: configMap?.metadata.annotations['openshift.io/display-name'] ?? '',
+    description: configMap?.metadata.annotations['openshift.io/description'] ?? '',
+  },
+  configMap?.metadata.annotations['opendatahub.io/enabled'] === 'true',
+  configMap?.data?.fields ?? [],
+];
+
+export const createConnectionTypeObj = (
+  metadata: {
+    k8sName: string;
+    displayName: string;
+    description: string;
+    enabled: boolean;
+    username: string;
+  },
+  fields: ConnectionTypeField[],
+): ConnectionTypeConfigMapObj => ({
+  kind: 'ConfigMap',
+  apiVersion: 'v1',
+  metadata: {
+    name: metadata.k8sName,
+    annotations: {
+      'openshift.io/display-name': metadata.displayName,
+      'openshift.io/description': metadata.description,
+      'opendatahub.io/enabled': metadata.enabled ? 'true' : 'false',
+      'opendatahub.io/username': metadata.username,
+    },
+    labels: { 'opendatahub.io/dashboard': 'true', 'opendatahub.io/connection-type': 'true' },
+  },
+  data: {
+    fields,
+  },
+});
diff --git a/frontend/src/pages/connectionTypes/CreateConnectionType/DuplicateConnectionTypePage.tsx b/frontend/src/pages/connectionTypes/CreateConnectionType/DuplicateConnectionTypePage.tsx
new file mode 100644
index 0000000000..628bac24a3
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/CreateConnectionType/DuplicateConnectionTypePage.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useParams } from 'react-router';
+import ApplicationsPage from '~/pages/ApplicationsPage';
+import { useConnectionType } from '~/concepts/connectionTypes/useConnectionType';
+import { CreateConnectionTypePage } from './CreateConnectionTypePage';
+import { extractConnectionTypeFromMap } from './CreateConnectionTypeUtils';
+
+export const DuplicateConnectionTypePage: React.FC = () => {
+  const { name } = useParams();
+
+  const [loaded, error, existingConnectionType] = useConnectionType(name);
+  const [nameDesc, enabled, fields] = React.useMemo(
+    () => extractConnectionTypeFromMap(existingConnectionType),
+    [existingConnectionType],
+  );
+
+  if (existingConnectionType) {
+    return (
+      <CreateConnectionTypePage
+        prefillNameDesc={{
+          k8sName: undefined,
+          name: `Duplicate of ${nameDesc.name}`,
+          description: nameDesc.description,
+        }}
+        prefillEnabled={enabled}
+        prefillFields={fields}
+      />
+    );
+  }
+  return <ApplicationsPage loaded={loaded} loadError={error} empty />;
+};
diff --git a/frontend/src/pages/connectionTypes/CreateConnectionType/EditConnectionTypePage.tsx b/frontend/src/pages/connectionTypes/CreateConnectionType/EditConnectionTypePage.tsx
new file mode 100644
index 0000000000..ba27369fd0
--- /dev/null
+++ b/frontend/src/pages/connectionTypes/CreateConnectionType/EditConnectionTypePage.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { CreateConnectionTypePage } from './CreateConnectionTypePage';
+
+export const EditConnectionTypePage: React.FC = () => <CreateConnectionTypePage />;