diff --git a/clients/ui/frontend/package-lock.json b/clients/ui/frontend/package-lock.json
index 57bb275f..6f7bfc21 100644
--- a/clients/ui/frontend/package-lock.json
+++ b/clients/ui/frontend/package-lock.json
@@ -13,6 +13,7 @@
         "@patternfly/react-icons": "6.0.0-alpha.37",
         "@patternfly/react-styles": "6.0.0-alpha.35",
         "@patternfly/react-table": "6.0.0-alpha.101",
+        "@patternfly/react-templates": "6.0.0-alpha.50",
         "classnames": "^2.2.6",
         "dompurify": "^3.1.6",
         "lodash-es": "^4.17.15",
@@ -3647,6 +3648,23 @@
         "react-dom": "^17 || ^18"
       }
     },
+    "node_modules/@patternfly/react-templates": {
+      "version": "6.0.0-alpha.50",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-templates/-/react-templates-6.0.0-alpha.50.tgz",
+      "integrity": "sha512-YmP9iYcejDrnGPadi5Y/qZWG4xmANZe3fB8HMhSWI+CewOAWCifkWC/gv0oaB3eDXCopAnsf0Y6oXR7CNdWgyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@patternfly/react-core": "^6.0.0-alpha.100",
+        "@patternfly/react-icons": "^6.0.0-alpha.35",
+        "@patternfly/react-styles": "^6.0.0-alpha.34",
+        "@patternfly/react-tokens": "^6.0.0-alpha.34",
+        "tslib": "^2.6.3"
+      },
+      "peerDependencies": {
+        "react": "^17 || ^18",
+        "react-dom": "^17 || ^18"
+      }
+    },
     "node_modules/@patternfly/react-tokens": {
       "version": "6.0.0-prerelease.4",
       "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.0.0-prerelease.4.tgz",
diff --git a/clients/ui/frontend/package.json b/clients/ui/frontend/package.json
index 99b0c619..56b47de5 100644
--- a/clients/ui/frontend/package.json
+++ b/clients/ui/frontend/package.json
@@ -94,6 +94,7 @@
     "@patternfly/react-icons": "6.0.0-alpha.37",
     "@patternfly/react-styles": "6.0.0-alpha.35",
     "@patternfly/react-table": "6.0.0-alpha.101",
+    "@patternfly/react-templates": "6.0.0-alpha.50",
     "lodash-es": "^4.17.15",
     "npm-run-all": "^4.1.5",
     "react": "^18",
diff --git a/clients/ui/frontend/src/__mocks__/mockBFFResponse.ts b/clients/ui/frontend/src/__mocks__/mockBFFResponse.ts
index 8b2f910b..f1599462 100644
--- a/clients/ui/frontend/src/__mocks__/mockBFFResponse.ts
+++ b/clients/ui/frontend/src/__mocks__/mockBFFResponse.ts
@@ -1,5 +1,5 @@
-import { ModelRegistryResponse } from '~/app/types';
+import { ModelRegistryBody } from '~/app/types';
 
-export const mockBFFResponse = <T>(data: T): ModelRegistryResponse<T> => ({
+export const mockBFFResponse = <T>(data: T): ModelRegistryBody<T> => ({
   data,
 });
diff --git a/clients/ui/frontend/src/__mocks__/utils.ts b/clients/ui/frontend/src/__mocks__/utils.ts
index 1500da7d..43d1768e 100644
--- a/clients/ui/frontend/src/__mocks__/utils.ts
+++ b/clients/ui/frontend/src/__mocks__/utils.ts
@@ -1,6 +1,6 @@
 import {
   ModelRegistryMetadataType,
-  ModelRegistryResponse,
+  ModelRegistryBody,
   ModelRegistryStringCustomProperties,
 } from '~/app/types';
 
@@ -16,6 +16,6 @@ export const createModelRegistryLabelsObject = (
     return acc;
   }, {} as ModelRegistryStringCustomProperties);
 
-export const mockBFFResponse = <T>(data: T): ModelRegistryResponse<T> => ({
+export const mockBFFResponse = <T>(data: T): ModelRegistryBody<T> => ({
   data,
 });
diff --git a/clients/ui/frontend/src/__tests__/cypress/cypress/support/commands/api.ts b/clients/ui/frontend/src/__tests__/cypress/cypress/support/commands/api.ts
index 1b07dfb8..ceaef6fd 100644
--- a/clients/ui/frontend/src/__tests__/cypress/cypress/support/commands/api.ts
+++ b/clients/ui/frontend/src/__tests__/cypress/cypress/support/commands/api.ts
@@ -3,7 +3,7 @@ import type {
   ModelArtifact,
   ModelArtifactList,
   ModelRegistry,
-  ModelRegistryResponse,
+  ModelRegistryBody,
   ModelVersion,
   ModelVersionList,
   RegisteredModel,
@@ -35,7 +35,7 @@ declare global {
       interceptApi: ((
         type: 'GET /api/:apiVersion/model_registry/:modelRegistryName/registered_models',
         options: { path: { modelRegistryName: string; apiVersion: string } },
-        response: ApiResponse<ModelRegistryResponse<RegisteredModelList>>,
+        response: ApiResponse<ModelRegistryBody<RegisteredModelList>>,
       ) => Cypress.Chainable<null>) &
         ((
           type: 'POST /api/:apiVersion/model_registry/:modelRegistryName/registered_models',
@@ -47,7 +47,7 @@ declare global {
           options: {
             path: { modelRegistryName: string; apiVersion: string; registeredModelId: number };
           },
-          response: ApiResponse<ModelRegistryResponse<ModelVersionList>>,
+          response: ApiResponse<ModelRegistryBody<ModelVersionList>>,
         ) => Cypress.Chainable<null>) &
         ((
           type: 'POST /api/:apiVersion/model_registry/:modelRegistryName/registered_models/:registeredModelId/versions',
@@ -61,28 +61,28 @@ declare global {
           options: {
             path: { modelRegistryName: string; apiVersion: string; registeredModelId: number };
           },
-          response: ApiResponse<ModelRegistryResponse<RegisteredModel>>,
+          response: ApiResponse<ModelRegistryBody<RegisteredModel>>,
         ) => Cypress.Chainable<null>) &
         ((
           type: 'PATCH /api/:apiVersion/model_registry/:modelRegistryName/registered_models/:registeredModelId',
           options: {
             path: { modelRegistryName: string; apiVersion: string; registeredModelId: number };
           },
-          response: ApiResponse<ModelRegistryResponse<RegisteredModel>>,
+          response: ApiResponse<ModelRegistryBody<RegisteredModel>>,
         ) => Cypress.Chainable<null>) &
         ((
           type: 'GET /api/:apiVersion/model_registry/:modelRegistryName/model_versions/:modelVersionId',
           options: {
             path: { modelRegistryName: string; apiVersion: string; modelVersionId: number };
           },
-          response: ApiResponse<ModelRegistryResponse<ModelVersion>>,
+          response: ApiResponse<ModelRegistryBody<ModelVersion>>,
         ) => Cypress.Chainable<null>) &
         ((
           type: 'GET /api/:apiVersion/model_registry/:modelRegistryName/model_versions/:modelVersionId/artifacts',
           options: {
             path: { modelRegistryName: string; apiVersion: string; modelVersionId: number };
           },
-          response: ApiResponse<ModelRegistryResponse<ModelArtifactList>>,
+          response: ApiResponse<ModelRegistryBody<ModelArtifactList>>,
         ) => Cypress.Chainable<null>) &
         ((
           type: 'POST /api/:apiVersion/model_registry/:modelRegistryName/model_versions/:modelVersionId/artifacts',
@@ -101,7 +101,7 @@ declare global {
         ((
           type: 'GET /api/:apiVersion/model_registry',
           options: { path: { apiVersion: string } },
-          response: ApiResponse<ModelRegistryResponse<ModelRegistry[]>>,
+          response: ApiResponse<ModelRegistryBody<ModelRegistry[]>>,
         ) => Cypress.Chainable<null>);
     }
   }
diff --git a/clients/ui/frontend/src/app/api/__tests__/service.spec.ts b/clients/ui/frontend/src/app/api/__tests__/service.spec.ts
index 7da6df75..85be9763 100644
--- a/clients/ui/frontend/src/app/api/__tests__/service.spec.ts
+++ b/clients/ui/frontend/src/app/api/__tests__/service.spec.ts
@@ -28,6 +28,7 @@ jest.mock('~/app/api/apiUtils', () => ({
   restCREATE: jest.fn(() => mockRestPromise),
   restGET: jest.fn(() => mockRestPromise),
   restPATCH: jest.fn(() => mockRestPromise),
+  assembleModelRegistryBody: jest.fn(() => ({})),
   isModelRegistryResponse: jest.fn(() => true),
 }));
 
@@ -61,7 +62,7 @@ describe('createRegisteredModel', () => {
     expect(restCREATEMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/registered_models`,
-      mockData,
+      {},
       {},
       APIOptionsMock,
     );
@@ -89,7 +90,7 @@ describe('createModelVersion', () => {
     expect(restCREATEMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/model_versions`,
-      mockData,
+      {},
       {},
       APIOptionsMock,
     );
@@ -117,7 +118,7 @@ describe('createModelVersionForRegisteredModel', () => {
     expect(restCREATEMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/registered_models/1/versions`,
-      mockData,
+      {},
       {},
       APIOptionsMock,
     );
@@ -150,7 +151,7 @@ describe('createModelArtifact', () => {
     expect(restCREATEMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/model_artifacts`,
-      mockData,
+      {},
       {},
       APIOptionsMock,
     );
@@ -183,7 +184,7 @@ describe('createModelArtifactForModelVersion', () => {
     expect(restCREATEMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/model_versions/2/artifacts`,
-      mockData,
+      {},
       {},
       APIOptionsMock,
     );
@@ -347,7 +348,7 @@ describe('patchRegisteredModel', () => {
     expect(restPATCHMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/registered_models/1`,
-      mockData,
+      {},
       APIOptionsMock,
     );
     expect(handleRestFailuresMock).toHaveBeenCalledTimes(1);
@@ -366,7 +367,7 @@ describe('patchModelVersion', () => {
     expect(restPATCHMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/model_versions/1`,
-      mockData,
+      {},
       APIOptionsMock,
     );
     expect(handleRestFailuresMock).toHaveBeenCalledTimes(1);
@@ -385,7 +386,7 @@ describe('patchModelArtifact', () => {
     expect(restPATCHMock).toHaveBeenCalledWith(
       `/api/${BFF_API_VERSION}/model_registry/model-registry-1/`,
       `/model_artifacts/1`,
-      mockData,
+      {},
       APIOptionsMock,
     );
     expect(handleRestFailuresMock).toHaveBeenCalledTimes(1);
diff --git a/clients/ui/frontend/src/app/api/apiUtils.ts b/clients/ui/frontend/src/app/api/apiUtils.ts
index 93e16681..d14733c7 100644
--- a/clients/ui/frontend/src/app/api/apiUtils.ts
+++ b/clients/ui/frontend/src/app/api/apiUtils.ts
@@ -1,6 +1,6 @@
 import { APIOptions } from '~/app/api/types';
 import { EitherOrNone } from '~/typeHelpers';
-import { ModelRegistryResponse } from '~/app/types';
+import { ModelRegistryBody } from '~/app/types';
 
 export const mergeRequestInit = (
   opts: APIOptions = {},
@@ -163,14 +163,16 @@ export const restDELETE = <T>(
     parseJSON: options?.parseJSON,
   });
 
-export const isModelRegistryResponse = <T>(
-  response: unknown,
-): response is ModelRegistryResponse<T> => {
+export const isModelRegistryResponse = <T>(response: unknown): response is ModelRegistryBody<T> => {
   if (typeof response === 'object' && response !== null) {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    const modelRegistryResponse = response as { data?: T };
+    const modelRegistryBody = response as { data?: T };
     // TODO: Check if data is conforming any type so we have a proper check
-    return modelRegistryResponse.data !== undefined;
+    return modelRegistryBody.data !== undefined;
   }
   return false;
 };
+
+export const assembleModelRegistryBody = <T>(data: T): ModelRegistryBody<T> => ({
+  data,
+});
diff --git a/clients/ui/frontend/src/app/api/service.ts b/clients/ui/frontend/src/app/api/service.ts
index b894c6df..3579877d 100644
--- a/clients/ui/frontend/src/app/api/service.ts
+++ b/clients/ui/frontend/src/app/api/service.ts
@@ -9,26 +9,34 @@ import {
   RegisteredModelList,
   RegisteredModel,
 } from '~/app/types';
-import { isModelRegistryResponse, restCREATE, restGET, restPATCH } from '~/app/api/apiUtils';
+import {
+  assembleModelRegistryBody,
+  isModelRegistryResponse,
+  restCREATE,
+  restGET,
+  restPATCH,
+} from '~/app/api/apiUtils';
 import { APIOptions } from '~/app/api/types';
 import { handleRestFailures } from '~/app/api/errorUtils';
 
 export const createRegisteredModel =
   (hostPath: string) =>
   (opts: APIOptions, data: CreateRegisteredModelData): Promise<RegisteredModel> =>
-    handleRestFailures(restCREATE(hostPath, `/registered_models`, data, {}, opts)).then(
-      (response) => {
-        if (isModelRegistryResponse<RegisteredModel>(response)) {
-          return response.data;
-        }
-        throw new Error('Invalid response format');
-      },
-    );
+    handleRestFailures(
+      restCREATE(hostPath, `/registered_models`, assembleModelRegistryBody(data), {}, opts),
+    ).then((response) => {
+      if (isModelRegistryResponse<RegisteredModel>(response)) {
+        return response.data;
+      }
+      throw new Error('Invalid response format');
+    });
 
 export const createModelVersion =
   (hostPath: string) =>
   (opts: APIOptions, data: CreateModelVersionData): Promise<ModelVersion> =>
-    handleRestFailures(restCREATE(hostPath, `/model_versions`, data, {}, opts)).then((response) => {
+    handleRestFailures(
+      restCREATE(hostPath, `/model_versions`, assembleModelRegistryBody(data), {}, opts),
+    ).then((response) => {
       if (isModelRegistryResponse<ModelVersion>(response)) {
         return response.data;
       }
@@ -43,7 +51,13 @@ export const createModelVersionForRegisteredModel =
     data: CreateModelVersionData,
   ): Promise<ModelVersion> =>
     handleRestFailures(
-      restCREATE(hostPath, `/registered_models/${registeredModelId}/versions`, data, {}, opts),
+      restCREATE(
+        hostPath,
+        `/registered_models/${registeredModelId}/versions`,
+        assembleModelRegistryBody(data),
+        {},
+        opts,
+      ),
     ).then((response) => {
       if (isModelRegistryResponse<ModelVersion>(response)) {
         return response.data;
@@ -54,14 +68,14 @@ export const createModelVersionForRegisteredModel =
 export const createModelArtifact =
   (hostPath: string) =>
   (opts: APIOptions, data: CreateModelArtifactData): Promise<ModelArtifact> =>
-    handleRestFailures(restCREATE(hostPath, `/model_artifacts`, data, {}, opts)).then(
-      (response) => {
-        if (isModelRegistryResponse<ModelArtifact>(response)) {
-          return response.data;
-        }
-        throw new Error('Invalid response format');
-      },
-    );
+    handleRestFailures(
+      restCREATE(hostPath, `/model_artifacts`, assembleModelRegistryBody(data), {}, opts),
+    ).then((response) => {
+      if (isModelRegistryResponse<ModelArtifact>(response)) {
+        return response.data;
+      }
+      throw new Error('Invalid response format');
+    });
 
 export const createModelArtifactForModelVersion =
   (hostPath: string) =>
@@ -71,7 +85,13 @@ export const createModelArtifactForModelVersion =
     data: CreateModelArtifactData,
   ): Promise<ModelArtifact> =>
     handleRestFailures(
-      restCREATE(hostPath, `/model_versions/${modelVersionId}/artifacts`, data, {}, opts),
+      restCREATE(
+        hostPath,
+        `/model_versions/${modelVersionId}/artifacts`,
+        assembleModelRegistryBody(data),
+        {},
+        opts,
+      ),
     ).then((response) => {
       if (isModelRegistryResponse<ModelArtifact>(response)) {
         return response.data;
@@ -177,7 +197,12 @@ export const patchRegisteredModel =
     registeredModelId: string,
   ): Promise<RegisteredModel> =>
     handleRestFailures(
-      restPATCH(hostPath, `/registered_models/${registeredModelId}`, data, opts),
+      restPATCH(
+        hostPath,
+        `/registered_models/${registeredModelId}`,
+        assembleModelRegistryBody(data),
+        opts,
+      ),
     ).then((response) => {
       if (isModelRegistryResponse<RegisteredModel>(response)) {
         return response.data;
@@ -188,14 +213,19 @@ export const patchRegisteredModel =
 export const patchModelVersion =
   (hostPath: string) =>
   (opts: APIOptions, data: Partial<ModelVersion>, modelversionId: string): Promise<ModelVersion> =>
-    handleRestFailures(restPATCH(hostPath, `/model_versions/${modelversionId}`, data, opts)).then(
-      (response) => {
-        if (isModelRegistryResponse<ModelVersion>(response)) {
-          return response.data;
-        }
-        throw new Error('Invalid response format');
-      },
-    );
+    handleRestFailures(
+      restPATCH(
+        hostPath,
+        `/model_versions/${modelversionId}`,
+        assembleModelRegistryBody(data),
+        opts,
+      ),
+    ).then((response) => {
+      if (isModelRegistryResponse<ModelVersion>(response)) {
+        return response.data;
+      }
+      throw new Error('Invalid response format');
+    });
 
 export const patchModelArtifact =
   (hostPath: string) =>
@@ -204,11 +234,16 @@ export const patchModelArtifact =
     data: Partial<ModelArtifact>,
     modelartifactId: string,
   ): Promise<ModelArtifact> =>
-    handleRestFailures(restPATCH(hostPath, `/model_artifacts/${modelartifactId}`, data, opts)).then(
-      (response) => {
-        if (isModelRegistryResponse<ModelArtifact>(response)) {
-          return response.data;
-        }
-        throw new Error('Invalid response format');
-      },
-    );
+    handleRestFailures(
+      restPATCH(
+        hostPath,
+        `/model_artifacts/${modelartifactId}`,
+        assembleModelRegistryBody(data),
+        opts,
+      ),
+    ).then((response) => {
+      if (isModelRegistryResponse<ModelArtifact>(response)) {
+        return response.data;
+      }
+      throw new Error('Invalid response format');
+    });
diff --git a/clients/ui/frontend/src/app/components/MarkdownView.scss b/clients/ui/frontend/src/app/components/MarkdownView.scss
index aa367b23..7192c5c2 100644
--- a/clients/ui/frontend/src/app/components/MarkdownView.scss
+++ b/clients/ui/frontend/src/app/components/MarkdownView.scss
@@ -2,10 +2,10 @@
   word-break: break-word;
 
   &--with-padding {
-    padding-bottom: var(--pf-v5-global--spacer--md);
+    padding-bottom: var(--pf-v6-global--spacer--md);
 
     p {
-      margin-bottom: var(--pf-v5-global--spacer--sm);
+      margin-bottom: var(--pf-v6-global--spacer--sm);
     }
   }
 
@@ -15,35 +15,35 @@
   h4,
   h5,
   h6 {
-    font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
-    font-weight: var(--pf-v5-global--FontWeight--normal);
-    margin-top: var(--pf-v5-global--spacer--md);
-    margin-bottom: var(--pf-v5-global--spacer--sm);
+    font-family: var(--pf-v6-global--FontFamily--heading--sans-serif);
+    font-weight: var(--pf-v6-global--FontWeight--normal);
+    margin-top: var(--pf-v6-global--spacer--md);
+    margin-bottom: var(--pf-v6-global--spacer--sm);
   }
 
   h1 {
-    font-size: var(--pf-v5-global--FontSize--2xl);
+    font-size: var(--pf-v6-global--FontSize--2xl);
   }
 
   h2 {
-    font-size: var(--pf-v5-global--FontSize--xl);
+    font-size: var(--pf-v6-global--FontSize--xl);
   }
 
   h3 {
-    font-size: var(--pf-v5-global--FontSize--lg);
+    font-size: var(--pf-v6-global--FontSize--lg);
   }
 
   h4,
   h5,
   h6 {
-    font-size: var(--pf-v5-global--FontSize--md);
-    margin-top: var(--pf-v5-global--spacer--sm);
+    font-size: var(--pf-v6-global--FontSize--md);
+    margin-top: var(--pf-v6-global--spacer--sm);
   }
 
   ul,
   ol {
     margin-top: 0;
-    margin-bottom: var(--pf-v5-global--spacer--sm);
+    margin-bottom: var(--pf-v6-global--spacer--sm);
   }
 
   ul {
@@ -51,33 +51,33 @@
   }
 
   li {
-    margin-left: var(--pf-v5-global--spacer--lg);
+    margin-left: var(--pf-v6-global--spacer--lg);
   }
 
   code,
   pre {
     font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
-    background-color: var(--pf-v5-global--BackgroundColor--200);
-    border-radius: var(--pf-v5-global--BorderRadius--sm);
+    background-color: var(--pf-v6-global--BackgroundColor--200);
+    border-radius: var(--pf-v6-global--BorderRadius--sm);
   }
 
   code {
     padding: 2px 4px;
     font-size: 85%;
-    color: var(--pf-v5-global--danger-color--100);
+    color: var(--pf-v6-global--danger-color--100);
   }
 
   pre {
     display: block;
-    padding: var(--pf-v5-global--spacer--sm);
-    margin-bottom: var(--pf-v5-global--spacer--sm);
-    font-size: var(--pf-v5-global--FontSize--sm);
-    color: var(--pf-v5-global--Color--300);
+    padding: var(--pf-v6-global--spacer--sm);
+    margin-bottom: var(--pf-v6-global--spacer--sm);
+    font-size: var(--pf-v6-global--FontSize--sm);
+    color: var(--pf-v6-global--Color--300);
     word-break: break-all;
     word-wrap: break-word;
-    background-color: var(--pf-v5-global--BackgroundColor--200);
-    border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--Color--light-300);
-    border-radius: var(--pf-v5-global--BorderRadius--sm);
+    background-color: var(--pf-v6-global--BackgroundColor--200);
+    border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--Color--light-300);
+    border-radius: var(--pf-v6-global--BorderRadius--sm);
     code {
       padding: 0;
       font-size: inherit;
diff --git a/clients/ui/frontend/src/app/components/SimpleSelect.scss b/clients/ui/frontend/src/app/components/SimpleSelect.scss
index 30dd3051..31c2011c 100644
--- a/clients/ui/frontend/src/app/components/SimpleSelect.scss
+++ b/clients/ui/frontend/src/app/components/SimpleSelect.scss
@@ -4,6 +4,6 @@
 
 // remove this file when https://github.com/patternfly/patternfly/issues/6062 is solved
 .truncate-no-min-width {
-	--pf-v5-c-truncate--MinWidth: 0;
-	--pf-v5-c-truncate__start--MinWidth: 0;
+	--pf-v6-c-truncate--MinWidth: 0;
+	--pf-v6-c-truncate__start--MinWidth: 0;
 }
diff --git a/clients/ui/frontend/src/app/components/design/DividedGallery.scss b/clients/ui/frontend/src/app/components/design/DividedGallery.scss
index 002cf987..31662f09 100644
--- a/clients/ui/frontend/src/app/components/design/DividedGallery.scss
+++ b/clients/ui/frontend/src/app/components/design/DividedGallery.scss
@@ -1,27 +1,27 @@
 .kubeflowdivided-gallery {
   position: relative;
-  background-color: var(--pf-v5-global--BackgroundColor--100);
+  background-color: var(--pf-v6-global--BackgroundColor--100);
 
   &__border {
     width: 2px;
     position: absolute;
-    top: var(--pf-v5-global--spacer--md);
-    bottom: var(--pf-v5-global--spacer--md);
+    top: var(--pf-v6-global--spacer--md);
+    bottom: var(--pf-v6-global--spacer--md);
     left: 0;
     background-color: white;
     content: ' ';
   }
   &__item {
-    border-left: 1px solid var(--pf-v5-global--BorderColor--100);
-    padding: 0 var(--pf-v5-global--spacer--xl);
-    margin: var(--pf-v5-global--spacer--md) 0;
+    border-left: 1px solid var(--pf-v6-global--BorderColor--100);
+    padding: 0 var(--pf-v6-global--spacer--xl);
+    margin: var(--pf-v6-global--spacer--md) 0;
   }
-  .pf-v5-l-gallery {
+  .pf-v6-l-gallery {
     position: relative;
   }
   &__close {
     position: absolute;
-    top: var(--pf-v5-global--spacer--xs);
+    top: var(--pf-v6-global--spacer--xs);
     right: 0;
   }
 }
diff --git a/clients/ui/frontend/src/app/components/design/InfoGalleryItem.tsx b/clients/ui/frontend/src/app/components/design/InfoGalleryItem.tsx
index 3ce5f3f1..eaf8d9f9 100644
--- a/clients/ui/frontend/src/app/components/design/InfoGalleryItem.tsx
+++ b/clients/ui/frontend/src/app/components/design/InfoGalleryItem.tsx
@@ -66,8 +66,8 @@ const InfoGalleryItem: React.FC<InfoGalleryItemProps> = ({
               isInline
               onClick={onClick}
               style={{
-                fontSize: 'var(--pf-v5-global--FontSize--md)',
-                fontWeight: 'var(--pf-v5-global--FontWeight--bold)',
+                fontSize: 'var(--pf-v6-global--FontSize--md)',
+                fontWeight: 'var(--pf-v6-global--FontWeight--bold)',
               }}
             >
               {title}
diff --git a/clients/ui/frontend/src/app/components/design/ScrolledGallery.tsx b/clients/ui/frontend/src/app/components/design/ScrolledGallery.tsx
index 3d619970..4c85f141 100644
--- a/clients/ui/frontend/src/app/components/design/ScrolledGallery.tsx
+++ b/clients/ui/frontend/src/app/components/design/ScrolledGallery.tsx
@@ -22,8 +22,8 @@ const ScrolledGallery: React.FC<ScrolledGalleryProps> = ({
         display: 'grid',
         gridAutoFlow: 'column',
         overflowY: 'auto',
-        gap: 'var(--pf-v5-global--spacer--md)',
-        paddingBottom: 'var(--pf-v5-global--spacer--sm)',
+        gap: 'var(--pf-v6-global--spacer--md)',
+        paddingBottom: 'var(--pf-v6-global--spacer--sm)',
       }}
       {...rest}
     >
diff --git a/clients/ui/frontend/src/app/components/design/TypeBorderCard.scss b/clients/ui/frontend/src/app/components/design/TypeBorderCard.scss
index 799ac8c3..ea20bbf8 100644
--- a/clients/ui/frontend/src/app/components/design/TypeBorderCard.scss
+++ b/clients/ui/frontend/src/app/components/design/TypeBorderCard.scss
@@ -1,7 +1,7 @@
 .kubeflowtype-bordered-card {
   position: relative;
   border-radius: 16px;
-  border: 1px solid var(--pf-v5-global--BorderColor--100);
+  border: 1px solid var(--pf-v6-global--BorderColor--100);
   padding: 1px;
 
   &:after {
diff --git a/clients/ui/frontend/src/app/components/pf-overrides/FormSection.scss b/clients/ui/frontend/src/app/components/pf-overrides/FormSection.scss
new file mode 100644
index 00000000..351e535b
--- /dev/null
+++ b/clients/ui/frontend/src/app/components/pf-overrides/FormSection.scss
@@ -0,0 +1,8 @@
+.kf-form-section {
+  &__desc {
+    margin-top: var(--pf-v6-global--spacer--sm);
+    font-size: var(--pf-v6-global--FontSize--sm);
+    color: var(--pf-v6-global--Color--200);
+    font-weight: initial;
+  }
+}
diff --git a/clients/ui/frontend/src/app/components/pf-overrides/FormSection.tsx b/clients/ui/frontend/src/app/components/pf-overrides/FormSection.tsx
new file mode 100644
index 00000000..17fc71b1
--- /dev/null
+++ b/clients/ui/frontend/src/app/components/pf-overrides/FormSection.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { FormSection as PFFormSection, FormSectionProps, Content } 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-v6-c-form__section-title">{title}</TitleElement>
+          <Content component="p" className="kf-form-section__desc">
+            {description}
+          </Content>
+        </>
+      ) : (
+        title
+      )
+    }
+  />
+);
+
+export default FormSection;
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/ModelRegistryRoutes.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/ModelRegistryRoutes.tsx
index c64a58c7..c37d93a2 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/ModelRegistryRoutes.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/ModelRegistryRoutes.tsx
@@ -12,6 +12,8 @@ import ModelVersionsArchive from './screens/ModelVersionsArchive/ModelVersionsAr
 import ModelVersionsArchiveDetails from './screens/ModelVersionsArchive/ModelVersionArchiveDetails';
 import ArchiveModelVersionDetails from './screens/ModelVersionsArchive/ArchiveModelVersionDetails';
 import RegisteredModelsArchiveDetails from './screens/RegisteredModelsArchive/RegisteredModelArchiveDetails';
+import RegisterModel from './screens/RegisterModel/RegisterModel';
+import RegisterVersion from './screens/RegisterModel/RegisterVersion';
 
 const ModelRegistryRoutes: React.FC = () => (
   <Routes>
@@ -34,6 +36,7 @@ const ModelRegistryRoutes: React.FC = () => (
           path={ModelVersionsTab.DETAILS}
           element={<ModelVersions tab={ModelVersionsTab.DETAILS} empty={false} />}
         />
+        <Route path="registerVersion" element={<RegisterVersion />} />
         <Route path="versions/:modelVersionId">
           <Route index element={<Navigate to={ModelVersionDetailsTab.DETAILS} replace />} />
           <Route
@@ -88,6 +91,8 @@ const ModelRegistryRoutes: React.FC = () => (
         </Route>
         <Route path="*" element={<Navigate to="." />} />
       </Route>
+      <Route path="registerModel" element={<RegisterModel />} />
+      <Route path="registerVersion" element={<RegisterVersion />} />
       <Route path="*" element={<Navigate to="." />} />
     </Route>
   </Routes>
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelRegistry.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelRegistry.tsx
index ddc33484..75cf9f11 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelRegistry.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/ModelRegistry.tsx
@@ -3,7 +3,7 @@ import ApplicationsPage from '~/app/components/ApplicationsPage';
 import TitleWithIcon from '~/app/components/design/TitleWithIcon';
 import { ProjectObjectType } from '~/app/components/design/utils';
 import useRegisteredModels from '~/app/hooks/useRegisteredModels';
-import { filterLiveModels } from '~/app/utils';
+import { filterLiveModels } from '~/app/pages/modelRegistry/screens/utils';
 import ModelRegistrySelectorNavigator from './ModelRegistrySelectorNavigator';
 import RegisteredModelListView from './RegisteredModels/RegisteredModelListView';
 import { modelRegistryUrl } from './routeUtils';
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx
new file mode 100644
index 00000000..980da8d3
--- /dev/null
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { FormGroup, TextInput } from '@patternfly/react-core';
+
+type PrefilledModelRegistryFieldProps = {
+  mrName?: string;
+};
+
+const PrefilledModelRegistryField: React.FC<PrefilledModelRegistryFieldProps> = ({ mrName }) => (
+  <FormGroup label="Model registry" isRequired fieldId="mr-name">
+    <TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
+  </FormGroup>
+);
+
+export default PrefilledModelRegistryField;
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
new file mode 100644
index 00000000..c6cffb9d
--- /dev/null
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Form,
+  FormGroup,
+  PageSection,
+  Stack,
+  StackItem,
+  TextArea,
+  TextInput,
+} 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 '~/app/components/pf-overrides/FormSection';
+import ApplicationsPage from '~/app/components/ApplicationsPage';
+import { modelRegistryUrl, registeredModelUrl } from '~/app/pages/modelRegistry/screens/routeUtils';
+import { ValueOf } from '~/typeHelpers';
+import { useRegisterModelData, RegistrationCommonFormData } from './useRegisterModelData';
+import { isRegisterModelSubmitDisabled, registerModel } from './utils';
+import { useRegistrationCommonState } from './useRegistrationCommonState';
+import RegistrationCommonFormSections from './RegistrationCommonFormSections';
+import PrefilledModelRegistryField from './PrefilledModelRegistryField';
+import RegistrationFormFooter from './RegistrationFormFooter';
+
+const RegisterModel: React.FC = () => {
+  const { modelRegistry: mrName } = useParams();
+  const navigate = useNavigate();
+
+  const { isSubmitting, submitError, setSubmitError, handleSubmit, apiState, author } =
+    useRegistrationCommonState();
+
+  const [formData, setData] = useRegisterModelData();
+  const isSubmitDisabled = isSubmitting || isRegisterModelSubmitDisabled(formData);
+  const { modelName, modelDescription } = formData;
+
+  const onSubmit = () =>
+    handleSubmit(async () => {
+      const { registeredModel } = await registerModel(apiState, formData, author);
+      navigate(registeredModelUrl(registeredModel.id, mrName));
+    });
+  const onCancel = () => navigate(modelRegistryUrl(mrName));
+
+  return (
+    <ApplicationsPage
+      title="Register model"
+      description="Create a new model and register the first version of your new model."
+      breadcrumb={
+        <Breadcrumb>
+          <BreadcrumbItem
+            render={() => <Link to={modelRegistryUrl(mrName)}>Model registry - {mrName}</Link>}
+          />
+          <BreadcrumbItem>Register model</BreadcrumbItem>
+        </Breadcrumb>
+      }
+      loaded
+      empty={false}
+    >
+      <PageSection hasBodyWrapper={false} isFilled>
+        <Form isWidthLimited>
+          <Stack hasGutter>
+            <StackItem className={spacing.mbLg}>
+              <PrefilledModelRegistryField mrName={mrName} />
+            </StackItem>
+            <StackItem>
+              <FormSection
+                title="Model details"
+                description="Provide general details that apply to all versions of this model."
+              >
+                <FormGroup label="Model name" isRequired fieldId="model-name">
+                  <TextInput
+                    isRequired
+                    type="text"
+                    id="model-name"
+                    name="model-name"
+                    value={modelName}
+                    onChange={(_e, value) => setData('modelName', value)}
+                  />
+                </FormGroup>
+                <FormGroup label="Model description" fieldId="model-description">
+                  <TextArea
+                    type="text"
+                    id="model-description"
+                    name="model-description"
+                    value={modelDescription}
+                    onChange={(_e, value) => setData('modelDescription', value)}
+                  />
+                </FormGroup>
+              </FormSection>
+              <RegistrationCommonFormSections
+                formData={formData}
+                setData={(
+                  propKey: keyof RegistrationCommonFormData,
+                  propValue: ValueOf<RegistrationCommonFormData>,
+                ) => setData(propKey, propValue)}
+                isFirstVersion
+              />
+            </StackItem>
+          </Stack>
+        </Form>
+      </PageSection>
+      <RegistrationFormFooter
+        submitLabel="Register model"
+        submitError={submitError}
+        setSubmitError={setSubmitError}
+        isSubmitDisabled={isSubmitDisabled}
+        isSubmitting={isSubmitting}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+      />
+    </ApplicationsPage>
+  );
+};
+
+export default RegisterModel;
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterVersion.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterVersion.tsx
new file mode 100644
index 00000000..75447e8e
--- /dev/null
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterVersion.tsx
@@ -0,0 +1,146 @@
+import React from 'react';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Form,
+  FormGroup,
+  PageSection,
+  Spinner,
+  Stack,
+  StackItem,
+} 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 ApplicationsPage from '~/app/components/ApplicationsPage';
+import { modelRegistryUrl, registeredModelUrl } from '~/app/pages/modelRegistry/screens/routeUtils';
+import useRegisteredModels from '~/app/hooks/useRegisteredModels';
+import { ValueOf } from '~/typeHelpers';
+import { filterLiveModels } from '~/app/pages/modelRegistry/screens/utils';
+import { RegistrationCommonFormData, useRegisterVersionData } from './useRegisterModelData';
+import { isRegisterVersionSubmitDisabled, registerVersion } from './utils';
+import RegistrationCommonFormSections from './RegistrationCommonFormSections';
+import { useRegistrationCommonState } from './useRegistrationCommonState';
+import PrefilledModelRegistryField from './PrefilledModelRegistryField';
+import RegistrationFormFooter from './RegistrationFormFooter';
+import RegisteredModelSelector from './RegisteredModelSelector';
+import { usePrefillRegisterVersionFields } from './usePrefillRegisterVersionFields';
+
+const RegisterVersion: React.FC = () => {
+  const { modelRegistry: mrName, registeredModelId: prefilledRegisteredModelId } = useParams();
+
+  const navigate = useNavigate();
+
+  const { isSubmitting, submitError, setSubmitError, handleSubmit, apiState, author } =
+    useRegistrationCommonState();
+
+  const [formData, setData] = useRegisterVersionData(prefilledRegisteredModelId);
+  const isSubmitDisabled = isSubmitting || isRegisterVersionSubmitDisabled(formData);
+  const { registeredModelId } = formData;
+
+  const [allRegisteredModels, loadedRegisteredModels, loadRegisteredModelsError] =
+    useRegisteredModels();
+  const liveRegisteredModels = filterLiveModels(allRegisteredModels.items);
+  const registeredModel = liveRegisteredModels.find(({ id }) => id === registeredModelId);
+
+  const { loadedPrefillData, loadPrefillDataError, latestVersion } =
+    usePrefillRegisterVersionFields({
+      registeredModel,
+      setData,
+    });
+
+  const onSubmit = () => {
+    if (!registeredModel) {
+      return; // We shouldn't be able to hit this due to form validation
+    }
+    handleSubmit(async () => {
+      await registerVersion(apiState, registeredModel, formData, author);
+      navigate(registeredModelUrl(registeredModel.id, mrName));
+    });
+  };
+  const onCancel = () =>
+    navigate(
+      prefilledRegisteredModelId && registeredModel
+        ? registeredModelUrl(registeredModel.id, mrName)
+        : modelRegistryUrl(mrName),
+    );
+
+  return (
+    <ApplicationsPage
+      title="Register new version"
+      description="Register a latest version to the model you selected below."
+      breadcrumb={
+        <Breadcrumb>
+          <BreadcrumbItem
+            render={() => <Link to={modelRegistryUrl(mrName)}>Model registry - {mrName}</Link>}
+          />
+          {prefilledRegisteredModelId && registeredModel && (
+            <BreadcrumbItem
+              render={() => (
+                <Link to={registeredModelUrl(registeredModel.id, mrName)}>
+                  {registeredModel.name}
+                </Link>
+              )}
+            />
+          )}
+          <BreadcrumbItem>Register new version</BreadcrumbItem>
+        </Breadcrumb>
+      }
+      loadError={loadRegisteredModelsError || loadPrefillDataError}
+      // Data for prefilling is refetched when the model selection changes, so we don't handle its loaded state here.
+      // Instead we show a spinner in RegisteredModelSelector after that selection changes.
+      loaded={loadedRegisteredModels}
+      empty={false}
+    >
+      <PageSection hasBodyWrapper={false} isFilled>
+        <Form isWidthLimited>
+          <Stack hasGutter>
+            <StackItem>
+              <PrefilledModelRegistryField mrName={mrName} />
+            </StackItem>
+            <StackItem className={spacing.mbLg}>
+              <FormGroup
+                id="registered-model-container"
+                label="Model name"
+                isRequired
+                fieldId="model-name"
+                labelHelp={
+                  !loadedPrefillData ? <Spinner size="sm" className={spacing.mlMd} /> : undefined
+                }
+              >
+                <RegisteredModelSelector
+                  registeredModels={liveRegisteredModels}
+                  registeredModelId={registeredModelId}
+                  setRegisteredModelId={(id) => setData('registeredModelId', id)}
+                  isDisabled={!!prefilledRegisteredModelId}
+                />
+              </FormGroup>
+            </StackItem>
+            <StackItem>
+              <RegistrationCommonFormSections
+                formData={formData}
+                setData={(
+                  propKey: keyof RegistrationCommonFormData,
+                  propValue: ValueOf<RegistrationCommonFormData>,
+                ) => setData(propKey, propValue)}
+                isFirstVersion={false}
+                latestVersion={latestVersion}
+              />
+            </StackItem>
+          </Stack>
+        </Form>
+      </PageSection>
+      <RegistrationFormFooter
+        submitLabel="Register new version"
+        submitError={submitError}
+        setSubmitError={setSubmitError}
+        isSubmitDisabled={isSubmitDisabled}
+        isSubmitting={isSubmitting}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+      />
+    </ApplicationsPage>
+  );
+};
+
+export default RegisterVersion;
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx
new file mode 100644
index 00000000..0c450b4d
--- /dev/null
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { TextInput } from '@patternfly/react-core';
+import { TypeaheadSelect, TypeaheadSelectOption } from '@patternfly/react-templates';
+import { RegisteredModel } from '~/app/types';
+
+type RegisteredModelSelectorProps = {
+  registeredModels: RegisteredModel[];
+  registeredModelId: string;
+  setRegisteredModelId: (id: string) => void;
+  isDisabled: boolean;
+};
+
+const RegisteredModelSelector: React.FC<RegisteredModelSelectorProps> = ({
+  registeredModels,
+  registeredModelId,
+  setRegisteredModelId,
+  isDisabled,
+}) => {
+  const options: TypeaheadSelectOption[] = React.useMemo(
+    () =>
+      registeredModels.map(({ name, id }) => ({
+        content: name,
+        value: id,
+        isSelected: id === registeredModelId,
+      })),
+    [registeredModels, registeredModelId],
+  );
+
+  if (isDisabled && registeredModelId) {
+    /*
+      If we're registering a new version for an existing model, we prefill the model and don't allow it to change.
+      TODO: We should just be using the `isDisabled` prop of TypeaheadSelect instead of a separate disabled text field,
+        but TypeaheadSelect doesn't currently have a way to prefill the selected item / lift the selection state.
+        See related PatternFly issue https://github.com/patternfly/patternfly-react/issues/10842
+    */
+    return (
+      <TextInput
+        isDisabled
+        isRequired
+        type="text"
+        id="model-name"
+        name="registered-model-prefilled"
+        value={options.find(({ value }) => value === registeredModelId)?.content}
+      />
+    );
+  }
+
+  return (
+    <TypeaheadSelect
+      id="model-name"
+      initialOptions={options}
+      placeholder="Select a registered model"
+      noOptionsFoundMessage={(filter) => `No results found for "${filter}"`}
+      onSelect={(_event, selection) => {
+        setRegisteredModelId(String(selection));
+      }}
+    />
+  );
+};
+
+export default RegisteredModelSelector;
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx
new file mode 100644
index 00000000..10f069c8
--- /dev/null
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx
@@ -0,0 +1,249 @@
+import React from 'react';
+import {
+  FormGroup,
+  TextInput,
+  TextArea,
+  Radio,
+  Split,
+  SplitItem,
+  InputGroupText,
+  InputGroupItem,
+  HelperText,
+  HelperTextItem,
+  FormHelperText,
+} from '@patternfly/react-core';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import { UpdateObjectAtPropAndValue } from '~/types';
+// import { DataConnection, UpdateObjectAtPropAndValue } from '~/pages/projects/types';
+// import { convertAWSSecretData } from '~/pages/projects/screens/detail/data-connections/utils';
+import FormSection from '~/app/components/pf-overrides/FormSection';
+import { ModelVersion } from '~/app/types';
+import { ModelLocationType, RegistrationCommonFormData } from './useRegisterModelData';
+// import { ConnectionModal } from './ConnectionModal';
+
+type RegistrationCommonFormSectionsProps = {
+  formData: RegistrationCommonFormData;
+  setData: UpdateObjectAtPropAndValue<RegistrationCommonFormData>;
+  isFirstVersion: boolean;
+  latestVersion?: ModelVersion;
+};
+
+const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsProps> = ({
+  formData,
+  setData,
+  isFirstVersion,
+  latestVersion,
+}) => {
+  // const [isAutofillModalOpen, setAutofillModalOpen] = React.useState(false); TODO: Check wether we should use data connections
+
+  // const connectionDataMap: Record<string, keyof RegistrationCommonFormData> = {
+  //   AWS_S3_ENDPOINT: 'modelLocationEndpoint',
+  //   AWS_S3_BUCKET: 'modelLocationBucket',
+  //   AWS_DEFAULT_REGION: 'modelLocationRegion',
+  // };
+
+  // const fillObjectStorageByConnection = (connection: DataConnection) => {
+  //   convertAWSSecretData(connection).forEach((dataItem) => {
+  //     setData(connectionDataMap[dataItem.key], dataItem.value);
+  //   });
+  // };
+
+  const {
+    versionName,
+    versionDescription,
+    sourceModelFormat,
+    sourceModelFormatVersion,
+    modelLocationType,
+    modelLocationEndpoint,
+    modelLocationBucket,
+    modelLocationRegion,
+    modelLocationPath,
+    modelLocationURI,
+  } = formData;
+
+  return (
+    <>
+      <FormSection
+        title="Version details"
+        description={
+          isFirstVersion
+            ? 'Configure details for the first version of this model.'
+            : 'Configure details for the version of this model.'
+        }
+      >
+        <FormGroup label="Version name" isRequired fieldId="version-name">
+          <TextInput
+            isRequired
+            type="text"
+            id="version-name"
+            name="version-name"
+            value={versionName}
+            onChange={(_e, value) => setData('versionName', value)}
+          />
+          {latestVersion && (
+            <FormHelperText>
+              <HelperText>
+                <HelperTextItem>Current version is {latestVersion.name}</HelperTextItem>
+              </HelperText>
+            </FormHelperText>
+          )}
+        </FormGroup>
+        <FormGroup label="Version description" fieldId="version-description">
+          <TextArea
+            type="text"
+            id="version-description"
+            name="version-description"
+            value={versionDescription}
+            onChange={(_e, value) => setData('versionDescription', value)}
+          />
+        </FormGroup>
+        <FormGroup label="Source model format" fieldId="source-model-format">
+          <TextInput
+            type="text"
+            placeholder="Example, tensorflow"
+            id="source-model-format"
+            name="source-model-format"
+            value={sourceModelFormat}
+            onChange={(_e, value) => setData('sourceModelFormat', value)}
+          />
+        </FormGroup>
+        <FormGroup label="Source model format version" fieldId="source-model-format-version">
+          <TextInput
+            type="text"
+            placeholder="Example, 1"
+            id="source-model-format-version"
+            name="source-model-format-version"
+            value={sourceModelFormatVersion}
+            onChange={(_e, value) => setData('sourceModelFormatVersion', value)}
+          />
+        </FormGroup>
+      </FormSection>
+      <FormSection
+        title="Model location"
+        description="Specify the model location by providing either the object storage details or the URI."
+      >
+        <Split>
+          <SplitItem isFilled>
+            <Radio
+              isChecked={modelLocationType === ModelLocationType.ObjectStorage}
+              name="location-type-object-storage"
+              onChange={() => {
+                setData('modelLocationType', ModelLocationType.ObjectStorage);
+              }}
+              label="Object storage"
+              id="location-type-object-storage"
+            />
+          </SplitItem>
+          {/* {modelLocationType === ModelLocationType.ObjectStorage && (
+            <SplitItem>
+              <Button
+                data-testid="object-storage-autofill-button"
+                variant="link"
+                isInline
+                icon={<OptimizeIcon />}
+                onClick={() => setAutofillModalOpen(true)}
+              >
+                Autofill from data connection
+              </Button>
+            </SplitItem>
+          )} */}
+        </Split>
+        {modelLocationType === ModelLocationType.ObjectStorage && (
+          <>
+            <FormGroup
+              className={spacing.mlLg}
+              label="Endpoint"
+              isRequired
+              fieldId="location-endpoint"
+            >
+              <TextInput
+                isRequired
+                type="text"
+                id="location-endpoint"
+                name="location-endpoint"
+                value={modelLocationEndpoint}
+                onChange={(_e, value) => setData('modelLocationEndpoint', value)}
+              />
+            </FormGroup>
+            <FormGroup className={spacing.mlLg} label="Bucket" isRequired fieldId="location-bucket">
+              <TextInput
+                isRequired
+                type="text"
+                id="location-bucket"
+                name="location-bucket"
+                value={modelLocationBucket}
+                onChange={(_e, value) => setData('modelLocationBucket', value)}
+              />
+            </FormGroup>
+            <FormGroup className={spacing.mlLg} label="Region" fieldId="location-region">
+              <TextInput
+                type="text"
+                id="location-region"
+                name="location-region"
+                value={modelLocationRegion}
+                onChange={(_e, value) => setData('modelLocationRegion', value)}
+              />
+            </FormGroup>
+            <FormGroup className={spacing.mlLg} label="Path" isRequired fieldId="location-path">
+              <Split hasGutter>
+                <SplitItem>
+                  <InputGroupText isPlain>/</InputGroupText>
+                </SplitItem>
+                <SplitItem isFilled>
+                  <InputGroupItem>
+                    <TextInput
+                      isRequired
+                      type="text"
+                      id="location-path"
+                      name="location-path"
+                      value={modelLocationPath}
+                      onChange={(_e, value) => setData('modelLocationPath', value)}
+                    />
+                  </InputGroupItem>
+                </SplitItem>
+              </Split>
+              <HelperText>
+                <HelperTextItem>
+                  Enter a path to a model or folder. This path cannot point to a root folder.
+                </HelperTextItem>
+              </HelperText>
+            </FormGroup>
+          </>
+        )}
+        <Radio
+          isChecked={modelLocationType === ModelLocationType.URI}
+          name="location-type-uri"
+          onChange={() => {
+            setData('modelLocationType', ModelLocationType.URI);
+          }}
+          label="URI"
+          id="location-type-uri"
+          body={
+            modelLocationType === ModelLocationType.URI && (
+              <FormGroup label="URI" isRequired fieldId="location-uri">
+                <TextInput
+                  isRequired
+                  type="text"
+                  id="location-uri"
+                  name="location-uri"
+                  value={modelLocationURI}
+                  onChange={(_e, value) => setData('modelLocationURI', value)}
+                />
+              </FormGroup>
+            )
+          }
+        />
+      </FormSection>
+      {/* <ConnectionModal
+        isOpen={isAutofillModalOpen}
+        onClose={() => setAutofillModalOpen(false)}
+        onSubmit={(connection) => {
+          fillObjectStorageByConnection(connection);
+          setAutofillModalOpen(false);
+        }}
+      /> */}
+    </>
+  );
+};
+
+export default RegistrationCommonFormSections;
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationFormFooter.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationFormFooter.tsx
new file mode 100644
index 00000000..86ca6478
--- /dev/null
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationFormFooter.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import {
+  PageSection,
+  Stack,
+  StackItem,
+  Alert,
+  AlertActionCloseButton,
+  ActionGroup,
+  Button,
+} from '@patternfly/react-core';
+
+type RegistrationFormFooterProps = {
+  submitLabel: string;
+  submitError?: Error;
+  setSubmitError: (e?: Error) => void;
+  isSubmitDisabled: boolean;
+  isSubmitting: boolean;
+  onSubmit: () => void;
+  onCancel: () => void;
+};
+
+const RegistrationFormFooter: React.FC<RegistrationFormFooterProps> = ({
+  submitLabel,
+  submitError,
+  setSubmitError,
+  isSubmitDisabled,
+  isSubmitting,
+  onSubmit,
+  onCancel,
+}) => (
+  <PageSection hasBodyWrapper={false} stickyOnBreakpoint={{ default: 'bottom' }}>
+    <Stack hasGutter>
+      {submitError && (
+        <StackItem>
+          <Alert
+            isInline
+            variant="danger"
+            title={submitError.name}
+            actionClose={<AlertActionCloseButton onClose={() => setSubmitError(undefined)} />}
+          >
+            {submitError.message}
+          </Alert>
+        </StackItem>
+      )}
+      <StackItem>
+        <ActionGroup>
+          <Button
+            isDisabled={isSubmitDisabled}
+            variant="primary"
+            id="create-button"
+            data-testid="create-button"
+            isLoading={isSubmitting}
+            onClick={onSubmit}
+          >
+            {submitLabel}
+          </Button>
+          <Button isDisabled={isSubmitting} variant="link" id="cancel-button" onClick={onCancel}>
+            Cancel
+          </Button>
+        </ActionGroup>
+      </StackItem>
+    </Stack>
+  </PageSection>
+);
+
+export default RegistrationFormFooter;
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/usePrefillRegisterVersionFields.ts b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/usePrefillRegisterVersionFields.ts
new file mode 100644
index 00000000..0f35fd72
--- /dev/null
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/usePrefillRegisterVersionFields.ts
@@ -0,0 +1,88 @@
+import React from 'react';
+import { RegisteredModel, ModelVersion, ModelArtifact } from '~/app/types';
+import {
+  filterLiveVersions,
+  getLastCreatedItem,
+  uriToObjectStorageFields,
+} from '~/app/pages/modelRegistry/screens/utils';
+import { UpdateObjectAtPropAndValue } from '~/types';
+import useModelArtifactsByVersionId from '~/app/hooks/useModelArtifactsByVersionId';
+import useModelVersionsByRegisteredModel from '~/app/hooks/useModelVersionsByRegisteredModel';
+import { RegisterVersionFormData, ModelLocationType } from './useRegisterModelData';
+
+type UsePrefillRegisterVersionFieldsArgs = {
+  registeredModel?: RegisteredModel;
+  setData: UpdateObjectAtPropAndValue<RegisterVersionFormData>;
+};
+
+type UsePrefillRegisterVersionFieldsReturnVal = {
+  loadedPrefillData: boolean;
+  loadPrefillDataError?: Error;
+  latestVersion?: ModelVersion;
+  latestArtifact?: ModelArtifact;
+};
+
+export const usePrefillRegisterVersionFields = ({
+  registeredModel,
+  setData,
+}: UsePrefillRegisterVersionFieldsArgs): UsePrefillRegisterVersionFieldsReturnVal => {
+  const [allModelVersions, loadedModelVersions, loadModelVersionsError] =
+    useModelVersionsByRegisteredModel(registeredModel?.id);
+  const liveModelVersions = filterLiveVersions(allModelVersions.items);
+  const latestVersion = getLastCreatedItem(liveModelVersions);
+
+  const [modelArtifacts, loadedModelArtifacts, loadModelArtifactsError] =
+    useModelArtifactsByVersionId(latestVersion?.id);
+  const latestArtifact = getLastCreatedItem(modelArtifacts.items);
+
+  // We don't care about artifact loading state if there is no version
+  const isLoadingVersionOrArtifact =
+    !!registeredModel && (!loadedModelVersions || (!!latestVersion && !loadedModelArtifacts));
+  const errorLoadingVersionOrArtifact = loadModelVersionsError || loadModelArtifactsError;
+
+  // Prefill fields from latest artifact if present. Repeat if selected model changes.
+  const prefilledForModelId = React.useRef<string | undefined>();
+  React.useEffect(() => {
+    if (
+      registeredModel &&
+      registeredModel.id !== prefilledForModelId.current &&
+      !isLoadingVersionOrArtifact
+    ) {
+      prefilledForModelId.current = registeredModel.id;
+      if (latestArtifact) {
+        setData('sourceModelFormat', latestArtifact.modelFormatName || '');
+        setData('sourceModelFormatVersion', latestArtifact.modelFormatVersion || '');
+
+        const decodedUri =
+          (latestArtifact.uri && uriToObjectStorageFields(latestArtifact.uri)) || null;
+
+        setData('modelLocationType', ModelLocationType.ObjectStorage);
+        if (decodedUri) {
+          setData('modelLocationEndpoint', decodedUri.endpoint);
+          setData('modelLocationBucket', decodedUri.bucket);
+          setData('modelLocationRegion', decodedUri.region || '');
+          // Don't prefill the path since a new version will have a new path.
+        } else {
+          // We don't want an old model's location staying here if we changed models but have no location to prefill.
+          setData('modelLocationEndpoint', '');
+          setData('modelLocationBucket', '');
+          setData('modelLocationRegion', '');
+        }
+      } else {
+        setData('sourceModelFormat', '');
+        setData('sourceModelFormatVersion', '');
+        setData('modelLocationType', ModelLocationType.ObjectStorage);
+        setData('modelLocationEndpoint', '');
+        setData('modelLocationBucket', '');
+        setData('modelLocationRegion', '');
+      }
+    }
+  }, [registeredModel, isLoadingVersionOrArtifact, latestArtifact, setData]);
+
+  return {
+    loadedPrefillData: !isLoadingVersionOrArtifact,
+    loadPrefillDataError: errorLoadingVersionOrArtifact,
+    latestVersion,
+    latestArtifact,
+  };
+};
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/useRegisterModelData.ts b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/useRegisterModelData.ts
new file mode 100644
index 00000000..b51a773a
--- /dev/null
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/useRegisterModelData.ts
@@ -0,0 +1,63 @@
+import useGenericObjectState, { GenericObjectState } from '~/utilities/useGenericObjectState';
+
+export enum ModelLocationType {
+  ObjectStorage = 'Object storage',
+  URI = 'URI',
+}
+
+export type RegistrationCommonFormData = {
+  versionName: string;
+  versionDescription: string;
+  sourceModelFormat: string;
+  sourceModelFormatVersion: string;
+  modelLocationType: ModelLocationType;
+  modelLocationEndpoint: string;
+  modelLocationBucket: string;
+  modelLocationRegion: string;
+  modelLocationPath: string;
+  modelLocationURI: string;
+};
+
+export type RegisterModelFormData = RegistrationCommonFormData & {
+  modelName: string;
+  modelDescription: string;
+};
+
+export type RegisterVersionFormData = RegistrationCommonFormData & {
+  registeredModelId: string;
+};
+
+const registrationCommonFormDataDefaults: RegistrationCommonFormData = {
+  versionName: '',
+  versionDescription: '',
+  sourceModelFormat: '',
+  sourceModelFormatVersion: '',
+  modelLocationType: ModelLocationType.ObjectStorage,
+  modelLocationEndpoint: '',
+  modelLocationBucket: '',
+  modelLocationRegion: '',
+  modelLocationPath: '',
+  modelLocationURI: '',
+};
+
+const registerModelFormDataDefaults: RegisterModelFormData = {
+  ...registrationCommonFormDataDefaults,
+  modelName: '',
+  modelDescription: '',
+};
+
+const registerVersionFormDataDefaults: RegisterVersionFormData = {
+  ...registrationCommonFormDataDefaults,
+  registeredModelId: '',
+};
+
+export const useRegisterModelData = (): GenericObjectState<RegisterModelFormData> =>
+  useGenericObjectState<RegisterModelFormData>(registerModelFormDataDefaults);
+
+export const useRegisterVersionData = (
+  registeredModelId?: string,
+): GenericObjectState<RegisterVersionFormData> =>
+  useGenericObjectState<RegisterVersionFormData>({
+    ...registerVersionFormDataDefaults,
+    registeredModelId: registeredModelId || '',
+  });
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/useRegistrationCommonState.ts b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/useRegistrationCommonState.ts
new file mode 100644
index 00000000..a25639cb
--- /dev/null
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/useRegistrationCommonState.ts
@@ -0,0 +1,40 @@
+import React from 'react';
+import { ModelRegistryContext } from '~/app/context/ModelRegistryContext';
+import { ModelRegistryAPIState } from '~/app/context/useModelRegistryAPIState';
+
+type RegistrationCommonState = {
+  isSubmitting: boolean;
+  setIsSubmitting: React.Dispatch<React.SetStateAction<boolean>>;
+  submitError: Error | undefined;
+  setSubmitError: React.Dispatch<React.SetStateAction<Error | undefined>>;
+  handleSubmit: (doSubmit: () => Promise<unknown>) => void;
+  apiState: ModelRegistryAPIState;
+  author: string;
+};
+
+export const useRegistrationCommonState = (): RegistrationCommonState => {
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [submitError, setSubmitError] = React.useState<Error | undefined>(undefined);
+
+  const { apiState } = React.useContext(ModelRegistryContext);
+  const author = 'kubeflow-user'; // TODO: enable this once we have users ---> useAppSelector((state) => state.user || '');
+
+  const handleSubmit = (doSubmit: () => Promise<unknown>) => {
+    setIsSubmitting(true);
+    setSubmitError(undefined);
+    doSubmit().catch((e: Error) => {
+      setIsSubmitting(false);
+      setSubmitError(e);
+    });
+  };
+
+  return {
+    isSubmitting,
+    setIsSubmitting,
+    submitError,
+    setSubmitError,
+    handleSubmit,
+    apiState,
+    author,
+  };
+};
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/utils.ts b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/utils.ts
new file mode 100644
index 00000000..801cc76c
--- /dev/null
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/utils.ts
@@ -0,0 +1,111 @@
+import {
+  ModelArtifact,
+  ModelArtifactState,
+  ModelState,
+  ModelVersion,
+  RegisteredModel,
+} from '~/app/types';
+import { ModelRegistryAPIState } from '~/app/context/useModelRegistryAPIState';
+import { objectStorageFieldsToUri } from '~/app/pages/modelRegistry/screens/utils';
+import {
+  ModelLocationType,
+  RegisterModelFormData,
+  RegisterVersionFormData,
+  RegistrationCommonFormData,
+} from './useRegisterModelData';
+
+export type RegisterModelCreatedResources = RegisterVersionCreatedResources & {
+  registeredModel: RegisteredModel;
+};
+
+export type RegisterVersionCreatedResources = {
+  modelVersion: ModelVersion;
+  modelArtifact: ModelArtifact;
+};
+
+export const registerModel = async (
+  apiState: ModelRegistryAPIState,
+  formData: RegisterModelFormData,
+  author: string,
+): Promise<RegisterModelCreatedResources> => {
+  const registeredModel = await apiState.api.createRegisteredModel(
+    {},
+    {
+      name: formData.modelName,
+      description: formData.modelDescription,
+      customProperties: {},
+      owner: author,
+      state: ModelState.LIVE,
+    },
+  );
+  const { modelVersion, modelArtifact } = await registerVersion(
+    apiState,
+    registeredModel,
+    formData,
+    author,
+  );
+  return { registeredModel, modelVersion, modelArtifact };
+};
+
+export const registerVersion = async (
+  apiState: ModelRegistryAPIState,
+  registeredModel: RegisteredModel,
+  formData: Omit<RegisterVersionFormData, 'registeredModelId'>,
+  author: string,
+): Promise<RegisterVersionCreatedResources> => {
+  const modelVersion = await apiState.api.createModelVersionForRegisteredModel(
+    {},
+    registeredModel.id,
+    {
+      name: formData.versionName,
+      description: formData.versionDescription,
+      customProperties: {},
+      state: ModelState.LIVE,
+      author,
+      registeredModelId: registeredModel.id,
+    },
+  );
+  const modelArtifact = await apiState.api.createModelArtifactForModelVersion({}, modelVersion.id, {
+    name: `${registeredModel.name}-${formData.versionName}-artifact`,
+    description: formData.versionDescription,
+    customProperties: {},
+    state: ModelArtifactState.LIVE,
+    author,
+    modelFormatName: formData.sourceModelFormat,
+    modelFormatVersion: formData.sourceModelFormatVersion,
+    uri:
+      formData.modelLocationType === ModelLocationType.ObjectStorage
+        ? objectStorageFieldsToUri({
+            endpoint: formData.modelLocationEndpoint,
+            bucket: formData.modelLocationBucket,
+            region: formData.modelLocationRegion,
+            path: formData.modelLocationPath,
+          }) || '' // We'll only hit this case if required fields are empty strings, so form validation should catch it.
+        : formData.modelLocationURI,
+    artifactType: 'model-artifact',
+  });
+  return { modelVersion, modelArtifact };
+};
+
+const isSubmitDisabledForCommonFields = (formData: RegistrationCommonFormData): boolean => {
+  const {
+    versionName,
+    modelLocationType,
+    modelLocationURI,
+    modelLocationBucket,
+    modelLocationEndpoint,
+    modelLocationPath,
+  } = formData;
+  return (
+    !versionName ||
+    (modelLocationType === ModelLocationType.URI && !modelLocationURI) ||
+    (modelLocationType === ModelLocationType.ObjectStorage &&
+      (!modelLocationBucket || !modelLocationEndpoint || !modelLocationPath))
+  );
+};
+
+export const isRegisterModelSubmitDisabled = (formData: RegisterModelFormData): boolean =>
+  !formData.modelName || isSubmitDisabledForCommonFields(formData);
+
+export const isRegisterVersionSubmitDisabled = (formData: RegisterVersionFormData): boolean =>
+  !formData.registeredModelId || isSubmitDisabledForCommonFields(formData);
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/utils.ts b/clients/ui/frontend/src/app/pages/modelRegistry/screens/utils.ts
index 6c04ab1d..d0677989 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/utils.ts
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/utils.ts
@@ -144,6 +144,31 @@ export const filterRegisteredModels = (
     }
   });
 
+export const objectStorageFieldsToUri = (fields: ObjectStorageFields): string | null => {
+  const { endpoint, bucket, region, path } = fields;
+  if (!endpoint || !bucket || !path) {
+    return null;
+  }
+  const searchParams = new URLSearchParams();
+  searchParams.set('endpoint', endpoint);
+  if (region) {
+    searchParams.set('defaultRegion', region);
+  }
+  return `s3://${bucket}/${path}?${searchParams.toString()}`;
+};
+
+export const getLastCreatedItem = <T extends { createTimeSinceEpoch?: string }>(
+  items?: T[],
+): T | undefined =>
+  items?.toSorted(
+    ({ createTimeSinceEpoch: createTimeA }, { createTimeSinceEpoch: createTimeB }) => {
+      if (!createTimeA || !createTimeB) {
+        return 0;
+      }
+      return Number(createTimeB) - Number(createTimeA);
+    },
+  )[0];
+
 export const filterArchiveVersions = (modelVersions: ModelVersion[]): ModelVersion[] =>
   modelVersions.filter((mv) => mv.state === ModelState.ARCHIVED);
 
diff --git a/clients/ui/frontend/src/app/types.ts b/clients/ui/frontend/src/app/types.ts
index 27348cd6..1a843d43 100644
--- a/clients/ui/frontend/src/app/types.ts
+++ b/clients/ui/frontend/src/app/types.ts
@@ -21,8 +21,7 @@ export type ModelRegistry = {
   description: string;
 };
 
-// TODO: Change in the backend AND frontend to "items" instead of "model-registries"
-export type ModelRegistryResponse<T> = {
+export type ModelRegistryBody<T> = {
   data: T;
   metadata?: Record<string, unknown>;
 };
diff --git a/clients/ui/frontend/src/app/utils.ts b/clients/ui/frontend/src/app/utils.ts
index bced9569..3753a9ec 100644
--- a/clients/ui/frontend/src/app/utils.ts
+++ b/clients/ui/frontend/src/app/utils.ts
@@ -1,5 +1,5 @@
 import { SearchType } from '~/app/components/DashboardSearchField';
-import { ModelState, RegisteredModel } from '~/app/types';
+import { RegisteredModel } from '~/app/types';
 
 export const asEnumMember = <T extends object>(
   member: T[keyof T] | string | number | undefined | null,
@@ -19,9 +19,6 @@ export const isEnumMember = <T extends object>(
   return false;
 };
 
-export const filterLiveModels = (registeredModels: RegisteredModel[]): RegisteredModel[] =>
-  registeredModels.filter((rm) => rm.state === ModelState.LIVE);
-
 export const filterRegisteredModels = (
   unfilteredRegisteredModels: RegisteredModel[],
   search: string,
diff --git a/clients/ui/frontend/src/types.ts b/clients/ui/frontend/src/types.ts
index b40371e0..dc322132 100644
--- a/clients/ui/frontend/src/types.ts
+++ b/clients/ui/frontend/src/types.ts
@@ -1,3 +1,5 @@
+import { ValueOf } from '~/typeHelpers';
+
 //  TODO: Get the status config params
 export type UserSettings = {
   username: string;
@@ -24,3 +26,5 @@ export type KeyValuePair = {
   key: string;
   value: string;
 };
+
+export type UpdateObjectAtPropAndValue<T> = (propKey: keyof T, propValue: ValueOf<T>) => void;
diff --git a/clients/ui/frontend/src/utilities/useGenericObjectState.ts b/clients/ui/frontend/src/utilities/useGenericObjectState.ts
new file mode 100644
index 00000000..a243bd82
--- /dev/null
+++ b/clients/ui/frontend/src/utilities/useGenericObjectState.ts
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { UpdateObjectAtPropAndValue } from '~/types';
+
+export type GenericObjectState<T> = [
+  data: T,
+  setData: UpdateObjectAtPropAndValue<T>,
+  resetDefault: () => void,
+];
+
+const useGenericObjectState = <T>(defaultData: T): GenericObjectState<T> => {
+  const [value, setValue] = React.useState<T>(defaultData);
+
+  const setPropValue = React.useCallback<UpdateObjectAtPropAndValue<T>>((propKey, propValue) => {
+    setValue((oldValue) => ({ ...oldValue, [propKey]: propValue }));
+  }, []);
+
+  const defaultDataRef = React.useRef(defaultData);
+  const resetToDefault = React.useCallback(() => {
+    setValue(defaultDataRef.current);
+  }, []);
+
+  return [value, setPropValue, resetToDefault];
+};
+
+export default useGenericObjectState;