diff --git a/workspaces/frontend/README.md b/workspaces/frontend/README.md
index 7e5ed38d3..b43fbf1d2 100644
--- a/workspaces/frontend/README.md
+++ b/workspaces/frontend/README.md
@@ -50,6 +50,12 @@ This is the default setup for running the UI locally. Make sure you build the pr
   npm run start:dev
   ```
 
+The command above requires the backend to be active in order to serve data. To run the UI independently, without establishing a connection to the backend, use the following command to start the application with a mocked API:
+
+  ```bash
+  npm run start:dev:mock
+  ```
+
 ### Testing
 
 Run all tests:
diff --git a/workspaces/frontend/config/webpack.common.js b/workspaces/frontend/config/webpack.common.js
index a78bd03cc..cfa03d366 100644
--- a/workspaces/frontend/config/webpack.common.js
+++ b/workspaces/frontend/config/webpack.common.js
@@ -140,13 +140,13 @@ module.exports = (env) => {
         },
         {
           test: /\.css$/i,
-          use: [
-            'style-loader',
-            'css-loader',
-          ],
+          use: ['style-loader', 'css-loader'],
           include: [
-            path.resolve(relativeDir, 'node_modules/@patternfly/react-catalog-view-extension/dist/css/react-catalog-view-extension.css'),
-          ]
+            path.resolve(
+              relativeDir,
+              'node_modules/@patternfly/react-catalog-view-extension/dist/css/react-catalog-view-extension.css',
+            ),
+          ],
         },
       ],
     },
diff --git a/workspaces/frontend/config/webpack.dev.js b/workspaces/frontend/config/webpack.dev.js
index d419ccd58..9283bfc15 100644
--- a/workspaces/frontend/config/webpack.dev.js
+++ b/workspaces/frontend/config/webpack.dev.js
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 
 const path = require('path');
+const { EnvironmentPlugin } = require('webpack');
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 const { stylePaths } = require('./stylePaths');
@@ -9,6 +10,7 @@ const PORT = process.env.PORT || '9000';
 const PROXY_HOST = process.env.PROXY_HOST || 'localhost';
 const PROXY_PORT = process.env.PROXY_PORT || '4000';
 const PROXY_PROTOCOL = process.env.PROXY_PROTOCOL || 'http:';
+const MOCK_API_ENABLED = process.env.MOCK_API_ENABLED || 'false';
 const relativeDir = path.resolve(__dirname, '..');
 
 module.exports = merge(common('development'), {
@@ -45,4 +47,9 @@ module.exports = merge(common('development'), {
       },
     ],
   },
+  plugins: [
+    new EnvironmentPlugin({
+      WEBPACK_REPLACE__mockApiEnabled: MOCK_API_ENABLED,
+    }),
+  ],
 });
diff --git a/workspaces/frontend/jest.config.js b/workspaces/frontend/jest.config.js
index e8e27cc64..01c94bcd0 100644
--- a/workspaces/frontend/jest.config.js
+++ b/workspaces/frontend/jest.config.js
@@ -26,9 +26,7 @@ module.exports = {
   testEnvironment: 'jest-environment-jsdom',
 
   // include projects from node_modules as required
-  transformIgnorePatterns: [
-    'node_modules/(?!yaml|lodash-es|uuid|@patternfly|delaunator)',
-  ],
+  transformIgnorePatterns: ['node_modules/(?!yaml|lodash-es|uuid|@patternfly|delaunator)'],
 
   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
   snapshotSerializers: [],
diff --git a/workspaces/frontend/package-lock.json b/workspaces/frontend/package-lock.json
index ccf1348a5..97a1a675d 100644
--- a/workspaces/frontend/package-lock.json
+++ b/workspaces/frontend/package-lock.json
@@ -41,6 +41,7 @@
         "concurrently": "^9.1.0",
         "copy-webpack-plugin": "^11.0.0",
         "core-js": "^3.39.0",
+        "cross-env": "^7.0.3",
         "css-loader": "^6.11.0",
         "css-minimizer-webpack-plugin": "^5.0.1",
         "cypress": "^13.16.1",
@@ -7750,6 +7751,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
diff --git a/workspaces/frontend/package.json b/workspaces/frontend/package.json
index ed2c1326c..6af360145 100644
--- a/workspaces/frontend/package.json
+++ b/workspaces/frontend/package.json
@@ -17,6 +17,7 @@
     "build:clean": "rimraf ./dist",
     "build:prod": "webpack --config ./config/webpack.prod.js",
     "start:dev": "webpack serve --hot --color --config ./config/webpack.dev.js",
+    "start:dev:mock": "cross-env MOCK_API_ENABLED=true npm run start:dev",
     "test": "run-s test:lint test:unit test:cypress-ci",
     "test:cypress-ci": "npx concurrently -P -k -s first \"npm run cypress:server:build && npm run cypress:server\" \"npx wait-on tcp:127.0.0.1:9001 && npm run cypress:run:mock -- {@}\" -- ",
     "test:jest": "jest --passWithNoTests",
@@ -52,6 +53,7 @@
     "concurrently": "^9.1.0",
     "copy-webpack-plugin": "^11.0.0",
     "core-js": "^3.39.0",
+    "cross-env": "^7.0.3",
     "css-loader": "^6.11.0",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "cypress": "^13.16.1",
@@ -95,8 +97,8 @@
     "webpack-merge": "^5.10.0"
   },
   "dependencies": {
-    "@patternfly/react-code-editor": "^6.2.0",
     "@patternfly/react-catalog-view-extension": "^6.1.0",
+    "@patternfly/react-code-editor": "^6.2.0",
     "@patternfly/react-core": "^6.2.0",
     "@patternfly/react-icons": "^6.2.0",
     "@patternfly/react-styles": "^6.2.0",
diff --git a/workspaces/frontend/src/__mocks__/mockNamespaces.ts b/workspaces/frontend/src/__mocks__/mockNamespaces.ts
index 6b6761fb6..6265e681b 100644
--- a/workspaces/frontend/src/__mocks__/mockNamespaces.ts
+++ b/workspaces/frontend/src/__mocks__/mockNamespaces.ts
@@ -1,7 +1,8 @@
-import { NamespacesList } from '~/app/types';
+import { buildMockNamespace } from '~/shared/mock/mockBuilder';
+import { Namespace } from '~/shared/api/backendApiTypes';
 
-export const mockNamespaces: NamespacesList = [
-  { name: 'default' },
-  { name: 'kubeflow' },
-  { name: 'custom-namespace' },
+export const mockNamespaces: Namespace[] = [
+  buildMockNamespace({ name: 'default' }),
+  buildMockNamespace({ name: 'kubeflow' }),
+  buildMockNamespace({ name: 'custom-namespace' }),
 ];
diff --git a/workspaces/frontend/src/__mocks__/mockWorkspaces.ts b/workspaces/frontend/src/__mocks__/mockWorkspaces.ts
new file mode 100644
index 000000000..83093df48
--- /dev/null
+++ b/workspaces/frontend/src/__mocks__/mockWorkspaces.ts
@@ -0,0 +1,55 @@
+import { buildMockWorkspace } from '~/shared/mock/mockBuilder';
+
+export const mockWorkspaces = [
+  buildMockWorkspace(),
+  buildMockWorkspace({
+    name: 'My Second Jupyter Notebook',
+    podTemplate: {
+      podMetadata: {
+        labels: {},
+        annotations: {},
+      },
+      volumes: {
+        home: {
+          pvcName: 'workspace-home-pvc',
+          mountPath: '/home',
+          readOnly: false,
+        },
+        data: [
+          {
+            pvcName: 'workspace-data-pvc',
+            mountPath: '/data',
+            readOnly: false,
+          },
+        ],
+      },
+      options: {
+        imageConfig: {
+          current: {
+            id: 'jupyterlab_scipy_180',
+            displayName: 'jupyter-scipy:v1.9.0',
+            description: 'JupyterLab, with SciPy Packages',
+            labels: [
+              {
+                key: 'pythonVersion',
+                value: '3.11',
+              },
+            ],
+          },
+        },
+        podConfig: {
+          current: {
+            id: 'large_cpu',
+            displayName: 'Large CPU',
+            description: 'Pod with 1 CPU, 16 Gb RAM',
+            labels: [
+              { key: 'cpu', value: '4000m' },
+              { key: 'memory', value: '16Gi' },
+              { key: 'gpu', value: '1' },
+            ],
+          },
+        },
+      },
+    },
+  }),
+];
diff --git a/workspaces/frontend/src/__mocks__/utils.ts b/workspaces/frontend/src/__mocks__/utils.ts
index f808fe7cb..d4af2e359 100644
--- a/workspaces/frontend/src/__mocks__/utils.ts
+++ b/workspaces/frontend/src/__mocks__/utils.ts
@@ -1,4 +1,4 @@
-import { ResponseBody } from '~/app/types';
+import { ResponseBody } from '~/shared/api/types';
 
 export const mockBFFResponse = <T>(data: T): ResponseBody<T> => ({
   data,
diff --git a/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaceKinds.mock.ts b/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaceKinds.mock.ts
index 03c0b05fa..4d0a48615 100644
--- a/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaceKinds.mock.ts
+++ b/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaceKinds.mock.ts
@@ -1,4 +1,4 @@
-import type { WorkspaceKind } from '~/shared/types';
+import type { WorkspaceKind } from '~/shared/api/backendApiTypes';
 
 // Factory function to create a valid WorkspaceKind
 function createMockWorkspaceKind(overrides: Partial<WorkspaceKind> = {}): WorkspaceKind {
diff --git a/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaces/filterWorkspacesTest.cy.ts b/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaces/filterWorkspacesTest.cy.ts
index ebff315c8..075c8c3ca 100644
--- a/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaces/filterWorkspacesTest.cy.ts
+++ b/workspaces/frontend/src/__tests__/cypress/cypress/tests/mocked/workspaces/filterWorkspacesTest.cy.ts
@@ -1,3 +1,6 @@
+import { mockNamespaces } from '~/__mocks__/mockNamespaces';
+import { mockWorkspaces } from '~/__mocks__/mockWorkspaces';
+import { mockBFFResponse } from '~/__mocks__/utils';
 import { home } from '~/__tests__/cypress/cypress/pages/home';
 
 const useFilter = (filterName: string, searchValue: string) => {
@@ -9,41 +12,49 @@ const useFilter = (filterName: string, searchValue: string) => {
 };
 
 describe('Application', () => {
+  beforeEach(() => {
+    cy.intercept('GET', '/api/v1/namespaces', {
+      body: mockBFFResponse(mockNamespaces),
+    });
+    cy.intercept('GET', '/api/v1/workspaces/default', {
+      body: mockBFFResponse(mockWorkspaces),
+    });
+  });
   it('filter rows with single filter', () => {
     home.visit();
     useFilter('Name', 'My');
     cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 2);
-    cy.get("[id$='workspaces-table-row-1']").contains('My Jupyter Notebook');
-    cy.get("[id$='workspaces-table-row-2']").contains('My Other Jupyter Notebook');
+    cy.get("[id$='workspaces-table-row-1']").contains('My First Jupyter Notebook');
+    cy.get("[id$='workspaces-table-row-2']").contains('My Second Jupyter Notebook');
   });
 
   it('filter rows with multiple filters', () => {
     home.visit();
     useFilter('Name', 'My');
-    useFilter('Pod Config', 'Small');
+    useFilter('Pod Config', 'Tiny');
     cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 1);
-    cy.get("[id$='workspaces-table-row-1']").contains('My Jupyter Notebook');
+    cy.get("[id$='workspaces-table-row-1']").contains('My First Jupyter Notebook');
   });
 
   it('filter rows with multiple filters and remove one', () => {
     home.visit();
     useFilter('Name', 'My');
-    useFilter('Pod Config', 'Small');
+    useFilter('Pod Config', 'Tiny');
     cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 1);
-    cy.get("[id$='workspaces-table-row-1']").contains('My Jupyter Notebook');
+    cy.get("[id$='workspaces-table-row-1']").contains('My First Jupyter Notebook');
     cy.get("[class$='pf-v6-c-label-group__close']").eq(1).click();
     cy.get("[class$='pf-v6-c-toolbar__group']").should('not.contain', 'Pod Config');
     cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 2);
-    cy.get("[id$='workspaces-table-row-1']").contains('My Jupyter Notebook');
-    cy.get("[id$='workspaces-table-row-2']").contains('My Other Jupyter Notebook');
+    cy.get("[id$='workspaces-table-row-1']").contains('My First Jupyter Notebook');
+    cy.get("[id$='workspaces-table-row-2']").contains('My Second Jupyter Notebook');
   });
 
   it('filter rows with multiple filters and remove all', () => {
     home.visit();
     useFilter('Name', 'My');
-    useFilter('Pod Config', 'Small');
+    useFilter('Pod Config', 'Tiny');
     cy.get("[id$='workspaces-table-content']").find('tr').should('have.length', 1);
-    cy.get("[id$='workspaces-table-row-1']").contains('My Jupyter Notebook');
+    cy.get("[id$='workspaces-table-row-1']").contains('My First Jupyter Notebook');
     cy.get('*').contains('Clear all filters').click();
     cy.get("[class$='pf-v6-c-toolbar__group']").should('not.contain', 'Pod Config');
     cy.get("[class$='pf-v6-c-toolbar__group']").should('not.contain', 'Name');
diff --git a/workspaces/frontend/src/app/App.tsx b/workspaces/frontend/src/app/App.tsx
index 098b393c2..81b487236 100644
--- a/workspaces/frontend/src/app/App.tsx
+++ b/workspaces/frontend/src/app/App.tsx
@@ -15,6 +15,7 @@ import {
   Title,
 } from '@patternfly/react-core';
 import { BarsIcon } from '@patternfly/react-icons';
+import ErrorBoundary from '~/app/error/ErrorBoundary';
 import NamespaceSelector from '~/shared/components/NamespaceSelector';
 import logoDarkTheme from '~/images/logo-dark-theme.svg';
 import { NamespaceContextProvider } from './context/NamespaceContextProvider';
@@ -63,19 +64,21 @@ const App: React.FC = () => {
   );
 
   return (
-    <NotebookContextProvider>
-      <NamespaceContextProvider>
-        <Page
-          mainContainerId="primary-app-container"
-          masthead={masthead}
-          isContentFilled
-          isManagedSidebar
-          sidebar={<NavSidebar />}
-        >
-          <AppRoutes />
-        </Page>
-      </NamespaceContextProvider>
-    </NotebookContextProvider>
+    <ErrorBoundary>
+      <NotebookContextProvider>
+        <NamespaceContextProvider>
+          <Page
+            mainContainerId="primary-app-container"
+            masthead={masthead}
+            isContentFilled
+            isManagedSidebar
+            sidebar={<NavSidebar />}
+          >
+            <AppRoutes />
+          </Page>
+        </NamespaceContextProvider>
+      </NotebookContextProvider>
+    </ErrorBoundary>
   );
 };
 
diff --git a/workspaces/frontend/src/app/EnsureAPIAvailability.tsx b/workspaces/frontend/src/app/EnsureAPIAvailability.tsx
new file mode 100644
index 000000000..53dbeeaf2
--- /dev/null
+++ b/workspaces/frontend/src/app/EnsureAPIAvailability.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Bullseye, Spinner } from '@patternfly/react-core';
+import { useNotebookAPI } from './hooks/useNotebookAPI';
+
+interface EnsureAPIAvailabilityProps {
+  children: React.ReactNode;
+}
+
+const EnsureAPIAvailability: React.FC<EnsureAPIAvailabilityProps> = ({ children }) => {
+  const { apiAvailable } = useNotebookAPI();
+  if (!apiAvailable) {
+    return (
+      <Bullseye style={{ minHeight: 150 }}>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+
+  return <>{children}</>;
+};
+
+export default EnsureAPIAvailability;
diff --git a/workspaces/frontend/src/app/actions/WorkspaceKindsActions.tsx b/workspaces/frontend/src/app/actions/WorkspaceKindsActions.tsx
index 49bb9ec97..b9db0aae3 100644
--- a/workspaces/frontend/src/app/actions/WorkspaceKindsActions.tsx
+++ b/workspaces/frontend/src/app/actions/WorkspaceKindsActions.tsx
@@ -1,4 +1,4 @@
-import { WorkspaceKind } from '~/shared/types';
+import { WorkspaceKind, WorkspaceOptionRedirect } from '~/shared/api/backendApiTypes';
 
 type KindLogoDict = Record<string, string>;
 
@@ -20,10 +20,7 @@ export function buildKindLogoDictionary(workspaceKinds: WorkspaceKind[] | []): K
   return kindLogoDict;
 }
 
-type WorkspaceRedirectStatus = Record<
-  string,
-  { to: string; message: string; level: string } | null
->;
+type WorkspaceRedirectStatus = Record<string, WorkspaceOptionRedirect | undefined>;
 
 /**
  * Builds a dictionary of workspace kinds to redirect statuses.
@@ -36,17 +33,10 @@ export function buildWorkspaceRedirectStatus(
   const workspaceRedirectStatus: WorkspaceRedirectStatus = {};
   for (const workspaceKind of workspaceKinds) {
     // Loop through the `values` array inside `imageConfig`
-    const redirect = workspaceKind.podTemplate.options.imageConfig.values.find(
-      (value) => value.redirect,
-    )?.redirect;
-    // If redirect exists, extract the necessary properties
-    workspaceRedirectStatus[workspaceKind.name] = redirect
-      ? {
-          to: redirect.to,
-          message: redirect.message.text,
-          level: redirect.message.level,
-        }
-      : null;
+    workspaceRedirectStatus[workspaceKind.name] =
+      workspaceKind.podTemplate.options.imageConfig.values.find(
+        (value) => value.redirect,
+      )?.redirect;
   }
   return workspaceRedirectStatus;
 }
diff --git a/workspaces/frontend/src/app/context/NotebookContext.tsx b/workspaces/frontend/src/app/context/NotebookContext.tsx
index 34787e47b..df17db283 100644
--- a/workspaces/frontend/src/app/context/NotebookContext.tsx
+++ b/workspaces/frontend/src/app/context/NotebookContext.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
 import { BFF_API_VERSION } from '~/app/const';
+import EnsureAPIAvailability from '~/app/EnsureAPIAvailability';
 import useNotebookAPIState, { NotebookAPIState } from './useNotebookAPIState';
 
 export type NotebookContextType = {
@@ -33,7 +34,7 @@ export const NotebookContextProvider: React.FC<NotebookContextProviderProps> = (
         [apiState, refreshAPIState],
       )}
     >
-      {children}
+      <EnsureAPIAvailability>{children}</EnsureAPIAvailability>
     </NotebookContext.Provider>
   );
 };
diff --git a/workspaces/frontend/src/app/context/useNotebookAPIState.tsx b/workspaces/frontend/src/app/context/useNotebookAPIState.tsx
index 6347618ce..2af754c65 100644
--- a/workspaces/frontend/src/app/context/useNotebookAPIState.tsx
+++ b/workspaces/frontend/src/app/context/useNotebookAPIState.tsx
@@ -1,24 +1,100 @@
 import React from 'react';
+import { NotebookAPIs } from '~/shared/api/notebookApi';
+import {
+  createWorkspace,
+  createWorkspaceKind,
+  deleteWorkspace,
+  deleteWorkspaceKind,
+  getHealthCheck,
+  getWorkspace,
+  getWorkspaceKind,
+  listAllWorkspaces,
+  listNamespaces,
+  listWorkspaceKinds,
+  listWorkspaces,
+  patchWorkspace,
+  patchWorkspaceKind,
+  updateWorkspace,
+  updateWorkspaceKind,
+} from '~/shared/api/notebookService';
 import { APIState } from '~/shared/api/types';
-import { NotebookAPIs } from '~/app/types';
-import { getNamespaces, getWorkspaceKinds, createWorkspace } from '~/shared/api/notebookService';
 import useAPIState from '~/shared/api/useAPIState';
+import {
+  mockCreateWorkspace,
+  mockCreateWorkspaceKind,
+  mockDeleteWorkspace,
+  mockDeleteWorkspaceKind,
+  mockGetHealthCheck,
+  mockGetWorkspace,
+  mockGetWorkspaceKind,
+  mockListAllWorkspaces,
+  mockListNamespaces,
+  mockListWorkspaceKinds,
+  mockListWorkspaces,
+  mockPatchWorkspace,
+  mockPatchWorkspaceKind,
+  mockUpdateWorkspace,
+  mockUpdateWorkspaceKind,
+} from '~/shared/mock/mockNotebookService';
 
 export type NotebookAPIState = APIState<NotebookAPIs>;
 
+const MOCK_API_ENABLED = process.env.WEBPACK_REPLACE__mockApiEnabled === 'true';
+
 const useNotebookAPIState = (
   hostPath: string | null,
 ): [apiState: NotebookAPIState, refreshAPIState: () => void] => {
-  const createAPI = React.useCallback(
+  const createApi = React.useCallback(
     (path: string) => ({
-      getNamespaces: getNamespaces(path),
-      getWorkspaceKinds: getWorkspaceKinds(path),
+      // Health
+      getHealthCheck: getHealthCheck(path),
+      // Namespace
+      listNamespaces: listNamespaces(path),
+      // Workspace
+      listAllWorkspaces: listAllWorkspaces(path),
+      listWorkspaces: listWorkspaces(path),
       createWorkspace: createWorkspace(path),
+      getWorkspace: getWorkspace(path),
+      updateWorkspace: updateWorkspace(path),
+      patchWorkspace: patchWorkspace(path),
+      deleteWorkspace: deleteWorkspace(path),
+      // WorkspaceKind
+      listWorkspaceKinds: listWorkspaceKinds(path),
+      createWorkspaceKind: createWorkspaceKind(path),
+      getWorkspaceKind: getWorkspaceKind(path),
+      patchWorkspaceKind: patchWorkspaceKind(path),
+      deleteWorkspaceKind: deleteWorkspaceKind(path),
+      updateWorkspaceKind: updateWorkspaceKind(path),
+    }),
+    [],
+  );
+
+  const createMockApi = React.useCallback(
+    (path: string) => ({
+      // Health
+      getHealthCheck: mockGetHealthCheck(path),
+      // Namespace
+      listNamespaces: mockListNamespaces(path),
+      // Workspace
+      listAllWorkspaces: mockListAllWorkspaces(path),
+      listWorkspaces: mockListWorkspaces(path),
+      createWorkspace: mockCreateWorkspace(path),
+      getWorkspace: mockGetWorkspace(path),
+      updateWorkspace: mockUpdateWorkspace(path),
+      patchWorkspace: mockPatchWorkspace(path),
+      deleteWorkspace: mockDeleteWorkspace(path),
+      // WorkspaceKind
+      listWorkspaceKinds: mockListWorkspaceKinds(path),
+      createWorkspaceKind: mockCreateWorkspaceKind(path),
+      getWorkspaceKind: mockGetWorkspaceKind(path),
+      patchWorkspaceKind: mockPatchWorkspaceKind(path),
+      deleteWorkspaceKind: mockDeleteWorkspaceKind(path),
+      updateWorkspaceKind: mockUpdateWorkspaceKind(path),
     }),
     [],
   );
 
-  return useAPIState(hostPath, createAPI);
+  return useAPIState(hostPath, MOCK_API_ENABLED ? createMockApi : createApi);
 };
 
 export default useNotebookAPIState;
diff --git a/workspaces/frontend/src/app/error/ErrorBoundary.tsx b/workspaces/frontend/src/app/error/ErrorBoundary.tsx
new file mode 100644
index 000000000..d59b85e2e
--- /dev/null
+++ b/workspaces/frontend/src/app/error/ErrorBoundary.tsx
@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { Button, Split, SplitItem, Title } from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
+import ErrorDetails from '~/app/error/ErrorDetails';
+import UpdateState from '~/app/error/UpdateState';
+
+type ErrorBoundaryProps = {
+  children?: React.ReactNode;
+};
+
+type ErrorBoundaryState =
+  | { hasError: false }
+  | {
+      hasError: true;
+      error: Error;
+      errorInfo: React.ErrorInfo;
+      isUpdateState: boolean;
+    };
+
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    this.setState({
+      hasError: true,
+      error,
+      errorInfo,
+      isUpdateState: error.name === 'ChunkLoadError',
+    });
+    // eslint-disable-next-line no-console
+    console.error('Caught error:', error, errorInfo);
+  }
+
+  render(): React.ReactNode {
+    const { children } = this.props;
+    const { hasError } = this.state;
+
+    if (hasError) {
+      const { error, errorInfo, isUpdateState } = this.state;
+      if (isUpdateState) {
+        return (
+          <UpdateState
+            onClose={() => this.setState((prevState) => ({ ...prevState, isUpdateState: false }))}
+          />
+        );
+      }
+      return (
+        <div className="pf-v6-u-p-lg" data-testid="error-boundary">
+          <Split>
+            <SplitItem isFilled>
+              <Title headingLevel="h1" className="pf-v6-u-mb-sm">
+                An error occurred
+              </Title>
+              <p className="pf-v6-u-mb-md">
+                Try{' '}
+                <Button
+                  data-testid="reload-link"
+                  variant="link"
+                  isInline
+                  onClick={() => window.location.reload()}
+                >
+                  reloading
+                </Button>{' '}
+                the page if there was a recent update.
+              </p>
+            </SplitItem>
+            <SplitItem>
+              <Button
+                icon={<TimesIcon />}
+                data-testid="close-error-button"
+                variant="plain"
+                aria-label="Close"
+                onClick={() => {
+                  this.setState({ hasError: false });
+                }}
+              />
+            </SplitItem>
+          </Split>
+          <ErrorDetails
+            title={error.name}
+            errorMessage={error.message}
+            componentStack={errorInfo.componentStack || ''}
+            stack={error.stack}
+          />
+        </div>
+      );
+    }
+
+    return children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/workspaces/frontend/src/app/error/ErrorDetails.tsx b/workspaces/frontend/src/app/error/ErrorDetails.tsx
new file mode 100644
index 000000000..66d84a20b
--- /dev/null
+++ b/workspaces/frontend/src/app/error/ErrorDetails.tsx
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {
+  ClipboardCopy,
+  ClipboardCopyVariant,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Title,
+} from '@patternfly/react-core';
+
+type ErrorDetailsProps = {
+  title: string;
+  errorMessage?: string;
+  componentStack: string;
+  stack?: string;
+};
+
+const ErrorDetails: React.FC<ErrorDetailsProps> = ({
+  title,
+  errorMessage,
+  componentStack,
+  stack,
+}) => (
+  <>
+    <Title headingLevel="h2" className="pf-v6-u-mb-md">
+      {title}
+    </Title>
+    <DescriptionList>
+      {errorMessage ? (
+        <DescriptionListGroup>
+          <DescriptionListTerm>Description:</DescriptionListTerm>
+          <DescriptionListDescription>{errorMessage}</DescriptionListDescription>
+        </DescriptionListGroup>
+      ) : null}
+
+      <DescriptionListGroup>
+        <DescriptionListTerm>Component trace:</DescriptionListTerm>
+        <DescriptionListDescription>
+          <ClipboardCopy
+            isExpanded
+            isCode
+            hoverTip="Copy"
+            clickTip="Copied"
+            variant={ClipboardCopyVariant.expansion}
+          >
+            {componentStack.trim()}
+          </ClipboardCopy>
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+
+      {stack ? (
+        <DescriptionListGroup>
+          <DescriptionListTerm>Stack trace:</DescriptionListTerm>
+          <DescriptionListDescription>
+            <ClipboardCopy
+              isExpanded
+              isCode
+              hoverTip="Copy"
+              clickTip="Copied"
+              variant={ClipboardCopyVariant.expansion}
+            >
+              {stack.trim()}
+            </ClipboardCopy>
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+      ) : null}
+    </DescriptionList>
+  </>
+);
+
+export default ErrorDetails;
diff --git a/workspaces/frontend/src/app/error/UpdateState.tsx b/workspaces/frontend/src/app/error/UpdateState.tsx
new file mode 100644
index 000000000..dce1252b9
--- /dev/null
+++ b/workspaces/frontend/src/app/error/UpdateState.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {
+  Button,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateVariant,
+  PageSection,
+} from '@patternfly/react-core';
+import { PathMissingIcon } from '@patternfly/react-icons';
+
+type Props = {
+  onClose: () => void;
+};
+
+const UpdateState: React.FC<Props> = ({ onClose }) => (
+  <PageSection hasBodyWrapper={false} data-testid="error-update-state">
+    <EmptyState
+      headingLevel="h2"
+      icon={PathMissingIcon}
+      titleText="An error occurred"
+      variant={EmptyStateVariant.full}
+    >
+      <EmptyStateBody>This is likely the result of a recent update.</EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button
+            variant="primary"
+            onClick={() => window.location.reload()}
+            data-testid="reload-button"
+          >
+            Reload this page
+          </Button>
+        </EmptyStateActions>
+        <EmptyStateActions>
+          <Button variant="link" onClick={onClose} data-testid="show-error-button">
+            Show error
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  </PageSection>
+);
+
+export default UpdateState;
diff --git a/workspaces/frontend/src/app/hooks/useCreateWorkspace.ts b/workspaces/frontend/src/app/hooks/useCreateWorkspace.ts
deleted file mode 100644
index 0e2cfc1b3..000000000
--- a/workspaces/frontend/src/app/hooks/useCreateWorkspace.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from 'react';
-import useFetchState, {
-  FetchState,
-  FetchStateCallbackPromise,
-} from '~/shared/utilities/useFetchState';
-import { CreateWorkspaceData } from '~/app/types';
-import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
-import { Workspace } from '~/shared/types';
-import { createWorkspaceCall } from '~/app/pages/Workspaces/utils';
-import { APIOptions } from '~/shared/api/types';
-
-const useCreateWorkspace = (
-  namespace: string,
-  formData: CreateWorkspaceData,
-): FetchState<Workspace | null> => {
-  const { api, apiAvailable } = useNotebookAPI();
-
-  const call = React.useCallback<FetchStateCallbackPromise<Workspace | null>>(
-    (opts: APIOptions) => {
-      if (!apiAvailable) {
-        return Promise.reject(new Error('API not yet available'));
-      }
-      if (!namespace) {
-        return Promise.reject(new Error('namespace is not available yet'));
-      }
-      return createWorkspaceCall(opts, api, formData, namespace).then((result) => result.workspace);
-    },
-    [api, apiAvailable, namespace, formData],
-  );
-
-  return useFetchState(call, null);
-};
-
-export default useCreateWorkspace;
diff --git a/workspaces/frontend/src/app/hooks/useGenericObjectState.ts b/workspaces/frontend/src/app/hooks/useGenericObjectState.ts
new file mode 100644
index 000000000..7c6098aaa
--- /dev/null
+++ b/workspaces/frontend/src/app/hooks/useGenericObjectState.ts
@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+export type UpdateObjectAtPropAndValue<T> = <K extends keyof T>(
+  propKey: K,
+  propValue: T[K],
+) => void;
+
+export type GenericObjectState<T> = [
+  data: T,
+  setData: UpdateObjectAtPropAndValue<T>,
+  resetDefault: () => void,
+];
+
+const useGenericObjectState = <T>(defaultData: T | (() => T)): GenericObjectState<T> => {
+  const [value, setValue] = React.useState<T>(defaultData);
+
+  const setPropValue = React.useCallback<UpdateObjectAtPropAndValue<T>>((propKey, propValue) => {
+    setValue((oldValue) => {
+      if (oldValue[propKey] !== propValue) {
+        return { ...oldValue, [propKey]: propValue };
+      }
+      return oldValue;
+    });
+  }, []);
+
+  const defaultDataRef = React.useRef(value);
+  const resetToDefault = React.useCallback(() => {
+    setValue(defaultDataRef.current);
+  }, []);
+
+  return [value, setPropValue, resetToDefault];
+};
+
+export default useGenericObjectState;
diff --git a/workspaces/frontend/src/app/hooks/useNamespaces.ts b/workspaces/frontend/src/app/hooks/useNamespaces.ts
index 8b84fd33e..d07c0ba1b 100644
--- a/workspaces/frontend/src/app/hooks/useNamespaces.ts
+++ b/workspaces/frontend/src/app/hooks/useNamespaces.ts
@@ -3,19 +3,19 @@ import useFetchState, {
   FetchState,
   FetchStateCallbackPromise,
 } from '~/shared/utilities/useFetchState';
-import { NamespacesList } from '~/app/types';
 import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
+import { Namespace } from '~/shared/api/backendApiTypes';
 
-const useNamespaces = (): FetchState<NamespacesList | null> => {
+const useNamespaces = (): FetchState<Namespace[] | null> => {
   const { api, apiAvailable } = useNotebookAPI();
 
-  const call = React.useCallback<FetchStateCallbackPromise<NamespacesList | null>>(
+  const call = React.useCallback<FetchStateCallbackPromise<Namespace[] | null>>(
     (opts) => {
       if (!apiAvailable) {
         return Promise.reject(new Error('API not yet available'));
       }
 
-      return api.getNamespaces(opts);
+      return api.listNamespaces(opts);
     },
     [api, apiAvailable],
   );
diff --git a/workspaces/frontend/src/app/hooks/useWorkspaceCountPerKind.ts b/workspaces/frontend/src/app/hooks/useWorkspaceCountPerKind.ts
new file mode 100644
index 000000000..c627de362
--- /dev/null
+++ b/workspaces/frontend/src/app/hooks/useWorkspaceCountPerKind.ts
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
+import { Workspace, WorkspaceKind } from '~/shared/api/backendApiTypes';
+
+type WorkspaceCountPerKind = Record<WorkspaceKind['name'], number>;
+
+export const useWorkspaceCountPerKind = (): WorkspaceCountPerKind => {
+  const { api } = useNotebookAPI();
+
+  const [workspaceCountPerKind, setWorkspaceCountPerKind] = React.useState<WorkspaceCountPerKind>(
+    {},
+  );
+
+  React.useEffect(() => {
+    api.listAllWorkspaces({}).then((workspaces) => {
+      const countPerKind = workspaces.reduce((acc: WorkspaceCountPerKind, workspace: Workspace) => {
+        acc[workspace.workspaceKind.name] = (acc[workspace.workspaceKind.name] || 0) + 1;
+        return acc;
+      }, {});
+      setWorkspaceCountPerKind(countPerKind);
+    });
+  }, [api]);
+
+  return workspaceCountPerKind;
+};
diff --git a/workspaces/frontend/src/app/hooks/useWorkspaceKindByName.ts b/workspaces/frontend/src/app/hooks/useWorkspaceKindByName.ts
new file mode 100644
index 000000000..942f24b6e
--- /dev/null
+++ b/workspaces/frontend/src/app/hooks/useWorkspaceKindByName.ts
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import useFetchState, {
+  FetchState,
+  FetchStateCallbackPromise,
+} from '~/shared/utilities/useFetchState';
+import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
+import { WorkspaceKind } from '~/shared/api/backendApiTypes';
+
+const useWorkspaceKindByName = (kind: string): FetchState<WorkspaceKind | null> => {
+  const { api, apiAvailable } = useNotebookAPI();
+
+  const call = React.useCallback<FetchStateCallbackPromise<WorkspaceKind | null>>(
+    (opts) => {
+      if (!apiAvailable) {
+        return Promise.reject(new Error('API not yet available'));
+      }
+
+      return api.getWorkspaceKind(opts, kind);
+    },
+    [api, apiAvailable, kind],
+  );
+
+  return useFetchState(call, null);
+};
+
+export default useWorkspaceKindByName;
diff --git a/workspaces/frontend/src/app/hooks/useWorkspaceKinds.ts b/workspaces/frontend/src/app/hooks/useWorkspaceKinds.ts
index f0ad18462..4db6cb2a6 100644
--- a/workspaces/frontend/src/app/hooks/useWorkspaceKinds.ts
+++ b/workspaces/frontend/src/app/hooks/useWorkspaceKinds.ts
@@ -3,7 +3,7 @@ import useFetchState, {
   FetchState,
   FetchStateCallbackPromise,
 } from '~/shared/utilities/useFetchState';
-import { WorkspaceKind } from '~/shared/types';
+import { WorkspaceKind } from '~/shared/api/backendApiTypes';
 import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
 
 const useWorkspaceKinds = (): FetchState<WorkspaceKind[]> => {
@@ -13,7 +13,7 @@ const useWorkspaceKinds = (): FetchState<WorkspaceKind[]> => {
       if (!apiAvailable) {
         return Promise.reject(new Error('API not yet available'));
       }
-      return api.getWorkspaceKinds(opts);
+      return api.listWorkspaceKinds(opts);
     },
     [api, apiAvailable],
   );
diff --git a/workspaces/frontend/src/app/hooks/useWorkspaces.ts b/workspaces/frontend/src/app/hooks/useWorkspaces.ts
new file mode 100644
index 000000000..b6347f9d3
--- /dev/null
+++ b/workspaces/frontend/src/app/hooks/useWorkspaces.ts
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import useFetchState, {
+  FetchState,
+  FetchStateCallbackPromise,
+} from '~/shared/utilities/useFetchState';
+import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
+import { Workspace } from '~/shared/api/backendApiTypes';
+
+const useWorkspaces = (namespace: string): FetchState<Workspace[] | null> => {
+  const { api, apiAvailable } = useNotebookAPI();
+
+  const call = React.useCallback<FetchStateCallbackPromise<Workspace[] | null>>(
+    (opts) => {
+      if (!apiAvailable) {
+        return Promise.reject(new Error('API not yet available'));
+      }
+
+      return api.listWorkspaces(opts, namespace);
+    },
+    [api, apiAvailable, namespace],
+  );
+
+  return useFetchState(call, null);
+};
+
+export default useWorkspaces;
diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx
index 9becc15e6..805a79214 100644
--- a/workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx
+++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx
@@ -40,84 +40,16 @@ import {
   IActions,
 } from '@patternfly/react-table';
 import { CodeIcon, FilterIcon, SearchIcon } from '@patternfly/react-icons';
-import { WorkspaceKind, WorkspaceKindsColumnNames } from '~/shared/types';
+import { WorkspaceKind } from '~/shared/api/backendApiTypes';
+import useWorkspaceKinds from '~/app/hooks/useWorkspaceKinds';
+import { useWorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind';
+import { WorkspaceKindsColumnNames } from '~/app/types';
 
 export enum ActionType {
   ViewDetails,
 }
 
 export const WorkspaceKinds: React.FunctionComponent = () => {
-  // Todo: Remove mock and use useWorkspaceKinds API instead.
-  const mockWorkspaceKinds: WorkspaceKind[] = [
-    {
-      name: 'jupyterlab',
-      displayName: 'JupyterLab Notebook',
-      description:
-        'Example of a description for JupyterLab a Workspace which runs JupyterLab in a Pod.',
-      deprecated: true,
-      deprecationMessage:
-        'This WorkspaceKind was removed on 20XX-XX-XX, please use another WorkspaceKind.',
-      hidden: false,
-      icon: {
-        url: 'https://jupyter.org/assets/favicons/apple-touch-icon-152x152.png',
-      },
-      logo: {
-        url: 'https://upload.wikimedia.org/wikipedia/commons/3/38/Jupyter_logo.svg',
-      },
-      podTemplate: {
-        podMetadata: {
-          labels: {
-            myWorkspaceKindLabel: 'my-value',
-          },
-          annotations: {
-            myWorkspaceKindAnnotation: 'my-value',
-          },
-        },
-        volumeMounts: {
-          home: '/home/jovyan',
-        },
-        options: {
-          imageConfig: {
-            default: 'jupyterlab_scipy_190',
-            values: [
-              {
-                id: 'jupyterlab_scipy_180',
-                displayName: 'jupyter-scipy:v1.8.0',
-                labels: {
-                  pythonVersion: '3.11',
-                },
-                hidden: true,
-                redirect: {
-                  to: 'jupyterlab_scipy_190',
-                  message: {
-                    text: 'This update will change...',
-                    level: 'Info',
-                  },
-                },
-              },
-            ],
-          },
-          podConfig: {
-            default: 'tiny_cpu',
-            values: [
-              {
-                id: 'tiny_cpu',
-                displayName: 'Tiny CPU',
-                description: 'Pod with 0.1 CPU, 128 Mb RAM',
-                labels: {
-                  cpu: '100m',
-                  memory: '128Mi',
-                },
-              },
-            ],
-          },
-        },
-      },
-    },
-  ];
-
-  const mockNumberOfWorkspaces = 1; // Todo: Create a function to calculate number of workspaces for each workspace kind.
-
   // Table columns
   const columnNames: WorkspaceKindsColumnNames = {
     icon: '',
@@ -127,7 +59,8 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
     numberOfWorkspaces: 'Number of workspaces',
   };
 
-  const initialWorkspaceKinds = mockWorkspaceKinds;
+  const [workspaceKinds, workspaceKindsLoaded, workspaceKindsError] = useWorkspaceKinds();
+  const workspaceCountPerKind = useWorkspaceCountPerKind();
   const [selectedWorkspaceKind, setSelectedWorkspaceKind] = React.useState<WorkspaceKind | null>(
     null,
   );
@@ -150,19 +83,19 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
         name: workspaceKind.name,
         description: workspaceKind.description,
         deprecated: workspaceKind.deprecated,
-        numOfWorkspaces: mockNumberOfWorkspaces,
+        numOfWorkspaces: workspaceCountPerKind[workspaceKind.name] ?? 0,
       };
       return [icon, name, description, deprecated, numberOfWorkspaces];
     },
-    [],
+    [workspaceCountPerKind],
   );
 
   const sortedWorkspaceKinds = React.useMemo(() => {
     if (activeSortIndex === null) {
-      return initialWorkspaceKinds;
+      return workspaceKinds;
     }
 
-    return [...initialWorkspaceKinds].sort((a, b) => {
+    return [...workspaceKinds].sort((a, b) => {
       const aValue = getSortableRowValues(a)[activeSortIndex];
       const bValue = getSortableRowValues(b)[activeSortIndex];
       if (typeof aValue === 'boolean' && typeof bValue === 'boolean') {
@@ -174,7 +107,7 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
         ? (aValue as string).localeCompare(bValue as string)
         : (bValue as string).localeCompare(aValue as string);
     });
-  }, [initialWorkspaceKinds, activeSortIndex, activeSortDirection, getSortableRowValues]);
+  }, [workspaceKinds, activeSortIndex, activeSortDirection, getSortableRowValues]);
 
   const getSortParams = React.useCallback(
     (columnIndex: number): ThProps['sort'] => ({
@@ -535,6 +468,14 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
 
   const DESCRIPTION_CHAR_LIMIT = 50;
 
+  if (workspaceKindsError) {
+    return <p>Error loading workspace kinds: {workspaceKindsError.message}</p>; // TODO: UX for error state
+  }
+
+  if (!workspaceKindsLoaded) {
+    return <p>Loading...</p>; // TODO: UX for loading state
+  }
+
   return (
     <Drawer
       isInline
@@ -657,7 +598,9 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
                           <Label color="green">Active</Label>
                         )}
                       </Td>
-                      <Td dataLabel={columnNames.numberOfWorkspaces}>{mockNumberOfWorkspaces}</Td>
+                      <Td dataLabel={columnNames.numberOfWorkspaces}>
+                        {workspaceCountPerKind[workspaceKind.name] ?? 0}
+                      </Td>
 
                       <Td isActionCell data-testid="action-column">
                         <ActionsColumn
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/WorkspaceCreation.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/WorkspaceCreation.tsx
index a69abda5e..2d1a37a8e 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/WorkspaceCreation.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/WorkspaceCreation.tsx
@@ -11,19 +11,18 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { CheckIcon } from '@patternfly/react-icons';
+import { useCallback, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useNamespaceContext } from '~/app/context/NamespaceContextProvider';
+import useGenericObjectState from '~/app/hooks/useGenericObjectState';
+import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
 import { WorkspaceCreationImageSelection } from '~/app/pages/Workspaces/Creation/image/WorkspaceCreationImageSelection';
 import { WorkspaceCreationKindSelection } from '~/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindSelection';
-import { WorkspaceCreationPropertiesSelection } from '~/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSelection';
 import { WorkspaceCreationPodConfigSelection } from '~/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigSelection';
-import {
-  WorkspaceImage,
-  WorkspaceKind,
-  WorkspacePodConfig,
-  WorkspaceProperties,
-} from '~/shared/types';
+import { WorkspaceCreationPropertiesSelection } from '~/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSelection';
+import { WorkspaceCreateFormData } from '~/app/types';
+import { WorkspaceCreate } from '~/shared/api/backendApiTypes';
 
 enum WorkspaceCreationSteps {
   KindSelection,
@@ -34,12 +33,24 @@ enum WorkspaceCreationSteps {
 
 const WorkspaceCreation: React.FunctionComponent = () => {
   const navigate = useNavigate();
+  const { api } = useNotebookAPI();
+  const { selectedNamespace } = useNamespaceContext();
 
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [currentStep, setCurrentStep] = useState(WorkspaceCreationSteps.KindSelection);
-  const [selectedKind, setSelectedKind] = useState<WorkspaceKind | undefined>();
-  const [selectedImage, setSelectedImage] = useState<WorkspaceImage | undefined>();
-  const [selectedPodConfig, setSelectedPodConfig] = useState<WorkspacePodConfig | undefined>();
-  const [, setSelectedProperties] = useState<WorkspaceProperties | undefined>();
+
+  const [data, setData, resetData] = useGenericObjectState<WorkspaceCreateFormData>({
+    kind: undefined,
+    image: undefined,
+    podConfig: undefined,
+    properties: {
+      deferUpdates: false,
+      homeDirectory: '',
+      volumes: [],
+      secrets: [],
+      workspaceName: '',
+    },
+  });
 
   const getStepVariant = useCallback(
     (step: WorkspaceCreationSteps) => {
@@ -62,17 +73,68 @@ const WorkspaceCreation: React.FunctionComponent = () => {
     setCurrentStep(currentStep + 1);
   }, [currentStep]);
 
+  const canGoToPreviousStep = useMemo(() => currentStep > 0, [currentStep]);
+
+  const canGoToNextStep = useMemo(
+    () => currentStep < Object.keys(WorkspaceCreationSteps).length / 2 - 1,
+    [currentStep],
+  );
+
+  const canSubmit = useMemo(
+    () => !isSubmitting && !canGoToNextStep,
+    [canGoToNextStep, isSubmitting],
+  );
+
+  const handleCreate = useCallback(() => {
+    // TODO: properly validate data before submitting
+    if (!data.kind || !data.image || !data.podConfig) {
+      return;
+    }
+
+    const workspaceCreate: WorkspaceCreate = {
+      name: data.properties.workspaceName,
+      kind: data.kind.name,
+      deferUpdates: data.properties.deferUpdates,
+      paused: false,
+      podTemplate: {
+        podMetadata: {
+          labels: {},
+          annotations: {},
+        },
+        options: {
+          imageConfig: data.image.id,
+          podConfig: data.podConfig.id,
+        },
+        volumes: {
+          home: data.properties.homeDirectory,
+          data: data.properties.volumes,
+          secrets: data.properties.secrets,
+        },
+      },
+    };
+
+    setIsSubmitting(true);
+
+    api
+      .createWorkspace({}, selectedNamespace, { data: workspaceCreate })
+      .then((newWorkspace) => {
+        // TODO: alert user about success
+        console.info('New workspace created:', JSON.stringify(newWorkspace));
+        navigate('/workspaces');
+      })
+      .catch((err) => {
+        // TODO: alert user about error
+        console.error('Error creating workspace:', err);
+      })
+      .finally(() => {
+        setIsSubmitting(false);
+      });
+  }, [api, data, navigate, selectedNamespace]);
+
   const cancel = useCallback(() => {
     navigate('/workspaces');
   }, [navigate]);
 
-  const onSelectWorkspaceKind = useCallback((newWorkspaceKind: WorkspaceKind | undefined) => {
-    setSelectedKind(newWorkspaceKind);
-    setSelectedImage(undefined);
-    setSelectedPodConfig(undefined);
-    setSelectedProperties(undefined);
-  }, []);
-
   return (
     <>
       <PageGroup isFilled={false} stickyOnBreakpoint={{ default: 'top' }}>
@@ -157,26 +219,33 @@ const WorkspaceCreation: React.FunctionComponent = () => {
       <PageSection isFilled>
         {currentStep === WorkspaceCreationSteps.KindSelection && (
           <WorkspaceCreationKindSelection
-            selectedKind={selectedKind}
-            onSelect={onSelectWorkspaceKind}
+            selectedKind={data.kind}
+            onSelect={(kind) => {
+              resetData();
+              setData('kind', kind);
+            }}
           />
         )}
         {currentStep === WorkspaceCreationSteps.ImageSelection && (
           <WorkspaceCreationImageSelection
-            selectedImage={selectedImage}
-            images={selectedKind?.podTemplate.options.imageConfig.values ?? []}
-            onSelect={setSelectedImage}
+            selectedImage={data.image}
+            onSelect={(image) => setData('image', image)}
+            images={data.kind?.podTemplate.options.imageConfig.values ?? []}
           />
         )}
         {currentStep === WorkspaceCreationSteps.PodConfigSelection && (
           <WorkspaceCreationPodConfigSelection
-            selectedPodConfig={selectedPodConfig}
-            podConfigs={selectedKind?.podTemplate.options.podConfig.values ?? []}
-            onSelect={setSelectedPodConfig}
+            selectedPodConfig={data.podConfig}
+            onSelect={(podConfig) => setData('podConfig', podConfig)}
+            podConfigs={data.kind?.podTemplate.options.podConfig.values ?? []}
           />
         )}
         {currentStep === WorkspaceCreationSteps.Properties && (
-          <WorkspaceCreationPropertiesSelection selectedImage={selectedImage} />
+          <WorkspaceCreationPropertiesSelection
+            selectedProperties={data.properties}
+            onSelect={(properties) => setData('properties', properties)}
+            selectedImage={data.image}
+          />
         )}
       </PageSection>
       <PageSection isFilled={false} stickyOnBreakpoint={{ default: 'bottom' }}>
@@ -186,7 +255,7 @@ const WorkspaceCreation: React.FunctionComponent = () => {
               variant="primary"
               ouiaId="Primary"
               onClick={previousStep}
-              isDisabled={currentStep === 0}
+              isDisabled={!canGoToPreviousStep}
             >
               Previous
             </Button>
@@ -196,11 +265,21 @@ const WorkspaceCreation: React.FunctionComponent = () => {
               variant="primary"
               ouiaId="Primary"
               onClick={nextStep}
-              isDisabled={currentStep === Object.keys(WorkspaceCreationSteps).length / 2 - 1}
+              isDisabled={!canGoToNextStep}
             >
               Next
             </Button>
           </FlexItem>
+          <FlexItem>
+            <Button
+              variant="primary"
+              ouiaId="Primary"
+              onClick={handleCreate}
+              isDisabled={!canSubmit}
+            >
+              Create
+            </Button>
+          </FlexItem>
           <FlexItem>
             <Button variant="link" isInline onClick={cancel}>
               Cancel
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/image/WorkspaceCreationImageDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/image/WorkspaceCreationImageDetails.tsx
index df59bedcd..a1607c738 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/image/WorkspaceCreationImageDetails.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/image/WorkspaceCreationImageDetails.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { List, ListItem, Title } from '@patternfly/react-core';
-import { WorkspaceImage } from '~/shared/types';
+import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes';
 
 type WorkspaceCreationImageDetailsProps = {
-  workspaceImage?: WorkspaceImage;
+  workspaceImage?: WorkspacePodConfigValue;
 };
 
 export const WorkspaceCreationImageDetails: React.FunctionComponent<
@@ -18,9 +18,9 @@ export const WorkspaceCreationImageDetails: React.FunctionComponent<
         <Title headingLevel="h3">{workspaceImage.displayName}</Title>
         <br />
         <List isPlain>
-          {Object.keys(workspaceImage.labels).map((labelKey) => (
-            <ListItem key={labelKey}>
-              {labelKey}={workspaceImage.labels[labelKey]}
+          {workspaceImage.labels.map((label) => (
+            <ListItem key={label.key}>
+              {label.key}={label.value}
             </ListItem>
           ))}
         </List>
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/image/WorkspaceCreationImageList.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/image/WorkspaceCreationImageList.tsx
index 7b22b65c5..55c0cd419 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/image/WorkspaceCreationImageList.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/image/WorkspaceCreationImageList.tsx
@@ -12,20 +12,20 @@ import {
   CardBody,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import { WorkspaceImage } from '~/shared/types';
 import Filter, { FilteredColumn } from '~/shared/components/Filter';
+import { WorkspaceImageConfigValue } from '~/shared/api/backendApiTypes';
 
 type WorkspaceCreationImageListProps = {
-  images: WorkspaceImage[];
+  images: WorkspaceImageConfigValue[];
   selectedLabels: Map<string, Set<string>>;
-  selectedImage: WorkspaceImage | undefined;
-  onSelect: (workspaceImage: WorkspaceImage | undefined) => void;
+  selectedImage: WorkspaceImageConfigValue | undefined;
+  onSelect: (workspaceImage: WorkspaceImageConfigValue | undefined) => void;
 };
 
 export const WorkspaceCreationImageList: React.FunctionComponent<
   WorkspaceCreationImageListProps
 > = ({ images, selectedLabels, selectedImage, onSelect }) => {
-  const [workspaceImages, setWorkspaceImages] = useState<WorkspaceImage[]>(images);
+  const [workspaceImages, setWorkspaceImages] = useState<WorkspaceImageConfigValue[]>(images);
   const [filters, setFilters] = useState<FilteredColumn[]>([]);
 
   const filterableColumns = useMemo(
@@ -36,13 +36,12 @@ export const WorkspaceCreationImageList: React.FunctionComponent<
   );
 
   const getFilteredWorkspaceImagesByLabels = useCallback(
-    (unfilteredImages: WorkspaceImage[]) =>
+    (unfilteredImages: WorkspaceImageConfigValue[]) =>
       unfilteredImages.filter((image) =>
-        Object.keys(image.labels).reduce((accumulator, labelKey) => {
-          const labelValue = image.labels[labelKey];
-          if (selectedLabels.has(labelKey)) {
-            const labelValues: Set<string> | undefined = selectedLabels.get(labelKey);
-            return accumulator && labelValues !== undefined && labelValues.has(labelValue);
+        image.labels.reduce((accumulator, label) => {
+          if (selectedLabels.has(label.key)) {
+            const labelValues: Set<string> | undefined = selectedLabels.get(label.key);
+            return accumulator && labelValues !== undefined && labelValues.has(label.value);
           }
           return accumulator;
         }, true),
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/image/WorkspaceCreationImageSelection.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/image/WorkspaceCreationImageSelection.tsx
index cdfb1e953..e51580f10 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/image/WorkspaceCreationImageSelection.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/image/WorkspaceCreationImageSelection.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { Content, Divider, Split, SplitItem } from '@patternfly/react-core';
 import { useMemo, useState } from 'react';
-import { WorkspaceImage } from '~/shared/types';
 import { WorkspaceCreationImageDetails } from '~/app/pages/Workspaces/Creation/image/WorkspaceCreationImageDetails';
 import { WorkspaceCreationImageList } from '~/app/pages/Workspaces/Creation/image/WorkspaceCreationImageList';
 import { FilterByLabels } from '~/app/pages/Workspaces/Creation/labelFilter/FilterByLabels';
+import { WorkspaceImageConfigValue } from '~/shared/api/backendApiTypes';
 
 interface WorkspaceCreationImageSelectionProps {
-  images: WorkspaceImage[];
-  selectedImage: WorkspaceImage | undefined;
-  onSelect: (image: WorkspaceImage | undefined) => void;
+  images: WorkspaceImageConfigValue[];
+  selectedImage: WorkspaceImageConfigValue | undefined;
+  onSelect: (image: WorkspaceImageConfigValue | undefined) => void;
 }
 
 const WorkspaceCreationImageSelection: React.FunctionComponent<
@@ -20,7 +20,7 @@ const WorkspaceCreationImageSelection: React.FunctionComponent<
   const imageFilterContent = useMemo(
     () => (
       <FilterByLabels
-        labelledObjects={images.map((image) => image.labels)}
+        labelledObjects={images.flatMap((image) => image.labels)}
         selectedLabels={selectedLabels}
         onSelect={setSelectedLabels}
       />
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindDetails.tsx
index 1fc6088cc..09897d04f 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindDetails.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindDetails.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Title } from '@patternfly/react-core';
-import { WorkspaceKind } from '~/shared/types';
+import { WorkspaceKind } from '~/shared/api/backendApiTypes';
 
 type WorkspaceCreationKindDetailsProps = {
   workspaceKind?: WorkspaceKind;
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindList.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindList.tsx
index 23ef90f80..ba78a6bc9 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindList.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindList.tsx
@@ -12,7 +12,7 @@ import {
   EmptyStateBody,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import { WorkspaceKind } from '~/shared/types';
+import { WorkspaceKind } from '~/shared/api/backendApiTypes';
 import Filter, { FilteredColumn } from '~/shared/components/Filter';
 
 type WorkspaceCreationKindListProps = {
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindSelection.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindSelection.tsx
index ea9e376ca..24a567d88 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindSelection.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindSelection.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { Content, Divider, Split, SplitItem } from '@patternfly/react-core';
 import { useMemo } from 'react';
-import { WorkspaceKind } from '~/shared/types';
+import { WorkspaceKind } from '~/shared/api/backendApiTypes';
 import { WorkspaceCreationKindDetails } from '~/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindDetails';
 import { WorkspaceCreationKindList } from '~/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindList';
+import useWorkspaceKinds from '~/app/hooks/useWorkspaceKinds';
 
 interface WorkspaceCreationKindSelectionProps {
   selectedKind: WorkspaceKind | undefined;
@@ -13,141 +14,21 @@ interface WorkspaceCreationKindSelectionProps {
 const WorkspaceCreationKindSelection: React.FunctionComponent<
   WorkspaceCreationKindSelectionProps
 > = ({ selectedKind, onSelect }) => {
-  /* Replace mocks below for BFF call */
-  const mockedWorkspaceKind: WorkspaceKind = useMemo(
-    () => ({
-      name: 'jupyter-lab1',
-      displayName: 'JupyterLab Notebook',
-      description: 'A Workspace which runs JupyterLab in a Pod',
-      deprecated: false,
-      deprecationMessage: '',
-      hidden: false,
-      icon: {
-        url: 'https://jupyter.org/assets/favicons/apple-touch-icon-152x152.png',
-      },
-      logo: {
-        url: 'https://upload.wikimedia.org/wikipedia/commons/3/38/Jupyter_logo.svg',
-      },
-      podTemplate: {
-        podMetadata: {
-          labels: { myWorkspaceKindLabel: 'my-value' },
-          annotations: { myWorkspaceKindAnnotation: 'my-value' },
-        },
-        volumeMounts: { home: '/home/jovyan' },
-        options: {
-          imageConfig: {
-            default: 'jupyterlab_scipy_190',
-            values: [
-              {
-                id: 'jupyterlab_scipy_180',
-                displayName: 'jupyter-scipy:v1.8.0',
-                labels: { pythonVersion: '3.11', jupyterlabVersion: '1.8.0' },
-                hidden: true,
-                redirect: {
-                  to: 'jupyterlab_scipy_190',
-                  message: {
-                    text: 'This update will change...',
-                    level: 'Info',
-                  },
-                },
-              },
-              {
-                id: 'jupyterlab_scipy_190',
-                displayName: 'jupyter-scipy:v1.9.0',
-                labels: { pythonVersion: '3.12', jupyterlabVersion: '1.9.0' },
-                hidden: true,
-                redirect: {
-                  to: 'jupyterlab_scipy_200',
-                  message: {
-                    text: 'This update will change...',
-                    level: 'Warning',
-                  },
-                },
-              },
-              {
-                id: 'jupyterlab_scipy_200',
-                displayName: 'jupyter-scipy:v2.0.0',
-                labels: { pythonVersion: '3.12', jupyterlabVersion: '2.0.0' },
-                hidden: true,
-                redirect: {
-                  to: 'jupyterlab_scipy_210',
-                  message: {
-                    text: 'This update will change...',
-                    level: 'Warning',
-                  },
-                },
-              },
-              {
-                id: 'jupyterlab_scipy_210',
-                displayName: 'jupyter-scipy:v2.1.0',
-                labels: { pythonVersion: '3.13', jupyterlabVersion: '2.1.0' },
-                hidden: true,
-                redirect: {
-                  to: 'jupyterlab_scipy_220',
-                  message: {
-                    text: 'This update will change...',
-                    level: 'Warning',
-                  },
-                },
-              },
-            ],
-          },
-          podConfig: {
-            default: 'tiny_cpu',
-            values: [
-              {
-                id: 'tiny_cpu',
-                displayName: 'Tiny CPU',
-                description: 'Pod with 0.1 CPU, 128 Mb RAM',
-                labels: { cpu: '100m', memory: '128Mi' },
-                redirect: {
-                  to: 'small_cpu',
-                  message: {
-                    text: 'This update will change...',
-                    level: 'Danger',
-                  },
-                },
-              },
-              {
-                id: 'large_cpu',
-                displayName: 'Large CPU',
-                description: 'Pod with 1 CPU, 1 Gb RAM',
-                labels: { cpu: '1000m', memory: '1Gi' },
-              },
-            ],
-          },
-        },
-      },
-    }),
-    [],
-  );
-
-  /* Replace mocks below for BFF call */
-  const allWorkspaceKinds = useMemo(() => {
-    const kinds: WorkspaceKind[] = [];
-
-    for (let i = 1; i <= 15; i++) {
-      const kind = { ...mockedWorkspaceKind };
-      kind.name += i;
-      kind.displayName += ` ${i}`;
-      kind.podTemplate = { ...mockedWorkspaceKind.podTemplate };
-      kind.podTemplate.podMetadata = { ...mockedWorkspaceKind.podTemplate.podMetadata };
-      kind.podTemplate.podMetadata.labels = {
-        ...mockedWorkspaceKind.podTemplate.podMetadata.labels,
-      };
-      kind.podTemplate.podMetadata.labels[`my-label-key-${Math.ceil(i / 4)}`] =
-        `my-label-value-${Math.ceil(i)}`;
-      kinds.push(kind);
-    }
-
-    return kinds;
-  }, [mockedWorkspaceKind]);
+  const [workspaceKinds, loaded, error] = useWorkspaceKinds();
 
   const kindDetailsContent = useMemo(
     () => <WorkspaceCreationKindDetails workspaceKind={selectedKind} />,
     [selectedKind],
   );
 
+  if (error) {
+    return <p>Error loading workspace kinds: {error.message}</p>; // TODO: UX for error state
+  }
+
+  if (!loaded) {
+    return <p>Loading...</p>; // TODO: UX for loading state
+  }
+
   return (
     <Content style={{ height: '100%' }}>
       <p>Select a workspace kind to use for the workspace.</p>
@@ -155,7 +36,7 @@ const WorkspaceCreationKindSelection: React.FunctionComponent<
       <Split hasGutter>
         <SplitItem isFilled>
           <WorkspaceCreationKindList
-            allWorkspaceKinds={allWorkspaceKinds}
+            allWorkspaceKinds={workspaceKinds}
             selectedKind={selectedKind}
             onSelect={onSelect}
           />
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/labelFilter/FilterByLabels.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/labelFilter/FilterByLabels.tsx
index 14051ac77..d540b855b 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/labelFilter/FilterByLabels.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/labelFilter/FilterByLabels.tsx
@@ -5,9 +5,10 @@ import {
   FilterSidePanelCategoryItem,
 } from '@patternfly/react-catalog-view-extension';
 import '@patternfly/react-catalog-view-extension/dist/css/react-catalog-view-extension.css';
+import { WorkspaceOptionLabel } from '~/shared/api/backendApiTypes';
 
 type FilterByLabelsProps = {
-  labelledObjects: any[]; // eslint-disable-line @typescript-eslint/no-explicit-any
+  labelledObjects: WorkspaceOptionLabel[];
   selectedLabels: Map<string, Set<string>>;
   onSelect: (labels: Map<string, Set<string>>) => void;
 };
@@ -20,13 +21,10 @@ export const FilterByLabels: React.FunctionComponent<FilterByLabelsProps> = ({
   const filterMap = useMemo(() => {
     const labelsMap = new Map<string, Set<string>>();
     labelledObjects.forEach((labelledObject) => {
-      Object.keys(labelledObject).forEach((labelKey) => {
-        const labelValue = labelledObject[labelKey];
-        if (!labelsMap.has(labelKey)) {
-          labelsMap.set(labelKey, new Set<string>());
-        }
-        labelsMap.get(labelKey)?.add(labelValue);
-      });
+      if (!labelsMap.has(labelledObject.key)) {
+        labelsMap.set(labelledObject.key, new Set<string>());
+      }
+      labelsMap.get(labelledObject.key)?.add(labelledObject.value);
     });
     return labelsMap;
   }, [labelledObjects]);
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigDetails.tsx
index 0d45ca92d..86413d28f 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigDetails.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigDetails.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { List, ListItem, Title } from '@patternfly/react-core';
-import { WorkspacePodConfig } from '~/shared/types';
+import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes';
 
 type WorkspaceCreationPodConfigDetailsProps = {
-  workspacePodConfig?: WorkspacePodConfig;
+  workspacePodConfig?: WorkspacePodConfigValue;
 };
 
 export const WorkspaceCreationPodConfigDetails: React.FunctionComponent<
@@ -18,9 +18,9 @@ export const WorkspaceCreationPodConfigDetails: React.FunctionComponent<
         <Title headingLevel="h3">{workspacePodConfig.displayName}</Title>
         <p>{workspacePodConfig.description}</p>
         <List isPlain>
-          {Object.keys(workspacePodConfig.labels).map((labelKey) => (
-            <ListItem key={labelKey}>
-              {labelKey}={workspacePodConfig.labels[labelKey]}
+          {workspacePodConfig.labels.map((label) => (
+            <ListItem key={label.key}>
+              {label.key}={label.value}
             </ListItem>
           ))}
         </List>
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigList.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigList.tsx
index cb383f3ed..112c66d45 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigList.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigList.tsx
@@ -12,20 +12,21 @@ import {
   CardBody,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import { WorkspacePodConfig } from '~/shared/types';
+import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes';
 import Filter, { FilteredColumn } from '~/shared/components/Filter';
 
 type WorkspaceCreationPodConfigListProps = {
-  podConfigs: WorkspacePodConfig[];
+  podConfigs: WorkspacePodConfigValue[];
   selectedLabels: Map<string, Set<string>>;
-  selectedPodConfig: WorkspacePodConfig | undefined;
-  onSelect: (workspacePodConfig: WorkspacePodConfig | undefined) => void;
+  selectedPodConfig: WorkspacePodConfigValue | undefined;
+  onSelect: (workspacePodConfig: WorkspacePodConfigValue | undefined) => void;
 };
 
 export const WorkspaceCreationPodConfigList: React.FunctionComponent<
   WorkspaceCreationPodConfigListProps
 > = ({ podConfigs, selectedLabels, selectedPodConfig, onSelect }) => {
-  const [workspacePodConfigs, setWorkspacePodConfigs] = useState<WorkspacePodConfig[]>(podConfigs);
+  const [workspacePodConfigs, setWorkspacePodConfigs] =
+    useState<WorkspacePodConfigValue[]>(podConfigs);
   const [filters, setFilters] = useState<FilteredColumn[]>([]);
 
   const filterableColumns = useMemo(
@@ -36,13 +37,12 @@ export const WorkspaceCreationPodConfigList: React.FunctionComponent<
   );
 
   const getFilteredWorkspacePodConfigsByLabels = useCallback(
-    (unfilteredPodConfigs: WorkspacePodConfig[]) =>
+    (unfilteredPodConfigs: WorkspacePodConfigValue[]) =>
       unfilteredPodConfigs.filter((podConfig) =>
-        Object.keys(podConfig.labels).reduce((accumulator, labelKey) => {
-          const labelValue = podConfig.labels[labelKey];
-          if (selectedLabels.has(labelKey)) {
-            const labelValues: Set<string> | undefined = selectedLabels.get(labelKey);
-            return accumulator && labelValues !== undefined && labelValues.has(labelValue);
+        podConfig.labels.reduce((accumulator, label) => {
+          if (selectedLabels.has(label.key)) {
+            const labelValues: Set<string> | undefined = selectedLabels.get(label.key);
+            return accumulator && labelValues !== undefined && labelValues.has(label.value);
           }
           return accumulator;
         }, true),
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigSelection.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigSelection.tsx
index 6ac201a5e..63317cd10 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigSelection.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigSelection.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { Content, Divider, Split, SplitItem } from '@patternfly/react-core';
 import { useMemo, useState } from 'react';
-import { WorkspacePodConfig } from '~/shared/types';
+import { WorkspacePodConfigValue } from '~/shared/api/backendApiTypes';
 import { WorkspaceCreationPodConfigDetails } from '~/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigDetails';
 import { WorkspaceCreationPodConfigList } from '~/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigList';
 import { FilterByLabels } from '~/app/pages/Workspaces/Creation/labelFilter/FilterByLabels';
 
 interface WorkspaceCreationPodConfigSelectionProps {
-  podConfigs: WorkspacePodConfig[];
-  selectedPodConfig: WorkspacePodConfig | undefined;
-  onSelect: (podConfig: WorkspacePodConfig | undefined) => void;
+  podConfigs: WorkspacePodConfigValue[];
+  selectedPodConfig: WorkspacePodConfigValue | undefined;
+  onSelect: (podConfig: WorkspacePodConfigValue | undefined) => void;
 }
 
 const WorkspaceCreationPodConfigSelection: React.FunctionComponent<
@@ -20,7 +20,7 @@ const WorkspaceCreationPodConfigSelection: React.FunctionComponent<
   const podConfigFilterContent = useMemo(
     () => (
       <FilterByLabels
-        labelledObjects={podConfigs.map((podConfig) => podConfig.labels)}
+        labelledObjects={podConfigs.flatMap((podConfig) => podConfig.labels)}
         selectedLabels={selectedLabels}
         onSelect={setSelectedLabels}
       />
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSecrets.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSecrets.tsx
index bdd4c4281..978432735 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSecrets.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSecrets.tsx
@@ -18,25 +18,27 @@ import {
   HelperText,
   HelperTextItem,
 } from '@patternfly/react-core';
-import { WorkspaceSecret } from '~/shared/types';
+import { WorkspacePodSecretMount } from '~/shared/api/backendApiTypes';
 
 interface WorkspaceCreationPropertiesSecretsProps {
-  secrets: WorkspaceSecret[];
-  setSecrets: React.Dispatch<React.SetStateAction<WorkspaceSecret[]>>;
+  secrets: WorkspacePodSecretMount[];
+  setSecrets: (secrets: WorkspacePodSecretMount[]) => void;
 }
 
+const DEFAULT_MODE_OCTAL = (420).toString(8);
+
 export const WorkspaceCreationPropertiesSecrets: React.FC<
   WorkspaceCreationPropertiesSecretsProps
 > = ({ secrets, setSecrets }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [formData, setFormData] = useState<WorkspaceSecret>({
+  const [formData, setFormData] = useState<WorkspacePodSecretMount>({
     secretName: '',
     mountPath: '',
-    defaultMode: 420,
+    defaultMode: parseInt(DEFAULT_MODE_OCTAL, 8),
   });
   const [editIndex, setEditIndex] = useState<number | null>(null);
-  const [defaultMode, setDefaultMode] = useState('644');
+  const [defaultMode, setDefaultMode] = useState(DEFAULT_MODE_OCTAL);
   const [deleteIndex, setDeleteIndex] = useState<number | null>(null);
   const [isDefaultModeValid, setIsDefaultModeValid] = useState(true);
   const [dropdownOpen, setDropdownOpen] = useState<number | null>(null);
@@ -49,7 +51,7 @@ export const WorkspaceCreationPropertiesSecrets: React.FC<
   const handleEdit = useCallback(
     (index: number) => {
       setFormData(secrets[index]);
-      setDefaultMode(secrets[index].defaultMode.toString(8));
+      setDefaultMode(secrets[index].defaultMode?.toString(8) ?? DEFAULT_MODE_OCTAL);
       setEditIndex(index);
       setIsModalOpen(true);
     },
@@ -83,27 +85,27 @@ export const WorkspaceCreationPropertiesSecrets: React.FC<
   }, []);
 
   const handleAddOrEditSubmit = useCallback(() => {
-    setSecrets((prev) => {
-      if (editIndex === null) {
-        return [...prev, formData];
-      }
-      const updated = prev;
+    if (!formData.secretName || !formData.mountPath) {
+      return;
+    }
+    if (editIndex !== null) {
+      const updated = [...secrets];
       updated[editIndex] = formData;
-      return updated;
-    });
+      setSecrets(updated);
+    } else {
+      setSecrets([...secrets, formData]);
+    }
     clearForm();
-  }, [editIndex, setSecrets, clearForm, formData]);
+  }, [clearForm, editIndex, formData, secrets, setSecrets]);
 
   const handleDelete = useCallback(() => {
-    if (deleteIndex !== null) {
-      setSecrets((prev) => {
-        prev.splice(deleteIndex, 1);
-        return prev;
-      });
-      setDeleteIndex(null);
-      setIsDeleteModalOpen(false);
+    if (deleteIndex === null) {
+      return;
     }
-  }, [setSecrets, deleteIndex]);
+    setSecrets(secrets.filter((_, i) => i !== deleteIndex));
+    setDeleteIndex(null);
+    setIsDeleteModalOpen(false);
+  }, [deleteIndex, secrets, setSecrets]);
 
   return (
     <>
@@ -122,7 +124,7 @@ export const WorkspaceCreationPropertiesSecrets: React.FC<
               <Tr key={index}>
                 <Td>{secret.secretName}</Td>
                 <Td>{secret.mountPath}</Td>
-                <Td>{secret.defaultMode.toString(8)}</Td>
+                <Td>{secret.defaultMode?.toString(8) ?? DEFAULT_MODE_OCTAL}</Td>
                 <Td isActionCell>
                   <Dropdown
                     toggle={(toggleRef) => (
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSelection.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSelection.tsx
index 963ba9c39..d379a3ae4 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSelection.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSelection.tsx
@@ -1,46 +1,34 @@
 import * as React from 'react';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import {
-  TextInput,
   Checkbox,
+  Content,
+  Divider,
+  ExpandableSection,
   Form,
   FormGroup,
-  ExpandableSection,
-  Divider,
   Split,
   SplitItem,
-  Content,
+  TextInput,
 } from '@patternfly/react-core';
 import { WorkspaceCreationImageDetails } from '~/app/pages/Workspaces/Creation/image/WorkspaceCreationImageDetails';
 import { WorkspaceCreationPropertiesVolumes } from '~/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesVolumes';
-import { WorkspaceImage, WorkspaceVolumes, WorkspaceVolume, WorkspaceSecret } from '~/shared/types';
+import { WorkspaceCreateProperties } from '~/app/types';
+import { WorkspaceImageConfigValue } from '~/shared/api/backendApiTypes';
 import { WorkspaceCreationPropertiesSecrets } from './WorkspaceCreationPropertiesSecrets';
 
 interface WorkspaceCreationPropertiesSelectionProps {
-  selectedImage: WorkspaceImage | undefined;
+  selectedImage: WorkspaceImageConfigValue | undefined;
+  selectedProperties: WorkspaceCreateProperties;
+  onSelect: (properties: WorkspaceCreateProperties) => void;
 }
 
 const WorkspaceCreationPropertiesSelection: React.FunctionComponent<
   WorkspaceCreationPropertiesSelectionProps
-> = ({ selectedImage }) => {
-  const [workspaceName, setWorkspaceName] = useState('');
-  const [deferUpdates, setDeferUpdates] = useState(false);
-  const [homeDirectory, setHomeDirectory] = useState('');
-  const [volumes, setVolumes] = useState<WorkspaceVolumes>({ home: '', data: [], secrets: [] });
-  const [volumesData, setVolumesData] = useState<WorkspaceVolume[]>([]);
-  const [secrets, setSecrets] = useState<WorkspaceSecret[]>(
-    volumes.secrets.length ? volumes.secrets : [],
-  );
+> = ({ selectedImage, selectedProperties, onSelect }) => {
   const [isVolumesExpanded, setIsVolumesExpanded] = useState(false);
   const [isSecretsExpanded, setIsSecretsExpanded] = useState(false);
 
-  useEffect(() => {
-    setVolumes((prev) => ({
-      ...prev,
-      data: volumesData,
-    }));
-  }, [volumesData]);
-
   const imageDetailsContent = useMemo(
     () => <WorkspaceCreationImageDetails workspaceImage={selectedImage} />,
     [selectedImage],
@@ -64,16 +52,21 @@ const WorkspaceCreationPropertiesSelection: React.FunctionComponent<
                 <TextInput
                   isRequired
                   type="text"
-                  value={workspaceName}
-                  onChange={(_, value) => setWorkspaceName(value)}
+                  value={selectedProperties.workspaceName}
+                  onChange={(_, value) => onSelect({ ...selectedProperties, workspaceName: value })}
                   id="workspace-name"
                 />
               </FormGroup>
               <FormGroup fieldId="defer-updates">
                 <Checkbox
                   label="Defer Updates"
-                  isChecked={deferUpdates}
-                  onChange={() => setDeferUpdates((prev) => !prev)}
+                  isChecked={selectedProperties.deferUpdates}
+                  onChange={() =>
+                    onSelect({
+                      ...selectedProperties,
+                      deferUpdates: !selectedProperties.deferUpdates,
+                    })
+                  }
                   id="defer-updates"
                 />
               </FormGroup>
@@ -93,10 +86,12 @@ const WorkspaceCreationPropertiesSelection: React.FunctionComponent<
                         style={{ width: 500 }}
                       >
                         <TextInput
-                          value={homeDirectory}
+                          value={selectedProperties.homeDirectory}
                           onChange={(_, value) => {
-                            setHomeDirectory(value);
-                            setVolumes((prev) => ({ ...prev, home: value }));
+                            onSelect({
+                              ...selectedProperties,
+                              homeDirectory: value,
+                            });
                           }}
                           id="home-directory"
                         />
@@ -104,8 +99,8 @@ const WorkspaceCreationPropertiesSelection: React.FunctionComponent<
 
                       <FormGroup fieldId="volumes-table" style={{ marginTop: '1rem' }}>
                         <WorkspaceCreationPropertiesVolumes
-                          volumes={volumesData}
-                          setVolumes={setVolumesData}
+                          volumes={selectedProperties.volumes}
+                          setVolumes={(volumes) => onSelect({ ...selectedProperties, volumes })}
                         />
                       </FormGroup>
                     </>
@@ -116,7 +111,7 @@ const WorkspaceCreationPropertiesSelection: React.FunctionComponent<
                 <div style={{ paddingLeft: '36px', marginTop: '-10px' }}>
                   <div>Workspace volumes enable your project data to persist.</div>
                   <div className="pf-u-font-size-sm">
-                    <strong>{volumes.data.length} added</strong>
+                    <strong>{selectedProperties.volumes.length} added</strong>
                   </div>
                 </div>
               )}
@@ -130,8 +125,8 @@ const WorkspaceCreationPropertiesSelection: React.FunctionComponent<
                   {isSecretsExpanded && (
                     <FormGroup fieldId="secrets-table" style={{ marginTop: '1rem' }}>
                       <WorkspaceCreationPropertiesSecrets
-                        secrets={secrets}
-                        setSecrets={setSecrets}
+                        secrets={selectedProperties.secrets}
+                        setSecrets={(secrets) => onSelect({ ...selectedProperties, secrets })}
                       />
                     </FormGroup>
                   )}
@@ -141,7 +136,7 @@ const WorkspaceCreationPropertiesSelection: React.FunctionComponent<
                 <div style={{ paddingLeft: '36px', marginTop: '-10px' }}>
                   <div>Secrets enable your project to securely access and manage credentials.</div>
                   <div className="pf-u-font-size-sm">
-                    <strong>{secrets.length} added</strong>
+                    <strong>{selectedProperties.secrets.length} added</strong>
                   </div>
                 </div>
               )}
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesVolumes.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesVolumes.tsx
index b047ad020..2c06240d2 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesVolumes.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesVolumes.tsx
@@ -1,26 +1,26 @@
-import React, { useCallback, useState } from 'react';
-import { EllipsisVIcon } from '@patternfly/react-icons';
-import { Table, Thead, Tbody, Tr, Th, Td, TableVariant } from '@patternfly/react-table';
 import {
   Button,
-  Modal,
-  ModalVariant,
-  TextInput,
-  Switch,
   Dropdown,
   DropdownItem,
+  Form,
+  FormGroup,
   MenuToggle,
+  Modal,
   ModalBody,
   ModalFooter,
-  Form,
-  FormGroup,
   ModalHeader,
+  ModalVariant,
+  Switch,
+  TextInput,
 } from '@patternfly/react-core';
-import { WorkspaceVolume } from '~/shared/types';
+import { EllipsisVIcon } from '@patternfly/react-icons';
+import { Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import React, { useCallback, useState } from 'react';
+import { WorkspacePodVolumeMount } from '~/shared/api/backendApiTypes';
 
 interface WorkspaceCreationPropertiesVolumesProps {
-  volumes: WorkspaceVolume[];
-  setVolumes: React.Dispatch<React.SetStateAction<WorkspaceVolume[]>>;
+  volumes: WorkspacePodVolumeMount[];
+  setVolumes: (volumes: WorkspacePodVolumeMount[]) => void;
 }
 
 export const WorkspaceCreationPropertiesVolumes: React.FC<
@@ -28,7 +28,7 @@ export const WorkspaceCreationPropertiesVolumes: React.FC<
 > = ({ volumes, setVolumes }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [formData, setFormData] = useState<WorkspaceVolume>({
+  const [formData, setFormData] = useState<WorkspacePodVolumeMount>({
     pvcName: '',
     mountPath: '',
     readOnly: false,
@@ -72,11 +72,12 @@ export const WorkspaceCreationPropertiesVolumes: React.FC<
   }, []);
 
   const handleDelete = useCallback(() => {
-    if (deleteIndex !== null) {
-      setVolumes(volumes.filter((_, i) => i !== deleteIndex));
-      setIsDeleteModalOpen(false);
-      setDeleteIndex(null);
+    if (deleteIndex === null) {
+      return;
     }
+    setVolumes(volumes.filter((_, i) => i !== deleteIndex));
+    setIsDeleteModalOpen(false);
+    setDeleteIndex(null);
   }, [deleteIndex, volumes, setVolumes]);
 
   return (
diff --git a/workspaces/frontend/src/app/pages/Workspaces/DataVolumesList.tsx b/workspaces/frontend/src/app/pages/Workspaces/DataVolumesList.tsx
index 426bf6605..dd847eeed 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/DataVolumesList.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/DataVolumesList.tsx
@@ -12,7 +12,7 @@ import {
 } from '@patternfly/react-core';
 import { DatabaseIcon, LockedIcon } from '@patternfly/react-icons';
 import * as React from 'react';
-import { Workspace } from '~/shared/types';
+import { Workspace } from '~/shared/api/backendApiTypes';
 
 interface DataVolumesListProps {
   workspace: Workspace;
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx
index 05990f3c3..6122c6553 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx
@@ -12,7 +12,7 @@ import {
   TabContentBody,
   TabContent,
 } from '@patternfly/react-core';
-import { Workspace } from '~/shared/types';
+import { Workspace } from '~/shared/api/backendApiTypes';
 import { WorkspaceDetailsOverview } from '~/app/pages/Workspaces/Details/WorkspaceDetailsOverview';
 import { WorkspaceDetailsActions } from '~/app/pages/Workspaces/Details/WorkspaceDetailsActions';
 import { WorkspaceDetailsActivity } from '~/app/pages/Workspaces/Details/WorkspaceDetailsActivity';
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActivity.tsx b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActivity.tsx
index 5832d2a3e..44dcdfe89 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActivity.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActivity.tsx
@@ -6,7 +6,7 @@ import {
   DescriptionListDescription,
   Divider,
 } from '@patternfly/react-core';
-import { Workspace } from '~/shared/types';
+import { Workspace } from '~/shared/api/backendApiTypes';
 import { formatTimestamp } from '~/shared/utilities/WorkspaceUtils';
 
 type WorkspaceDetailsActivityProps = {
@@ -16,7 +16,7 @@ type WorkspaceDetailsActivityProps = {
 export const WorkspaceDetailsActivity: React.FunctionComponent<WorkspaceDetailsActivityProps> = ({
   workspace,
 }) => {
-  const { activity, pauseTime, pendingRestart } = workspace.status;
+  const { activity, pausedTime, pendingRestart } = workspace;
 
   return (
     <DescriptionList isHorizontal>
@@ -37,7 +37,7 @@ export const WorkspaceDetailsActivity: React.FunctionComponent<WorkspaceDetailsA
       <DescriptionListGroup>
         <DescriptionListTerm>Pause Time</DescriptionListTerm>
         <DescriptionListDescription data-testid="pauseTime">
-          {formatTimestamp(pauseTime)}
+          {formatTimestamp(pausedTime)}
         </DescriptionListDescription>
       </DescriptionListGroup>
       <Divider />
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx
index 7456b9813..6b00b3833 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx
@@ -6,7 +6,7 @@ import {
   DescriptionListDescription,
   Divider,
 } from '@patternfly/react-core';
-import { Workspace } from '~/shared/types';
+import { Workspace } from '~/shared/api/backendApiTypes';
 
 type WorkspaceDetailsOverviewProps = {
   workspace: Workspace;
@@ -23,19 +23,23 @@ export const WorkspaceDetailsOverview: React.FunctionComponent<WorkspaceDetailsO
     <Divider />
     <DescriptionListGroup>
       <DescriptionListTerm>Kind</DescriptionListTerm>
-      <DescriptionListDescription>{workspace.kind}</DescriptionListDescription>
+      <DescriptionListDescription>{workspace.workspaceKind.name}</DescriptionListDescription>
     </DescriptionListGroup>
     <Divider />
     <DescriptionListGroup>
       <DescriptionListTerm>Labels</DescriptionListTerm>
       <DescriptionListDescription>
-        {workspace.podTemplate.podMetadata.labels.join(', ')}
+        {Object.entries(workspace.podTemplate.podMetadata.labels)
+          .map(([key, value]) => `${key}=${value}`)
+          .join(', ')}
       </DescriptionListDescription>
     </DescriptionListGroup>
     <Divider />
     <DescriptionListGroup>
       <DescriptionListTerm>Pod config</DescriptionListTerm>
-      <DescriptionListDescription>{workspace.options.podConfig}</DescriptionListDescription>
+      <DescriptionListDescription>
+        {workspace.podTemplate.options.podConfig.current.displayName}
+      </DescriptionListDescription>
     </DescriptionListGroup>
     <Divider />
   </DescriptionList>
diff --git a/workspaces/frontend/src/app/pages/Workspaces/ExpandedWorkspaceRow.tsx b/workspaces/frontend/src/app/pages/Workspaces/ExpandedWorkspaceRow.tsx
index 8caa05546..5fd2e38c2 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/ExpandedWorkspaceRow.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/ExpandedWorkspaceRow.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { ExpandableRowContent, Td, Tr } from '@patternfly/react-table';
-import { Workspace, WorkspacesColumnNames } from '~/shared/types';
+import { Workspace } from '~/shared/api/backendApiTypes';
 import { DataVolumesList } from '~/app/pages/Workspaces/DataVolumesList';
+import { WorkspacesColumnNames } from '~/app/types';
 
 interface ExpandedWorkspaceRowProps {
   workspace: Workspace;
diff --git a/workspaces/frontend/src/app/pages/Workspaces/WorkspaceConnectAction.tsx b/workspaces/frontend/src/app/pages/Workspaces/WorkspaceConnectAction.tsx
index 8528a1309..fa87ea033 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/WorkspaceConnectAction.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/WorkspaceConnectAction.tsx
@@ -7,7 +7,7 @@ import {
   MenuToggleElement,
   MenuToggleAction,
 } from '@patternfly/react-core';
-import { Workspace, WorkspaceState } from '~/shared/types';
+import { Workspace, WorkspaceState } from '~/shared/api/backendApiTypes';
 
 type WorkspaceConnectActionProps = {
   workspace: Workspace;
@@ -33,11 +33,15 @@ export const WorkspaceConnectAction: React.FunctionComponent<WorkspaceConnectAct
   };
 
   const onClickConnect = () => {
-    openEndpoint(workspace.podTemplate.endpoints[0].port);
+    if (workspace.services.length === 0 || !workspace.services[0].httpService) {
+      return;
+    }
+
+    openEndpoint(workspace.services[0].httpService.httpPath);
   };
 
-  const openEndpoint = (port: string) => {
-    window.open(`workspace/${workspace.namespace}/${workspace.name}/${port}`, '_blank');
+  const openEndpoint = (value: string) => {
+    window.open(value, '_blank');
   };
 
   return (
@@ -50,7 +54,7 @@ export const WorkspaceConnectAction: React.FunctionComponent<WorkspaceConnectAct
           ref={toggleRef}
           onClick={onToggleClick}
           isExpanded={open}
-          isDisabled={workspace.status.state !== WorkspaceState.Running}
+          isDisabled={workspace.state !== WorkspaceState.WorkspaceStateRunning}
           splitButtonItems={[
             <MenuToggleAction
               id="connect-endpoint-button"
@@ -66,11 +70,19 @@ export const WorkspaceConnectAction: React.FunctionComponent<WorkspaceConnectAct
       shouldFocusToggleOnSelect
     >
       <DropdownList>
-        {workspace.podTemplate.endpoints.map((endpoint) => (
-          <DropdownItem value={endpoint.port} key={`${workspace.name}-${endpoint.port}`}>
-            {endpoint.displayName}
-          </DropdownItem>
-        ))}
+        {workspace.services.map((service) => {
+          if (!service.httpService) {
+            return null;
+          }
+          return (
+            <DropdownItem
+              value={service.httpService.httpPath}
+              key={`${workspace.name}-${service.httpService.displayName}`}
+            >
+              {service.httpService.displayName}
+            </DropdownItem>
+          );
+        })}
       </DropdownList>
     </Dropdown>
   );
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx
index 45275951a..52e016b3f 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx
@@ -34,7 +34,7 @@ import {
 } from '@patternfly/react-icons';
 import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Workspace, WorkspacesColumnNames, WorkspaceState } from '~/shared/types';
+import { Workspace, WorkspaceState } from '~/shared/api/backendApiTypes';
 import { WorkspaceDetails } from '~/app/pages/Workspaces/Details/WorkspaceDetails';
 import { ExpandedWorkspaceRow } from '~/app/pages/Workspaces/ExpandedWorkspaceRow';
 import DeleteModal from '~/shared/components/DeleteModal';
@@ -43,12 +43,15 @@ import {
   buildWorkspaceRedirectStatus,
 } from '~/app/actions/WorkspaceKindsActions';
 import useWorkspaceKinds from '~/app/hooks/useWorkspaceKinds';
+import useWorkspaces from '~/app/hooks/useWorkspaces';
 import { WorkspaceConnectAction } from '~/app/pages/Workspaces/WorkspaceConnectAction';
 import { WorkspaceStartActionModal } from '~/app/pages/Workspaces/workspaceActions/WorkspaceStartActionModal';
 import { WorkspaceRestartActionModal } from '~/app/pages/Workspaces/workspaceActions/WorkspaceRestartActionModal';
 import { WorkspaceStopActionModal } from '~/app/pages/Workspaces/workspaceActions/WorkspaceStopActionModal';
+import { useNamespaceContext } from '~/app/context/NamespaceContextProvider';
+import { WorkspacesColumnNames } from '~/app/types';
 import Filter, { FilteredColumn } from 'shared/components/Filter';
-import { formatRam } from 'shared/utilities/WorkspaceUtils';
+import { extractCpuValue, extractMemoryValue } from 'shared/utilities/WorkspaceUtils';
 
 export enum ActionType {
   ViewDetails,
@@ -60,157 +63,14 @@ export enum ActionType {
 }
 
 export const Workspaces: React.FunctionComponent = () => {
-  /* Mocked workspaces, to be removed after fetching info from backend */
-  const mockWorkspaces: Workspace[] = [
-    {
-      name: 'My Jupyter Notebook',
-      namespace: 'namespace1',
-      paused: true,
-      deferUpdates: true,
-      kind: 'jupyter-lab',
-      cpu: 3,
-      ram: 500,
-      podTemplate: {
-        podMetadata: {
-          labels: ['label1', 'label2'],
-          annotations: ['annotation1', 'annotation2'],
-        },
-        volumes: {
-          home: '/home',
-          data: [
-            {
-              pvcName: 'Volume-1',
-              mountPath: '/data',
-              readOnly: true,
-            },
-            {
-              pvcName: 'Volume-2',
-              mountPath: '/data',
-              readOnly: false,
-            },
-          ],
-          secrets: [
-            {
-              secretName: 'Secret-2',
-              mountPath: '/data',
-              defaultMode: 420,
-            },
-          ],
-        },
-        endpoints: [
-          {
-            displayName: 'JupyterLab',
-            port: '7777',
-          },
-        ],
-      },
-      options: {
-        imageConfig: 'jupyterlab_scipy_180',
-        podConfig: 'Small CPU',
-      },
-      status: {
-        activity: {
-          lastActivity: 1739673600,
-          lastUpdate: 1739673700,
-        },
-        pauseTime: 1739673500,
-        pendingRestart: false,
-        podTemplateOptions: {
-          imageConfig: {
-            desired: '',
-            redirectChain: [],
-          },
-        },
-        state: WorkspaceState.Paused,
-        stateMessage: 'It is paused.',
-      },
-      redirectStatus: {
-        level: 'Info',
-        text: 'This is informational', // Tooltip text
-      },
-    },
-    {
-      name: 'My Other Jupyter Notebook',
-      namespace: 'namespace1',
-      paused: false,
-      deferUpdates: false,
-      kind: 'jupyter-lab',
-      cpu: 1,
-      ram: 12540,
-      podTemplate: {
-        podMetadata: {
-          labels: ['label1', 'label2'],
-          annotations: ['annotation1', 'annotation2'],
-        },
-        volumes: {
-          home: '/home',
-          data: [
-            {
-              pvcName: 'PVC-1',
-              mountPath: '/data',
-              readOnly: false,
-            },
-          ],
-          secrets: [
-            {
-              secretName: 'workspace-secret',
-              mountPath: '/secrets/my-secret',
-              defaultMode: 420,
-            },
-          ],
-        },
-        endpoints: [
-          {
-            displayName: 'JupyterLab',
-            port: '8888',
-          },
-          {
-            displayName: 'Spark Master',
-            port: '9999',
-          },
-        ],
-      },
-      options: {
-        imageConfig: 'jupyterlab_scipy_180',
-        podConfig: 'Large CPU',
-      },
-      status: {
-        activity: {
-          lastActivity: 0,
-          lastUpdate: 0,
-        },
-        pauseTime: 0,
-        pendingRestart: false,
-        podTemplateOptions: {
-          imageConfig: {
-            desired: '',
-            redirectChain: [],
-          },
-        },
-        state: WorkspaceState.Running,
-        stateMessage: 'It is running.',
-      },
-      redirectStatus: {
-        level: 'Danger',
-        text: 'This is dangerous',
-      },
-    },
-  ];
-
   const navigate = useNavigate();
   const createWorkspace = useCallback(() => {
     navigate('/workspaces/create');
   }, [navigate]);
 
   const [workspaceKinds] = useWorkspaceKinds();
-  let kindLogoDict: Record<string, string> = {};
-  kindLogoDict = buildKindLogoDictionary(workspaceKinds);
-
-  let workspaceRedirectStatus: Record<
-    string,
-    { to: string; message: string; level: string } | null
-  > = {}; // Initialize the redirect status dictionary
-  workspaceRedirectStatus = buildWorkspaceRedirectStatus(workspaceKinds); // Populate the dictionary
+  const kindLogoDict = buildKindLogoDictionary(workspaceKinds);
+  const workspaceRedirectStatus = buildWorkspaceRedirectStatus(workspaceKinds);
 
   // Table columns
   const columnNames: WorkspacesColumnNames = {
@@ -236,15 +96,22 @@ export const Workspaces: React.FunctionComponent = () => {
     lastActivity: 'Last Activity',
   };
 
-  // change when fetch workspaces is implemented
-  const initialWorkspaces = mockWorkspaces;
-  const [workspaces, setWorkspaces] = useState<Workspace[]>(initialWorkspaces);
+  const { selectedNamespace } = useNamespaceContext();
+  const [initialWorkspaces, initialWorkspacesLoaded] = useWorkspaces(selectedNamespace);
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
   const [expandedWorkspacesNames, setExpandedWorkspacesNames] = React.useState<string[]>([]);
   const [selectedWorkspace, setSelectedWorkspace] = React.useState<Workspace | null>(null);
   const [workspaceToDelete, setWorkspaceToDelete] = React.useState<Workspace | null>(null);
   const [isActionAlertModalOpen, setIsActionAlertModalOpen] = React.useState(false);
   const [activeActionType, setActiveActionType] = React.useState<ActionType | null>(null);
 
+  React.useEffect(() => {
+    if (!initialWorkspacesLoaded) {
+      return;
+    }
+    setWorkspaces(initialWorkspaces ?? []);
+  }, [initialWorkspaces, initialWorkspacesLoaded]);
+
   const selectWorkspace = React.useCallback(
     (newSelectedWorkspace: Workspace | null) => {
       if (selectedWorkspace?.name === newSelectedWorkspace?.name) {
@@ -270,7 +137,7 @@ export const Workspaces: React.FunctionComponent = () => {
   // filter function to pass to the filter component
   const onFilter = (filters: FilteredColumn[]) => {
     // Search name with search value
-    let filteredWorkspaces = initialWorkspaces;
+    let filteredWorkspaces = initialWorkspaces ?? [];
     filters.forEach((filter) => {
       let searchValueInput: RegExp;
       try {
@@ -287,15 +154,26 @@ export const Workspaces: React.FunctionComponent = () => {
           case columnNames.name:
             return workspace.name.search(searchValueInput) >= 0;
           case columnNames.kind:
-            return workspace.kind.search(searchValueInput) >= 0;
+            return workspace.workspaceKind.name.search(searchValueInput) >= 0;
           case columnNames.image:
-            return workspace.options.imageConfig.search(searchValueInput) >= 0;
+            return (
+              workspace.podTemplate.options.imageConfig.current.displayName.search(
+                searchValueInput,
+              ) >= 0
+            );
           case columnNames.podConfig:
-            return workspace.options.podConfig.search(searchValueInput) >= 0;
+            return (
+              workspace.podTemplate.options.podConfig.current.displayName.search(
+                searchValueInput,
+              ) >= 0
+            );
           case columnNames.state:
-            return WorkspaceState[workspace.status.state].search(searchValueInput) >= 0;
+            return workspace.state.search(searchValueInput) >= 0;
           case columnNames.homeVol:
-            return workspace.podTemplate.volumes.home.search(searchValueInput) >= 0;
+            if (!workspace.podTemplate.volumes.home) {
+              return false;
+            }
+            return workspace.podTemplate.volumes.home.mountPath.search(searchValueInput) >= 0;
           default:
             return true;
         }
@@ -314,14 +192,14 @@ export const Workspaces: React.FunctionComponent = () => {
       {
         redirectStatus: '',
         name: workspace.name,
-        kind: workspace.kind,
-        image: workspace.options.imageConfig,
-        podConfig: workspace.options.podConfig,
-        state: WorkspaceState[workspace.status.state],
-        homeVol: workspace.podTemplate.volumes.home,
-        cpu: workspace.cpu,
-        ram: workspace.ram,
-        lastActivity: workspace.status.activity.lastActivity,
+        kind: workspace.workspaceKind.name,
+        image: workspace.podTemplate.options.imageConfig.current.displayName,
+        podConfig: workspace.podTemplate.options.podConfig.current.displayName,
+        state: workspace.state,
+        homeVol: workspace.podTemplate.volumes.home?.pvcName ?? '',
+        cpu: extractCpuValue(workspace),
+        ram: extractMemoryValue(workspace),
+        lastActivity: workspace.activity.lastActivity,
       };
     return [redirectStatus, name, kind, image, podConfig, state, homeVol, cpu, ram, lastActivity];
   };
@@ -401,7 +279,6 @@ export const Workspaces: React.FunctionComponent = () => {
   };
 
   const workspaceDefaultActions = (workspace: Workspace): IActions => {
-    const workspaceState = workspace.status.state;
     const workspaceActions = [
       {
         id: 'view-details',
@@ -421,7 +298,7 @@ export const Workspaces: React.FunctionComponent = () => {
       {
         isSeparator: true,
       },
-      workspaceState !== WorkspaceState.Running
+      workspace.state !== WorkspaceState.WorkspaceStateRunning
         ? {
             id: 'start',
             title: 'Start',
@@ -434,7 +311,7 @@ export const Workspaces: React.FunctionComponent = () => {
           },
     ] as IActions;
 
-    if (workspaceState === WorkspaceState.Running) {
+    if (workspace.state === WorkspaceState.WorkspaceStateRunning) {
       workspaceActions.push({
         id: 'stop',
         title: 'Stop',
@@ -474,19 +351,23 @@ export const Workspaces: React.FunctionComponent = () => {
     return undefined;
   };
 
-  // States
-
-  const stateColors: (
-    | 'blue'
-    | 'teal'
-    | 'green'
-    | 'orange'
-    | 'purple'
-    | 'red'
-    | 'orangered'
-    | 'grey'
-    | 'yellow'
-  )[] = ['green', 'orange', 'yellow', 'blue', 'red', 'purple'];
+  const extractStateColor = (state: WorkspaceState) => {
+    switch (state) {
+      case WorkspaceState.WorkspaceStateRunning:
+        return 'green';
+      case WorkspaceState.WorkspaceStatePending:
+        return 'orange';
+      case WorkspaceState.WorkspaceStateTerminating:
+        return 'yellow';
+      case WorkspaceState.WorkspaceStateError:
+        return 'red';
+      case WorkspaceState.WorkspaceStatePaused:
+        return 'purple';
+      case WorkspaceState.WorkspaceStateUnknown:
+      default:
+        return 'grey';
+    }
+  };
 
   // Redirect Status Icons
 
@@ -610,43 +491,47 @@ export const Workspaces: React.FunctionComponent = () => {
                       }}
                     />
                     <Td dataLabel={columnNames.redirectStatus}>
-                      {workspaceRedirectStatus[workspace.kind]
+                      {workspaceRedirectStatus[workspace.workspaceKind.name]
                         ? getRedirectStatusIcon(
-                            workspaceRedirectStatus[workspace.kind]?.level,
-                            workspaceRedirectStatus[workspace.kind]?.message ||
+                            workspaceRedirectStatus[workspace.workspaceKind.name]?.message?.level,
+                            workspaceRedirectStatus[workspace.workspaceKind.name]?.message?.text ||
                               'No API response available',
                           )
                         : getRedirectStatusIcon(undefined, 'No API response available')}
                     </Td>
                     <Td dataLabel={columnNames.name}>{workspace.name}</Td>
                     <Td dataLabel={columnNames.kind}>
-                      {kindLogoDict[workspace.kind] ? (
-                        <Tooltip content={workspace.kind}>
+                      {kindLogoDict[workspace.workspaceKind.name] ? (
+                        <Tooltip content={workspace.workspaceKind.name}>
                           <Brand
-                            src={kindLogoDict[workspace.kind]}
-                            alt={workspace.kind}
+                            src={kindLogoDict[workspace.workspaceKind.name]}
+                            alt={workspace.workspaceKind.name}
                             style={{ width: '20px', height: '20px', cursor: 'pointer' }}
                           />
                         </Tooltip>
                       ) : (
-                        <Tooltip content={workspace.kind}>
+                        <Tooltip content={workspace.workspaceKind.name}>
                           <CodeIcon />
                         </Tooltip>
                       )}
                     </Td>
-                    <Td dataLabel={columnNames.image}>{workspace.options.imageConfig}</Td>
-                    <Td dataLabel={columnNames.podConfig}>{workspace.options.podConfig}</Td>
+                    <Td dataLabel={columnNames.image}>
+                      {workspace.podTemplate.options.imageConfig.current.displayName}
+                    </Td>
+                    <Td dataLabel={columnNames.podConfig}>
+                      {workspace.podTemplate.options.podConfig.current.displayName}
+                    </Td>
                     <Td dataLabel={columnNames.state}>
-                      <Label color={stateColors[workspace.status.state]}>
-                        {WorkspaceState[workspace.status.state]}
-                      </Label>
+                      <Label color={extractStateColor(workspace.state)}>{workspace.state}</Label>
+                    </Td>
+                    <Td dataLabel={columnNames.homeVol}>
+                      {workspace.podTemplate.volumes.home?.pvcName ?? ''}
                     </Td>
-                    <Td dataLabel={columnNames.homeVol}>{workspace.podTemplate.volumes.home}</Td>
-                    <Td dataLabel={columnNames.cpu}>{`${workspace.cpu}%`}</Td>
-                    <Td dataLabel={columnNames.ram}>{formatRam(workspace.ram)}</Td>
+                    <Td dataLabel={columnNames.cpu}>{extractCpuValue(workspace)}</Td>
+                    <Td dataLabel={columnNames.ram}>{extractMemoryValue(workspace)}</Td>
                     <Td dataLabel={columnNames.lastActivity}>
                       <Timestamp
-                        date={new Date(workspace.status.activity.lastActivity)}
+                        date={new Date(workspace.activity.lastActivity)}
                         tooltip={{ variant: TimestampTooltipVariant.default }}
                       >
                         1 hour ago
diff --git a/workspaces/frontend/src/app/pages/Workspaces/utils.ts b/workspaces/frontend/src/app/pages/Workspaces/utils.ts
deleted file mode 100644
index a87fb3a2b..000000000
--- a/workspaces/frontend/src/app/pages/Workspaces/utils.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Workspace } from '~/shared/types';
-import { CreateWorkspaceData } from '~/app/types';
-import { NotebookAPIState } from '~/app/context/useNotebookAPIState';
-import { APIOptions } from '~/shared/api/types';
-
-export type RegisterWorkspaceCreatedResources = {
-  workspace: Workspace;
-};
-
-export const createWorkspaceCall = async (
-  opts: APIOptions,
-  api: NotebookAPIState['api'],
-  formData: CreateWorkspaceData,
-  namespace: string,
-): Promise<RegisterWorkspaceCreatedResources> => {
-  const workspace = await api.createWorkspace(opts, formData, namespace);
-  return { workspace };
-};
diff --git a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView.tsx b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView.tsx
index 033dfd81e..cd277b278 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView.tsx
@@ -5,82 +5,10 @@ import {
   InfoCircleIcon,
 } from '@patternfly/react-icons';
 import * as React from 'react';
+import useWorkspaceKindByName from '~/app/hooks/useWorkspaceKindByName';
+import { WorkspaceKind } from '~/shared/api/backendApiTypes';
 
-// remove when changing to fetch data from BE
-const mockedWorkspaceKind = {
-  name: 'jupyter-lab',
-  displayName: 'JupyterLab Notebook',
-  description: 'A Workspace which runs JupyterLab in a Pod',
-  deprecated: false,
-  deprecationMessage: '',
-  hidden: false,
-  icon: {
-    url: 'https://jupyter.org/assets/favicons/apple-touch-icon-152x152.png',
-  },
-  logo: {
-    url: 'https://upload.wikimedia.org/wikipedia/commons/3/38/Jupyter_logo.svg',
-  },
-  podTemplate: {
-    podMetadata: {
-      labels: { myWorkspaceKindLabel: 'my-value' },
-      annotations: { myWorkspaceKindAnnotation: 'my-value' },
-    },
-    volumeMounts: { home: '/home/jovyan' },
-    options: {
-      imageConfig: {
-        default: 'jupyterlab_scipy_190',
-        values: [
-          {
-            id: 'jupyterlab_scipy_180',
-            displayName: 'jupyter-scipy:v1.8.0',
-            labels: { pythonVersion: '3.11' },
-            hidden: true,
-            redirect: {
-              to: 'jupyterlab_scipy_190',
-              message: {
-                text: 'This update will change...',
-                level: 'Info',
-              },
-            },
-          },
-          {
-            id: 'jupyterlab_scipy_190',
-            displayName: 'jupyter-scipy:v1.9.0',
-            labels: { pythonVersion: '3.11' },
-            hidden: true,
-            redirect: {
-              to: 'jupyterlab_scipy_200',
-              message: {
-                text: 'This update will change...',
-                level: 'Warning',
-              },
-            },
-          },
-        ],
-      },
-      podConfig: {
-        default: 'tiny_cpu',
-        values: [
-          {
-            id: 'tiny_cpu',
-            displayName: 'Tiny CPU',
-            description: 'Pod with 0.1 CPU, 128 Mb RAM',
-            labels: { cpu: '100m', memory: '128Mi' },
-            redirect: {
-              to: 'small_cpu',
-              message: {
-                text: 'This update will change...',
-                level: 'Danger',
-              },
-            },
-          },
-        ],
-      },
-    },
-  },
-};
-
-const getLevelIcon = (level: string) => {
+const getLevelIcon = (level: string | undefined) => {
   switch (level) {
     case 'Info':
       return (
@@ -109,30 +37,42 @@ const getLevelIcon = (level: string) => {
   }
 };
 
-export const WorkspaceRedirectInformationView: React.FC = () => {
+interface WorkspaceRedirectInformationViewProps {
+  kind: string;
+}
+
+export const WorkspaceRedirectInformationView: React.FC<WorkspaceRedirectInformationViewProps> = ({
+  kind,
+}) => {
   const [activeKey, setActiveKey] = React.useState<string | number>(0);
-  // change this to get from BE, and use the workspaceKinds API
-  const workspaceKind = mockedWorkspaceKind;
+  const [workspaceKind, workspaceKindLoaded] = useWorkspaceKindByName(kind);
+  const [imageConfig, setImageConfig] =
+    React.useState<WorkspaceKind['podTemplate']['options']['imageConfig']>();
+  const [podConfig, setPodConfig] =
+    React.useState<WorkspaceKind['podTemplate']['options']['podConfig']>();
 
-  const { imageConfig } = workspaceKind.podTemplate.options;
-  const { podConfig } = workspaceKind.podTemplate.options;
+  React.useEffect(() => {
+    if (!workspaceKindLoaded) {
+      return;
+    }
+    setImageConfig(workspaceKind?.podTemplate.options.imageConfig);
+    setPodConfig(workspaceKind?.podTemplate.options.podConfig);
+  }, [workspaceKindLoaded, workspaceKind]);
 
-  const imageConfigRedirects = imageConfig.values.map((value) => ({
+  const imageConfigRedirects = imageConfig?.values.map((value) => ({
     src: value.id,
-    dest: value.redirect.to,
-    message: value.redirect.message.text,
-    level: value.redirect.message.level,
+    dest: value.redirect?.to,
+    message: value.redirect?.message?.text,
+    level: value.redirect?.message?.level,
   }));
-  const podConfigRedirects = podConfig.values.map((value) => ({
+  const podConfigRedirects = podConfig?.values.map((value) => ({
     src: value.id,
-    dest: value.redirect.to,
-    message: value.redirect.message.text,
-    level: value.redirect.message.level,
+    dest: value.redirect?.to,
+    message: value.redirect?.message?.text,
+    level: value.redirect?.message?.level,
   }));
 
-  const getMaxLevel = (
-    redirects: { dest: string; level: string; message: string; src: string }[],
-  ) => {
+  const getMaxLevel = (redirects: NonNullable<typeof imageConfigRedirects>) => {
     let maxLevel = redirects[0].level;
     redirects.forEach((redirect) => {
       if (
@@ -146,8 +86,8 @@ export const WorkspaceRedirectInformationView: React.FC = () => {
   };
 
   return (
-    <Tabs activeKey={activeKey} onSelect={(event, eventKey) => setActiveKey(eventKey)}>
-      {imageConfigRedirects.length > 0 && (
+    <Tabs activeKey={activeKey} onSelect={(_event, eventKey) => setActiveKey(eventKey)}>
+      {imageConfigRedirects && imageConfigRedirects.length > 0 && (
         <Tab
           eventKey={0}
           title={
@@ -166,7 +106,7 @@ export const WorkspaceRedirectInformationView: React.FC = () => {
           ))}
         </Tab>
       )}
-      {podConfigRedirects.length > 0 && (
+      {podConfigRedirects && podConfigRedirects.length > 0 && (
         <Tab
           eventKey={1}
           title={
diff --git a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRestartActionModal.tsx b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRestartActionModal.tsx
index 8139b48c5..aa012a88c 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRestartActionModal.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRestartActionModal.tsx
@@ -8,7 +8,7 @@ import {
   ModalHeader,
   TabTitleText,
 } from '@patternfly/react-core';
-import { Workspace } from '~/shared/types';
+import { Workspace } from '~/shared/api/backendApiTypes';
 import { WorkspaceRedirectInformationView } from '~/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView';
 
 interface RestartActionAlertProps {
@@ -22,7 +22,7 @@ export const WorkspaceRestartActionModal: React.FC<RestartActionAlertProps> = ({
   isOpen,
   workspace,
 }) => {
-  const workspacePendingUpdate = workspace?.status.pendingRestart;
+  const workspacePendingUpdate = workspace?.pendingRestart;
   const handleClick = (isUpdate = false) => {
     if (isUpdate) {
       console.log(`Update ${workspace?.name}`);
@@ -46,7 +46,7 @@ export const WorkspaceRestartActionModal: React.FC<RestartActionAlertProps> = ({
               There are pending redirect updates for that workspace. Are you sure you want to
               proceed?
             </TabTitleText>
-            <WorkspaceRedirectInformationView />
+            <WorkspaceRedirectInformationView kind={workspace.workspaceKind.name} />
           </>
         ) : (
           <Content>Are you sure you want to restart the workspace?</Content>
diff --git a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStartActionModal.tsx b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStartActionModal.tsx
index 8e065e776..ec7b848ab 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStartActionModal.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStartActionModal.tsx
@@ -7,7 +7,7 @@ import {
   ModalHeader,
   TabTitleText,
 } from '@patternfly/react-core';
-import { Workspace } from '~/shared/types';
+import { Workspace } from '~/shared/api/backendApiTypes';
 import { WorkspaceRedirectInformationView } from '~/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView';
 
 interface StartActionAlertProps {
@@ -41,7 +41,7 @@ export const WorkspaceStartActionModal: React.FC<StartActionAlertProps> = ({
         <TabTitleText>
           There are pending redirect updates for that workspace. Are you sure you want to proceed?
         </TabTitleText>
-        <WorkspaceRedirectInformationView />
+        {workspace && <WorkspaceRedirectInformationView kind={workspace.workspaceKind.name} />}
       </ModalBody>
       <ModalFooter>
         <Button onClick={() => handleClick(true)}>Update and Start</Button>
diff --git a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStopActionModal.tsx b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStopActionModal.tsx
index 992044f61..981b3fbbf 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStopActionModal.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStopActionModal.tsx
@@ -8,7 +8,7 @@ import {
   TabTitleText,
   Content,
 } from '@patternfly/react-core';
-import { Workspace } from '~/shared/types';
+import { Workspace } from '~/shared/api/backendApiTypes';
 import { WorkspaceRedirectInformationView } from '~/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView';
 
 interface StopActionAlertProps {
@@ -22,7 +22,7 @@ export const WorkspaceStopActionModal: React.FC<StopActionAlertProps> = ({
   isOpen,
   workspace,
 }) => {
-  const workspacePendingUpdate = workspace?.status.pendingRestart;
+  const workspacePendingUpdate = workspace?.pendingRestart;
   const handleClick = (isUpdate = false) => {
     if (isUpdate) {
       console.log(`Update ${workspace?.name}`);
@@ -46,7 +46,7 @@ export const WorkspaceStopActionModal: React.FC<StopActionAlertProps> = ({
               There are pending redirect updates for that workspace. Are you sure you want to
               proceed?
             </TabTitleText>
-            <WorkspaceRedirectInformationView />
+            <WorkspaceRedirectInformationView kind={workspace.workspaceKind.name} />
           </>
         ) : (
           <Content>Are you sure you want to stop the workspace?</Content>
diff --git a/workspaces/frontend/src/app/types.ts b/workspaces/frontend/src/app/types.ts
index d3c081720..83267440f 100644
--- a/workspaces/frontend/src/app/types.ts
+++ b/workspaces/frontend/src/app/types.ts
@@ -1,90 +1,43 @@
-import { APIOptions } from '~/shared/api/types';
-import { Workspace, WorkspaceKind, WorkspacePodTemplateMutate } from '~/shared/types';
-
-export type ResponseBody<T> = {
-  data: T;
-  metadata?: Record<string, unknown>;
-};
-
-export enum ResponseMetadataType {
-  INT = 'MetadataIntValue',
-  DOUBLE = 'MetadataDoubleValue',
-  STRING = 'MetadataStringValue',
-  STRUCT = 'MetadataStructValue',
-  PROTO = 'MetadataProtoValue',
-  BOOL = 'MetadataBoolValue',
+import {
+  WorkspaceImageConfigValue,
+  WorkspaceKind,
+  WorkspacePodConfigValue,
+  WorkspacePodVolumeMount,
+  WorkspacePodSecretMount,
+} from '~/shared/api/backendApiTypes';
+
+export interface WorkspacesColumnNames {
+  name: string;
+  kind: string;
+  image: string;
+  podConfig: string;
+  state: string;
+  homeVol: string;
+  cpu: string;
+  ram: string;
+  lastActivity: string;
+  redirectStatus: string;
 }
 
-export type ResponseCustomPropertyInt = {
-  metadataType: ResponseMetadataType.INT;
-  int_value: string; // int64-formatted string
-};
-
-export type ResponseCustomPropertyDouble = {
-  metadataType: ResponseMetadataType.DOUBLE;
-  double_value: number;
-};
-
-export type ResponseCustomPropertyString = {
-  metadataType: ResponseMetadataType.STRING;
-  string_value: string;
-};
-
-export type ResponseCustomPropertyStruct = {
-  metadataType: ResponseMetadataType.STRUCT;
-  struct_value: string; // Base64 encoded bytes for struct value
-};
-
-export type ResponseCustomPropertyProto = {
-  metadataType: ResponseMetadataType.PROTO;
-  type: string; // url describing proto value
-  proto_value: string; // Base64 encoded bytes for proto value
-};
-
-export type ResponseCustomPropertyBool = {
-  metadataType: ResponseMetadataType.BOOL;
-  bool_value: boolean;
-};
-
-export type ResponseCustomProperty =
-  | ResponseCustomPropertyInt
-  | ResponseCustomPropertyDouble
-  | ResponseCustomPropertyString
-  | ResponseCustomPropertyStruct
-  | ResponseCustomPropertyProto
-  | ResponseCustomPropertyBool;
-
-export type ResponseCustomProperties = Record<string, ResponseCustomProperty>;
-export type ResponseStringCustomProperties = Record<string, ResponseCustomPropertyString>;
-
-export type Namespace = {
+export interface WorkspaceKindsColumnNames {
+  icon: string;
   name: string;
-};
-
-export type NamespacesList = Namespace[];
-
-export type GetNamespaces = (opts: APIOptions) => Promise<NamespacesList>;
-
-export type GetWorkspaceKinds = (opts: APIOptions) => Promise<WorkspaceKind[]>;
-
-export type CreateWorkspace = (
-  opts: APIOptions,
-  data: CreateWorkspaceData,
-  namespace: string,
-) => Promise<Workspace>;
+  description: string;
+  deprecated: string;
+  numberOfWorkspaces: string;
+}
 
-export type NotebookAPIs = {
-  getNamespaces: GetNamespaces;
-  getWorkspaceKinds: GetWorkspaceKinds;
-  createWorkspace: CreateWorkspace;
-};
+export interface WorkspaceCreateProperties {
+  workspaceName: string;
+  deferUpdates: boolean;
+  homeDirectory: string;
+  volumes: WorkspacePodVolumeMount[];
+  secrets: WorkspacePodSecretMount[];
+}
 
-export type CreateWorkspaceData = {
-  data: {
-    name: string;
-    kind: string;
-    paused: boolean;
-    deferUpdates: boolean;
-    podTemplate: WorkspacePodTemplateMutate;
-  };
-};
+export interface WorkspaceCreateFormData {
+  kind: WorkspaceKind | undefined;
+  image: WorkspaceImageConfigValue | undefined;
+  podConfig: WorkspacePodConfigValue | undefined;
+  properties: WorkspaceCreateProperties;
+}
diff --git a/workspaces/frontend/src/shared/api/__tests__/notebookService.spec.ts b/workspaces/frontend/src/shared/api/__tests__/notebookService.spec.ts
index 50f12a9e9..d84aa9a98 100644
--- a/workspaces/frontend/src/shared/api/__tests__/notebookService.spec.ts
+++ b/workspaces/frontend/src/shared/api/__tests__/notebookService.spec.ts
@@ -1,7 +1,7 @@
+import { BFF_API_VERSION } from '~/app/const';
 import { restGET } from '~/shared/api/apiUtils';
 import { handleRestFailures } from '~/shared/api/errorUtils';
-import { getNamespaces } from '~/shared/api/notebookService';
-import { BFF_API_VERSION } from '~/app/const';
+import { listNamespaces } from '~/shared/api/notebookService';
 
 const mockRestPromise = Promise.resolve({ data: {} });
 const mockRestResponse = {};
@@ -11,6 +11,7 @@ jest.mock('~/shared/api/apiUtils', () => ({
   restGET: jest.fn(() => mockRestPromise),
   restPATCH: jest.fn(() => mockRestPromise),
   isNotebookResponse: jest.fn(() => true),
+  extractNotebookResponse: jest.fn(() => mockRestResponse),
 }));
 
 jest.mock('~/shared/api/errorUtils', () => ({
@@ -23,7 +24,7 @@ const APIOptionsMock = {};
 
 describe('getNamespaces', () => {
   it('should call restGET and handleRestFailures to fetch namespaces', async () => {
-    const response = await getNamespaces(`/api/${BFF_API_VERSION}/namespaces`)(APIOptionsMock);
+    const response = await listNamespaces(`/api/${BFF_API_VERSION}/namespaces`)(APIOptionsMock);
     expect(response).toEqual(mockRestResponse);
     expect(restGETMock).toHaveBeenCalledTimes(1);
     expect(restGETMock).toHaveBeenCalledWith(
diff --git a/workspaces/frontend/src/shared/api/apiUtils.ts b/workspaces/frontend/src/shared/api/apiUtils.ts
index c51058269..3d90488b5 100644
--- a/workspaces/frontend/src/shared/api/apiUtils.ts
+++ b/workspaces/frontend/src/shared/api/apiUtils.ts
@@ -1,7 +1,6 @@
-import { APIOptions } from '~/shared/api/types';
+import { APIOptions, ResponseBody } from '~/shared/api/types';
 import { EitherOrNone } from '~/shared/typeHelpers';
-import { ResponseBody } from '~/app/types';
-import { DEV_MODE, AUTH_HEADER } from '~/shared/utilities/const';
+import { AUTH_HEADER, DEV_MODE } from '~/shared/utilities/const';
 
 export const mergeRequestInit = (
   opts: APIOptions = {},
@@ -180,3 +179,10 @@ export const isNotebookResponse = <T>(response: unknown): response is ResponseBo
   }
   return false;
 };
+
+export function extractNotebookResponse<T>(response: unknown): T {
+  if (isNotebookResponse<T>(response)) {
+    return response.data;
+  }
+  throw new Error('Invalid response format');
+}
diff --git a/workspaces/frontend/src/shared/api/backendApiTypes.ts b/workspaces/frontend/src/shared/api/backendApiTypes.ts
new file mode 100644
index 000000000..3f660d91e
--- /dev/null
+++ b/workspaces/frontend/src/shared/api/backendApiTypes.ts
@@ -0,0 +1,270 @@
+export enum WorkspaceServiceStatus {
+  ServiceStatusHealthy = 'Healthy',
+  ServiceStatusUnhealthy = 'Unhealthy',
+}
+
+export interface WorkspaceSystemInfo {
+  version: string;
+}
+
+export interface HealthCheckResponse {
+  status: WorkspaceServiceStatus;
+  systemInfo: WorkspaceSystemInfo;
+}
+
+export interface Namespace {
+  name: string;
+}
+
+export interface WorkspaceImageRef {
+  url: string;
+}
+
+export interface WorkspacePodConfigValue {
+  id: string;
+  displayName: string;
+  description: string;
+  labels: WorkspaceOptionLabel[];
+  hidden: boolean;
+  redirect?: WorkspaceOptionRedirect;
+}
+
+export interface WorkspaceKindPodConfig {
+  default: string;
+  values: WorkspacePodConfigValue[];
+}
+
+export interface WorkspaceKindPodMetadata {
+  labels: Record<string, string>;
+  annotations: Record<string, string>;
+}
+
+export interface WorkspacePodVolumeMounts {
+  home: string;
+}
+
+export interface WorkspaceOptionLabel {
+  key: string;
+  value: string;
+}
+
+export enum WorkspaceRedirectMessageLevel {
+  RedirectMessageLevelInfo = 'Info',
+  RedirectMessageLevelWarning = 'Warning',
+  RedirectMessageLevelDanger = 'Danger',
+}
+
+export interface WorkspaceRedirectMessage {
+  text: string;
+  level: WorkspaceRedirectMessageLevel;
+}
+
+export interface WorkspaceOptionRedirect {
+  to: string;
+  message?: WorkspaceRedirectMessage;
+}
+
+export interface WorkspaceImageConfigValue {
+  id: string;
+  displayName: string;
+  description: string;
+  labels: WorkspaceOptionLabel[];
+  hidden: boolean;
+  redirect?: WorkspaceOptionRedirect;
+}
+
+export interface WorkspaceKindImageConfig {
+  default: string;
+  values: WorkspaceImageConfigValue[];
+}
+
+export interface WorkspaceKindPodTemplateOptions {
+  imageConfig: WorkspaceKindImageConfig;
+  podConfig: WorkspaceKindPodConfig;
+}
+
+export interface WorkspaceKindPodTemplate {
+  podMetadata: WorkspaceKindPodMetadata;
+  volumeMounts: WorkspacePodVolumeMounts;
+  options: WorkspaceKindPodTemplateOptions;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface WorkspaceKindCreate {}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface WorkspaceKindUpdate {}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface WorkspaceKindPatch {}
+
+export interface WorkspaceKind {
+  name: string;
+  displayName: string;
+  description: string;
+  deprecated: boolean;
+  deprecationMessage: string;
+  hidden: boolean;
+  icon: WorkspaceImageRef;
+  logo: WorkspaceImageRef;
+  podTemplate: WorkspaceKindPodTemplate;
+}
+
+export enum WorkspaceState {
+  WorkspaceStateRunning = 'Running',
+  WorkspaceStateTerminating = 'Terminating',
+  WorkspaceStatePaused = 'Paused',
+  WorkspaceStatePending = 'Pending',
+  WorkspaceStateError = 'Error',
+  WorkspaceStateUnknown = 'Unknown',
+}
+
+export interface WorkspaceKindInfo {
+  name: string;
+  missing: boolean;
+  icon: WorkspaceImageRef;
+  logo: WorkspaceImageRef;
+}
+
+export interface WorkspacePodMetadata {
+  labels: Record<string, string>;
+  annotations: Record<string, string>;
+}
+
+export interface WorkspacePodVolumeInfo {
+  pvcName: string;
+  mountPath: string;
+  readOnly: boolean;
+}
+
+export interface WorkspaceOptionInfo {
+  id: string;
+  displayName: string;
+  description: string;
+  labels: WorkspaceOptionLabel[];
+}
+
+export interface WorkspaceRedirectStep {
+  sourceId: string;
+  targetId: string;
+  message?: WorkspaceRedirectMessage;
+}
+
+export interface WorkspaceImageConfig {
+  current: WorkspaceOptionInfo;
+  desired?: WorkspaceOptionInfo;
+  redirectChain?: WorkspaceRedirectStep[];
+}
+
+export interface WorkspacePodConfig {
+  current: WorkspaceOptionInfo;
+  desired?: WorkspaceOptionInfo;
+  redirectChain?: WorkspaceRedirectStep[];
+}
+
+export interface WorkspacePodTemplateOptions {
+  imageConfig: WorkspaceImageConfig;
+  podConfig: WorkspacePodConfig;
+}
+
+export interface WorkspacePodVolumes {
+  home?: WorkspacePodVolumeInfo;
+  data: WorkspacePodVolumeInfo[];
+}
+
+export interface WorkspacePodTemplate {
+  podMetadata: WorkspacePodMetadata;
+  volumes: WorkspacePodVolumes;
+  options: WorkspacePodTemplateOptions;
+}
+
+export enum WorkspaceProbeResult {
+  ProbeResultSuccess = 'Success',
+  ProbeResultFailure = 'Failure',
+  ProbeResultTimeout = 'Timeout',
+}
+
+export interface WorkspaceLastProbeInfo {
+  startTimeMs: number;
+  endTimeMs: number;
+  result: WorkspaceProbeResult;
+  message: string;
+}
+
+export interface WorkspaceActivity {
+  lastActivity: number;
+  lastUpdate: number;
+  lastProbe?: WorkspaceLastProbeInfo;
+}
+
+export interface WorkspaceHttpService {
+  displayName: string;
+  httpPath: string;
+}
+
+export interface WorkspaceService {
+  httpService?: WorkspaceHttpService;
+}
+
+export interface WorkspacePodMetadataMutate {
+  labels: Record<string, string>;
+  annotations: Record<string, string>;
+}
+
+export interface WorkspacePodVolumeMount {
+  pvcName: string;
+  mountPath: string;
+  readOnly?: boolean;
+}
+
+export interface WorkspacePodSecretMount {
+  secretName: string;
+  mountPath: string;
+  defaultMode?: number;
+}
+
+export interface WorkspacePodVolumesMutate {
+  home?: string;
+  data?: WorkspacePodVolumeMount[];
+  secrets?: WorkspacePodSecretMount[];
+}
+
+export interface WorkspacePodTemplateOptionsMutate {
+  imageConfig: string;
+  podConfig: string;
+}
+
+export interface WorkspacePodTemplateMutate {
+  podMetadata: WorkspacePodMetadataMutate;
+  volumes: WorkspacePodVolumesMutate;
+  options: WorkspacePodTemplateOptionsMutate;
+}
+
+export interface Workspace {
+  name: string;
+  namespace: string;
+  workspaceKind: WorkspaceKindInfo;
+  deferUpdates: boolean;
+  paused: boolean;
+  pausedTime: number;
+  pendingRestart: boolean;
+  state: WorkspaceState;
+  stateMessage: string;
+  podTemplate: WorkspacePodTemplate;
+  activity: WorkspaceActivity;
+  services: WorkspaceService[];
+}
+
+export interface WorkspaceCreate {
+  name: string;
+  kind: string;
+  paused: boolean;
+  deferUpdates: boolean;
+  podTemplate: WorkspacePodTemplateMutate;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface WorkspaceUpdate {}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface WorkspacePatch {}
diff --git a/workspaces/frontend/src/shared/api/callTypes.ts b/workspaces/frontend/src/shared/api/callTypes.ts
new file mode 100644
index 000000000..924a6c425
--- /dev/null
+++ b/workspaces/frontend/src/shared/api/callTypes.ts
@@ -0,0 +1,45 @@
+import {
+  CreateWorkspace,
+  CreateWorkspaceKind,
+  DeleteWorkspace,
+  DeleteWorkspaceKind,
+  GetHealthCheck,
+  GetWorkspace,
+  GetWorkspaceKind,
+  ListAllWorkspaces,
+  ListNamespaces,
+  ListWorkspaceKinds,
+  ListWorkspaces,
+  PatchWorkspace,
+  PatchWorkspaceKind,
+  UpdateWorkspace,
+  UpdateWorkspaceKind,
+} from '~/shared/api/notebookApi';
+import { APIOptions } from '~/shared/api/types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type KubeflowSpecificAPICall = (opts: APIOptions, ...args: any[]) => Promise<unknown>;
+type KubeflowAPICall<ActualCall extends KubeflowSpecificAPICall> = (hostPath: string) => ActualCall;
+
+// Health
+export type GetHealthCheckAPI = KubeflowAPICall<GetHealthCheck>;
+
+// Namespace
+export type ListNamespacesAPI = KubeflowAPICall<ListNamespaces>;
+
+// Workspace
+export type ListAllWorkspacesAPI = KubeflowAPICall<ListAllWorkspaces>;
+export type ListWorkspacesAPI = KubeflowAPICall<ListWorkspaces>;
+export type CreateWorkspaceAPI = KubeflowAPICall<CreateWorkspace>;
+export type GetWorkspaceAPI = KubeflowAPICall<GetWorkspace>;
+export type UpdateWorkspaceAPI = KubeflowAPICall<UpdateWorkspace>;
+export type PatchWorkspaceAPI = KubeflowAPICall<PatchWorkspace>;
+export type DeleteWorkspaceAPI = KubeflowAPICall<DeleteWorkspace>;
+
+// WorkspaceKind
+export type ListWorkspaceKindsAPI = KubeflowAPICall<ListWorkspaceKinds>;
+export type CreateWorkspaceKindAPI = KubeflowAPICall<CreateWorkspaceKind>;
+export type GetWorkspaceKindAPI = KubeflowAPICall<GetWorkspaceKind>;
+export type UpdateWorkspaceKindAPI = KubeflowAPICall<UpdateWorkspaceKind>;
+export type PatchWorkspaceKindAPI = KubeflowAPICall<PatchWorkspaceKind>;
+export type DeleteWorkspaceKindAPI = KubeflowAPICall<DeleteWorkspaceKind>;
diff --git a/workspaces/frontend/src/shared/api/notebookApi.ts b/workspaces/frontend/src/shared/api/notebookApi.ts
new file mode 100644
index 000000000..8b0341c07
--- /dev/null
+++ b/workspaces/frontend/src/shared/api/notebookApi.ts
@@ -0,0 +1,91 @@
+import {
+  HealthCheckResponse,
+  Namespace,
+  Workspace,
+  WorkspaceCreate,
+  WorkspaceKind,
+  WorkspaceKindCreate,
+  WorkspaceKindPatch,
+  WorkspaceKindUpdate,
+  WorkspacePatch,
+  WorkspaceUpdate,
+} from '~/shared/api/backendApiTypes';
+import { APIOptions, RequestData } from '~/shared/api/types';
+
+// Health
+export type GetHealthCheck = (opts: APIOptions) => Promise<HealthCheckResponse>;
+
+// Namespace
+export type ListNamespaces = (opts: APIOptions) => Promise<Namespace[]>;
+
+// Workspace
+export type ListAllWorkspaces = (opts: APIOptions) => Promise<Workspace[]>;
+export type ListWorkspaces = (opts: APIOptions, namespace: string) => Promise<Workspace[]>;
+export type GetWorkspace = (
+  opts: APIOptions,
+  namespace: string,
+  workspace: string,
+) => Promise<Workspace>;
+export type CreateWorkspace = (
+  opts: APIOptions,
+  namespace: string,
+  data: RequestData<WorkspaceCreate>,
+) => Promise<Workspace>;
+export type UpdateWorkspace = (
+  opts: APIOptions,
+  namespace: string,
+  workspace: string,
+  data: RequestData<WorkspaceUpdate>,
+) => Promise<Workspace>;
+export type PatchWorkspace = (
+  opts: APIOptions,
+  namespace: string,
+  workspace: string,
+  data: RequestData<WorkspacePatch>,
+) => Promise<Workspace>;
+export type DeleteWorkspace = (
+  opts: APIOptions,
+  namespace: string,
+  workspace: string,
+) => Promise<void>;
+
+// WorkspaceKind
+export type ListWorkspaceKinds = (opts: APIOptions) => Promise<WorkspaceKind[]>;
+export type GetWorkspaceKind = (opts: APIOptions, kind: string) => Promise<WorkspaceKind>;
+export type CreateWorkspaceKind = (
+  opts: APIOptions,
+  data: RequestData<WorkspaceKindCreate>,
+) => Promise<WorkspaceKind>;
+export type UpdateWorkspaceKind = (
+  opts: APIOptions,
+  kind: string,
+  data: RequestData<WorkspaceKindUpdate>,
+) => Promise<WorkspaceKind>;
+export type PatchWorkspaceKind = (
+  opts: APIOptions,
+  kind: string,
+  data: RequestData<WorkspaceKindPatch>,
+) => Promise<WorkspaceKind>;
+export type DeleteWorkspaceKind = (opts: APIOptions, kind: string) => Promise<void>;
+
+export type NotebookAPIs = {
+  // Health
+  getHealthCheck: GetHealthCheck;
+  // Namespace
+  listNamespaces: ListNamespaces;
+  // Workspace
+  listAllWorkspaces: ListAllWorkspaces;
+  listWorkspaces: ListWorkspaces;
+  getWorkspace: GetWorkspace;
+  createWorkspace: CreateWorkspace;
+  updateWorkspace: UpdateWorkspace;
+  patchWorkspace: PatchWorkspace;
+  deleteWorkspace: DeleteWorkspace;
+  // WorkspaceKind
+  listWorkspaceKinds: ListWorkspaceKinds;
+  getWorkspaceKind: GetWorkspaceKind;
+  createWorkspaceKind: CreateWorkspaceKind;
+  updateWorkspaceKind: UpdateWorkspaceKind;
+  patchWorkspaceKind: PatchWorkspaceKind;
+  deleteWorkspaceKind: DeleteWorkspaceKind;
+};
diff --git a/workspaces/frontend/src/shared/api/notebookService.ts b/workspaces/frontend/src/shared/api/notebookService.ts
index 81017369e..a5cdf859e 100644
--- a/workspaces/frontend/src/shared/api/notebookService.ts
+++ b/workspaces/frontend/src/shared/api/notebookService.ts
@@ -1,37 +1,108 @@
-import { NamespacesList, CreateWorkspaceData } from '~/app/types';
-import { isNotebookResponse, restGET, restCREATE } from '~/shared/api/apiUtils';
-import { APIOptions } from '~/shared/api/types';
+import {
+  extractNotebookResponse,
+  restCREATE,
+  restDELETE,
+  restGET,
+  restPATCH,
+  restUPDATE,
+} from '~/shared/api/apiUtils';
 import { handleRestFailures } from '~/shared/api/errorUtils';
-import { Workspace, WorkspaceKind } from '~/shared/types';
-
-export const getNamespaces =
-  (hostPath: string) =>
-  (opts: APIOptions): Promise<NamespacesList> =>
-    handleRestFailures(restGET(hostPath, `/namespaces`, {}, opts)).then((response) => {
-      if (isNotebookResponse<NamespacesList>(response)) {
-        return response.data;
-      }
-      throw new Error('Invalid response format');
-    });
-
-export const getWorkspaceKinds =
-  (hostPath: string) =>
-  (opts: APIOptions): Promise<WorkspaceKind[]> =>
-    handleRestFailures(restGET(hostPath, `/workspacekinds`, {}, opts)).then((response) => {
-      if (isNotebookResponse<WorkspaceKind[]>(response)) {
-        return response.data;
-      }
-      throw new Error('Invalid response format');
-    });
-
-export const createWorkspace =
-  (hostPath: string) =>
-  (opts: APIOptions, data: CreateWorkspaceData, namespace = ''): Promise<Workspace> =>
-    handleRestFailures(restCREATE(hostPath, `/workspaces/${namespace}`, data, opts)).then(
-      (response) => {
-        if (isNotebookResponse<Workspace>(response)) {
-          return response.data;
-        }
-        throw new Error('Invalid response format');
-      },
-    );
+import {
+  HealthCheckResponse,
+  Namespace,
+  Workspace,
+  WorkspaceKind,
+} from '~/shared/api/backendApiTypes';
+import {
+  CreateWorkspaceAPI,
+  CreateWorkspaceKindAPI,
+  DeleteWorkspaceAPI,
+  DeleteWorkspaceKindAPI,
+  GetHealthCheckAPI,
+  GetWorkspaceAPI,
+  GetWorkspaceKindAPI,
+  ListAllWorkspacesAPI,
+  ListNamespacesAPI,
+  ListWorkspaceKindsAPI,
+  ListWorkspacesAPI,
+  PatchWorkspaceAPI,
+  PatchWorkspaceKindAPI,
+  UpdateWorkspaceAPI,
+  UpdateWorkspaceKindAPI,
+} from './callTypes';
+
+export const getHealthCheck: GetHealthCheckAPI = (hostPath) => (opts) =>
+  handleRestFailures(restGET(hostPath, `/healthcheck`, {}, opts)).then((response) =>
+    extractNotebookResponse<HealthCheckResponse>(response),
+  );
+
+export const listNamespaces: ListNamespacesAPI = (hostPath) => (opts) =>
+  handleRestFailures(restGET(hostPath, `/namespaces`, {}, opts)).then((response) =>
+    extractNotebookResponse<Namespace[]>(response),
+  );
+
+export const listAllWorkspaces: ListAllWorkspacesAPI = (hostPath) => (opts) =>
+  handleRestFailures(restGET(hostPath, `/workspaces`, {}, opts)).then((response) =>
+    extractNotebookResponse<Workspace[]>(response),
+  );
+
+export const listWorkspaces: ListWorkspacesAPI = (hostPath) => (opts, namespace) =>
+  handleRestFailures(restGET(hostPath, `/workspaces/${namespace}`, {}, opts)).then((response) =>
+    extractNotebookResponse<Workspace[]>(response),
+  );
+
+export const getWorkspace: GetWorkspaceAPI = (hostPath) => (opts, namespace, workspace) =>
+  handleRestFailures(restGET(hostPath, `/workspaces/${namespace}/${workspace}`, {}, opts)).then(
+    (response) => extractNotebookResponse<Workspace>(response),
+  );
+
+export const createWorkspace: CreateWorkspaceAPI = (hostPath) => (opts, namespace, data) =>
+  handleRestFailures(restCREATE(hostPath, `/workspaces/${namespace}`, data, {}, opts)).then(
+    (response) => extractNotebookResponse<Workspace>(response),
+  );
+
+export const updateWorkspace: UpdateWorkspaceAPI =
+  (hostPath) => (opts, namespace, workspace, data) =>
+    handleRestFailures(
+      restUPDATE(hostPath, `/workspaces/${namespace}/${workspace}`, data, {}, opts),
+    ).then((response) => extractNotebookResponse<Workspace>(response));
+
+export const patchWorkspace: PatchWorkspaceAPI = (hostPath) => (opts, namespace, workspace, data) =>
+  handleRestFailures(restPATCH(hostPath, `/workspaces/${namespace}/${workspace}`, data, opts)).then(
+    (response) => extractNotebookResponse<Workspace>(response),
+  );
+
+export const deleteWorkspace: DeleteWorkspaceAPI = (hostPath) => (opts, namespace, workspace) =>
+  handleRestFailures(
+    restDELETE(hostPath, `/workspaces/${namespace}/${workspace}`, {}, {}, opts),
+  ).then((response) => extractNotebookResponse<void>(response));
+
+export const listWorkspaceKinds: ListWorkspaceKindsAPI = (hostPath) => (opts) =>
+  handleRestFailures(restGET(hostPath, `/workspacekinds`, {}, opts)).then((response) =>
+    extractNotebookResponse<WorkspaceKind[]>(response),
+  );
+
+export const getWorkspaceKind: GetWorkspaceKindAPI = (hostPath) => (opts, kind) =>
+  handleRestFailures(restGET(hostPath, `/workspacekinds/${kind}`, {}, opts)).then((response) =>
+    extractNotebookResponse<WorkspaceKind>(response),
+  );
+
+export const createWorkspaceKind: CreateWorkspaceKindAPI = (hostPath) => (opts, data) =>
+  handleRestFailures(restCREATE(hostPath, `/workspacekinds`, data, {}, opts)).then((response) =>
+    extractNotebookResponse<WorkspaceKind>(response),
+  );
+
+export const updateWorkspaceKind: UpdateWorkspaceKindAPI = (hostPath) => (opts, kind, data) =>
+  handleRestFailures(restUPDATE(hostPath, `/workspacekinds/${kind}`, data, {}, opts)).then(
+    (response) => extractNotebookResponse<WorkspaceKind>(response),
+  );
+
+export const patchWorkspaceKind: PatchWorkspaceKindAPI = (hostPath) => (opts, kind, data) =>
+  handleRestFailures(restPATCH(hostPath, `/workspacekinds/${kind}`, data, opts)).then((response) =>
+    extractNotebookResponse<WorkspaceKind>(response),
+  );
+
+export const deleteWorkspaceKind: DeleteWorkspaceKindAPI = (hostPath) => (opts, kind) =>
+  handleRestFailures(restDELETE(hostPath, `/workspacekinds/${kind}`, {}, {}, opts)).then(
+    (response) => extractNotebookResponse<void>(response),
+  );
diff --git a/workspaces/frontend/src/shared/api/types.ts b/workspaces/frontend/src/shared/api/types.ts
index bb0055bc8..6f1ac507d 100644
--- a/workspaces/frontend/src/shared/api/types.ts
+++ b/workspaces/frontend/src/shared/api/types.ts
@@ -18,3 +18,12 @@ export type APIState<T> = {
   /** The available API functions */
   api: T;
 };
+
+export type ResponseBody<T> = {
+  data: T;
+  metadata?: Record<string, unknown>;
+};
+
+export type RequestData<T> = {
+  data: T;
+};
diff --git a/workspaces/frontend/src/shared/mock/mockBuilder.ts b/workspaces/frontend/src/shared/mock/mockBuilder.ts
new file mode 100644
index 000000000..9187df278
--- /dev/null
+++ b/workspaces/frontend/src/shared/mock/mockBuilder.ts
@@ -0,0 +1,270 @@
+import {
+  HealthCheckResponse,
+  Namespace,
+  Workspace,
+  WorkspaceKind,
+  WorkspaceKindInfo,
+  WorkspaceRedirectMessageLevel,
+  WorkspaceServiceStatus,
+  WorkspaceState,
+} from '~/shared/api/backendApiTypes';
+
+export const buildMockHealthCheckResponse = (
+  healthCheckResponse?: Partial<HealthCheckResponse>,
+): HealthCheckResponse => ({
+  status: WorkspaceServiceStatus.ServiceStatusHealthy,
+  systemInfo: { version: '1.0.0' },
+  ...healthCheckResponse,
+});
+
+export const buildMockNamespace = (namespace?: Partial<Namespace>): Namespace => ({
+  name: 'default',
+  ...namespace,
+});
+
+export const buildMockWorkspaceKindInfo = (
+  workspaceKindInfo?: Partial<WorkspaceKindInfo>,
+): WorkspaceKindInfo => ({
+  name: 'jupyterlab',
+  missing: false,
+  icon: {
+    url: 'https://jupyter.org/assets/favicons/apple-touch-icon-152x152.png',
+  },
+  logo: {
+    url: 'https://upload.wikimedia.org/wikipedia/commons/3/38/Jupyter_logo.svg',
+  },
+  ...workspaceKindInfo,
+});
+
+export const buildMockWorkspace = (workspace?: Partial<Workspace>): Workspace => ({
+  name: 'My First Jupyter Notebook',
+  namespace: 'default',
+  workspaceKind: buildMockWorkspaceKindInfo(),
+  paused: true,
+  deferUpdates: true,
+  pausedTime: 1739673500,
+  state: WorkspaceState.WorkspaceStateRunning,
+  stateMessage: 'Workspace is running',
+  podTemplate: {
+    podMetadata: {
+      labels: { labelKey1: 'labelValue1', labelKey2: 'labelValue2' },
+      annotations: { annotationKey1: 'annotationValue1', annotationKey2: 'annotationValue2' },
+    },
+    volumes: {
+      home: {
+        pvcName: 'Volume-Home',
+        mountPath: '/home',
+        readOnly: false,
+      },
+      data: [
+        {
+          pvcName: 'Volume-Data1',
+          mountPath: '/data',
+          readOnly: true,
+        },
+        {
+          pvcName: 'Volume-Data2',
+          mountPath: '/data',
+          readOnly: false,
+        },
+      ],
+    },
+    options: {
+      imageConfig: {
+        current: {
+          id: 'jupyterlab_scipy_190',
+          displayName: 'jupyter-scipy:v1.9.0',
+          description: 'JupyterLab, with SciPy Packages',
+          labels: [
+            {
+              key: 'pythonVersion',
+              value: '3.11',
+            },
+          ],
+        },
+      },
+      podConfig: {
+        current: {
+          id: 'tiny_cpu',
+          displayName: 'Tiny CPU',
+          description: 'Pod with 0.1 CPU, 128 Mb RAM',
+          labels: [
+            {
+              key: 'cpu',
+              value: '100m',
+            },
+            {
+              key: 'memory',
+              value: '128Mi',
+            },
+          ],
+        },
+      },
+    },
+  },
+  activity: {
+    lastActivity: 1746551485113,
+    lastUpdate: 1746551485113,
+  },
+  pendingRestart: false,
+  services: [
+    {
+      httpService: {
+        displayName: 'JupyterLab',
+        httpPath: 'https://jupyterlab.example.com',
+      },
+    },
+    {
+      httpService: {
+        displayName: 'Spark Master',
+        httpPath: 'https://spark-master.example.com',
+      },
+    },
+  ],
+  ...workspace,
+});
+
+export const buildMockWorkspaceKind = (workspaceKind?: Partial<WorkspaceKind>): WorkspaceKind => ({
+  name: 'jupyterlab',
+  displayName: 'JupyterLab Notebook',
+  description: 'A Workspace which runs JupyterLab in a Pod',
+  deprecated: false,
+  deprecationMessage:
+    'This WorkspaceKind will be removed on 20XX-XX-XX, please use another WorkspaceKind.',
+  hidden: false,
+  icon: {
+    url: 'https://jupyter.org/assets/favicons/apple-touch-icon-152x152.png',
+  },
+  logo: {
+    url: 'https://upload.wikimedia.org/wikipedia/commons/3/38/Jupyter_logo.svg',
+  },
+  podTemplate: {
+    podMetadata: {
+      labels: {
+        myWorkspaceKindLabel: 'my-value',
+      },
+      annotations: {
+        myWorkspaceKindAnnotation: 'my-value',
+      },
+    },
+    volumeMounts: {
+      home: '/home/jovyan',
+    },
+    options: {
+      imageConfig: {
+        default: 'jupyterlab_scipy_190',
+        values: [
+          {
+            id: 'jupyterlab_scipy_180',
+            displayName: 'jupyter-scipy:v1.8.0',
+            description: 'JupyterLab, with SciPy Packages',
+            labels: [
+              { key: 'pythonVersion', value: '3.11' },
+              { key: 'jupyterlabVersion', value: '1.8.0' },
+            ],
+            hidden: true,
+            redirect: {
+              to: 'jupyterlab_scipy_190',
+              message: {
+                text: 'This update will change...',
+                level: WorkspaceRedirectMessageLevel.RedirectMessageLevelInfo,
+              },
+            },
+          },
+          {
+            id: 'jupyterlab_scipy_190',
+            displayName: 'jupyter-scipy:v1.9.0',
+            description: 'JupyterLab, with SciPy Packages',
+            labels: [
+              { key: 'pythonVersion', value: '3.12' },
+              { key: 'jupyterlabVersion', value: '1.9.0' },
+            ],
+            hidden: true,
+            redirect: {
+              to: 'jupyterlab_scipy_200',
+              message: {
+                text: 'This update will change...',
+                level: WorkspaceRedirectMessageLevel.RedirectMessageLevelWarning,
+              },
+            },
+          },
+          {
+            id: 'jupyterlab_scipy_200',
+            displayName: 'jupyter-scipy:v2.0.0',
+            description: 'JupyterLab, with SciPy Packages',
+            labels: [
+              { key: 'pythonVersion', value: '3.12' },
+              { key: 'jupyterlabVersion', value: '2.0.0' },
+            ],
+            hidden: true,
+            redirect: {
+              to: 'jupyterlab_scipy_210',
+              message: {
+                text: 'This update will change...',
+                level: WorkspaceRedirectMessageLevel.RedirectMessageLevelWarning,
+              },
+            },
+          },
+          {
+            id: 'jupyterlab_scipy_210',
+            displayName: 'jupyter-scipy:v2.1.0',
+            description: 'JupyterLab, with SciPy Packages',
+            labels: [
+              { key: 'pythonVersion', value: '3.13' },
+              { key: 'jupyterlabVersion', value: '2.1.0' },
+            ],
+            hidden: true,
+            redirect: {
+              to: 'jupyterlab_scipy_220',
+              message: {
+                text: 'This update will change...',
+                level: WorkspaceRedirectMessageLevel.RedirectMessageLevelWarning,
+              },
+            },
+          },
+        ],
+      },
+      podConfig: {
+        default: 'tiny_cpu',
+        values: [
+          {
+            id: 'tiny_cpu',
+            displayName: 'Tiny CPU',
+            description: 'Pod with 0.1 CPU, 128 Mb RAM',
+            hidden: false,
+            labels: [
+              { key: 'cpu', value: '100m' },
+              { key: 'memory', value: '128Mi' },
+            ],
+            redirect: {
+              to: 'small_cpu',
+              message: {
+                text: 'This update will change...',
+                level: WorkspaceRedirectMessageLevel.RedirectMessageLevelDanger,
+              },
+            },
+          },
+          {
+            id: 'large_cpu',
+            displayName: 'Large CPU',
+            description: 'Pod with 1 CPU, 1 Gb RAM',
+            hidden: false,
+            labels: [
+              { key: 'cpu', value: '1000m' },
+              { key: 'memory', value: '1Gi' },
+              { key: 'gpu', value: '1' },
+            ],
+            redirect: {
+              to: 'large_cpu',
+              message: {
+                text: 'This update will change...',
+                level: WorkspaceRedirectMessageLevel.RedirectMessageLevelDanger,
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+  ...workspaceKind,
+});
diff --git a/workspaces/frontend/src/shared/mock/mockNotebookService.ts b/workspaces/frontend/src/shared/mock/mockNotebookService.ts
new file mode 100644
index 000000000..6148bbd8f
--- /dev/null
+++ b/workspaces/frontend/src/shared/mock/mockNotebookService.ts
@@ -0,0 +1,62 @@
+import {
+  CreateWorkspaceAPI,
+  CreateWorkspaceKindAPI,
+  DeleteWorkspaceAPI,
+  DeleteWorkspaceKindAPI,
+  GetHealthCheckAPI,
+  GetWorkspaceAPI,
+  GetWorkspaceKindAPI,
+  ListAllWorkspacesAPI,
+  ListNamespacesAPI,
+  ListWorkspaceKindsAPI,
+  ListWorkspacesAPI,
+  PatchWorkspaceAPI,
+  PatchWorkspaceKindAPI,
+  UpdateWorkspaceAPI,
+  UpdateWorkspaceKindAPI,
+} from '~/shared/api/callTypes';
+import {
+  mockAllWorkspaces,
+  mockedHealthCheckResponse,
+  mockNamespaces,
+  mockWorkspace1,
+  mockWorkspaceKind1,
+  mockWorkspaceKinds,
+} from '~/shared/mock/mockNotebookServiceData';
+
+export const mockGetHealthCheck: GetHealthCheckAPI = () => async () => mockedHealthCheckResponse;
+
+export const mockListNamespaces: ListNamespacesAPI = () => async () => mockNamespaces;
+
+export const mockListAllWorkspaces: ListAllWorkspacesAPI = () => async () => mockAllWorkspaces;
+
+export const mockListWorkspaces: ListWorkspacesAPI = () => async (_opts, namespace) =>
+  mockAllWorkspaces.filter((workspace) => workspace.namespace === namespace);
+
+export const mockGetWorkspace: GetWorkspaceAPI = () => async (_opts, namespace, workspace) =>
+  mockAllWorkspaces.find((w) => w.name === workspace && w.namespace === namespace)!;
+
+export const mockCreateWorkspace: CreateWorkspaceAPI = () => async () => mockWorkspace1;
+
+export const mockUpdateWorkspace: UpdateWorkspaceAPI = () => async () => mockWorkspace1;
+
+export const mockPatchWorkspace: PatchWorkspaceAPI = () => async () => mockWorkspace1;
+
+export const mockDeleteWorkspace: DeleteWorkspaceAPI = () => async () => {
+  /* no-op */
+};
+
+export const mockListWorkspaceKinds: ListWorkspaceKindsAPI = () => async () => mockWorkspaceKinds;
+
+export const mockGetWorkspaceKind: GetWorkspaceKindAPI = () => async (_opts, kind) =>
+  mockWorkspaceKinds.find((w) => w.name === kind)!;
+
+export const mockCreateWorkspaceKind: CreateWorkspaceKindAPI = () => async () => mockWorkspaceKind1;
+
+export const mockUpdateWorkspaceKind: UpdateWorkspaceKindAPI = () => async () => mockWorkspaceKind1;
+
+export const mockPatchWorkspaceKind: PatchWorkspaceKindAPI = () => async () => mockWorkspaceKind1;
+
+export const mockDeleteWorkspaceKind: DeleteWorkspaceKindAPI = () => async () => {
+  /* no-op */
+};
diff --git a/workspaces/frontend/src/shared/mock/mockNotebookServiceData.ts b/workspaces/frontend/src/shared/mock/mockNotebookServiceData.ts
new file mode 100644
index 000000000..093835c71
--- /dev/null
+++ b/workspaces/frontend/src/shared/mock/mockNotebookServiceData.ts
@@ -0,0 +1,146 @@
+import {
+  Workspace,
+  WorkspaceKind,
+  WorkspaceKindInfo,
+  WorkspaceState,
+} from '~/shared/api/backendApiTypes';
+import {
+  buildMockHealthCheckResponse,
+  buildMockNamespace,
+  buildMockWorkspace,
+  buildMockWorkspaceKind,
+  buildMockWorkspaceKindInfo,
+} from '~/shared/mock/mockBuilder';
+
+// Health
+export const mockedHealthCheckResponse = buildMockHealthCheckResponse();
+
+// Namespace
+export const mockNamespace1 = buildMockNamespace({ name: 'workspace-test-1' });
+export const mockNamespace2 = buildMockNamespace({ name: 'workspace-test-2' });
+export const mockNamespace3 = buildMockNamespace({ name: 'workspace-test-3' });
+
+export const mockNamespaces = [mockNamespace1, mockNamespace2, mockNamespace3];
+
+// WorkspaceKind
+export const mockWorkspaceKind1: WorkspaceKind = buildMockWorkspaceKind({
+  name: 'jupyterlab1',
+  displayName: 'JupyterLab Notebook 1',
+});
+
+export const mockWorkspaceKind2: WorkspaceKind = buildMockWorkspaceKind({
+  name: 'jupyterlab2',
+  displayName: 'JupyterLab Notebook 2',
+});
+
+export const mockWorkspaceKind3: WorkspaceKind = buildMockWorkspaceKind({
+  name: 'jupyterlab3',
+  displayName: 'JupyterLab Notebook 3',
+});
+
+export const mockWorkspaceKinds = [mockWorkspaceKind1, mockWorkspaceKind2, mockWorkspaceKind3];
+
+export const mockWorkspaceKindInfo1: WorkspaceKindInfo = buildMockWorkspaceKindInfo({
+  name: mockWorkspaceKind1.name,
+});
+
+export const mockWorkspaceKindInfo2: WorkspaceKindInfo = buildMockWorkspaceKindInfo({
+  name: mockWorkspaceKind2.name,
+});
+
+// Workspace
+export const mockWorkspace1: Workspace = buildMockWorkspace({
+  workspaceKind: mockWorkspaceKindInfo1,
+  namespace: mockNamespace1.name,
+});
+
+export const mockWorkspace2: Workspace = buildMockWorkspace({
+  name: 'My Second Jupyter Notebook',
+  workspaceKind: mockWorkspaceKindInfo1,
+  namespace: mockNamespace1.name,
+  state: WorkspaceState.WorkspaceStatePaused,
+  paused: false,
+  deferUpdates: false,
+  podTemplate: {
+    podMetadata: {
+      labels: { labelKey1: 'labelValue1', labelKey2: 'labelValue2' },
+      annotations: { annotationKey1: 'annotationValue1', annotationKey2: 'annotationValue2' },
+    },
+    volumes: {
+      home: {
+        pvcName: 'Volume-Home',
+        mountPath: '/home',
+        readOnly: false,
+      },
+      data: [
+        {
+          pvcName: 'PVC-1',
+          mountPath: '/data',
+          readOnly: false,
+        },
+      ],
+    },
+    options: {
+      imageConfig: {
+        current: {
+          id: 'jupyterlab_scipy_190',
+          displayName: 'jupyter-scipy:v1.9.0',
+          description: 'JupyterLab, with SciPy Packages',
+          labels: [
+            {
+              key: 'pythonVersion',
+              value: '3.11',
+            },
+          ],
+        },
+      },
+      podConfig: {
+        current: {
+          id: 'large_cpu',
+          displayName: 'Large CPU',
+          description: 'Pod with 4 CPU, 16 Gb RAM',
+          labels: [
+            {
+              key: 'cpu',
+              value: '4000m',
+            },
+            {
+              key: 'memory',
+              value: '16Gi',
+            },
+          ],
+        },
+      },
+    },
+  },
+});
+
+export const mockWorkspace3: Workspace = buildMockWorkspace({
+  name: 'My Third Jupyter Notebook',
+  namespace: mockNamespace1.name,
+  workspaceKind: mockWorkspaceKindInfo1,
+  state: WorkspaceState.WorkspaceStateRunning,
+  pendingRestart: true,
+});
+
+export const mockWorkspace4 = buildMockWorkspace({
+  name: 'My Fourth Jupyter Notebook',
+  namespace: mockNamespace2.name,
+  state: WorkspaceState.WorkspaceStateError,
+  workspaceKind: mockWorkspaceKindInfo2,
+});
+
+export const mockWorkspace5 = buildMockWorkspace({
+  name: 'My Fifth Jupyter Notebook',
+  namespace: mockNamespace2.name,
+  state: WorkspaceState.WorkspaceStateTerminating,
+  workspaceKind: mockWorkspaceKindInfo2,
+});
+
+export const mockAllWorkspaces = [
+  mockWorkspace1,
+  mockWorkspace2,
+  mockWorkspace3,
+  mockWorkspace4,
+  mockWorkspace5,
+];
diff --git a/workspaces/frontend/src/shared/types.ts b/workspaces/frontend/src/shared/types.ts
deleted file mode 100644
index f775a2ea8..000000000
--- a/workspaces/frontend/src/shared/types.ts
+++ /dev/null
@@ -1,205 +0,0 @@
-export interface WorkspaceIcon {
-  url: string;
-}
-
-export interface WorkspaceLogo {
-  url: string;
-}
-
-export interface WorkspaceImage {
-  id: string;
-  displayName: string;
-  labels: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-  hidden: boolean;
-  redirect?: {
-    to: string;
-    message: {
-      text: string;
-      level: string;
-    };
-  };
-}
-
-export interface WorkspaceVolume {
-  pvcName: string;
-  mountPath: string;
-  readOnly: boolean;
-}
-
-export interface WorkspaceVolumes {
-  home: string;
-  data: WorkspaceVolume[];
-  secrets: WorkspaceSecret[];
-}
-
-export interface WorkspaceSecret {
-  defaultMode: number;
-  secretName: string;
-  mountPath: string;
-}
-
-export interface WorkspaceProperties {
-  workspaceName: string;
-  deferUpdates: boolean;
-  homeDirectory: string;
-  volumes: boolean;
-  isVolumesExpanded: boolean;
-  redirect?: {
-    to: string;
-    message: {
-      text: string;
-      level: string;
-    };
-  };
-}
-
-export interface WorkspacePodConfig {
-  id: string;
-  displayName: string;
-  description: string;
-  labels: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-  redirect?: {
-    to: string;
-    message: {
-      text: string;
-      level: string;
-    };
-  };
-}
-
-export interface WorkspaceKind {
-  name: string;
-  displayName: string;
-  description: string;
-  deprecated: boolean;
-  deprecationMessage: string;
-  hidden: boolean;
-  icon: WorkspaceIcon;
-  logo: WorkspaceLogo;
-  podTemplate: {
-    podMetadata: {
-      labels: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-      annotations: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-    };
-    volumeMounts: {
-      home: string;
-    };
-    options: {
-      imageConfig: {
-        default: string;
-        values: WorkspaceImage[];
-      };
-      podConfig: {
-        default: string;
-        values: WorkspacePodConfig[];
-      };
-    };
-  };
-}
-
-export enum WorkspaceState {
-  Running,
-  Terminating,
-  Paused,
-  Pending,
-  Error,
-  Unknown,
-}
-
-export interface WorkspaceStatus {
-  activity: {
-    lastActivity: number;
-    lastUpdate: number;
-  };
-  pauseTime: number;
-  pendingRestart: boolean;
-  podTemplateOptions: {
-    imageConfig: {
-      desired: string;
-      redirectChain: {
-        source: string;
-        target: string;
-      }[];
-    };
-  };
-  state: WorkspaceState;
-  stateMessage: string;
-}
-
-export interface WorkspacePodMetadataMutate {
-  labels: Record<string, string>;
-  annotations: Record<string, string>;
-}
-
-export interface WorkspacePodVolumeMount {
-  pvcName: string;
-  mountPath: string;
-  readOnly?: boolean;
-}
-
-export interface WorkspacePodVolumesMutate {
-  home?: string;
-  data: WorkspacePodVolumeMount[];
-}
-
-export interface WorkspacePodTemplateOptionsMutate {
-  imageConfig: string;
-  podConfig: string;
-}
-
-export interface WorkspacePodTemplateMutate {
-  podMetadata: WorkspacePodMetadataMutate;
-  volumes: WorkspacePodVolumesMutate;
-  options: WorkspacePodTemplateOptionsMutate;
-}
-
-export interface Workspace {
-  name: string;
-  namespace: string;
-  paused: boolean;
-  deferUpdates: boolean;
-  kind: string;
-  cpu: number;
-  ram: number;
-  podTemplate: {
-    podMetadata: {
-      labels: string[];
-      annotations: string[];
-    };
-    volumes: WorkspaceVolumes;
-    endpoints: {
-      displayName: string;
-      port: string;
-    }[];
-  };
-  options: {
-    imageConfig: string;
-    podConfig: string;
-  };
-  status: WorkspaceStatus;
-  redirectStatus: {
-    level: 'Info' | 'Warning' | 'Danger';
-    text: string;
-  };
-}
-
-export type WorkspacesColumnNames = {
-  name: string;
-  kind: string;
-  image: string;
-  podConfig: string;
-  state: string;
-  homeVol: string;
-  cpu: string;
-  ram: string;
-  lastActivity: string;
-  redirectStatus: string;
-};
-
-export type WorkspaceKindsColumnNames = {
-  icon: string;
-  name: string;
-  description: string;
-  deprecated: string;
-  numberOfWorkspaces: string;
-};
diff --git a/workspaces/frontend/src/shared/utilities/WorkspaceUtils.ts b/workspaces/frontend/src/shared/utilities/WorkspaceUtils.ts
index f89fa221a..52da1fcc8 100644
--- a/workspaces/frontend/src/shared/utilities/WorkspaceUtils.ts
+++ b/workspaces/frontend/src/shared/utilities/WorkspaceUtils.ts
@@ -1,3 +1,5 @@
+import { Workspace } from '~/shared/api/backendApiTypes';
+
 export const formatRam = (valueInKb: number): string => {
   const units = ['KB', 'MB', 'GB', 'TB'];
   let index = 0;
@@ -14,3 +16,11 @@ export const formatRam = (valueInKb: number): string => {
 // Helper function to format UNIX timestamps
 export const formatTimestamp = (timestamp: number): string =>
   timestamp && timestamp > 0 ? new Date(timestamp * 1000).toLocaleString() : '-';
+
+export const extractCpuValue = (workspace: Workspace): string =>
+  workspace.podTemplate.options.podConfig.current.labels.find((label) => label.key === 'cpu')
+    ?.value || 'N/A';
+
+export const extractMemoryValue = (workspace: Workspace): string =>
+  workspace.podTemplate.options.podConfig.current.labels.find((label) => label.key === 'memory')
+    ?.value || 'N/A';
diff --git a/workspaces/frontend/tsconfig.json b/workspaces/frontend/tsconfig.json
index b7e5ca628..1a9726b8f 100644
--- a/workspaces/frontend/tsconfig.json
+++ b/workspaces/frontend/tsconfig.json
@@ -5,10 +5,7 @@
     "outDir": "dist",
     "module": "esnext",
     "target": "ES6",
-    "lib": [
-      "es6",
-      "dom"
-    ],
+    "lib": ["es6", "dom"],
     "sourceMap": true,
     "jsx": "react",
     "moduleResolution": "node",
@@ -22,22 +19,11 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "paths": {
-      "~/*": [
-        "./*"
-      ]
+      "~/*": ["./*"]
     },
     "importHelpers": true,
     "skipLibCheck": true
   },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.jsx",
-    "**/*.js"
-  ],
-  "exclude": [
-    "node_modules",
-    "src/__tests__/cypress"
-  ]
-
-}
\ No newline at end of file
+  "include": ["**/*.ts", "**/*.tsx", "**/*.jsx", "**/*.js"],
+  "exclude": ["node_modules", "src/__tests__/cypress"]
+}