diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
index 548a4cd212..307f28964d 100644
--- a/.github/workflows/pull_request.yml
+++ b/.github/workflows/pull_request.yml
@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [14.x]
     steps:
       - uses: actions/checkout@v3
       - name: Setup Node.js ${{ matrix.node-version }}
diff --git a/backend/package-lock.json b/backend/package-lock.json
index ee8f7a3ebc..66a4defb1b 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -1803,6 +1803,12 @@
         "eslint-config-esnext": "^4.1.0"
       },
       "dependencies": {
+        "astral-regex": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
+          "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
+          "dev": true
+        },
         "eslint": {
           "version": "6.8.0",
           "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz",
@@ -1936,12 +1942,12 @@
           }
         },
         "mkdirp": {
-          "version": "0.5.6",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-          "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+          "version": "0.5.5",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
           "dev": true,
           "requires": {
-            "minimist": "^1.2.6"
+            "minimist": "^1.2.5"
           }
         },
         "optionator": {
@@ -1985,6 +1991,29 @@
           "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
           "dev": true
         },
+        "slice-ansi": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
+          "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "astral-regex": "^1.0.0",
+            "is-fullwidth-code-point": "^2.0.0"
+          }
+        },
+        "table": {
+          "version": "5.4.6",
+          "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
+          "integrity": "sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.10.2",
+            "lodash": "^4.17.14",
+            "slice-ansi": "^2.1.0",
+            "string-width": "^3.0.0"
+          }
+        },
         "type-check": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
@@ -2945,9 +2974,9 @@
       "dev": true
     },
     "got": {
-      "version": "11.8.5",
-      "resolved": "https://registry.npmjs.org/got/-/got-11.8.5.tgz",
-      "integrity": "sha512-o0Je4NvQObAuZPHLFoRSkdG2lTgtcynqymzg2Vupdx6PorhaT5MCbIyXG6d4D94kk8ZG57QeosgdiqfJWhEhlQ==",
+      "version": "11.8.3",
+      "resolved": "https://registry.npmjs.org/got/-/got-11.8.3.tgz",
+      "integrity": "sha512-7gtQ5KiPh1RtGS9/Jbv1ofDpBFuq42gyfEib+ejaRBJuj/3tQFeR5+gw57e4ipaU8c/rCjvX6fkQz2lyDlGAOg==",
       "requires": {
         "@sindresorhus/is": "^4.0.0",
         "@szmarczak/http-timer": "^4.0.5",
@@ -3453,9 +3482,9 @@
       "dev": true
     },
     "jose": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-2.0.6.tgz",
-      "integrity": "sha512-FVoPY7SflDodE4lknJmbAHSUjLCzE2H1F6MS0RYKMQ8SR+lNccpMf8R4eqkNYyyUjR5qZReOzZo5C5YiHOCjjg==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-2.0.5.tgz",
+      "integrity": "sha512-BAiDNeDKTMgk4tvD0BbxJ8xHEHBZgpeRZ1zGPPsitSyMgjoMWiLGYAE7H7NpP5h0lPppQajQs871E8NHUrzVPA==",
       "requires": {
         "@panva/asn1.js": "^1.0.0"
       }
diff --git a/backend/package.json b/backend/package.json
index 60a908efab..1da26a1eff 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -19,8 +19,8 @@
   "main": "src/server.ts",
   "scripts": {
     "start": "npm run tsc && NODE_ENV=production node ./dist/server.js --log=1 --registry=localhost:50051",
-    "start:dev": "export NODE_ENV=development && nodemon src/server.ts --log=1 --registry=localhost:50051",
-    "debug": "npm run tsc && export NODE_ENV=development && node --inspect ./dist/server.js --log=1 --registry=localhost:50051",
+    "start:dev": "export NODE_TLS_REJECT_UNAUTHORIZED=0 && export NODE_ENV=development && nodemon src/server.ts --log=1 --registry=localhost:50051",
+    "debug": "npm run tsc && export NODE_TLS_REJECT_UNAUTHORIZED=0 && export NODE_ENV=development && node --inspect ./dist/server.js --log=1 --registry=localhost:50051",
     "build-only": "tsc -p . && node ./dist/server.js --log=1 --registry=localhost:50051 --buildonly",
     "build": "npm run build:clean; npm run tsc",
     "build:clean": "rimraf ./dist",
diff --git a/backend/src/routes/api/cluster-settings/clusterSettingsUtils.ts b/backend/src/routes/api/cluster-settings/clusterSettingsUtils.ts
index 9f02fef637..78ac14852f 100644
--- a/backend/src/routes/api/cluster-settings/clusterSettingsUtils.ts
+++ b/backend/src/routes/api/cluster-settings/clusterSettingsUtils.ts
@@ -71,6 +71,9 @@ export const updateClusterSettings = async (
                 kind: 'ConfigMap',
                 metadata: {
                   name: 'notebook-controller-culler-config',
+                  labels: {
+                    'opendatahub.io/dashboard': 'true',
+                  },
                 },
                 data: {
                   ENABLE_CULLING: String(isEnabled),
diff --git a/backend/src/routes/api/gpu/index.ts b/backend/src/routes/api/gpu/index.ts
index 5f37bc31aa..c781ccfcb8 100644
--- a/backend/src/routes/api/gpu/index.ts
+++ b/backend/src/routes/api/gpu/index.ts
@@ -1,12 +1,8 @@
 import { KubeFastifyInstance } from '../../../types';
 import { getGPUNumber } from './gpuUtils';
-import { secureRoute } from '../../../utils/route-security';
 
 export default async (fastify: KubeFastifyInstance): Promise<void> => {
-  fastify.get(
-    '/',
-    secureRoute(fastify)(async () => {
-      return getGPUNumber(fastify);
-    }),
-  );
+  fastify.get('/', async () => {
+    return getGPUNumber(fastify);
+  });
 };
diff --git a/backend/src/routes/api/images/imageUtils.ts b/backend/src/routes/api/images/imageUtils.ts
index d544958931..960e728f99 100644
--- a/backend/src/routes/api/images/imageUtils.ts
+++ b/backend/src/routes/api/images/imageUtils.ts
@@ -211,6 +211,7 @@ export const postImage = async (
   const labels = {
     'app.kubernetes.io/created-by': 'byon',
     'opendatahub.io/notebook-image': 'true',
+    'opendatahub.io/dashboard': 'true',
   };
   const imageStreams = (await getImageStreams(fastify, labels)) as ImageStream[];
   const validName = imageStreams.filter((is) => is.metadata.name === body.name);
diff --git a/backend/src/routes/api/k8s/index.ts b/backend/src/routes/api/k8s/index.ts
new file mode 100644
index 0000000000..69c6816d0f
--- /dev/null
+++ b/backend/src/routes/api/k8s/index.ts
@@ -0,0 +1,46 @@
+import { FastifyReply, FastifyRequest } from 'fastify';
+import { KubeFastifyInstance } from '../../../types';
+import { USER_ACCESS_TOKEN } from '../../../utils/constants';
+import { passThrough } from './pass-through';
+
+module.exports = async (fastify: KubeFastifyInstance) => {
+  const kc = fastify.kube.config;
+  const cluster = kc.getCurrentCluster();
+
+  /**
+   * Pass through API for all things kubernetes
+   * Acts on the user who made the call -- does not need route security; k8s provides that.
+   */
+  fastify.route({
+    method: ['DELETE', 'GET', 'HEAD', 'PATCH', 'POST', 'PUT', 'OPTIONS'],
+    url: '/*',
+    handler: (
+      req: FastifyRequest<{
+        Querystring: Record<string, string>;
+        Params: { '*': string; [key: string]: string };
+        Body: { [key: string]: unknown };
+        Headers: { [USER_ACCESS_TOKEN]: string };
+      }>,
+      reply: FastifyReply,
+    ) => {
+      const data = JSON.stringify(req.body);
+      const kubeUri = req.params['*'];
+      let url = `${cluster.server}/${kubeUri}`;
+
+      // Apply query params
+      const query = req.query;
+      if (Object.keys(query)) {
+        url += `?${Object.keys(query)
+          .map((k) => `${encodeURIComponent(k)}=${encodeURIComponent(query[k])}`)
+          .join('&')}`;
+      }
+
+      return passThrough(fastify, req, { url, method: req.method, requestData: data }).catch(
+        ({ code, response }) => {
+          reply.code(code);
+          reply.send(response);
+        },
+      );
+    },
+  });
+};
diff --git a/backend/src/routes/api/k8s/pass-through.ts b/backend/src/routes/api/k8s/pass-through.ts
new file mode 100644
index 0000000000..bb0d241e1b
--- /dev/null
+++ b/backend/src/routes/api/k8s/pass-through.ts
@@ -0,0 +1,117 @@
+import { FastifyRequest } from 'fastify';
+import https, { RequestOptions } from 'https';
+import { K8sResourceCommon, K8sStatus, KubeFastifyInstance } from '../../../types';
+import { DEV_MODE, USER_ACCESS_TOKEN } from '../../../utils/constants';
+import { getDirectCallOptions } from '../../../utils/directCallUtils';
+
+type PassThroughData = {
+  method: string;
+  requestData: string;
+  url: string;
+};
+
+const isK8sStatus = (data: Record<string, unknown>): data is K8sStatus => data.kind === 'Status';
+
+const setupRequest = async (
+  fastify: KubeFastifyInstance,
+  request: FastifyRequest<{ Headers: { [USER_ACCESS_TOKEN]: string } }>,
+  data: PassThroughData,
+): Promise<{ url: string; requestOptions: RequestOptions }> => {
+  const { method, url } = data;
+
+  // TODO: Remove when bug is fixed - https://issues.redhat.com/browse/HAC-1825
+  let safeURL = url;
+  if (method.toLowerCase() === 'post') {
+    // Core SDK builds the wrong path for k8s -- can't post to a resource name; remove the name from the url
+    // eg: POST /.../configmaps/my-config-map => POST /.../configmaps
+    const urlParts = url.split('/');
+    urlParts.pop();
+    safeURL = urlParts.join('/');
+  }
+
+  const requestOptions = await getDirectCallOptions(fastify, request, url);
+
+  return {
+    url: safeURL,
+    requestOptions: {
+      ...requestOptions,
+      method,
+    },
+  };
+};
+
+export const passThrough = (
+  fastify: KubeFastifyInstance,
+  request: FastifyRequest<{ Headers: { [USER_ACCESS_TOKEN]: string } }>,
+  data: PassThroughData,
+): Promise<K8sResourceCommon> => {
+  const { method, requestData } = data;
+
+  return new Promise((resolve, reject) => {
+    setupRequest(fastify, request, data).then(({ url, requestOptions }) => {
+      if (requestData) {
+        requestOptions.headers = {
+          ...requestOptions.headers,
+          'Content-Type': `application/${
+            method === 'PATCH' ? 'json-patch+json' : 'json'
+          };charset=UTF-8`,
+          'Content-Length': requestData.length,
+        };
+      }
+
+      fastify.log.info(`Making API ${method} request to ${url}`);
+
+      const httpsRequest = https
+        .request(url, requestOptions, (res) => {
+          let data = '';
+          res
+            .setEncoding('utf8')
+            .on('data', (chunk) => {
+              data += chunk;
+            })
+            .on('end', () => {
+              let parsedData: K8sResourceCommon | K8sStatus;
+              try {
+                parsedData = JSON.parse(data);
+              } catch (e) {
+                // Likely not JSON, print the error and return the content to the client
+                fastify.log.error(`Parsing response error: ${e}, ${data}`);
+                reject({ code: 500, response: data });
+                return;
+              }
+
+              if (isK8sStatus(parsedData)) {
+                if (parsedData.status !== 'Success') {
+                  fastify.log.warn(
+                    `Unsuccessful status Object, ${
+                      DEV_MODE ? JSON.stringify(parsedData, null, 2) : JSON.stringify(parsedData)
+                    }`,
+                  );
+                  reject({ code: parsedData.code, response: parsedData });
+                  return;
+                }
+              }
+
+              fastify.log.info('Successful request, returning data to caller.');
+              resolve(parsedData);
+            })
+            .on('error', (error) => {
+              if (error) {
+                fastify.log.error(`Kube parsing response error: ${error}`);
+                reject({ code: 500, response: error });
+              }
+            });
+        })
+        .on('error', (error) => {
+          fastify.log.error(`Kube request error: ${error}`);
+          reject({ code: 500, response: error });
+        });
+
+      if (requestData) {
+        httpsRequest.write(requestData);
+      }
+
+      httpsRequest.end();
+    });
+  });
+};
diff --git a/backend/src/routes/api/prometheus/index.ts b/backend/src/routes/api/prometheus/index.ts
new file mode 100644
index 0000000000..3d3131ef75
--- /dev/null
+++ b/backend/src/routes/api/prometheus/index.ts
@@ -0,0 +1,19 @@
+import { KubeFastifyInstance, OauthFastifyRequest, PrometheusResponse } from '../../../types';
+import { callPrometheus } from '../../../utils/prometheusUtils';
+
+module.exports = async (fastify: KubeFastifyInstance) => {
+  /**
+   * Pass through API for getting information out of prometheus.
+   * Acts on the user who made the call -- does not need route security; k8s provides that.
+   */
+  fastify.post(
+    '/',
+    async (
+      request: OauthFastifyRequest<{ Body: { query: string; namespace: string } }>,
+    ): Promise<{ code: number; response: PrometheusResponse }> => {
+      const { query, namespace } = request.body;
+
+      return callPrometheus(fastify, request, query, namespace);
+    },
+  );
+};
diff --git a/backend/src/routes/api/status/statusUtils.ts b/backend/src/routes/api/status/statusUtils.ts
index 0c62463b9b..8db60677a4 100644
--- a/backend/src/routes/api/status/statusUtils.ts
+++ b/backend/src/routes/api/status/statusUtils.ts
@@ -9,7 +9,9 @@ export const status = async (
   request: FastifyRequest,
 ): Promise<{ kube: KubeStatus }> => {
   const kubeContext = fastify.kube.currentContext;
-  const { currentContext, namespace, currentUser, clusterID, clusterBranding } = fastify.kube;
+  const { config, currentContext, namespace, currentUser, clusterID, clusterBranding } =
+    fastify.kube;
+  const { server } = config.getCurrentCluster();
 
   const userName = await getUserName(fastify, request);
   const isAdmin = await isUserAdmin(fastify, userName, namespace);
@@ -33,6 +35,7 @@ export const status = async (
         clusterBranding,
         isAdmin,
         isAllowed,
+        serverURL: server,
       },
     };
   }
diff --git a/backend/src/routes/api/validate-isv/validateISV.ts b/backend/src/routes/api/validate-isv/validateISV.ts
index 2fe084df7c..d7cfc1a8d1 100644
--- a/backend/src/routes/api/validate-isv/validateISV.ts
+++ b/backend/src/routes/api/validate-isv/validateISV.ts
@@ -58,7 +58,13 @@ export const createAccessSecret = async (
   const name = enable.validationSecret;
   const secret = {
     apiVersion: 'v1',
-    metadata: { name, namespace },
+    metadata: {
+      name,
+      namespace,
+      labels: {
+        'opendatahub.io/dashboard': 'true',
+      },
+    },
     type: 'Opaque',
     stringData,
   };
@@ -151,6 +157,9 @@ export const runValidation = async (
       annotations: {
         'cronjob.kubernetes.io/instantiate': 'manual',
       },
+      labels: {
+        'opendatahub.io/dashboard': 'true',
+      },
     },
     spec: cronJob.spec.jobTemplate.spec,
   };
diff --git a/backend/src/types.ts b/backend/src/types.ts
index 18186f48fc..9da2c5747f 100644
--- a/backend/src/types.ts
+++ b/backend/src/types.ts
@@ -16,6 +16,7 @@ export type DashboardConfig = K8sResourceCommon & {
       disableISVBadges: boolean;
       disableAppLauncher: boolean;
       disableUserManagement: boolean;
+      disableProjects: boolean;
     };
     groupsConfig?: {
       adminGroups: string;
@@ -100,6 +101,18 @@ export type K8sResourceCommon = {
   };
 } & K8sResourceBase;
 
+/**
+ * A status object when Kube backend can't handle a request.
+ */
+export type K8sStatus = {
+  kind: string;
+  apiVersion: string;
+  code: number;
+  message: string;
+  reason: string;
+  status: string;
+};
+
 export enum BUILD_PHASE {
   none = 'Not started',
   new = 'New',
@@ -185,6 +198,7 @@ export type KubeStatus = {
   clusterBranding: string;
   isAdmin: boolean;
   isAllowed: boolean;
+  serverURL: string;
 };
 
 export type KubeDecorator = KubeStatus & {
@@ -457,37 +471,6 @@ export type BYONImagePackage = {
   visible: boolean;
 };
 
-export type PipelineRunKind = {
-  spec: {
-    params: {
-      name: string;
-      value: string;
-    }[];
-    pipelineRef: {
-      name: string;
-    };
-    workspaces?: [
-      {
-        name: string;
-        volumeClaimTemplate: {
-          spec: {
-            accessModes: string[];
-            resources: {
-              requests: {
-                storage: string;
-              };
-            };
-          };
-        };
-      },
-    ];
-  };
-} & K8sResourceCommon;
-
-export type PipelineRunListKind = {
-  items: PipelineRunKind[];
-} & K8sResourceBase;
-
 export type ImageStreamTag = {
   name: string;
   labels?: { [key: string]: string };
diff --git a/backend/src/utils/constants.ts b/backend/src/utils/constants.ts
index aaad7ca522..69c758e6fa 100644
--- a/backend/src/utils/constants.ts
+++ b/backend/src/utils/constants.ts
@@ -7,6 +7,8 @@ export const LOG_LEVEL = process.env.FASTIFY_LOG_LEVEL || process.env.LOG_LEVEL
 export const DEV_MODE = process.env.APP_ENV === 'development';
 export const APP_ENV = process.env.APP_ENV;
 
+export const USER_ACCESS_TOKEN = 'x-forwarded-access-token';
+
 export const yamlRegExp = /\.ya?ml$/;
 export const mdRegExp = /\.md$/;
 
@@ -25,6 +27,9 @@ export const blankDashboardCR: DashboardConfig = {
   kind: 'OdhDashboardConfig',
   metadata: {
     name: 'odh-dashboard-config',
+    labels: {
+      'opendatahub.io/dashboard': 'true',
+    },
   },
   spec: {
     dashboardConfig: {
@@ -37,6 +42,7 @@ export const blankDashboardCR: DashboardConfig = {
       disableISVBadges: false,
       disableAppLauncher: false,
       disableUserManagement: false,
+      disableProjects: false,
     },
     notebookController: {
       enabled: true,
diff --git a/backend/src/utils/deployment.ts b/backend/src/utils/deployment.ts
index 12010ec8c8..cc5b4ff54e 100644
--- a/backend/src/utils/deployment.ts
+++ b/backend/src/utils/deployment.ts
@@ -40,6 +40,9 @@ export const rolloutDeployment = async (
           annotations: {
             'kubectl.kubernetes.io/restartedAt': new Date().toISOString(),
           },
+          labels: {
+            'opendatahub.io/dashboard': 'true',
+          },
         },
       },
     },
diff --git a/backend/src/utils/directCallUtils.ts b/backend/src/utils/directCallUtils.ts
new file mode 100644
index 0000000000..0976dea887
--- /dev/null
+++ b/backend/src/utils/directCallUtils.ts
@@ -0,0 +1,40 @@
+import { RequestOptions } from 'https';
+import { DEV_MODE, USER_ACCESS_TOKEN } from './constants';
+import { KubeFastifyInstance, OauthFastifyRequest } from '../types';
+
+export const getDirectCallOptions = async (
+  fastify: KubeFastifyInstance,
+  request: OauthFastifyRequest,
+  url: string,
+): Promise<RequestOptions> => {
+  // Use our kube setup to boostrap our request
+  const kc = fastify.kube.config;
+  const kubeOptions: Parameters<typeof kc.applyToRequest>[0] = { url };
+  await kc.applyToRequest(kubeOptions);
+  const { headers: kubeHeaders, ca } = kubeOptions;
+
+  // Adjust the header auth token
+  let headers;
+  if (DEV_MODE) {
+    // In dev mode, we always are logged in fully -- no service accounts
+    headers = kubeHeaders;
+  } else {
+    // When not in dev mode, we want to switch the token from the service account to the user
+    const accessToken = request.headers[USER_ACCESS_TOKEN];
+    if (!accessToken) {
+      fastify.log.error(
+        `No ${USER_ACCESS_TOKEN} header. Cannot make a pass through call as this user.`,
+      );
+      throw new Error('No access token provided by oauth. Cannot make any API calls to kube.');
+    }
+    headers = {
+      ...kubeHeaders,
+      Authorization: `Bearer ${accessToken}`,
+    };
+  }
+
+  return {
+    ca,
+    headers,
+  };
+};
diff --git a/backend/src/utils/envUtils.ts b/backend/src/utils/envUtils.ts
index ba6f11e9ed..51dac24919 100644
--- a/backend/src/utils/envUtils.ts
+++ b/backend/src/utils/envUtils.ts
@@ -135,6 +135,9 @@ const generateSecret = (
     metadata: {
       name,
       namespace,
+      labels: {
+        'opendatahub.io/dashboard': 'true',
+      },
     },
     stringData: secrets,
     type: 'Opaque',
@@ -152,6 +155,9 @@ const generateConfigMap = (
     metadata: {
       name,
       namespace,
+      labels: {
+        'opendatahub.io/dashboard': 'true',
+      },
     },
     data: configmap,
   };
diff --git a/backend/src/utils/notebookUtils.ts b/backend/src/utils/notebookUtils.ts
index df36ceb960..370f5bc79a 100644
--- a/backend/src/utils/notebookUtils.ts
+++ b/backend/src/utils/notebookUtils.ts
@@ -79,6 +79,9 @@ export const createRBAC = async (
     kind: 'Role',
     metadata: {
       name: `${notebookData.metadata.name}-notebook-view`,
+      labels: {
+        'opendatahub.io/dashboard': 'true',
+      },
     },
     rules: [
       {
@@ -95,6 +98,9 @@ export const createRBAC = async (
     kind: 'RoleBinding',
     metadata: {
       name: `${notebookData.metadata.name}-notebook-view`,
+      labels: {
+        'opendatahub.io/dashboard': 'true',
+      },
     },
     roleRef: {
       apiGroup: 'rbac.authorization.k8s.io',
@@ -252,6 +258,7 @@ export const assembleNotebook = async (
         app: name,
         'opendatahub.io/odh-managed': 'true',
         'opendatahub.io/user': translatedUsername,
+        'opendatahub.io/dashboard': 'true',
       },
       annotations: {
         'notebooks.opendatahub.io/oauth-logout-url': `${url}/notebookController/${translatedUsername}/home`,
@@ -609,6 +616,9 @@ const assemblePvc = (
   metadata: {
     name: pvcName,
     namespace,
+    labels: {
+      'opendatahub.io/dashboard': 'true',
+    },
   },
   spec: {
     accessModes: ['ReadWriteOnce'],
diff --git a/backend/src/utils/prometheusUtils.ts b/backend/src/utils/prometheusUtils.ts
new file mode 100644
index 0000000000..6c0f2822d5
--- /dev/null
+++ b/backend/src/utils/prometheusUtils.ts
@@ -0,0 +1,56 @@
+import { KubeFastifyInstance, OauthFastifyRequest, PrometheusResponse } from '../types';
+import https from 'https';
+import { getDirectCallOptions } from './directCallUtils';
+import { DEV_MODE } from './constants';
+
+export const callPrometheus = async (
+  fastify: KubeFastifyInstance,
+  request: OauthFastifyRequest,
+  query: string,
+  namespace: string,
+): Promise<{ code: number; response: PrometheusResponse }> => {
+  if (!query) {
+    fastify.log.warn('Prometheus call was made without a query');
+    return Promise.reject({ code: 400, response: 'Failed to provide a query' });
+  }
+
+  // Use a local path to the thanos querier; only works on-cluster
+  let host = `https://thanos-querier.openshift-monitoring.svc.cluster.local:9091`;
+  if (DEV_MODE) {
+    const apiPath = fastify.kube.config.getCurrentCluster().server;
+    const namedHost = apiPath.slice('https://api.'.length).split(':')[0];
+    host = `https://thanos-querier-openshift-monitoring.apps.${namedHost}`;
+  }
+
+  const url = `${host}/api/v1/query?namespace=${namespace}&query=${query}`;
+  const options = await getDirectCallOptions(fastify, request, url);
+
+  return new Promise((resolve, reject) => {
+    fastify.log.info(`Making Prometheus call: ${url}`);
+    fastify.log.info(`Prometheus query: ${query}`);
+
+    const httpsRequest = https
+      .get(url, options, (res) => {
+        res.setEncoding('utf8');
+        let rawData = '';
+        res.on('data', (chunk: any) => {
+          rawData += chunk;
+        });
+        res.on('end', () => {
+          try {
+            const parsedData: PrometheusResponse = JSON.parse(rawData);
+            fastify.log.info('Successful response from Prometheus.');
+            resolve({ code: 200, response: parsedData });
+          } catch (e) {
+            fastify.log.error(`Failure parsing the response from Prometheus. ${e.message || e}`);
+            reject({ code: 500, response: rawData });
+          }
+        });
+      })
+      .on('error', (e) => {
+        fastify.log.error(`Failure calling Prometheus. ${e.message}`);
+        reject({ code: 500, response: `Cannot fetch prometheus data, ${e.message}` });
+      });
+    httpsRequest.end();
+  });
+};
diff --git a/backend/src/utils/userUtils.ts b/backend/src/utils/userUtils.ts
index 6a8a1e7ab6..e04204e9da 100644
--- a/backend/src/utils/userUtils.ts
+++ b/backend/src/utils/userUtils.ts
@@ -1,11 +1,10 @@
 import { FastifyRequest } from 'fastify';
 import * as _ from 'lodash';
+import { USER_ACCESS_TOKEN } from './constants';
 import { KubeFastifyInstance } from '../types';
 import { DEV_MODE } from './constants';
 import { createCustomError } from './requestUtils';
 
-const USER_ACCESS_TOKEN = 'x-forwarded-access-token';
-
 export const usernameTranslate = (username: string): string => {
   const encodedUsername = encodeURIComponent(username);
   return encodedUsername
diff --git a/docs/README.md b/docs/README.md
index b37e932148..9615843b64 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -6,4 +6,5 @@ This project is divided into several sections, each one describing features of t
 * [Settings Panel](admin_dashboard.md)
 * [User Interaction](user_interaction.md)
 * [Bring Your Own Notebook](byon.md)
-* [APIs](apis.md)
+* [SDK](SDK.md)
+  * [Custom APIs](apis.md) -- Deprecated, moving to SDK
diff --git a/docs/SDK.md b/docs/SDK.md
new file mode 100644
index 0000000000..e324ef1a31
--- /dev/null
+++ b/docs/SDK.md
@@ -0,0 +1,63 @@
+# OpenShift Plugin SDK
+
+[@openshift/dynamic-plugin-sdk](https://www.npmjs.com/package/@openshift/dynamic-plugin-sdk) is an SDK package for making k8s related calls.
+
+It is technically split into three parts:
+
+- [@openshift/dynamic-plugin-sdk](https://www.npmjs.com/package/@openshift/dynamic-plugin-sdk) -- Core set of tools to build a plugin, we don't use this a lot today, but this is needed to bootstrap our frontend for later inclusion on other systems
+- [@openshift/dynamic-plugin-sdk-utils](https://www.npmjs.com/package/@openshift/dynamic-plugin-sdk-utils) -- This will be where we will pull the most of our content from, it has all the k8s utilities we should need
+- [@openshift/dynamic-plugin-sdk-webpack](https://www.npmjs.com/package/@openshift/dynamic-plugin-sdk-webpack) -- Simply just as it states, a webpack set of tools to help configure out webpack to package up to be an SDK
+
+As of today (2022-08-31), we are not looking to be a plugin. We just want to start moving that direction and making use of the utilities so we don't need custom backend to make API calls.
+
+## Making API Calls
+
+Instead of using our custom NodeJS backend, we'll want to migrate to using one of the following methods from the SDK.
+
+- k8sGetResource
+- k8sCreateResource
+- k8sUpdateResource
+- k8sPatchResource
+- k8sDeleteResource
+
+All these are heavily typed and are Generics`*`, so you should be able to infer from the types what is needed. But to help that along, here are a couple helpful notes:
+
+- `model` -- Models are simply just a collection of properties that describes a K8s Resource Type. K8s ones like `ConfigMap` & `Pod` to CRDs like `Notebook` and `OdhDashboardConfig` -- we will create our list of these under `frontend/src/models` -- check it out for examples.
+- `queryOptions` -- These are just simply additional options to help target your call at something; typically you'll be setting `name` and `ns` (aka `namespace`)
+
+`*` A couple notes about the Generic nature of these functions
+
+1. You can type the response as well as your input -- aim to do this always for better typing, best have TS doing as much as possible
+2. Our old types may not be 1:1 compatible with other resource types we have. Likely all you will need to do is convert over to the `K8sResourceCommon` type from the SDK instead of using ours
+
+### Pass Through API
+
+We have set up a pass through API that will effectively take the path built by the SDK's utilities during one of the k8s{CRUD}Resource calls noted above. This API will use the token of your user provided by our OAuth container and send your request off to a kube instance. We will give up on custom error handling and let the client deal with the error from k8s. 
+
+See the [k8s pass through API](../backend/src/routes/api/k8s/pass-through.ts) here.
+
+## Patches
+
+Patches are based on [jsonpatch](https://jsonpatch.com/). For those who are unaware of the details let's do a quick breakdown on how they work. When making a `k8sPatchResource` call, it will ask for `Patches[]`. A `Patch` is just simply a straight forward operation on the existing resource.
+
+Say you wanted to update a `ConfigMap` to have a new property:
+
+```ts
+import { k8sPatchResource } from '@openshift/dynamic-plugin-sdk-utils';
+
+k8sPatchResource({
+  model: ConfigMapModel,
+  queryOptions: { name: configMapName, ns: namespace },
+  patches: [{ path: '/foo', op: 'add', value: 'bar' }]
+})
+```
+
+- `op` is what kind of operation to apply to this path
+  - 'add' -- adds a new item
+  - 'replace' -- updates an existing item
+  - 'remove' -- removes the item (you'd omit `value` naturally as there is no value for removing)
+  - There are other operations you can do as well ([see the docs](https://jsonpatch.com/#operations))
+- `path` is the path from the root of the k8s object using `/` as a deliminator, include the key you want to modify
+  - Unless it is a complex object you're adding, you'll likely specify `value` as a string/number
+
+Ideally you keep patches as small as needed to avoid any 409 Conflict errors.
diff --git a/frontend/.eslintrc b/frontend/.eslintrc
index a91130b93f..02670f8829 100755
--- a/frontend/.eslintrc
+++ b/frontend/.eslintrc
@@ -44,9 +44,10 @@
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/interface-name-prefix": "off",
     "@typescript-eslint/no-var-requires": "off",
-    "@typescript-eslint/no-empty-function": "warn",
+    "@typescript-eslint/no-empty-function": "error",
     "@typescript-eslint/no-inferrable-types": "error",
-    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/no-unused-vars": "error",
+    "react-hooks/exhaustive-deps": "error",
     "react-hooks/rules-of-hooks": "error",
     "import/extensions": "off",
     "import/no-unresolved": "off",
diff --git a/frontend/config/setupTests.js b/frontend/config/setupTests.js
index 61ac1e8c14..a8133f6331 100644
--- a/frontend/config/setupTests.js
+++ b/frontend/config/setupTests.js
@@ -15,3 +15,5 @@ if (process.env.ODH_IS_PROJECT_ROOT_DIR === 'false') {
 configure({
   testIdAttribute: 'data-id',
 });
+
+jest.mock('@openshift/dynamic-plugin-sdk-utils', () => ({}));
diff --git a/frontend/jest.config.js b/frontend/jest.config.js
index 4222971c38..e200e7a0b7 100644
--- a/frontend/jest.config.js
+++ b/frontend/jest.config.js
@@ -16,8 +16,8 @@ module.exports = {
       branches: 0,
       functions: 0,
       lines: 0,
-      statements: 0
-    }
+      statements: 0,
+    },
   },
 
   collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'],
@@ -30,7 +30,7 @@ module.exports = {
     '\\.(css|less|sass|scss)$': '<rootDir>/config/transform.style.js',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/config/transform.file.js',
-    '@app/(.*)': '<rootDir>/src/app/$1'
+    '@app/(.*)': '<rootDir>/src/app/$1',
   },
 
   // A preset that is used as a base for Jest's configuration
@@ -42,6 +42,10 @@ module.exports = {
   // The test environment that will be used for testing.
   testEnvironment: 'jsdom',
 
+  transform: {
+    'node_modules/.+\\.(j|t)sx?$': 'ts-jest',
+  },
+
   // A list of paths to snapshot serializer modules Jest should use for snapshot testing
-  snapshotSerializers: []
+  snapshotSerializers: [],
 };
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 93d3ffd54b..de3990afca 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1081,12 +1081,24 @@
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
         "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "dependencies": {
+        "@jridgewell/trace-mapping": {
+          "version": "0.3.14",
+          "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+          "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
+          "dev": true,
+          "requires": {
+            "@jridgewell/resolve-uri": "^3.0.3",
+            "@jridgewell/sourcemap-codec": "^1.4.10"
+          }
+        }
       }
     },
     "@jridgewell/resolve-uri": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
-      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz",
+      "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==",
       "dev": true
     },
     "@jridgewell/set-array": {
@@ -1103,24 +1115,26 @@
       "requires": {
         "@jridgewell/gen-mapping": "^0.3.0",
         "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "dependencies": {
+        "@jridgewell/trace-mapping": {
+          "version": "0.3.14",
+          "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+          "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
+          "dev": true,
+          "requires": {
+            "@jridgewell/resolve-uri": "^3.0.3",
+            "@jridgewell/sourcemap-codec": "^1.4.10"
+          }
+        }
       }
     },
     "@jridgewell/sourcemap-codec": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "version": "1.4.11",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz",
+      "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==",
       "dev": true
     },
-    "@jridgewell/trace-mapping": {
-      "version": "0.3.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz",
-      "integrity": "sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==",
-      "dev": true,
-      "requires": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
-      }
-    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1167,6 +1181,34 @@
         "rimraf": "^3.0.2"
       }
     },
+    "@openshift/dynamic-plugin-sdk": {
+      "version": "1.0.0-alpha12",
+      "resolved": "https://registry.npmjs.org/@openshift/dynamic-plugin-sdk/-/dynamic-plugin-sdk-1.0.0-alpha12.tgz",
+      "integrity": "sha512-DFhc5y2kgUhYhMPR1zYge/PLvchFHZ6VA1UMA9tbQZNYQLydgD2CyIzOw/W1qsTN6u9FoFkHANplxuN1p87p9w==",
+      "requires": {
+        "lodash-es": "^4.17.21",
+        "yup": "^0.32.11"
+      }
+    },
+    "@openshift/dynamic-plugin-sdk-utils": {
+      "version": "1.0.0-alpha17",
+      "resolved": "https://registry.npmjs.org/@openshift/dynamic-plugin-sdk-utils/-/dynamic-plugin-sdk-utils-1.0.0-alpha17.tgz",
+      "integrity": "sha512-IravFesEE+BNBQgSDq6kAkAPh1U/HbFqefuyE+85gANygcPzzY5AXVOIZC3LoysKMjPOtwYidwpc3nENUZKWGg==",
+      "requires": {
+        "immutable": "^3.8.2",
+        "lodash-es": "^4.17.21",
+        "pluralize": "^8.0.0",
+        "typesafe-actions": "^4.4.2",
+        "uuid": "^8.3.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+        }
+      }
+    },
     "@patternfly/patternfly": {
       "version": "4.215.1",
       "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.215.1.tgz",
@@ -1217,6 +1259,45 @@
         "@patternfly/patternfly": "4.215.1",
         "@patternfly/react-core": "^4.239.0",
         "@patternfly/react-styles": "^4.89.0"
+      },
+      "dependencies": {
+        "@patternfly/patternfly": {
+          "version": "4.215.1",
+          "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.215.1.tgz",
+          "integrity": "sha512-coOipHiQs92OYYO+pWfukEKOkY+VUL6ptusTxh98DvIu/tQYzJDJxEmzYXmwqxORM19oLxAJEGktPoLNKElj6A=="
+        },
+        "@patternfly/react-core": {
+          "version": "4.239.0",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.239.0.tgz",
+          "integrity": "sha512-6CmYABCJLUXTlzCk6C3WouMNZpS0BCT+aHU8CvYpFQ/NrpYp3MJaDsYbqgCRWV42rmIO5iXun/4WhXBJzJEoQg==",
+          "requires": {
+            "@patternfly/react-icons": "^4.90.0",
+            "@patternfly/react-styles": "^4.89.0",
+            "@patternfly/react-tokens": "^4.91.0",
+            "focus-trap": "6.9.2",
+            "react-dropzone": "9.0.0",
+            "tippy.js": "5.1.2",
+            "tslib": "^2.0.0"
+          }
+        },
+        "@patternfly/react-icons": {
+          "version": "4.90.0",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.90.0.tgz",
+          "integrity": "sha512-qEnQKbxbUgyiosiKSkeKEBwmhgJwWEqniIAFyoxj+kpzAdeu7ueWe5iBbqo06mvDOedecFiM5mIE1N0MXwk8Yw=="
+        },
+        "@patternfly/react-styles": {
+          "version": "4.89.0",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.89.0.tgz",
+          "integrity": "sha512-SkT+qx3Xqu70T5s+i/AUT2hI2sKAPDX4ffeiJIUDu/oyWiFdk+/9DEivnLSyJMruroXXN33zKibvzb5rH7DKTQ=="
+        },
+        "focus-trap": {
+          "version": "6.9.2",
+          "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.2.tgz",
+          "integrity": "sha512-gBEuXOPNOKPrLdZpMFUSTyIo1eT2NSZRrwZ9r/0Jqw5tmT3Yvxfmu8KBHw8xW2XQkw6E/JoG+OlEq7UDtSUNgw==",
+          "requires": {
+            "tabbable": "^5.3.2"
+          }
+        }
       }
     },
     "@patternfly/react-core": {
@@ -1261,11 +1342,62 @@
       "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.91.0.tgz",
       "integrity": "sha512-QeQCy8o8E/16fAr8mxqXIYRmpTsjCHJXi5p5jmgEDFmYMesN6Pqfv6N5D0FHb+CIaNOZWRps7GkWvlIMIE81sw=="
     },
-    "@polka/url": {
-      "version": "1.0.0-next.21",
-      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
-      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
-      "dev": true
+    "@patternfly/react-virtualized-extension": {
+      "version": "4.71.1",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-virtualized-extension/-/react-virtualized-extension-4.71.1.tgz",
+      "integrity": "sha512-hlMuFx8jtnj9CeYVYqVJmb9QXUP3BVwTjqIAugTwrVpS3NcRRC5Acxof4GEqUUrx+oYb/SxR96+EAc8VusuZFw==",
+      "requires": {
+        "@patternfly/react-core": "^4.224.1",
+        "@patternfly/react-icons": "^4.75.1",
+        "@patternfly/react-styles": "^4.74.1",
+        "linear-layout-vector": "0.0.1",
+        "react-virtualized": "^9.21.1",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "@patternfly/react-core": {
+          "version": "4.224.1",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.224.1.tgz",
+          "integrity": "sha512-v8wGGNoMGndAScAoE5jeOA5jVgymlLSwttPjQk/Idr0k7roSpOrsM39oXUR5DEgkZee45DW00WKTgmg50PP3FQ==",
+          "requires": {
+            "@patternfly/react-icons": "^4.75.1",
+            "@patternfly/react-styles": "^4.74.1",
+            "@patternfly/react-tokens": "^4.76.1",
+            "focus-trap": "6.9.2",
+            "react-dropzone": "9.0.0",
+            "tippy.js": "5.1.2",
+            "tslib": "^2.0.0"
+          }
+        },
+        "@patternfly/react-icons": {
+          "version": "4.75.1",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.75.1.tgz",
+          "integrity": "sha512-1ly8SVi/kcc0zkiViOjUd8D5BEr7GeqWGmDPuDSBtD60l1dYf3hZc44IWFVkRM/oHZML/musdrJkLfh4MDqX9w=="
+        },
+        "@patternfly/react-styles": {
+          "version": "4.74.1",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.74.1.tgz",
+          "integrity": "sha512-9eWvKrjtrJ3qhJkhY2GQKyYA13u/J0mU1befH49SYbvxZtkbuHdpKmXBAeQoHmcx1hcOKtiYXeKb+dVoRRNx0A=="
+        },
+        "@patternfly/react-tokens": {
+          "version": "4.76.1",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.76.1.tgz",
+          "integrity": "sha512-gLEezRSzQeflaPu3SCgYmWtuiqDIRtxNNFP1+ES7P2o56YHXJ5o1Pki7LpNCPk/VOzHy2+vRFE/7l+hBEweugw=="
+        },
+        "focus-trap": {
+          "version": "6.9.2",
+          "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.2.tgz",
+          "integrity": "sha512-gBEuXOPNOKPrLdZpMFUSTyIo1eT2NSZRrwZ9r/0Jqw5tmT3Yvxfmu8KBHw8xW2XQkw6E/JoG+OlEq7UDtSUNgw==",
+          "requires": {
+            "tabbable": "^5.3.2"
+          }
+        },
+        "tabbable": {
+          "version": "5.3.3",
+          "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
+          "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
+        }
+      }
     },
     "@remix-run/router": {
       "version": "1.0.1",
@@ -1413,6 +1545,32 @@
         "classnames": "*"
       }
     },
+    "@types/eslint": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.29.0.tgz",
+      "integrity": "sha512-VNcvioYDH8/FxaeTKkM4/TiTwt6pBV9E3OfGmvaw8tPl0rrHCJ4Ll15HRT+pMiFAf/MLQvAzC+6RzUMEL9Ceng==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "@types/eslint-scope": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
+      "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
+      "dev": true,
+      "requires": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
+    "@types/estree": {
+      "version": "0.0.51",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
+      "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
+      "dev": true
+    },
     "@types/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
@@ -1448,9 +1606,9 @@
       }
     },
     "@types/html-minifier-terser": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
-      "integrity": "sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==",
       "dev": true
     },
     "@types/istanbul-lib-coverage": {
@@ -1559,6 +1717,11 @@
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.14.182",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q=="
+    },
     "@types/minimatch": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@@ -1656,24 +1819,12 @@
       "integrity": "sha512-50ehC3IAijfkvoNqmQ+VL73S7orOxmAK8ljQAFBv8o7G66lAZyxQj1L3BAv2dD86myLXI+sgKP1kcxAaxW356w==",
       "dev": true
     },
-    "@types/source-list-map": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
-      "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
-      "dev": true
-    },
     "@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
       "dev": true
     },
-    "@types/tapable": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
-      "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==",
-      "dev": true
-    },
     "@types/testing-library__jest-dom": {
       "version": "5.14.3",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz",
@@ -1683,48 +1834,6 @@
         "@types/jest": "*"
       }
     },
-    "@types/uglify-js": {
-      "version": "3.13.1",
-      "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.1.tgz",
-      "integrity": "sha512-O3MmRAk6ZuAKa9CHgg0Pr0+lUOqoMLpc9AS4R8ano2auvsg7IE8syF3Xh/NPr26TWklxYcqoEEFdzLLs1fV9PQ==",
-      "dev": true,
-      "requires": {
-        "source-map": "^0.6.1"
-      }
-    },
-    "@types/webpack": {
-      "version": "4.41.32",
-      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.32.tgz",
-      "integrity": "sha512-cb+0ioil/7oz5//7tZUSwbrSAN/NWHrQylz5cW8G0dWTcF/g+/dSdMlKVZspBYuMAN1+WnwHrkxiRrLcwd0Heg==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*",
-        "@types/tapable": "^1",
-        "@types/uglify-js": "*",
-        "@types/webpack-sources": "*",
-        "anymatch": "^3.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "@types/webpack-sources": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.0.tgz",
-      "integrity": "sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*",
-        "@types/source-list-map": "*",
-        "source-map": "^0.7.3"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-          "dev": true
-        }
-      }
-    },
     "@types/yargs": {
       "version": "15.0.14",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz",
@@ -1824,177 +1933,148 @@
       }
     },
     "@webassemblyjs/ast": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
-      "integrity": "sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
+      "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/helper-module-context": "1.9.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-        "@webassemblyjs/wast-parser": "1.9.0"
+        "@webassemblyjs/helper-numbers": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
       }
     },
     "@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
-      "integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
+      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
       "dev": true
     },
     "@webassemblyjs/helper-api-error": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz",
-      "integrity": "sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
+      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
       "dev": true
     },
     "@webassemblyjs/helper-buffer": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz",
-      "integrity": "sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==",
-      "dev": true
-    },
-    "@webassemblyjs/helper-code-frame": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz",
-      "integrity": "sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/wast-printer": "1.9.0"
-      }
-    },
-    "@webassemblyjs/helper-fsm": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz",
-      "integrity": "sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
+      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
       "dev": true
     },
-    "@webassemblyjs/helper-module-context": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz",
-      "integrity": "sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==",
+    "@webassemblyjs/helper-numbers": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
+      "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.9.0"
+        "@webassemblyjs/floating-point-hex-parser": "1.11.1",
+        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@xtuc/long": "4.2.2"
       }
     },
     "@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz",
-      "integrity": "sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
+      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
       "dev": true
     },
     "@webassemblyjs/helper-wasm-section": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz",
-      "integrity": "sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
+      "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/helper-buffer": "1.9.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-        "@webassemblyjs/wasm-gen": "1.9.0"
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.1"
       }
     },
     "@webassemblyjs/ieee754": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz",
-      "integrity": "sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
+      "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
       "dev": true,
       "requires": {
         "@xtuc/ieee754": "^1.2.0"
       }
     },
     "@webassemblyjs/leb128": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.9.0.tgz",
-      "integrity": "sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
+      "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
       "dev": true,
       "requires": {
         "@xtuc/long": "4.2.2"
       }
     },
     "@webassemblyjs/utf8": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.9.0.tgz",
-      "integrity": "sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
+      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
       "dev": true
     },
     "@webassemblyjs/wasm-edit": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz",
-      "integrity": "sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
+      "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/helper-buffer": "1.9.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-        "@webassemblyjs/helper-wasm-section": "1.9.0",
-        "@webassemblyjs/wasm-gen": "1.9.0",
-        "@webassemblyjs/wasm-opt": "1.9.0",
-        "@webassemblyjs/wasm-parser": "1.9.0",
-        "@webassemblyjs/wast-printer": "1.9.0"
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/helper-wasm-section": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.1",
+        "@webassemblyjs/wasm-opt": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1",
+        "@webassemblyjs/wast-printer": "1.11.1"
       }
     },
     "@webassemblyjs/wasm-gen": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz",
-      "integrity": "sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
+      "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-        "@webassemblyjs/ieee754": "1.9.0",
-        "@webassemblyjs/leb128": "1.9.0",
-        "@webassemblyjs/utf8": "1.9.0"
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/ieee754": "1.11.1",
+        "@webassemblyjs/leb128": "1.11.1",
+        "@webassemblyjs/utf8": "1.11.1"
       }
     },
     "@webassemblyjs/wasm-opt": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz",
-      "integrity": "sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
+      "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/helper-buffer": "1.9.0",
-        "@webassemblyjs/wasm-gen": "1.9.0",
-        "@webassemblyjs/wasm-parser": "1.9.0"
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-buffer": "1.11.1",
+        "@webassemblyjs/wasm-gen": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1"
       }
     },
     "@webassemblyjs/wasm-parser": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz",
-      "integrity": "sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/helper-api-error": "1.9.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-        "@webassemblyjs/ieee754": "1.9.0",
-        "@webassemblyjs/leb128": "1.9.0",
-        "@webassemblyjs/utf8": "1.9.0"
-      }
-    },
-    "@webassemblyjs/wast-parser": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz",
-      "integrity": "sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
+      "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/floating-point-hex-parser": "1.9.0",
-        "@webassemblyjs/helper-api-error": "1.9.0",
-        "@webassemblyjs/helper-code-frame": "1.9.0",
-        "@webassemblyjs/helper-fsm": "1.9.0",
-        "@xtuc/long": "4.2.2"
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/helper-api-error": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
+        "@webassemblyjs/ieee754": "1.11.1",
+        "@webassemblyjs/leb128": "1.11.1",
+        "@webassemblyjs/utf8": "1.11.1"
       }
     },
     "@webassemblyjs/wast-printer": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz",
-      "integrity": "sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
+      "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/wast-parser": "1.9.0",
+        "@webassemblyjs/ast": "1.11.1",
         "@xtuc/long": "4.2.2"
       }
     },
@@ -2146,6 +2226,12 @@
         "acorn-walk": "^7.1.1"
       }
     },
+    "acorn-import-assertions": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
+      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
+      "dev": true
+    },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
@@ -2372,53 +2458,6 @@
         "safer-buffer": "~2.1.0"
       }
     },
-    "asn1.js": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
-      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
-      "dev": true,
-      "requires": {
-        "bn.js": "^4.0.0",
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0",
-        "safer-buffer": "^2.1.0"
-      },
-      "dependencies": {
-        "bn.js": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
-          "dev": true
-        }
-      }
-    },
-    "assert": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/assert/-/assert-1.5.0.tgz",
-      "integrity": "sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==",
-      "dev": true,
-      "requires": {
-        "object-assign": "^4.1.1",
-        "util": "0.10.3"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-          "integrity": "sha512-8nWq2nLTAwd02jTqJExUYFSD/fKq6VH9Y/oG2accc/kdI0V98Bag8d5a4gi3XHz73rDWa2PvTtvcWYquKqSENA==",
-          "dev": true
-        },
-        "util": {
-          "version": "0.10.3",
-          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
-          "integrity": "sha512-5KiHfsmkqacuKjkRkdV7SsfDJ2EGiPsK92s2MhNSY0craxjTdKTtqKsJaCWp4LW33ZZ0OPUv1WO/TFvNQRiQxQ==",
-          "dev": true,
-          "requires": {
-            "inherits": "2.0.1"
-          }
-        }
-      }
-    },
     "assert-plus": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
@@ -2642,12 +2681,6 @@
         }
       }
     },
-    "base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true
-    },
     "batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -2668,13 +2701,6 @@
       "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
       "dev": true
     },
-    "binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
-      "optional": true
-    },
     "bindings": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
@@ -2699,12 +2725,6 @@
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
       "dev": true
     },
-    "bn.js": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
-      "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==",
-      "dev": true
-    },
     "body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.2.tgz",
@@ -2790,110 +2810,12 @@
         "fill-range": "^7.0.1"
       }
     },
-    "brorand": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
-      "integrity": "sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==",
-      "dev": true
-    },
     "browser-process-hrtime": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
       "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
       "dev": true
     },
-    "browserify-aes": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
-      "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
-      "dev": true,
-      "requires": {
-        "buffer-xor": "^1.0.3",
-        "cipher-base": "^1.0.0",
-        "create-hash": "^1.1.0",
-        "evp_bytestokey": "^1.0.3",
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "browserify-cipher": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
-      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
-      "dev": true,
-      "requires": {
-        "browserify-aes": "^1.0.4",
-        "browserify-des": "^1.0.0",
-        "evp_bytestokey": "^1.0.0"
-      }
-    },
-    "browserify-des": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
-      "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
-      "dev": true,
-      "requires": {
-        "cipher-base": "^1.0.1",
-        "des.js": "^1.0.0",
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.1.2"
-      }
-    },
-    "browserify-rsa": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
-      "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
-      "dev": true,
-      "requires": {
-        "bn.js": "^5.0.0",
-        "randombytes": "^2.0.1"
-      }
-    },
-    "browserify-sign": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz",
-      "integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==",
-      "dev": true,
-      "requires": {
-        "bn.js": "^5.1.1",
-        "browserify-rsa": "^4.0.1",
-        "create-hash": "^1.2.0",
-        "create-hmac": "^1.1.7",
-        "elliptic": "^6.5.3",
-        "inherits": "^2.0.4",
-        "parse-asn1": "^5.1.5",
-        "readable-stream": "^3.6.0",
-        "safe-buffer": "^5.2.0"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-          "dev": true
-        }
-      }
-    },
-    "browserify-zlib": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
-      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
-      "dev": true,
-      "requires": {
-        "pako": "~1.0.5"
-      }
-    },
     "browserslist": {
       "version": "4.20.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.0.tgz",
@@ -2925,17 +2847,6 @@
         "node-int64": "^0.4.0"
       }
     },
-    "buffer": {
-      "version": "4.9.2",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
-      "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
-      "dev": true,
-      "requires": {
-        "base64-js": "^1.0.2",
-        "ieee754": "^1.1.4",
-        "isarray": "^1.0.0"
-      }
-    },
     "buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -2948,18 +2859,6 @@
       "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==",
       "dev": true
     },
-    "buffer-xor": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
-      "integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ==",
-      "dev": true
-    },
-    "builtin-status-codes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
-      "integrity": "sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==",
-      "dev": true
-    },
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -3147,23 +3046,6 @@
       "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
       "dev": true
     },
-    "chokidar": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
-      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "fsevents": "~2.3.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      }
-    },
     "chownr": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
@@ -3181,16 +3063,6 @@
       "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
       "dev": true
     },
-    "cipher-base": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
-      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
     "cjs-module-lexer": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz",
@@ -3226,9 +3098,9 @@
       "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
     },
     "clean-css": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz",
-      "integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
+      "integrity": "sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==",
       "dev": true,
       "requires": {
         "source-map": "~0.6.0"
@@ -3248,17 +3120,6 @@
         "string-width": "^2.1.1",
         "strip-ansi": "^4.0.0",
         "wrap-ansi": "^2.0.0"
-      },
-      "dependencies": {
-        "string-width": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-          "requires": {
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^4.0.0"
-          }
-        }
       }
     },
     "clone-deep": {
@@ -3272,6 +3133,11 @@
         "shallow-clone": "^3.0.0"
       }
     },
+    "clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -3429,9 +3295,9 @@
       }
     },
     "commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
       "dev": true
     },
     "commondir": {
@@ -3497,41 +3363,17 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
-    "concat-stream": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
-      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
-      "dev": true,
-      "requires": {
-        "buffer-from": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^2.2.2",
-        "typedarray": "^0.0.6"
-      }
-    },
     "connect-history-api-fallback": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
       "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
       "dev": true
     },
-    "console-browserify": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
-      "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
-      "dev": true
-    },
     "console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
     },
-    "constants-browserify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
-      "integrity": "sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==",
-      "dev": true
-    },
     "content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -3576,40 +3418,6 @@
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
       "dev": true
     },
-    "copy-concurrently": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
-      "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
-      "dev": true,
-      "requires": {
-        "aproba": "^1.1.1",
-        "fs-write-stream-atomic": "^1.0.8",
-        "iferr": "^0.1.5",
-        "mkdirp": "^0.5.1",
-        "rimraf": "^2.5.4",
-        "run-queue": "^1.0.0"
-      },
-      "dependencies": {
-        "mkdirp": {
-          "version": "0.5.5",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.5"
-          }
-        },
-        "rimraf": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        }
-      }
-    },
     "copy-descriptor": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
@@ -3753,51 +3561,6 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
-    "create-ecdh": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
-      "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
-      "dev": true,
-      "requires": {
-        "bn.js": "^4.1.0",
-        "elliptic": "^6.5.3"
-      },
-      "dependencies": {
-        "bn.js": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
-          "dev": true
-        }
-      }
-    },
-    "create-hash": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
-      "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
-      "dev": true,
-      "requires": {
-        "cipher-base": "^1.0.1",
-        "inherits": "^2.0.1",
-        "md5.js": "^1.3.4",
-        "ripemd160": "^2.0.1",
-        "sha.js": "^2.4.0"
-      }
-    },
-    "create-hmac": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
-      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
-      "dev": true,
-      "requires": {
-        "cipher-base": "^1.0.3",
-        "create-hash": "^1.1.0",
-        "inherits": "^2.0.1",
-        "ripemd160": "^2.0.0",
-        "safe-buffer": "^5.0.1",
-        "sha.js": "^2.4.8"
-      }
-    },
     "cross-spawn": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@@ -3808,25 +3571,6 @@
         "which": "^1.2.9"
       }
     },
-    "crypto-browserify": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
-      "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
-      "dev": true,
-      "requires": {
-        "browserify-cipher": "^1.0.0",
-        "browserify-sign": "^4.0.0",
-        "create-ecdh": "^4.0.0",
-        "create-hash": "^1.1.0",
-        "create-hmac": "^1.1.0",
-        "diffie-hellman": "^5.0.0",
-        "inherits": "^2.0.1",
-        "pbkdf2": "^3.0.3",
-        "public-encrypt": "^4.0.0",
-        "randombytes": "^2.0.0",
-        "randomfill": "^1.0.3"
-      }
-    },
     "css": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
@@ -4163,12 +3907,6 @@
         "array-find-index": "^1.0.1"
       }
     },
-    "cyclist": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
-      "integrity": "sha512-NJGVKPS81XejHcLhaLJS7plab0fK3slPh11mESeeDq2W4ZI5kUKK/LRRdVDvjJseojbPB7ZwjnyOybg3Igea/A==",
-      "dev": true
-    },
     "d": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
@@ -4439,16 +4177,6 @@
       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
       "dev": true
     },
-    "des.js": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
-      "integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
     "destroy": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
@@ -4467,25 +4195,6 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
-    "diffie-hellman": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
-      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
-      "dev": true,
-      "requires": {
-        "bn.js": "^4.1.0",
-        "miller-rabin": "^4.0.0",
-        "randombytes": "^2.0.0"
-      },
-      "dependencies": {
-        "bn.js": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
-          "dev": true
-        }
-      }
-    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -4552,6 +4261,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -4570,12 +4288,6 @@
         }
       }
     },
-    "domain-browser": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
-      "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
-      "dev": true
-    },
     "domelementtype": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
@@ -4600,18 +4312,18 @@
       }
     },
     "domhandler": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz",
-      "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
       "dev": true,
       "requires": {
         "domelementtype": "^2.2.0"
       },
       "dependencies": {
         "domelementtype": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+          "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
           "dev": true
         }
       }
@@ -4686,18 +4398,6 @@
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
       "dev": true
     },
-    "duplexify": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
-      "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
-      "dev": true,
-      "requires": {
-        "end-of-stream": "^1.0.0",
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.0.0",
-        "stream-shift": "^1.0.0"
-      }
-    },
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -4713,35 +4413,18 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
       "dev": true
     },
+    "ejs": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.7.4.tgz",
+      "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==",
+      "dev": true
+    },
     "electron-to-chromium": {
       "version": "1.4.78",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.78.tgz",
       "integrity": "sha512-o61+D/Lx7j/E0LIin/efOqeHpXhwi1TaQco9vUcRmr91m25SfZY6L5hWJDv/r+6kNjboFKgBw1LbfM0lbhuK6Q==",
       "dev": true
     },
-    "elliptic": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
-      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
-      "dev": true,
-      "requires": {
-        "bn.js": "^4.11.9",
-        "brorand": "^1.1.0",
-        "hash.js": "^1.0.0",
-        "hmac-drbg": "^1.0.1",
-        "inherits": "^2.0.4",
-        "minimalistic-assert": "^1.0.1",
-        "minimalistic-crypto-utils": "^1.0.1"
-      },
-      "dependencies": {
-        "bn.js": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
-          "dev": true
-        }
-      }
-    },
     "emittery": {
       "version": "0.7.2",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.7.2.tgz",
@@ -4868,6 +4551,12 @@
         "unbox-primitive": "^1.0.1"
       }
     },
+    "es-module-lexer": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
+      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
+      "dev": true
+    },
     "es-to-primitive": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
@@ -5341,14 +5030,13 @@
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "dev": true
     },
-    "evp_bytestokey": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
-      "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
+    "eventsource": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.0.tgz",
+      "integrity": "sha512-VSJjT5oCNrFvCS6igjzPAt5hBzQ2qPBFIbJ03zLI9SE0mxwZpMw6BfJrbFHm1a141AavMEB8JHmBhWAd66PfCg==",
       "dev": true,
       "requires": {
-        "md5.js": "^1.3.4",
-        "safe-buffer": "^5.1.1"
+        "original": "^1.0.0"
       }
     },
     "exec-sh": {
@@ -5764,12 +5452,6 @@
         "bser": "2.1.1"
       }
     },
-    "figgy-pudding": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
-      "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
-      "dev": true
-    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -5864,17 +5546,6 @@
         }
       }
     },
-    "find-cache-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
-      "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
-      "dev": true,
-      "requires": {
-        "commondir": "^1.0.1",
-        "make-dir": "^2.0.0",
-        "pkg-dir": "^3.0.0"
-      }
-    },
     "find-up": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
@@ -5899,16 +5570,6 @@
       "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
       "dev": true
     },
-    "flush-write-stream": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
-      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.3",
-        "readable-stream": "^2.3.6"
-      }
-    },
     "focus-trap": {
       "version": "6.9.2",
       "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.2.tgz",
@@ -5964,16 +5625,6 @@
       "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
       "dev": true
     },
-    "from2": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
-      "integrity": "sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.0.0"
-      }
-    },
     "fs-minipass": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@@ -5982,18 +5633,6 @@
         "minipass": "^3.0.0"
       }
     },
-    "fs-write-stream-atomic": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
-      "integrity": "sha512-gehEzmPn2nAwr39eay+x3X34Ra+M2QlVUTLhkXPjWdeO8RF9kszk116avgBJM3ZyNHgHXBNx+VmPaFC36k0PzA==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "iferr": "^0.1.5",
-        "imurmurhash": "^0.1.4",
-        "readable-stream": "1 || 2"
-      }
-    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -6186,6 +5825,12 @@
         "is-glob": "^4.0.1"
       }
     },
+    "glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -6252,12 +5897,21 @@
       "optional": true
     },
     "gzip-size": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
-      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
+      "integrity": "sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==",
       "dev": true,
       "requires": {
-        "duplexer": "^0.1.2"
+        "duplexer": "^0.1.1",
+        "pify": "^4.0.1"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "dev": true
+        }
       }
     },
     "handle-thing": {
@@ -6387,46 +6041,6 @@
         }
       }
     },
-    "hash-base": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
-      "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.4",
-        "readable-stream": "^3.6.0",
-        "safe-buffer": "^5.2.0"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-          "dev": true
-        }
-      }
-    },
-    "hash.js": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
-      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.3",
-        "minimalistic-assert": "^1.0.1"
-      }
-    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -6447,17 +6061,6 @@
         "@babel/runtime": "^7.7.6"
       }
     },
-    "hmac-drbg": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
-      "integrity": "sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==",
-      "dev": true,
-      "requires": {
-        "hash.js": "^1.0.3",
-        "minimalistic-assert": "^1.0.0",
-        "minimalistic-crypto-utils": "^1.0.1"
-      }
-    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -6466,6 +6069,12 @@
         "react-is": "^16.7.0"
       }
     },
+    "hoopy": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
+      "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==",
+      "dev": true
+    },
     "hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -6517,66 +6126,66 @@
       "dev": true
     },
     "html-minifier-terser": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
-      "integrity": "sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
       "dev": true,
       "requires": {
-        "camel-case": "^4.1.1",
-        "clean-css": "^4.2.3",
-        "commander": "^4.1.1",
+        "camel-case": "^4.1.2",
+        "clean-css": "^5.2.2",
+        "commander": "^8.3.0",
         "he": "^1.2.0",
-        "param-case": "^3.0.3",
+        "param-case": "^3.0.4",
         "relateurl": "^0.2.7",
-        "terser": "^4.6.3"
+        "terser": "^5.10.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "8.8.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+          "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
+          "dev": true
+        },
+        "terser": {
+          "version": "5.14.2",
+          "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+          "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
+          "dev": true,
+          "requires": {
+            "@jridgewell/source-map": "^0.3.2",
+            "acorn": "^8.5.0",
+            "commander": "^2.20.0",
+            "source-map-support": "~0.5.20"
+          },
+          "dependencies": {
+            "commander": {
+              "version": "2.20.3",
+              "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+              "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+              "dev": true
+            }
+          }
+        }
       }
     },
     "html-webpack-plugin": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz",
-      "integrity": "sha512-MouoXEYSjTzCrjIxWwg8gxL5fE2X2WZJLmBYXlaJhQUH5K/b5OrqmV7T4dB7iu0xkmJ6JlUuV6fFVtnqbPopZw==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
+      "integrity": "sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw==",
       "dev": true,
       "requires": {
-        "@types/html-minifier-terser": "^5.0.0",
-        "@types/tapable": "^1.0.5",
-        "@types/webpack": "^4.41.8",
-        "html-minifier-terser": "^5.0.1",
-        "loader-utils": "^1.2.3",
-        "lodash": "^4.17.15",
-        "pretty-error": "^2.1.1",
-        "tapable": "^1.1.3",
-        "util.promisify": "1.0.0"
+        "@types/html-minifier-terser": "^6.0.0",
+        "html-minifier-terser": "^6.0.2",
+        "lodash": "^4.17.21",
+        "pretty-error": "^4.0.0",
+        "tapable": "^2.0.0"
       },
       "dependencies": {
-        "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        },
-        "util.promisify": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
-          "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
-          "dev": true,
-          "requires": {
-            "define-properties": "^1.1.2",
-            "object.getownpropertydescriptors": "^2.0.3"
-          }
+        "tapable": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+          "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+          "dev": true
         }
       }
     },
@@ -6593,9 +6202,9 @@
       },
       "dependencies": {
         "dom-serializer": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+          "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
           "dev": true,
           "requires": {
             "domelementtype": "^2.0.1",
@@ -6604,9 +6213,9 @@
           }
         },
         "domelementtype": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+          "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
           "dev": true
         },
         "domutils": {
@@ -6790,12 +6399,6 @@
         "sshpk": "^1.7.0"
       }
     },
-    "https-browserify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
-      "integrity": "sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==",
-      "dev": true
-    },
     "https-proxy-agent": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
@@ -6821,18 +6424,6 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
-    "ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true
-    },
-    "iferr": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
-      "integrity": "sha512-DUNFN5j7Tln0D+TxzloUjKB+CtVu6myn0JEFak6dG18mNt9YkQ6lzGCdafwofISZ1lLF3xRHJ98VKy9ynkcFaA==",
-      "dev": true
-    },
     "ignore": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -6887,6 +6478,11 @@
         }
       }
     },
+    "immutable": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
+      "integrity": "sha512-15gZoQ38eYjEjxkorfbcgBKBL6R7T459OuK+CpcWt7O3KF4uPCx2tD0uFETlUDIyo+1789crbMhTvQBSR5yBMg=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -7110,16 +6706,6 @@
         "has-bigints": "^1.0.1"
       }
     },
-    "is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "binary-extensions": "^2.0.0"
-      }
-    },
     "is-boolean-object": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -9380,6 +8966,11 @@
         "type-check": "~0.4.0"
       }
     },
+    "linear-layout-vector": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/linear-layout-vector/-/linear-layout-vector-0.0.1.tgz",
+      "integrity": "sha512-w+nr1ZOVFGyMhwr8JKo0YzqDc8C2Z7pc9UbTuJA4VG/ezlSFEx+7kNrfCYvq7JQ/jHKR+FWy6reNrkVVzm0hSA=="
+    },
     "lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -9399,9 +8990,9 @@
       }
     },
     "loader-runner": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
-      "integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
+      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
       "dev": true
     },
     "loader-utils": {
@@ -9582,30 +9173,6 @@
       "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==",
       "dev": true
     },
-    "make-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "dev": true,
-      "requires": {
-        "pify": "^4.0.1",
-        "semver": "^5.6.0"
-      },
-      "dependencies": {
-        "pify": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-          "dev": true
-        },
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true
-        }
-      }
-    },
     "make-error": {
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
@@ -9641,17 +9208,6 @@
         "object-visit": "^1.0.0"
       }
     },
-    "md5.js": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
-      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
-      "dev": true,
-      "requires": {
-        "hash-base": "^3.0.0",
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.1.2"
-      }
-    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -9766,24 +9322,6 @@
         "picomatch": "^2.2.3"
       }
     },
-    "miller-rabin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
-      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
-      "dev": true,
-      "requires": {
-        "bn.js": "^4.0.0",
-        "brorand": "^1.0.1"
-      },
-      "dependencies": {
-        "bn.js": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
-          "dev": true
-        }
-      }
-    },
     "mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -9844,12 +9382,6 @@
       "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
       "dev": true
     },
-    "minimalistic-crypto-utils": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
-      "integrity": "sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==",
-      "dev": true
-    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -9921,24 +9453,6 @@
         }
       }
     },
-    "mississippi": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
-      "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
-      "dev": true,
-      "requires": {
-        "concat-stream": "^1.5.0",
-        "duplexify": "^3.4.2",
-        "end-of-stream": "^1.1.0",
-        "flush-write-stream": "^1.0.0",
-        "from2": "^2.1.0",
-        "parallel-transform": "^1.1.0",
-        "pump": "^3.0.0",
-        "pumpify": "^1.3.3",
-        "stream-each": "^1.1.0",
-        "through2": "^2.0.0"
-      }
-    },
     "mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
@@ -9965,46 +9479,6 @@
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
     },
-    "move-concurrently": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
-      "integrity": "sha512-hdrFxZOycD/g6A6SoI2bB5NA/5NEqD0569+S47WZhPvm46sD50ZHdYaFmnua5lndde9rCHGjmfK7Z8BuCt/PcQ==",
-      "dev": true,
-      "requires": {
-        "aproba": "^1.1.1",
-        "copy-concurrently": "^1.0.0",
-        "fs-write-stream-atomic": "^1.0.8",
-        "mkdirp": "^0.5.1",
-        "rimraf": "^2.5.4",
-        "run-queue": "^1.0.3"
-      },
-      "dependencies": {
-        "mkdirp": {
-          "version": "0.5.5",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.5"
-          }
-        },
-        "rimraf": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        }
-      }
-    },
-    "mrmime": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
-      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
-      "dev": true
-    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -10032,6 +9506,11 @@
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
       "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ=="
     },
+    "nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+    },
     "nanoid": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
@@ -10136,45 +9615,6 @@
       "integrity": "sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=",
       "dev": true
     },
-    "node-libs-browser": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
-      "integrity": "sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==",
-      "dev": true,
-      "requires": {
-        "assert": "^1.1.1",
-        "browserify-zlib": "^0.2.0",
-        "buffer": "^4.3.0",
-        "console-browserify": "^1.1.0",
-        "constants-browserify": "^1.0.0",
-        "crypto-browserify": "^3.11.0",
-        "domain-browser": "^1.1.1",
-        "events": "^3.0.0",
-        "https-browserify": "^1.0.0",
-        "os-browserify": "^0.3.0",
-        "path-browserify": "0.0.1",
-        "process": "^0.11.10",
-        "punycode": "^1.2.4",
-        "querystring-es3": "^0.2.0",
-        "readable-stream": "^2.3.3",
-        "stream-browserify": "^2.0.1",
-        "stream-http": "^2.7.2",
-        "string_decoder": "^1.0.0",
-        "timers-browserify": "^2.0.4",
-        "tty-browserify": "0.0.0",
-        "url": "^0.11.0",
-        "util": "^0.11.0",
-        "vm-browserify": "^1.0.1"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
-          "dev": true
-        }
-      }
-    },
     "node-notifier": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-8.0.2.tgz",
@@ -10819,11 +10259,14 @@
         "word-wrap": "^1.2.3"
       }
     },
-    "os-browserify": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
-      "integrity": "sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==",
-      "dev": true
+    "original": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz",
+      "integrity": "sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==",
+      "dev": true,
+      "requires": {
+        "url-parse": "^1.4.3"
+      }
     },
     "os-homedir": {
       "version": "1.0.2",
@@ -10910,23 +10353,6 @@
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
       "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
     },
-    "pako": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
-      "dev": true
-    },
-    "parallel-transform": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
-      "integrity": "sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==",
-      "dev": true,
-      "requires": {
-        "cyclist": "^1.0.1",
-        "inherits": "^2.0.3",
-        "readable-stream": "^2.1.5"
-      }
-    },
     "param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -10946,19 +10372,6 @@
         "callsites": "^3.0.0"
       }
     },
-    "parse-asn1": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
-      "integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==",
-      "dev": true,
-      "requires": {
-        "asn1.js": "^5.2.0",
-        "browserify-aes": "^1.0.0",
-        "evp_bytestokey": "^1.0.0",
-        "pbkdf2": "^3.0.3",
-        "safe-buffer": "^5.1.1"
-      }
-    },
     "parse-json": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
@@ -10995,12 +10408,6 @@
       "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
       "dev": true
     },
-    "path-browserify": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
-      "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==",
-      "dev": true
-    },
     "path-dirname": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
@@ -11043,19 +10450,6 @@
         "pinkie-promise": "^2.0.0"
       }
     },
-    "pbkdf2": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
-      "integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==",
-      "dev": true,
-      "requires": {
-        "create-hash": "^1.1.2",
-        "create-hmac": "^1.1.4",
-        "ripemd160": "^2.0.1",
-        "safe-buffer": "^5.0.1",
-        "sha.js": "^2.4.8"
-      }
-    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -11157,6 +10551,11 @@
         }
       }
     },
+    "pluralize": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
+      "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA=="
+    },
     "popper.js": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
@@ -11723,13 +11122,13 @@
       }
     },
     "pretty-error": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz",
-      "integrity": "sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
+      "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.20",
-        "renderkid": "^2.0.4"
+        "renderkid": "^3.0.0"
       }
     },
     "pretty-format": {
@@ -11763,12 +11162,6 @@
         }
       }
     },
-    "process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "dev": true
-    },
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -11815,6 +11208,11 @@
         "warning": "^4.0.0"
       }
     },
+    "property-expr": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
+      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -11841,28 +11239,6 @@
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
       "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
     },
-    "public-encrypt": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
-      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
-      "dev": true,
-      "requires": {
-        "bn.js": "^4.1.0",
-        "browserify-rsa": "^4.0.0",
-        "create-hash": "^1.1.0",
-        "parse-asn1": "^5.0.0",
-        "randombytes": "^2.0.1",
-        "safe-buffer": "^5.1.2"
-      },
-      "dependencies": {
-        "bn.js": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
-          "dev": true
-        }
-      }
-    },
     "pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -11873,29 +11249,6 @@
         "once": "^1.3.1"
       }
     },
-    "pumpify": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
-      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
-      "dev": true,
-      "requires": {
-        "duplexify": "^3.6.0",
-        "inherits": "^2.0.3",
-        "pump": "^2.0.0"
-      },
-      "dependencies": {
-        "pump": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
-          "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
-          "dev": true,
-          "requires": {
-            "end-of-stream": "^1.1.0",
-            "once": "^1.3.1"
-          }
-        }
-      }
-    },
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -11912,12 +11265,6 @@
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
       "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA=="
     },
-    "querystring-es3": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
-      "integrity": "sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==",
-      "dev": true
-    },
     "querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -11939,16 +11286,6 @@
         "safe-buffer": "^5.1.0"
       }
     },
-    "randomfill": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
-      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
-      "dev": true,
-      "requires": {
-        "randombytes": "^2.0.5",
-        "safe-buffer": "^5.1.0"
-      }
-    },
     "range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -12077,6 +11414,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-redux": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
@@ -12114,6 +11456,19 @@
         "react-router": "6.4.1"
       }
     },
+    "react-virtualized": {
+      "version": "9.22.3",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.3.tgz",
+      "integrity": "sha512-MKovKMxWTcwPSxE1kK1HcheQTWfuCxAuBoSTf2gwyMM21NdX/PXUhnoP8Uc5dRKd+nKm8v41R36OellhdCpkrw==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -12166,16 +11521,6 @@
         "util-deprecate": "~1.0.1"
       }
     },
-    "readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "picomatch": "^2.2.1"
-      }
-    },
     "rechoir": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
@@ -12261,47 +11606,47 @@
       "dev": true
     },
     "renderkid": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.7.tgz",
-      "integrity": "sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
+      "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
       "dev": true,
       "requires": {
         "css-select": "^4.1.3",
         "dom-converter": "^0.2.0",
         "htmlparser2": "^6.1.0",
         "lodash": "^4.17.21",
-        "strip-ansi": "^3.0.1"
+        "strip-ansi": "^6.0.1"
       },
       "dependencies": {
         "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
           "dev": true
         },
         "css-select": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
-          "integrity": "sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==",
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+          "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
           "dev": true,
           "requires": {
             "boolbase": "^1.0.0",
-            "css-what": "^5.1.0",
-            "domhandler": "^4.3.0",
+            "css-what": "^6.0.1",
+            "domhandler": "^4.3.1",
             "domutils": "^2.8.0",
             "nth-check": "^2.0.1"
           }
         },
         "css-what": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
-          "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+          "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
           "dev": true
         },
         "dom-serializer": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+          "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
           "dev": true,
           "requires": {
             "domelementtype": "^2.0.1",
@@ -12310,9 +11655,9 @@
           }
         },
         "domelementtype": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+          "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
           "dev": true
         },
         "domutils": {
@@ -12327,21 +11672,21 @@
           }
         },
         "nth-check": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
-          "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+          "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
           "dev": true,
           "requires": {
             "boolbase": "^1.0.0"
           }
         },
         "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
           "dev": true,
           "requires": {
-            "ansi-regex": "^2.0.0"
+            "ansi-regex": "^5.0.1"
           }
         }
       }
@@ -12498,16 +11843,6 @@
         "glob": "^7.1.3"
       }
     },
-    "ripemd160": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
-      "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
-      "dev": true,
-      "requires": {
-        "hash-base": "^3.0.0",
-        "inherits": "^2.0.1"
-      }
-    },
     "rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
@@ -12523,15 +11858,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "run-queue": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
-      "integrity": "sha512-ntymy489o0/QQplUDnpYAYUsO50K9SBrIVaKCWDOJzYJts0f9WH9RFJkyagebkw5+y1oi00R7ynNW/d12GBumg==",
-      "dev": true,
-      "requires": {
-        "aproba": "^1.1.1"
-      }
-    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -13186,28 +12512,12 @@
         }
       }
     },
-    "setimmediate": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
-      "dev": true
-    },
     "setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "dev": true
     },
-    "sha.js": {
-      "version": "2.4.11",
-      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
-      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.1",
-        "safe-buffer": "^5.0.1"
-      }
-    },
     "shallow-clone": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
@@ -13231,9 +12541,9 @@
       "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="
     },
     "shell-quote": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.3.tgz",
-      "integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
+      "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
       "dev": true
     },
     "shellwords": {
@@ -13435,17 +12745,6 @@
         }
       }
     },
-    "sirv": {
-      "version": "1.0.19",
-      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
-      "integrity": "sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==",
-      "dev": true,
-      "requires": {
-        "@polka/url": "^1.0.0-next.20",
-        "mrmime": "^1.0.0",
-        "totalist": "^1.0.0"
-      }
-    },
     "sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -13828,45 +13127,6 @@
         "readable-stream": "^2.0.1"
       }
     },
-    "stream-browserify": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
-      "integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==",
-      "dev": true,
-      "requires": {
-        "inherits": "~2.0.1",
-        "readable-stream": "^2.0.2"
-      }
-    },
-    "stream-each": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
-      "integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==",
-      "dev": true,
-      "requires": {
-        "end-of-stream": "^1.1.0",
-        "stream-shift": "^1.0.0"
-      }
-    },
-    "stream-http": {
-      "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz",
-      "integrity": "sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==",
-      "dev": true,
-      "requires": {
-        "builtin-status-codes": "^3.0.0",
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.3.6",
-        "to-arraybuffer": "^1.0.0",
-        "xtend": "^4.0.0"
-      }
-    },
-    "stream-shift": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
-      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==",
-      "dev": true
-    },
     "string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -13895,38 +13155,12 @@
       }
     },
     "string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
       "requires": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-        },
-        "emoji-regex": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-        },
-        "is-fullwidth-code-point": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
-        },
-        "strip-ansi": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-          "requires": {
-            "ansi-regex": "^5.0.1"
-          }
-        }
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^4.0.0"
       }
     },
     "string.prototype.matchall": {
@@ -14319,25 +13553,6 @@
         "supports-hyperlinks": "^2.0.0"
       }
     },
-    "terser": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
-      "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
-      "dev": true,
-      "requires": {
-        "commander": "^2.20.0",
-        "source-map": "~0.6.1",
-        "source-map-support": "~0.5.12"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-          "dev": true
-        }
-      }
-    },
     "terser-webpack-plugin": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-4.2.3.tgz",
@@ -14356,9 +13571,9 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "8.8.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
-          "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
+          "version": "8.7.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
+          "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
           "dev": true
         },
         "commander": {
@@ -14474,15 +13689,23 @@
           "dev": true
         },
         "terser": {
-          "version": "5.15.0",
-          "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.0.tgz",
-          "integrity": "sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==",
+          "version": "5.12.0",
+          "resolved": "https://registry.npmjs.org/terser/-/terser-5.12.0.tgz",
+          "integrity": "sha512-R3AUhNBGWiFc77HXag+1fXpAxTAFRQTJemlJKjAgD9r8xXTpjNKqIXwHM/o7Rh+O0kUJtS3WQVdBeMKFk5sw9A==",
           "dev": true,
           "requires": {
-            "@jridgewell/source-map": "^0.3.2",
             "acorn": "^8.5.0",
             "commander": "^2.20.0",
+            "source-map": "~0.7.2",
             "source-map-support": "~0.5.20"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.7.3",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+              "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+              "dev": true
+            }
           }
         }
       }
@@ -14510,31 +13733,12 @@
       "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
       "dev": true
     },
-    "through2": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
-      "dev": true,
-      "requires": {
-        "readable-stream": "~2.3.6",
-        "xtend": "~4.0.1"
-      }
-    },
     "thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
-    "timers-browserify": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
-      "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
-      "dev": true,
-      "requires": {
-        "setimmediate": "^1.0.4"
-      }
-    },
     "timsort": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
@@ -14555,12 +13759,6 @@
       "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
       "dev": true
     },
-    "to-arraybuffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
-      "integrity": "sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA==",
-      "dev": true
-    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -14614,11 +13812,10 @@
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
       "dev": true
     },
-    "totalist": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
-      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
-      "dev": true
+    "toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
     },
     "tough-cookie": {
       "version": "2.5.0",
@@ -14651,6 +13848,12 @@
         "glob": "^7.1.2"
       }
     },
+    "tryer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
+      "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
+      "dev": true
+    },
     "ts-jest": {
       "version": "26.5.6",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-26.5.6.tgz",
@@ -14792,12 +13995,6 @@
         }
       }
     },
-    "tty-browserify": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
-      "integrity": "sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw==",
-      "dev": true
-    },
     "tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -14848,12 +14045,6 @@
         "mime-types": "~2.1.24"
       }
     },
-    "typedarray": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
-      "dev": true
-    },
     "typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -14863,6 +14054,11 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "typesafe-actions": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/typesafe-actions/-/typesafe-actions-4.4.2.tgz",
+      "integrity": "sha512-QW61P4cOX8dCNmrfpcUMjvU/MF/sFTC8/PlG9215W1gKDzZUBjRGdyYSO6ZcEUNsn491S2VpryJOHSIVSDqJrg=="
+    },
     "typescript": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.2.tgz",
@@ -15065,23 +14261,6 @@
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
       "dev": true
     },
-    "util": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
-      "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
-      "dev": true,
-      "requires": {
-        "inherits": "2.0.3"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
-          "dev": true
-        }
-      }
-    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -15179,12 +14358,6 @@
         }
       }
     },
-    "vm-browserify": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
-      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
-      "dev": true
-    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -15221,465 +14394,264 @@
       }
     },
     "watchpack": {
-      "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
-      "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
+      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
       "dev": true,
       "requires": {
-        "chokidar": "^3.4.1",
-        "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0",
-        "watchpack-chokidar2": "^2.0.1"
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
       }
     },
-    "watchpack-chokidar2": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz",
-      "integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==",
+    "wbuf": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
+      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
       "dev": true,
-      "optional": true,
       "requires": {
-        "chokidar": "^2.1.8"
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "webidl-conversions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
+      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
+      "dev": true
+    },
+    "webpack": {
+      "version": "5.74.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
+      "integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
+      "dev": true,
+      "requires": {
+        "@types/eslint-scope": "^3.7.3",
+        "@types/estree": "^0.0.51",
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/wasm-edit": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1",
+        "acorn": "^8.7.1",
+        "acorn-import-assertions": "^1.7.6",
+        "browserslist": "^4.14.5",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.10.0",
+        "es-module-lexer": "^0.9.0",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.9",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.2.0",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.1.0",
+        "tapable": "^2.1.1",
+        "terser-webpack-plugin": "^5.1.3",
+        "watchpack": "^2.4.0",
+        "webpack-sources": "^3.2.3"
       },
       "dependencies": {
-        "anymatch": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
-          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+        "@jridgewell/trace-mapping": {
+          "version": "0.3.14",
+          "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+          "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
           "dev": true,
-          "optional": true,
           "requires": {
-            "micromatch": "^3.1.4",
-            "normalize-path": "^2.1.1"
-          },
-          "dependencies": {
-            "normalize-path": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-              "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "remove-trailing-separator": "^1.0.1"
-              }
-            }
+            "@jridgewell/resolve-uri": "^3.0.3",
+            "@jridgewell/sourcemap-codec": "^1.4.10"
           }
         },
-        "binary-extensions": {
-          "version": "1.13.1",
-          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
-          "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
-          "dev": true,
-          "optional": true
+        "acorn": {
+          "version": "8.8.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+          "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
+          "dev": true
         },
-        "braces": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        },
+        "enhanced-resolve": {
+          "version": "5.10.0",
+          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
+          "integrity": "sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==",
           "dev": true,
-          "optional": true,
           "requires": {
-            "arr-flatten": "^1.1.0",
-            "array-unique": "^0.3.2",
-            "extend-shallow": "^2.0.1",
-            "fill-range": "^4.0.0",
-            "isobject": "^3.0.1",
-            "repeat-element": "^1.1.2",
-            "snapdragon": "^0.8.1",
-            "snapdragon-node": "^2.0.1",
-            "split-string": "^3.0.2",
-            "to-regex": "^3.0.1"
-          },
-          "dependencies": {
-            "extend-shallow": {
-              "version": "2.0.1",
-              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "is-extendable": "^0.1.0"
-              }
-            }
+            "graceful-fs": "^4.2.4",
+            "tapable": "^2.2.0"
           }
         },
-        "chokidar": {
-          "version": "2.1.8",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
-          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
+        "jest-worker": {
+          "version": "27.5.1",
+          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+          "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
           "dev": true,
-          "optional": true,
           "requires": {
-            "anymatch": "^2.0.0",
-            "async-each": "^1.0.1",
-            "braces": "^2.3.2",
-            "fsevents": "^1.2.7",
-            "glob-parent": "^3.1.0",
-            "inherits": "^2.0.3",
-            "is-binary-path": "^1.0.0",
-            "is-glob": "^4.0.0",
-            "normalize-path": "^3.0.0",
-            "path-is-absolute": "^1.0.0",
-            "readdirp": "^2.2.1",
-            "upath": "^1.1.1"
+            "@types/node": "*",
+            "merge-stream": "^2.0.0",
+            "supports-color": "^8.0.0"
           }
         },
-        "fill-range": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
           "dev": true,
-          "optional": true,
           "requires": {
-            "extend-shallow": "^2.0.1",
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1",
-            "to-regex-range": "^2.1.0"
-          },
-          "dependencies": {
-            "extend-shallow": {
-              "version": "2.0.1",
-              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "is-extendable": "^0.1.0"
-              }
-            }
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
           }
         },
-        "fsevents": {
-          "version": "1.2.13",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+        "serialize-javascript": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
+          "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
           "dev": true,
-          "optional": true,
           "requires": {
-            "bindings": "^1.5.0",
-            "nan": "^2.12.1"
+            "randombytes": "^2.1.0"
           }
         },
-        "glob-parent": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+        "supports-color": {
+          "version": "8.1.1",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
           "dev": true,
-          "optional": true,
           "requires": {
-            "is-glob": "^3.1.0",
-            "path-dirname": "^1.0.0"
-          },
-          "dependencies": {
-            "is-glob": {
-              "version": "3.1.0",
-              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "is-extglob": "^2.1.0"
-              }
-            }
+            "has-flag": "^4.0.0"
           }
         },
-        "is-binary-path": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-          "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+        "tapable": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+          "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+          "dev": true
+        },
+        "terser": {
+          "version": "5.14.2",
+          "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+          "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
           "dev": true,
-          "optional": true,
           "requires": {
-            "binary-extensions": "^1.0.0"
-          }
-        },
-        "is-number": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "kind-of": "^3.0.2"
-          },
-          "dependencies": {
-            "kind-of": {
-              "version": "3.2.2",
-              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "is-buffer": "^1.1.5"
-              }
-            }
-          }
-        },
-        "micromatch": {
-          "version": "3.1.10",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "arr-diff": "^4.0.0",
-            "array-unique": "^0.3.2",
-            "braces": "^2.3.1",
-            "define-property": "^2.0.2",
-            "extend-shallow": "^3.0.2",
-            "extglob": "^2.0.4",
-            "fragment-cache": "^0.2.1",
-            "kind-of": "^6.0.2",
-            "nanomatch": "^1.2.9",
-            "object.pick": "^1.3.0",
-            "regex-not": "^1.0.0",
-            "snapdragon": "^0.8.1",
-            "to-regex": "^3.0.2"
+            "@jridgewell/source-map": "^0.3.2",
+            "acorn": "^8.5.0",
+            "commander": "^2.20.0",
+            "source-map-support": "~0.5.20"
           }
         },
-        "readdirp": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
-          "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+        "terser-webpack-plugin": {
+          "version": "5.3.3",
+          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.3.tgz",
+          "integrity": "sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ==",
           "dev": true,
-          "optional": true,
           "requires": {
-            "graceful-fs": "^4.1.11",
-            "micromatch": "^3.1.10",
-            "readable-stream": "^2.0.2"
+            "@jridgewell/trace-mapping": "^0.3.7",
+            "jest-worker": "^27.4.5",
+            "schema-utils": "^3.1.1",
+            "serialize-javascript": "^6.0.0",
+            "terser": "^5.7.2"
           }
         },
-        "to-regex-range": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1"
-          }
+        "webpack-sources": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+          "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+          "dev": true
         }
       }
     },
-    "wbuf": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
-      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
+    "webpack-bundle-analyzer": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.9.0.tgz",
+      "integrity": "sha512-Ob8amZfCm3rMB1ScjQVlbYYUEJyEjdEtQ92jqiFUYt5VkEeO2v5UMbv49P/gnmCZm3A6yaFQzCBvpZqN4MUsdA==",
       "dev": true,
       "requires": {
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
-    "webidl-conversions": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
-      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
-      "dev": true
-    },
-    "webpack": {
-      "version": "4.44.2",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.2.tgz",
-      "integrity": "sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/helper-module-context": "1.9.0",
-        "@webassemblyjs/wasm-edit": "1.9.0",
-        "@webassemblyjs/wasm-parser": "1.9.0",
-        "acorn": "^6.4.1",
-        "ajv": "^6.10.2",
-        "ajv-keywords": "^3.4.1",
-        "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^4.3.0",
-        "eslint-scope": "^4.0.3",
-        "json-parse-better-errors": "^1.0.2",
-        "loader-runner": "^2.4.0",
-        "loader-utils": "^1.2.3",
-        "memory-fs": "^0.4.1",
-        "micromatch": "^3.1.10",
-        "mkdirp": "^0.5.3",
-        "neo-async": "^2.6.1",
-        "node-libs-browser": "^2.2.1",
-        "schema-utils": "^1.0.0",
-        "tapable": "^1.1.3",
-        "terser-webpack-plugin": "^1.4.3",
-        "watchpack": "^1.7.4",
-        "webpack-sources": "^1.4.1"
+        "acorn": "^7.1.1",
+        "acorn-walk": "^7.1.1",
+        "bfj": "^6.1.1",
+        "chalk": "^2.4.1",
+        "commander": "^2.18.0",
+        "ejs": "^2.6.1",
+        "express": "^4.16.3",
+        "filesize": "^3.6.1",
+        "gzip-size": "^5.0.0",
+        "lodash": "^4.17.19",
+        "mkdirp": "^0.5.1",
+        "opener": "^1.5.1",
+        "ws": "^6.0.0"
       },
       "dependencies": {
-        "acorn": {
-          "version": "6.4.2",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
-          "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
-          "dev": true
-        },
-        "braces": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
           "dev": true,
           "requires": {
-            "arr-flatten": "^1.1.0",
-            "array-unique": "^0.3.2",
-            "extend-shallow": "^2.0.1",
-            "fill-range": "^4.0.0",
-            "isobject": "^3.0.1",
-            "repeat-element": "^1.1.2",
-            "snapdragon": "^0.8.1",
-            "snapdragon-node": "^2.0.1",
-            "split-string": "^3.0.2",
-            "to-regex": "^3.0.1"
-          },
-          "dependencies": {
-            "extend-shallow": {
-              "version": "2.0.1",
-              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
-              "requires": {
-                "is-extendable": "^0.1.0"
-              }
-            }
+            "color-convert": "^1.9.0"
           }
         },
-        "cacache": {
-          "version": "12.0.4",
-          "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
-          "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
+        "bfj": {
+          "version": "6.1.2",
+          "resolved": "https://registry.npmjs.org/bfj/-/bfj-6.1.2.tgz",
+          "integrity": "sha512-BmBJa4Lip6BPRINSZ0BPEIfB1wUY/9rwbwvIHQA1KjX9om29B6id0wnWXq7m3bn5JrUVjeOTnVuhPT1FiHwPGw==",
           "dev": true,
           "requires": {
             "bluebird": "^3.5.5",
-            "chownr": "^1.1.1",
-            "figgy-pudding": "^3.5.1",
-            "glob": "^7.1.4",
-            "graceful-fs": "^4.1.15",
-            "infer-owner": "^1.0.3",
-            "lru-cache": "^5.1.1",
-            "mississippi": "^3.0.0",
-            "mkdirp": "^0.5.1",
-            "move-concurrently": "^1.0.1",
-            "promise-inflight": "^1.0.1",
-            "rimraf": "^2.6.3",
-            "ssri": "^6.0.1",
-            "unique-filename": "^1.1.1",
-            "y18n": "^4.0.0"
-          }
-        },
-        "chownr": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-          "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-          "dev": true
-        },
-        "eslint-scope": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
-          "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
-          "dev": true,
-          "requires": {
-            "esrecurse": "^4.1.0",
-            "estraverse": "^4.1.1"
+            "check-types": "^8.0.3",
+            "hoopy": "^0.1.4",
+            "tryer": "^1.0.1"
           }
         },
-        "fill-range": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-          "dev": true,
-          "requires": {
-            "extend-shallow": "^2.0.1",
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1",
-            "to-regex-range": "^2.1.0"
-          },
-          "dependencies": {
-            "extend-shallow": {
-              "version": "2.0.1",
-              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
-              "requires": {
-                "is-extendable": "^0.1.0"
-              }
-            }
-          }
-        },
-        "is-number": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
           "dev": true,
           "requires": {
-            "kind-of": "^3.0.2"
-          },
-          "dependencies": {
-            "kind-of": {
-              "version": "3.2.2",
-              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "dev": true,
-              "requires": {
-                "is-buffer": "^1.1.5"
-              }
-            }
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
           }
         },
-        "is-wsl": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-          "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
+        "check-types": {
+          "version": "8.0.3",
+          "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
+          "integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==",
           "dev": true
         },
-        "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
           "dev": true,
           "requires": {
-            "minimist": "^1.2.0"
+            "color-name": "1.1.3"
           }
         },
-        "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
         },
-        "lru-cache": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-          "dev": true,
-          "requires": {
-            "yallist": "^3.0.2"
-          }
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
         },
-        "micromatch": {
-          "version": "3.1.10",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-          "dev": true,
-          "requires": {
-            "arr-diff": "^4.0.0",
-            "array-unique": "^0.3.2",
-            "braces": "^2.3.1",
-            "define-property": "^2.0.2",
-            "extend-shallow": "^3.0.2",
-            "extglob": "^2.0.4",
-            "fragment-cache": "^0.2.1",
-            "kind-of": "^6.0.2",
-            "nanomatch": "^1.2.9",
-            "object.pick": "^1.3.0",
-            "regex-not": "^1.0.0",
-            "snapdragon": "^0.8.1",
-            "to-regex": "^3.0.2"
-          }
+        "filesize": {
+          "version": "3.6.1",
+          "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
+          "integrity": "sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
         },
         "mkdirp": {
           "version": "0.5.5",
@@ -15690,129 +14662,23 @@
             "minimist": "^1.2.5"
           }
         },
-        "rimraf": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        },
-        "schema-utils": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
-          "dev": true,
-          "requires": {
-            "ajv": "^6.1.0",
-            "ajv-errors": "^1.0.0",
-            "ajv-keywords": "^3.1.0"
-          }
-        },
-        "serialize-javascript": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
-          "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
-          "dev": true,
-          "requires": {
-            "randombytes": "^2.1.0"
-          }
-        },
-        "ssri": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
-          "integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
-          "dev": true,
-          "requires": {
-            "figgy-pudding": "^3.5.1"
-          }
-        },
-        "terser-webpack-plugin": {
-          "version": "1.4.5",
-          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-          "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
-          "dev": true,
-          "requires": {
-            "cacache": "^12.0.2",
-            "find-cache-dir": "^2.1.0",
-            "is-wsl": "^1.1.0",
-            "schema-utils": "^1.0.0",
-            "serialize-javascript": "^4.0.0",
-            "source-map": "^0.6.1",
-            "terser": "^4.1.2",
-            "webpack-sources": "^1.4.0",
-            "worker-farm": "^1.7.0"
-          }
-        },
-        "to-regex-range": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
           "dev": true,
           "requires": {
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1"
+            "has-flag": "^3.0.0"
           }
         },
-        "y18n": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-          "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
-          "dev": true
-        },
-        "yallist": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-          "dev": true
-        }
-      }
-    },
-    "webpack-bundle-analyzer": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.6.1.tgz",
-      "integrity": "sha512-oKz9Oz9j3rUciLNfpGFjOb49/jEpXNmWdVH8Ls//zNcnLlQdTGXQQMsBbb/gR7Zl8WNLxVCq+0Hqbx3zv6twBw==",
-      "dev": true,
-      "requires": {
-        "acorn": "^8.0.4",
-        "acorn-walk": "^8.0.0",
-        "chalk": "^4.1.0",
-        "commander": "^7.2.0",
-        "gzip-size": "^6.0.0",
-        "lodash": "^4.17.20",
-        "opener": "^1.5.2",
-        "sirv": "^1.0.7",
-        "ws": "^7.3.1"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "8.8.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
-          "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
-          "dev": true
-        },
-        "acorn-walk": {
-          "version": "8.2.0",
-          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
-          "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
-          "dev": true
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+        "ws": {
+          "version": "6.2.2",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
+          "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
           "dev": true,
           "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
+            "async-limiter": "~1.0.0"
           }
-        },
-        "commander": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-          "dev": true
         }
       }
     },
@@ -16408,12 +15274,6 @@
                 "ms": "^2.1.1"
               }
             },
-            "eventsource": {
-              "version": "1.1.2",
-              "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.2.tgz",
-              "integrity": "sha512-xAH3zWhgO2/3KIniEKYPr8plNSzlGINOUqYj0m0u7AB81iRw8b/3E73W6AuU+6klLbaSFmZnaETQ2lXPfAydrA==",
-              "dev": true
-            },
             "faye-websocket": {
               "version": "0.11.4",
               "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
@@ -16679,15 +15539,6 @@
       "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
       "dev": true
     },
-    "worker-farm": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
-      "integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
-      "dev": true,
-      "requires": {
-        "errno": "~0.1.7"
-      }
-    },
     "wrap-ansi": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
@@ -16765,12 +15616,6 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true
     },
-    "xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true
-    },
     "y18n": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.2.tgz",
@@ -16781,6 +15626,11 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
     },
+    "yaml": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.3.tgz",
+      "integrity": "sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg=="
+    },
     "yargs": {
       "version": "10.1.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-10.1.2.tgz",
@@ -16798,17 +15648,6 @@
         "which-module": "^2.0.0",
         "y18n": "^3.2.1",
         "yargs-parser": "^8.1.0"
-      },
-      "dependencies": {
-        "string-width": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-          "requires": {
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^4.0.0"
-          }
-        }
       }
     },
     "yargs-parser": {
@@ -16824,6 +15663,20 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "yup": {
+      "version": "0.32.11",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
+      "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
+      "requires": {
+        "@babel/runtime": "^7.15.4",
+        "@types/lodash": "^4.14.175",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index a73cc24335..7b330ada80 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,6 +36,8 @@
     "test:type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@openshift/dynamic-plugin-sdk": "^1.0.0-alpha12",
+    "@openshift/dynamic-plugin-sdk-utils": "^1.0.0-alpha17",
     "@patternfly/patternfly": "4.215.1",
     "@patternfly/quickstarts": "^2.3.1",
     "@patternfly/react-catalog-view-extension": "4.90.0",
@@ -43,6 +45,7 @@
     "@patternfly/react-icons": "4.90.0",
     "@patternfly/react-styles": "4.89.0",
     "@patternfly/react-table": "4.108.0",
+    "@patternfly/react-virtualized-extension": "^4.71.1",
     "@types/classnames": "^2.3.1",
     "axios": "^0.21.1",
     "classnames": "^2.2.6",
@@ -59,7 +62,8 @@
     "react-router-dom": "^6.4.1",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
-    "showdown": "^1.9.1"
+    "showdown": "^1.9.1",
+    "yaml": "^2.1.3"
   },
   "devDependencies": {
     "@testing-library/dom": "^8.13.0",
@@ -83,7 +87,7 @@
     "eslint-plugin-react": "^7.21.4",
     "eslint-plugin-react-hooks": "^4.1.2",
     "file-loader": "^6.1.1",
-    "html-webpack-plugin": "^4.5.0",
+    "html-webpack-plugin": "^5.5.0",
     "imagemin": "^7.0.0",
     "jest": "^26.6.0",
     "js-yaml-loader": "^1.2.2",
@@ -107,8 +111,8 @@
     "tslib": "^2.0.3",
     "typescript": "^4.0.3",
     "url-loader": "^4.1.1",
-    "webpack": "4.44.2",
-    "webpack-bundle-analyzer": "^4.6.1",
+    "webpack": "^5.74.0",
+    "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^4.2.0",
     "webpack-dev-server": "3.11.0",
     "webpack-merge": "^5.2.0"
diff --git a/frontend/src/SDKInitialize.tsx b/frontend/src/SDKInitialize.tsx
new file mode 100644
index 0000000000..b92819355e
--- /dev/null
+++ b/frontend/src/SDKInitialize.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { AppInitSDK, isUtilsConfigSet } from '@openshift/dynamic-plugin-sdk-utils';
+import { PluginLoader, PluginStore } from '@openshift/dynamic-plugin-sdk';
+import { Bullseye, Spinner } from '@patternfly/react-core';
+
+const config: React.ComponentProps<typeof AppInitSDK>['configurations'] = {
+  appFetch: (url, options) => {
+    // Using fetch instead of axios because of internal SDK structures that needs to use `response.text`
+    return fetch(`/api/k8s${url}`, options);
+  },
+
+  /** Disable api discovery -- until we need to use the k8s watch hooks, we don't need to use api discovery */
+  apiDiscovery: () => null,
+  /** We don't need a plugin store yet -- we just want the SDK setup for utilities right now */
+  pluginStore: (() => {
+    const pluginStore = new PluginStore();
+    pluginStore.setLoader(new PluginLoader());
+    return pluginStore;
+  })(),
+  /**
+   * No need for web sockets at this point -- we'll need to support this if we want to use the
+   * websocket utilities or the k8s watch hooks.
+   */
+  wsAppSettings: () => Promise.resolve({ host: '', subProtocols: [] }),
+};
+
+const SDKInitialize: React.FC = ({ children }) => {
+  // hack to make sure the SDK has fully loaded before we try to render the app
+  // TODO: Figure out what's going on in the SDK
+  const [ready, setReady] = React.useState(false);
+  React.useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (isUtilsConfigSet()) {
+        setReady(true);
+        clearInterval(intervalId);
+      }
+    }, 1000);
+  }, []);
+
+  return (
+    <AppInitSDK configurations={config}>
+      {ready ? (
+        children
+      ) : (
+        <Bullseye>
+          <Spinner />
+        </Bullseye>
+      )}
+    </AppInitSDK>
+  );
+};
+
+export default SDKInitialize;
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
new file mode 100644
index 0000000000..c937fc4541
--- /dev/null
+++ b/frontend/src/api/index.ts
@@ -0,0 +1,15 @@
+// Normal SDK/pass-through network API calls
+export * from './network/builds';
+export * from './network/configMaps';
+export * from './network/events';
+export * from './network/imageStreams';
+export * from './network/notebooks';
+export * from './network/pods';
+export * from './network/projects';
+export * from './network/pvcs';
+export * from './network/roleBindings';
+export * from './network/routes';
+export * from './network/secrets';
+
+// Prometheus queries
+export * from './prometheus/pvcs';
diff --git a/frontend/src/api/models/index.ts b/frontend/src/api/models/index.ts
new file mode 100644
index 0000000000..452ca48278
--- /dev/null
+++ b/frontend/src/api/models/index.ts
@@ -0,0 +1,3 @@
+export * from './k8s';
+export * from './odh';
+export * from './openShift';
diff --git a/frontend/src/api/models/k8s.ts b/frontend/src/api/models/k8s.ts
new file mode 100644
index 0000000000..99572b9595
--- /dev/null
+++ b/frontend/src/api/models/k8s.ts
@@ -0,0 +1,38 @@
+import { K8sModelCommon } from '@openshift/dynamic-plugin-sdk-utils';
+
+export const ConfigMapModel: K8sModelCommon = {
+  apiVersion: 'v1',
+  kind: 'ConfigMap',
+  plural: 'configmaps',
+};
+
+export const EventModel: K8sModelCommon = {
+  apiVersion: 'v1',
+  kind: 'Event',
+  plural: 'events',
+};
+
+export const PodModel: K8sModelCommon = {
+  apiVersion: 'v1',
+  kind: 'Pod',
+  plural: 'pods',
+};
+
+export const PVCModel: K8sModelCommon = {
+  apiVersion: 'v1',
+  kind: 'PersistentVolumeClaim',
+  plural: 'persistentvolumeclaims',
+};
+
+export const RoleBindingModel: K8sModelCommon = {
+  apiVersion: 'v1',
+  apiGroup: 'rbac.authorization.k8s.io',
+  kind: 'RoleBinding',
+  plural: 'rolebindings',
+};
+
+export const SecretModel: K8sModelCommon = {
+  apiVersion: 'v1',
+  kind: 'Secret',
+  plural: 'secrets',
+};
diff --git a/frontend/src/api/models/odh.ts b/frontend/src/api/models/odh.ts
new file mode 100644
index 0000000000..c6e1eeae39
--- /dev/null
+++ b/frontend/src/api/models/odh.ts
@@ -0,0 +1,15 @@
+import { K8sModelCommon } from '@openshift/dynamic-plugin-sdk-utils';
+
+export const ODHDashboardConfigModel: K8sModelCommon = {
+  apiVersion: 'v1alpha',
+  apiGroup: 'opendatahub.io',
+  kind: 'ODHDashboardConfig',
+  plural: 'odhdashboardconfigs',
+};
+
+export const NotebookModel: K8sModelCommon = {
+  apiVersion: 'v1',
+  apiGroup: 'kubeflow.org',
+  kind: 'Notebook',
+  plural: 'notebooks',
+};
diff --git a/frontend/src/api/models/openShift.ts b/frontend/src/api/models/openShift.ts
new file mode 100644
index 0000000000..222f5ee02b
--- /dev/null
+++ b/frontend/src/api/models/openShift.ts
@@ -0,0 +1,36 @@
+import { K8sModelCommon } from '@openshift/dynamic-plugin-sdk-utils';
+
+export const BuildConfigModel: K8sModelCommon = {
+  apiVersion: 'v1',
+  apiGroup: 'build.openshift.io',
+  kind: 'BuildConfig',
+  plural: 'buildconfigs',
+};
+
+export const BuildModel: K8sModelCommon = {
+  apiVersion: 'v1',
+  apiGroup: 'build.openshift.io',
+  kind: 'Build',
+  plural: 'builds',
+};
+
+export const ImageStreamModel: K8sModelCommon = {
+  apiVersion: 'v1',
+  apiGroup: 'image.openshift.io',
+  kind: 'ImageStream',
+  plural: 'imagestreams',
+};
+
+export const ProjectModel: K8sModelCommon = {
+  apiVersion: 'v1',
+  apiGroup: 'project.openshift.io',
+  kind: 'Project',
+  plural: 'projects',
+};
+
+export const RouteModel: K8sModelCommon = {
+  apiVersion: 'v1',
+  apiGroup: 'route.openshift.io',
+  kind: 'Route',
+  plural: 'routes',
+};
diff --git a/frontend/src/api/network/builds.ts b/frontend/src/api/network/builds.ts
new file mode 100644
index 0000000000..2b784137d0
--- /dev/null
+++ b/frontend/src/api/network/builds.ts
@@ -0,0 +1,23 @@
+import { k8sListResource } from '@openshift/dynamic-plugin-sdk-utils';
+import { BuildConfigModel, BuildModel } from '../models';
+import { BuildConfigKind, BuildKind } from '../../k8sTypes';
+
+export const getNotebookBuildConfigs = (namespace: string): Promise<BuildConfigKind[]> => {
+  return k8sListResource<BuildConfigKind>({
+    model: BuildConfigModel,
+    queryOptions: {
+      ns: namespace,
+      queryParams: { labelSelector: 'opendatahub.io/build_type=notebook_image' },
+    },
+  }).then((r) => r.items);
+};
+
+export const getBuildsForBuildConfig = (namespace: string, name: string): Promise<BuildKind[]> => {
+  return k8sListResource<BuildKind>({
+    model: BuildModel,
+    queryOptions: {
+      ns: namespace,
+      queryParams: { labelSelector: `buildconfig=${name}` },
+    },
+  }).then((r) => r.items);
+};
diff --git a/frontend/src/api/network/configMaps.ts b/frontend/src/api/network/configMaps.ts
new file mode 100644
index 0000000000..c06f835566
--- /dev/null
+++ b/frontend/src/api/network/configMaps.ts
@@ -0,0 +1,51 @@
+import {
+  k8sCreateResource,
+  k8sDeleteResource,
+  k8sGetResource,
+  k8sUpdateResource,
+} from '@openshift/dynamic-plugin-sdk-utils';
+import { ConfigMapKind, K8sStatus } from '../../k8sTypes';
+import { ConfigMapModel } from '../models';
+import { genRandomChars } from '../../utilities/string';
+
+export const assembleConfigMap = (
+  projectName: string,
+  configMapData: Record<string, string>,
+  configMapName?: string,
+): ConfigMapKind => ({
+  apiVersion: 'v1',
+  kind: 'ConfigMap',
+  metadata: {
+    name: configMapName || `configmap-${genRandomChars()}`,
+    namespace: projectName,
+    labels: {
+      'opendatahub.io/dashboard': 'true',
+    },
+  },
+  data: configMapData,
+});
+
+export const getConfigMap = (
+  projectName: string,
+  configMapName: string,
+): Promise<ConfigMapKind> => {
+  return k8sGetResource<ConfigMapKind>({
+    model: ConfigMapModel,
+    queryOptions: { name: configMapName, ns: projectName },
+  });
+};
+
+export const createConfigMap = (data: ConfigMapKind): Promise<ConfigMapKind> => {
+  return k8sCreateResource<ConfigMapKind>({ model: ConfigMapModel, resource: data });
+};
+
+export const replaceConfigMap = (data: ConfigMapKind): Promise<ConfigMapKind> => {
+  return k8sUpdateResource<ConfigMapKind>({ model: ConfigMapModel, resource: data });
+};
+
+export const deleteConfigMap = (projectName: string, configMapName: string): Promise<K8sStatus> => {
+  return k8sDeleteResource<ConfigMapKind, K8sStatus>({
+    model: ConfigMapModel,
+    queryOptions: { name: configMapName },
+  });
+};
diff --git a/frontend/src/api/network/events.ts b/frontend/src/api/network/events.ts
new file mode 100644
index 0000000000..020f84d0c7
--- /dev/null
+++ b/frontend/src/api/network/events.ts
@@ -0,0 +1,21 @@
+import { k8sListResource } from '@openshift/dynamic-plugin-sdk-utils';
+import { EventKind } from '../../k8sTypes';
+import { EventModel } from '../models';
+
+export const getNotebookEvents = async (
+  namespace: string,
+  podUid: string,
+): Promise<EventKind[]> => {
+  return k8sListResource<EventKind>({
+    model: EventModel,
+    queryOptions: {
+      ns: namespace,
+      queryParams: {
+        fieldSelector: `involvedObject.kind=Pod,involvedObject.uid=${podUid}`,
+      },
+    },
+  }).then(
+    // Filter the events by pods that have the same name as the notebook
+    (r) => r.items,
+  );
+};
diff --git a/frontend/src/api/network/imageStreams.ts b/frontend/src/api/network/imageStreams.ts
new file mode 100644
index 0000000000..e3a13e2764
--- /dev/null
+++ b/frontend/src/api/network/imageStreams.ts
@@ -0,0 +1,13 @@
+import { k8sListResourceItems } from '@openshift/dynamic-plugin-sdk-utils';
+import { ImageStreamModel } from '../models';
+import { ImageStreamKind } from '../../k8sTypes';
+
+export const getNotebookImageStreams = (namespace: string): Promise<ImageStreamKind[]> => {
+  return k8sListResourceItems<ImageStreamKind>({
+    model: ImageStreamModel,
+    queryOptions: {
+      ns: namespace,
+      queryParams: { labelSelector: 'opendatahub.io/notebook-image=true' },
+    },
+  });
+};
diff --git a/frontend/src/api/network/notebooks.ts b/frontend/src/api/network/notebooks.ts
new file mode 100644
index 0000000000..617ba93346
--- /dev/null
+++ b/frontend/src/api/network/notebooks.ts
@@ -0,0 +1,454 @@
+import {
+  k8sCreateResource,
+  k8sDeleteResource,
+  k8sGetResource,
+  k8sListResource,
+  k8sPatchResource,
+  k8sUpdateResource,
+  Patch,
+} from '@openshift/dynamic-plugin-sdk-utils';
+import * as _ from 'lodash';
+import { NotebookModel } from '../models';
+import { K8sStatus, NotebookKind } from '../../k8sTypes';
+import {
+  NotebookAffinity,
+  NotebookResources,
+  NotebookToleration,
+  NotebookTolerationSettings,
+} from '../../types';
+import { usernameTranslate } from '../../utilities/notebookControllerUtils';
+import { EnvironmentFromVariable, StartNotebookData } from '../../pages/projects/types';
+import { ROOT_MOUNT_PATH } from '../../pages/projects/pvc/const';
+import { translateDisplayNameForK8s } from '../../pages/projects/utils';
+
+const assembleNotebookAffinityAndTolerations = (
+  resources: NotebookResources,
+  gpus: number,
+  tolerationSettings?: NotebookTolerationSettings,
+): { affinity: NotebookAffinity; tolerations: NotebookToleration[] } => {
+  let affinity: NotebookAffinity = {};
+  const tolerations: NotebookToleration[] = [];
+  if (gpus > 0) {
+    if (!resources.limits) {
+      resources.limits = {};
+    }
+    if (!resources.requests) {
+      resources.requests = {};
+    }
+    resources.limits['nvidia.com/gpu'] = gpus;
+    resources.requests['nvidia.com/gpu'] = gpus;
+    tolerations.push({
+      effect: 'NoSchedule',
+      key: 'nvidia.com/gpu',
+      operator: 'Exists',
+    });
+  } else {
+    affinity = {
+      nodeAffinity: {
+        preferredDuringSchedulingIgnoredDuringExecution: [
+          {
+            preference: {
+              matchExpressions: [
+                {
+                  key: 'nvidia.com/gpu.present',
+                  operator: 'NotIn',
+                  values: ['true'],
+                },
+              ],
+            },
+            weight: 1,
+          },
+        ],
+      },
+    };
+  }
+  if (tolerationSettings?.enabled) {
+    tolerations.push({
+      effect: 'NoSchedule',
+      key: tolerationSettings.key,
+      operator: 'Exists',
+    });
+  }
+  return { affinity, tolerations };
+};
+
+const assembleNotebook = (data: StartNotebookData, username: string): NotebookKind => {
+  const {
+    projectName,
+    notebookName,
+    notebookId: overrideNotebookId,
+    description,
+    notebookSize,
+    envFrom,
+    gpus,
+    image,
+    volumes,
+    volumeMounts,
+    tolerationSettings,
+  } = data;
+  const notebookId = overrideNotebookId || translateDisplayNameForK8s(notebookName);
+  const resources: NotebookResources = { ...notebookSize.resources };
+  const imageUrl = `${image.imageStream?.status?.dockerImageRepository}:${image.imageVersion?.name}`;
+  const imageSelection = `${image.imageStream?.metadata.name}:${image.imageVersion?.name}`;
+
+  const { affinity, tolerations } = assembleNotebookAffinityAndTolerations(
+    resources,
+    gpus,
+    tolerationSettings,
+  );
+
+  const translatedUsername = usernameTranslate(username);
+
+  const location = new URL(window.location.href);
+  const origin = location.origin;
+
+  return {
+    apiVersion: 'kubeflow.org/v1',
+    kind: 'Notebook',
+    metadata: {
+      labels: {
+        app: notebookId,
+        'opendatahub.io/odh-managed': 'true',
+        'opendatahub.io/user': translatedUsername,
+        'opendatahub.io/dashboard': 'true',
+      },
+      annotations: {
+        'openshift.io/display-name': notebookName,
+        'openshift.io/description': description || '',
+        'notebooks.opendatahub.io/oauth-logout-url': `${origin}/notebookController/${translatedUsername}/home`,
+        'notebooks.opendatahub.io/last-size-selection': notebookSize.name,
+        'notebooks.opendatahub.io/last-image-selection': imageSelection,
+        'opendatahub.io/username': username,
+      },
+      name: notebookId,
+      namespace: projectName,
+    },
+    spec: {
+      template: {
+        spec: {
+          affinity,
+          enableServiceLinks: false,
+          containers: [
+            {
+              image: imageUrl,
+              imagePullPolicy: 'Always',
+              workingDir: ROOT_MOUNT_PATH,
+              name: notebookId,
+              env: [
+                {
+                  name: 'NOTEBOOK_ARGS',
+                  value: `--ServerApp.port=8888
+                  --ServerApp.token=''
+                  --ServerApp.password=''
+                  --ServerApp.base_url=/notebook/${projectName}/${notebookId}
+                  --ServerApp.quit_button=False
+                  --ServerApp.tornado_settings={"user":"${translatedUsername}","hub_host":"${origin}","hub_prefix":"/notebookController/${translatedUsername}"}`,
+                },
+                {
+                  name: 'JUPYTER_IMAGE',
+                  value: imageUrl,
+                },
+              ],
+              envFrom,
+              resources,
+              volumeMounts,
+              ports: [
+                {
+                  name: 'notebook-port',
+                  containerPort: 8888,
+                  protocol: 'TCP',
+                },
+              ],
+              livenessProbe: {
+                initialDelaySeconds: 10,
+                periodSeconds: 5,
+                timeoutSeconds: 1,
+                successThreshold: 1,
+                failureThreshold: 3,
+                httpGet: {
+                  scheme: 'HTTP',
+                  path: `/notebook/${projectName}/${notebookId}/api`,
+                  port: 'notebook-port',
+                },
+              },
+              readinessProbe: {
+                initialDelaySeconds: 10,
+                periodSeconds: 5,
+                timeoutSeconds: 1,
+                successThreshold: 1,
+                failureThreshold: 3,
+                httpGet: {
+                  scheme: 'HTTP',
+                  path: `/notebook/${projectName}/${notebookId}/api`,
+                  port: 'notebook-port',
+                },
+              },
+            },
+          ],
+          volumes,
+          tolerations,
+        },
+      },
+    },
+  };
+};
+
+const getStopPatchDataString = (): string => new Date().toISOString().replace(/\.\d{3}Z/i, 'Z');
+
+const startPatch: Patch = {
+  op: 'remove',
+  path: '/metadata/annotations/kubeflow-resource-stopped',
+};
+const getStopPatch = (): Patch => ({
+  op: 'add',
+  path: '/metadata/annotations/kubeflow-resource-stopped',
+  value: getStopPatchDataString(),
+});
+
+export const getNotebooks = (namespace: string): Promise<NotebookKind[]> => {
+  return k8sListResource<NotebookKind>({
+    model: NotebookModel,
+    queryOptions: { ns: namespace },
+  }).then((listResource) => listResource.items);
+};
+
+export const getNotebook = (name: string, namespace: string): Promise<NotebookKind> => {
+  return k8sGetResource<NotebookKind>({
+    model: NotebookModel,
+    queryOptions: { name, ns: namespace },
+  });
+};
+
+export const stopNotebook = (name: string, namespace: string): Promise<NotebookKind> => {
+  return k8sPatchResource<NotebookKind>({
+    model: NotebookModel,
+    queryOptions: { name, ns: namespace },
+    patches: [getStopPatch()],
+  });
+};
+
+export const startNotebook = (name: string, namespace: string): Promise<NotebookKind> => {
+  return k8sPatchResource<NotebookKind>({
+    model: NotebookModel,
+    queryOptions: { name, ns: namespace },
+    patches: [startPatch],
+  });
+};
+
+export const createNotebook = (
+  data: StartNotebookData,
+  username: string,
+): Promise<NotebookKind> => {
+  const notebook = assembleNotebook(data, username);
+
+  return k8sCreateResource<NotebookKind>({
+    model: NotebookModel,
+    resource: notebook,
+  });
+};
+
+export const updateNotebook = (
+  existingNotebook: NotebookKind,
+  data: StartNotebookData,
+  username: string,
+): Promise<NotebookKind> => {
+  data.notebookId = existingNotebook.metadata.name;
+  const notebook = assembleNotebook(data, username);
+
+  return k8sUpdateResource<NotebookKind>({
+    model: NotebookModel,
+    resource: _.merge({}, existingNotebook, notebook),
+  });
+};
+
+export const createNotebookWithoutStarting = (
+  data: StartNotebookData,
+  username: string,
+): Promise<NotebookKind> => {
+  return new Promise((resolve, reject) =>
+    createNotebook(data, username).then((notebook) =>
+      setTimeout(
+        () =>
+          stopNotebook(notebook.metadata.name, notebook.metadata.namespace)
+            .then(resolve)
+            .catch(reject),
+        10_000,
+      ),
+    ),
+  );
+};
+
+export const deleteNotebook = (notebookName: string, namespace: string): Promise<K8sStatus> => {
+  return k8sDeleteResource<NotebookKind, K8sStatus>({
+    model: NotebookModel,
+    queryOptions: { name: notebookName, ns: namespace },
+  });
+};
+
+export const attachNotebookSecret = (
+  notebookName: string,
+  namespace: string,
+  secretName: string,
+  hasExistingEnvFrom: boolean,
+): Promise<NotebookKind> => {
+  const patches: Patch[] = [];
+
+  if (!hasExistingEnvFrom) {
+    // Create the array if it does not exist
+    patches.push({
+      op: 'add',
+      // TODO: can we assume first container?
+      path: '/spec/template/spec/containers/0/envFrom',
+      value: [],
+    });
+  }
+
+  patches.push({
+    op: 'add',
+    // TODO: can we assume first container?
+    path: '/spec/template/spec/containers/0/envFrom/-',
+    value: {
+      secretRef: {
+        name: secretName,
+      },
+    },
+  });
+
+  return k8sPatchResource<NotebookKind>({
+    model: NotebookModel,
+    queryOptions: { name: notebookName, ns: namespace },
+    patches,
+  });
+};
+
+export const replaceNotebookSecret = (
+  notebookName: string,
+  namespace: string,
+  newEnvs: EnvironmentFromVariable[],
+): Promise<NotebookKind> => {
+  const patches: Patch[] = [
+    {
+      op: 'replace',
+      // TODO: can we assume first container?
+      path: '/spec/template/spec/containers/0/envFrom',
+      value: newEnvs,
+    },
+  ];
+
+  return k8sPatchResource<NotebookKind>({
+    model: NotebookModel,
+    queryOptions: { name: notebookName, ns: namespace },
+    patches,
+  });
+};
+
+export const attachNotebookPVC = (
+  notebookName: string,
+  namespace: string,
+  pvcName: string,
+  mountSuffix: string,
+): Promise<NotebookKind> => {
+  const patches: Patch[] = [
+    {
+      op: 'add',
+      path: '/spec/template/spec/volumes/-',
+      value: { name: pvcName, persistentVolumeClaim: { claimName: pvcName } },
+    },
+    {
+      op: 'add',
+      // TODO: can we assume first container?
+      path: '/spec/template/spec/containers/0/volumeMounts/-',
+      value: { mountPath: `${ROOT_MOUNT_PATH}/${mountSuffix}`, name: pvcName },
+    },
+  ];
+
+  return k8sPatchResource<NotebookKind>({
+    model: NotebookModel,
+    queryOptions: { name: notebookName, ns: namespace },
+    patches,
+  });
+};
+
+export const removeNotebookPVC = (
+  notebookName: string,
+  namespace: string,
+  pvcName: string,
+): Promise<NotebookKind> => {
+  return new Promise((resolve, reject) => {
+    getNotebook(notebookName, namespace)
+      .then((notebook) => {
+        const volumes = notebook.spec.template.spec.volumes || [];
+        // TODO: can we assume first container?
+        const volumeMounts = notebook.spec.template.spec.containers[0].volumeMounts || [];
+        const filteredVolumes = volumes.filter(
+          (volume) => volume.persistentVolumeClaim?.claimName !== pvcName,
+        );
+        const filteredVolumeMounts = volumeMounts.filter(
+          (volumeMount) => volumeMount.name !== pvcName,
+        );
+
+        const patches: Patch[] = [
+          {
+            op: 'replace',
+            path: '/spec/template/spec/volumes',
+            value:
+              filteredVolumes.length === 0
+                ? [{ name: 'cache-volume', emptyDir: {} }]
+                : filteredVolumes,
+          },
+          {
+            op: 'replace',
+            // TODO: can we assume first container?
+            path: '/spec/template/spec/containers/0/volumeMounts',
+            value:
+              filteredVolumeMounts.length === 0
+                ? [{ mountPath: '/cache', name: 'cache-volume' }]
+                : filteredVolumeMounts,
+          },
+        ];
+
+        k8sPatchResource<NotebookKind>({
+          model: NotebookModel,
+          queryOptions: { name: notebookName, ns: namespace },
+          patches,
+        })
+          .then(resolve)
+          .catch(reject);
+      })
+      .catch(reject);
+  });
+};
+
+export const removeNotebookSecret = (
+  notebookName: string,
+  namespace: string,
+  secretName: string,
+): Promise<NotebookKind> => {
+  return new Promise((resolve, reject) => {
+    getNotebook(notebookName, namespace)
+      .then((notebook) => {
+        const envFroms = notebook.spec.template.spec.containers[0].envFrom || [];
+        const filteredEnvFroms = envFroms.filter(
+          (envFrom) => envFrom.secretRef?.name !== secretName,
+        );
+
+        const patches: Patch[] = [
+          {
+            op: 'replace',
+            // TODO: can we assume first container?
+            path: '/spec/template/spec/containers/0/envFrom',
+            value: filteredEnvFroms,
+          },
+        ];
+
+        k8sPatchResource<NotebookKind>({
+          model: NotebookModel,
+          queryOptions: { name: notebookName, ns: namespace },
+          patches,
+        })
+          .then(resolve)
+          .catch(reject);
+      })
+      .catch(reject);
+  });
+};
diff --git a/frontend/src/api/network/pods.ts b/frontend/src/api/network/pods.ts
new file mode 100644
index 0000000000..fe664712a5
--- /dev/null
+++ b/frontend/src/api/network/pods.ts
@@ -0,0 +1,13 @@
+import { k8sListResource } from '@openshift/dynamic-plugin-sdk-utils';
+import { PodModel } from '../models';
+import { PodKind } from '../../k8sTypes';
+
+export const getPodsForNotebook = (namespace: string, notebookName: string): Promise<PodKind[]> => {
+  return k8sListResource<PodKind>({
+    model: PodModel,
+    queryOptions: {
+      ns: namespace,
+      queryParams: { labelSelector: `notebook-name=${notebookName}` },
+    },
+  }).then((r) => r.items);
+};
diff --git a/frontend/src/api/network/projects.ts b/frontend/src/api/network/projects.ts
new file mode 100644
index 0000000000..3722d22347
--- /dev/null
+++ b/frontend/src/api/network/projects.ts
@@ -0,0 +1,108 @@
+import {
+  k8sCreateResource,
+  k8sDeleteResource,
+  k8sGetResource,
+  k8sListResource,
+  K8sModelCommon,
+  k8sUpdateResource,
+} from '@openshift/dynamic-plugin-sdk-utils';
+import { ProjectKind } from '../../k8sTypes';
+import { usernameTranslate } from '../../utilities/notebookControllerUtils';
+import { ProjectModel } from '../models';
+import { translateDisplayNameForK8s } from '../../pages/projects/utils';
+
+export const getProject = (projectName: string): Promise<ProjectKind> => {
+  return k8sGetResource<ProjectKind>({
+    model: ProjectModel,
+    queryOptions: { name: projectName },
+  });
+};
+
+export const getProjects = (labelSelector?: string): Promise<ProjectKind[]> => {
+  const queryOptions = labelSelector ? { queryParams: { labelSelector } } : undefined;
+  return k8sListResource<ProjectKind>({
+    model: ProjectModel,
+    queryOptions,
+  }).then((listResource) => listResource.items);
+};
+
+export const createProject = (
+  username: string,
+  name: string,
+  description: string,
+  k8sName?: string,
+): Promise<string> => {
+  const translatedUsername = usernameTranslate(username);
+
+  // Specific types and models for creating projects
+  const NamespaceModel: K8sModelCommon = {
+    apiVersion: 'v1',
+    kind: 'Namespace',
+    plural: 'namespaces',
+  };
+  type NamespaceKind = ProjectKind & {
+    metadata: {
+      name: string;
+    };
+  };
+
+  return new Promise((resolve, reject) => {
+    k8sCreateResource<NamespaceKind, NamespaceKind>({
+      model: NamespaceModel,
+      resource: {
+        apiVersion: 'v1',
+        kind: 'Namespace',
+        metadata: {
+          name: k8sName || translateDisplayNameForK8s(name),
+          annotations: {
+            'openshift.io/description': description,
+            'openshift.io/display-name': name,
+            'openshift.io/requester': username,
+          },
+          labels: {
+            'opendatahub.io/dashboard': 'true',
+            'opendatahub.io/user': translatedUsername,
+          },
+        },
+      },
+    })
+      .then((namespace) => {
+        if (!namespace) {
+          reject('Unable to create a project due to permissions.');
+          return;
+        }
+        resolve(namespace.metadata.name);
+      })
+      .catch(reject);
+  });
+};
+
+export const updateProject = (
+  editProjectData: ProjectKind,
+  displayName: string,
+  description: string,
+): Promise<ProjectKind> => {
+  const resource: ProjectKind = {
+    ...editProjectData,
+    metadata: {
+      ...editProjectData.metadata,
+      annotations: {
+        ...editProjectData.metadata.annotations,
+        'openshift.io/display-name': displayName,
+        'openshift.io/description': description,
+      },
+    },
+  };
+
+  return k8sUpdateResource<ProjectKind>({
+    model: ProjectModel,
+    resource,
+  });
+};
+
+export const deleteProject = (projectName: string): Promise<ProjectKind> => {
+  return k8sDeleteResource<ProjectKind>({
+    model: ProjectModel,
+    queryOptions: { name: projectName },
+  });
+};
diff --git a/frontend/src/api/network/pvcs.ts b/frontend/src/api/network/pvcs.ts
new file mode 100644
index 0000000000..e3690d5b74
--- /dev/null
+++ b/frontend/src/api/network/pvcs.ts
@@ -0,0 +1,120 @@
+import {
+  k8sCreateResource,
+  k8sDeleteResource,
+  k8sGetResource,
+  k8sListResourceItems,
+  k8sPatchResource,
+} from '@openshift/dynamic-plugin-sdk-utils';
+import { K8sStatus, PersistentVolumeClaimKind } from '../../k8sTypes';
+import { PVCModel } from '../models';
+import { translateDisplayNameForK8s } from '../../pages/projects/utils';
+
+export const assemblePvc = (
+  pvcName: string,
+  projectName: string,
+  description: string,
+  pvcSize: number,
+): PersistentVolumeClaimKind => {
+  return {
+    apiVersion: 'v1',
+    kind: 'PersistentVolumeClaim',
+    metadata: {
+      name: translateDisplayNameForK8s(pvcName),
+      namespace: projectName,
+      labels: {
+        'opendatahub.io/dashboard': 'true',
+      },
+      annotations: {
+        'openshift.io/display-name': pvcName,
+        'openshift.io/description': description,
+      },
+    },
+    spec: {
+      accessModes: ['ReadWriteOnce'],
+      resources: {
+        requests: {
+          storage: `${pvcSize}Gi`,
+        },
+      },
+      volumeMode: 'Filesystem',
+    },
+    status: {
+      phase: 'Pending',
+    },
+  };
+};
+
+export const getPvc = (
+  projectName: string,
+  pvcName: string,
+): Promise<PersistentVolumeClaimKind> => {
+  return k8sGetResource<PersistentVolumeClaimKind>({
+    model: PVCModel,
+    queryOptions: { name: pvcName, ns: projectName },
+  });
+};
+
+export const getPvcs = (projectName: string): Promise<PersistentVolumeClaimKind[]> => {
+  return k8sListResourceItems<PersistentVolumeClaimKind>({
+    model: PVCModel,
+    queryOptions: { ns: projectName },
+  });
+};
+
+export const getAvailableMultiUsePvcs = (
+  projectName: string,
+): Promise<PersistentVolumeClaimKind[]> => {
+  return getPvcs(projectName).then((pvcs) =>
+    pvcs.filter((pvc) => {
+      const accessModes = pvc.spec.accessModes;
+      return accessModes.includes('ReadOnlyMany') || accessModes.includes('ReadWriteMany');
+    }),
+  );
+};
+
+export const createPvc = (data: PersistentVolumeClaimKind): Promise<PersistentVolumeClaimKind> => {
+  return k8sCreateResource<PersistentVolumeClaimKind>({ model: PVCModel, resource: data });
+};
+
+export const updatePvcDisplayName = (
+  pvcName: string,
+  namespace: string,
+  displayName: string,
+): Promise<PersistentVolumeClaimKind> => {
+  return k8sPatchResource({
+    model: PVCModel,
+    queryOptions: { name: pvcName, ns: namespace },
+    patches: [
+      {
+        op: 'replace',
+        path: '/metadata/annotations/openshift.io~1display-name',
+        value: displayName,
+      },
+    ],
+  });
+};
+
+export const updatePvcDescription = (
+  pvcName: string,
+  namespace: string,
+  description: string,
+): Promise<PersistentVolumeClaimKind> => {
+  return k8sPatchResource({
+    model: PVCModel,
+    queryOptions: { name: pvcName, ns: namespace },
+    patches: [
+      {
+        op: 'replace',
+        path: '/metadata/annotations/openshift.io~1description',
+        value: description,
+      },
+    ],
+  });
+};
+
+export const deletePvc = (pvcName: string, namespace: string): Promise<K8sStatus> => {
+  return k8sDeleteResource<PersistentVolumeClaimKind, K8sStatus>({
+    model: PVCModel,
+    queryOptions: { name: pvcName, ns: namespace },
+  });
+};
diff --git a/frontend/src/api/network/roleBindings.ts b/frontend/src/api/network/roleBindings.ts
new file mode 100644
index 0000000000..5babacfad3
--- /dev/null
+++ b/frontend/src/api/network/roleBindings.ts
@@ -0,0 +1,45 @@
+import { k8sCreateResource, k8sGetResource } from '@openshift/dynamic-plugin-sdk-utils';
+import { RoleBindingKind } from '../../k8sTypes';
+import { RoleBindingModel } from '../models';
+
+export const generateRoleBindingData = (
+  rbName: string,
+  dashboardNamespace: string,
+  projectName: string,
+): RoleBindingKind => {
+  const roleBindingObject: RoleBindingKind = {
+    apiVersion: 'rbac.authorization.k8s.io/v1',
+    kind: 'RoleBinding',
+    metadata: {
+      name: rbName,
+      namespace: dashboardNamespace,
+      labels: {
+        'opendatahub.io/dashboard': 'true',
+      },
+    },
+    roleRef: {
+      apiGroup: 'rbac.authorization.k8s.io',
+      kind: 'ClusterRole',
+      name: 'system:image-puller',
+    },
+    subjects: [
+      {
+        apiGroup: 'rbac.authorization.k8s.io',
+        kind: 'Group',
+        name: `system:serviceaccounts:${projectName}`,
+      },
+    ],
+  };
+  return roleBindingObject;
+};
+
+export const getRoleBinding = (projectName: string, rbName: string): Promise<RoleBindingKind> => {
+  return k8sGetResource({
+    model: RoleBindingModel,
+    queryOptions: { name: rbName, ns: projectName },
+  });
+};
+
+export const createRoleBinding = (data: RoleBindingKind): Promise<RoleBindingKind> => {
+  return k8sCreateResource({ model: RoleBindingModel, resource: data });
+};
diff --git a/frontend/src/api/network/routes.ts b/frontend/src/api/network/routes.ts
new file mode 100644
index 0000000000..ee63f1aece
--- /dev/null
+++ b/frontend/src/api/network/routes.ts
@@ -0,0 +1,7 @@
+import { k8sGetResource } from '@openshift/dynamic-plugin-sdk-utils';
+import { RouteModel } from '../models';
+import { RouteKind } from '../../k8sTypes';
+
+export const getRoute = (name: string, namespace: string): Promise<RouteKind> => {
+  return k8sGetResource<RouteKind>({ model: RouteModel, queryOptions: { name, ns: namespace } });
+};
diff --git a/frontend/src/api/network/secrets.ts b/frontend/src/api/network/secrets.ts
new file mode 100644
index 0000000000..8f7d4a4d9f
--- /dev/null
+++ b/frontend/src/api/network/secrets.ts
@@ -0,0 +1,74 @@
+import {
+  k8sCreateResource,
+  k8sDeleteResource,
+  k8sGetResource,
+  k8sListResource,
+  k8sUpdateResource,
+} from '@openshift/dynamic-plugin-sdk-utils';
+import { K8sStatus, SecretKind } from '../../k8sTypes';
+import { SecretModel } from '../models';
+import { genRandomChars } from '../../utilities/string';
+import { translateDisplayNameForK8s } from '../../pages/projects/utils';
+
+export const assembleSecret = (
+  projectName: string,
+  data: Record<string, string>,
+  type: 'aws' | 'generic' = 'generic',
+): SecretKind => {
+  const labels = {
+    'opendatahub.io/dashboard': 'true',
+  };
+  const annotations = {};
+
+  let stringData = data;
+  let name = `secret-${genRandomChars()}`;
+
+  if (type === 'aws') {
+    const { Name, ...secretBody } = data;
+    stringData = secretBody;
+    name = `aws-connection-${translateDisplayNameForK8s(Name)}`;
+    annotations['openshift.io/display-name'] = Name;
+    labels['opendatahub.io/managed'] = 'true';
+  }
+
+  return {
+    apiVersion: 'v1',
+    kind: 'Secret',
+    metadata: {
+      name,
+      namespace: projectName,
+      annotations,
+      labels,
+    },
+    stringData,
+  };
+};
+
+export const getSecret = (projectName: string, secretName: string): Promise<SecretKind> => {
+  return k8sGetResource<SecretKind>({
+    model: SecretModel,
+    queryOptions: { name: secretName, ns: projectName },
+  });
+};
+
+export const getSecretsByLabel = (label: string, namespace: string): Promise<SecretKind[]> => {
+  return k8sListResource<SecretKind>({
+    model: SecretModel,
+    queryOptions: { ns: namespace, queryParams: { labelSelector: label } },
+  }).then((result) => result.items);
+};
+
+export const createSecret = (data: SecretKind): Promise<SecretKind> => {
+  return k8sCreateResource<SecretKind>({ model: SecretModel, resource: data });
+};
+
+export const replaceSecret = (data: SecretKind): Promise<SecretKind> => {
+  return k8sUpdateResource<SecretKind>({ model: SecretModel, resource: data });
+};
+
+export const deleteSecret = (projectName: string, secretName: string): Promise<K8sStatus> => {
+  return k8sDeleteResource<SecretKind, K8sStatus>({
+    model: SecretModel,
+    queryOptions: { name: secretName, ns: projectName },
+  });
+};
diff --git a/frontend/src/api/prometheus/pvcs.ts b/frontend/src/api/prometheus/pvcs.ts
new file mode 100644
index 0000000000..bf60ab6d56
--- /dev/null
+++ b/frontend/src/api/prometheus/pvcs.ts
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import usePrometheusQuery from './usePrometheusQuery';
+import { PersistentVolumeClaimKind } from '../../k8sTypes';
+import { POLL_INTERVAL } from '../../utilities/const';
+
+export const usePVCFreeAmount = (
+  pvc: PersistentVolumeClaimKind,
+): [bytesInUse: number | typeof NaN, loaded: boolean, error: Error | undefined] => {
+  const [result, loaded, loadError, refetch] = usePrometheusQuery(
+    pvc.metadata.namespace,
+    `kubelet_volume_stats_used_bytes{persistentvolumeclaim='${pvc.metadata.name}'}`,
+  );
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      refetch();
+    }, POLL_INTERVAL);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [refetch]);
+
+  const value = result?.data.result[0]?.value[1];
+  const usedInBytes = parseInt(value || '', 10);
+
+  return [usedInBytes, loaded, loadError];
+};
diff --git a/frontend/src/api/prometheus/usePrometheusQuery.ts b/frontend/src/api/prometheus/usePrometheusQuery.ts
new file mode 100644
index 0000000000..cfb0dfd8a5
--- /dev/null
+++ b/frontend/src/api/prometheus/usePrometheusQuery.ts
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import axios from 'axios';
+import { PrometheusResponse } from '../../types';
+
+const usePrometheusQuery = (
+  namespace: string,
+  query: string,
+): [
+  result: PrometheusResponse | null,
+  loaded: boolean,
+  loadError: Error | undefined,
+  refetch: () => void,
+] => {
+  const [result, setResult] = React.useState<PrometheusResponse | null>(null);
+  const [loaded, setLoaded] = React.useState(false);
+  const [error, setError] = React.useState<Error | undefined>();
+
+  const fetchData = React.useCallback(() => {
+    if (!namespace || !query) return;
+
+    const path = '/api/prometheus';
+    axios
+      .post(path, { query, namespace })
+      .then((response) => {
+        setResult(response.data.response);
+        setLoaded(true);
+        setError(undefined);
+      })
+      .catch((e) => {
+        setError(e);
+      });
+  }, [namespace, query]);
+
+  React.useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return [result, loaded, error, fetchData];
+};
+
+export default usePrometheusQuery;
diff --git a/frontend/src/app/App.tsx b/frontend/src/app/App.tsx
index e31d6cf664..ddf75d6cdf 100644
--- a/frontend/src/app/App.tsx
+++ b/frontend/src/app/App.tsx
@@ -111,6 +111,7 @@ const App: React.FC = () => {
           sidebar={<NavSidebar />}
           notificationDrawer={<AppNotificationDrawer onClose={() => setNotificationsOpen(false)} />}
           isNotificationDrawerExpanded={notificationsOpen}
+          mainContainerId="dashboard-page-main"
         >
           <AppRoutes />
           <ToastNotifications />
diff --git a/frontend/src/app/AppRoutes.tsx b/frontend/src/app/AppRoutes.tsx
index 6935f773f0..abc04a3ba0 100644
--- a/frontend/src/app/AppRoutes.tsx
+++ b/frontend/src/app/AppRoutes.tsx
@@ -12,6 +12,7 @@ const ExploreApplications = React.lazy(
 const NotebookLogoutRedirectPage = React.lazy(
   () => import('../pages/notebookController/NotebookLogoutRedirect'),
 );
+const ProjectViewRoutes = React.lazy(() => import('../pages/projects/ProjectViewRoutes'));
 const NotebookController = React.lazy(
   () => import('../pages/notebookController/NotebookController'),
 );
@@ -33,6 +34,7 @@ const AppRoutes: React.FC = () => {
         <Route path="/" element={<InstalledApplications />} />
         <Route path="/explore" element={<ExploreApplications />} />
         <Route path="/resources" element={<LearningCenterPage />} />
+        {isAllowed && <Route path="/projects/*" element={<ProjectViewRoutes />} />}
         {isAllowed && <Route path="/notebookController/*" element={<NotebookController />} />}
         {isAllowed && (
           <Route
diff --git a/frontend/src/app/NavSidebar.tsx b/frontend/src/app/NavSidebar.tsx
index 997af08d5b..b7867b48cd 100644
--- a/frontend/src/app/NavSidebar.tsx
+++ b/frontend/src/app/NavSidebar.tsx
@@ -1,47 +1,39 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { Nav, NavExpandable, NavItem, NavList, PageSidebar } from '@patternfly/react-core';
-import { getNavBarData, NavDataItem } from '../utilities/NavData';
+import { getNavBarData, isNavDataGroup, NavDataGroup, NavDataHref } from '../utilities/NavData';
 import { useAppContext } from './AppContext';
 import { useUser } from '../redux/selectors';
 
-const NavDataItem: React.FC<{ item: NavDataItem; pathname: string }> = ({ item, pathname }) => {
-  const { children, group } = item;
-  const isGroup = group !== undefined;
-  const isActive =
-    group && children ? !!children.find((c) => pathname === c.href) : pathname === item.href;
-  const [expanded, setExpanded] = React.useState<boolean>(isGroup && isActive);
+const NavHref: React.FC<{ item: NavDataHref; pathname: string }> = ({ item, pathname }) => (
+  <NavItem key={item.id} data-id={item.id} itemId={item.id} isActive={pathname === item.href}>
+    <Link to={item.href} aria-label={item.label}>
+      {item.label}
+    </Link>
+  </NavItem>
+);
+
+const NavGroup: React.FC<{ item: NavDataGroup; pathname: string }> = ({ item, pathname }) => {
+  const { group, children } = item;
+  const isActive = !!children.find((c) => pathname === c.href);
+  const [expanded, setExpanded] = React.useState<boolean>(isActive);
 
-  if (group && children?.length) {
-    return (
-      <NavExpandable
-        data-id={group.id}
-        key={group.id}
-        id={group.id}
-        title={group.title}
-        groupId={group.id}
-        isActive={isActive}
-        isExpanded={expanded}
-        onExpand={(e, val) => setExpanded(val)}
-        aria-label={group.title}
-      >
-        {children.map((childItem) => (
-          <NavDataItem
-            data-id={childItem.id}
-            key={childItem.id}
-            item={childItem}
-            pathname={pathname}
-          />
-        ))}
-      </NavExpandable>
-    );
-  }
   return (
-    <NavItem data-id={item.id} key={item.id} itemId={item.id} isActive={isActive}>
-      <Link to={item.href || '/'} aria-label={item.label}>
-        {item.label}
-      </Link>
-    </NavItem>
+    <NavExpandable
+      data-id={group.id}
+      key={group.id}
+      id={group.id}
+      title={group.title}
+      groupId={group.id}
+      isActive={isActive}
+      isExpanded={expanded}
+      onExpand={(e, val) => setExpanded(val)}
+      aria-label={group.title}
+    >
+      {children.map((childItem) => (
+        <NavHref key={childItem.id} data-id={childItem.id} item={childItem} pathname={pathname} />
+      ))}
+    </NavExpandable>
   );
 };
 
@@ -53,9 +45,13 @@ const NavSidebar: React.FC = () => {
   const nav = (
     <Nav className="nav" theme="dark" aria-label="Nav">
       <NavList>
-        {userNavData.map((item) => (
-          <NavDataItem key={item.id} item={item} pathname={routerLocation.pathname} />
-        ))}
+        {userNavData.map((item) =>
+          isNavDataGroup(item) ? (
+            <NavGroup key={item.id} item={item} pathname={routerLocation.pathname} />
+          ) : (
+            <NavHref key={item.id} item={item} pathname={routerLocation.pathname} />
+          ),
+        )}
       </NavList>
     </Nav>
   );
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 595568ca98..f4b0352007 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -4,6 +4,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { store } from './redux/store/store';
 import App from './app/App';
+import SDKInitialize from './SDKInitialize';
 
 /**
 /**
@@ -13,7 +14,9 @@ ReactDOM.render(
   <React.StrictMode>
     <Provider store={store}>
       <Router>
-        <App />
+        <SDKInitialize>
+          <App />
+        </SDKInitialize>
       </Router>
     </Provider>
   </React.StrictMode>,
diff --git a/frontend/src/k8sTypes.ts b/frontend/src/k8sTypes.ts
new file mode 100644
index 0000000000..7503f9401b
--- /dev/null
+++ b/frontend/src/k8sTypes.ts
@@ -0,0 +1,262 @@
+import { K8sResourceCommon } from '@openshift/dynamic-plugin-sdk-utils';
+import { NotebookAffinity, NotebookContainer, NotebookToleration, Volume } from './types';
+
+/**
+ * Annotations that we will use to allow the user flexibility in describing items outside of the
+ * k8s structure.
+ */
+type DisplayNameAnnotations = Partial<{
+  'openshift.io/description': string; // the description provided by the user
+  'openshift.io/display-name': string; // the name provided by the user
+}>;
+
+export type K8sDSGResource = K8sResourceCommon & {
+  metadata: {
+    annotations?: DisplayNameAnnotations;
+    name: string;
+  };
+};
+
+type ImageStreamAnnotations = Partial<{
+  'opendatahub.io/notebook-image-desc': string;
+  'opendatahub.io/notebook-image-name': string;
+  'opendatahub.io/notebook-image-url': string;
+  'opendatahub.io/notebook-image-order': string;
+}>;
+
+type ImageStreamSpecTagAnnotations = Partial<{
+  'opendatahub.io/notebook-python-dependencies': string;
+  'opendatahub.io/notebook-software': string;
+  'opendatahub.io/notebook-image-recommended': string;
+  'opendatahub.io/default-image': string;
+}>;
+
+export type NotebookAnnotations = Partial<{
+  'kubeflow-resource-stopped': string | null; // datestamp of stop (if omitted, it is running),  `odh-notebook-controller-lock` is set when first creating the notebook to avoid race conditions, it's a fake stop
+  'notebooks.kubeflow.org/last-activity': string; // datestamp of last use
+  'opendatahub.io/link': string; // redirect notebook url
+  'opendatahub.io/username': string; // the untranslated username behind the notebook
+  'notebooks.opendatahub.io/last-image-selection': string; // the last image they selected
+  'notebooks.opendatahub.io/last-size-selection': string; // the last notebook size they selected
+}>;
+
+export type BuildConfigKind = K8sResourceCommon & {
+  metadata: {
+    name: string;
+    labels?: Partial<{
+      'opendatahub.io/notebook-name': string;
+    }>;
+  };
+  spec: {
+    output: {
+      to: {
+        name: string;
+      };
+    };
+  };
+};
+
+export type BuildKind = K8sResourceCommon & {
+  metadata: {
+    name: string;
+    annotations?: Partial<{
+      'openshift.io/build.number': string;
+    }>;
+    labels?: Partial<{
+      buildconfig: string;
+      'openshift.io/build-config.name': string;
+    }>;
+  };
+  spec: {
+    output: {
+      to: {
+        name: string;
+      };
+    };
+  };
+  status: {
+    phase: BUILD_PHASE;
+    completionTimestamp?: string;
+    startTimestamp?: string;
+  };
+};
+
+/**
+ * Contains all the phases for BuildKind -> status -> phase (excluding NONE phase)
+ */
+export enum BUILD_PHASE {
+  NONE = 'Not started',
+  NEW = 'New',
+  RUNNING = 'Running',
+  PENDING = 'Pending',
+  COMPLETE = 'Complete',
+  FAILED = 'Failed',
+  ERROR = 'Error',
+  CANCELLED = 'Cancelled',
+}
+
+export type ConfigMapKind = K8sResourceCommon & {
+  metadata: {
+    name: string;
+  };
+  data?: Record<string, string>;
+};
+
+export type EventKind = K8sResourceCommon & {
+  metadata: {
+    uid?: string;
+  };
+  involvedObject: {
+    name: string;
+  };
+  lastTimestamp?: string;
+  eventTime: string;
+  type: 'Normal' | 'Warning';
+  reason: string;
+  message: string;
+};
+
+export type ImageStreamKind = K8sResourceCommon & {
+  metadata: {
+    annotations?: ImageStreamAnnotations;
+    name: string;
+  };
+  spec: {
+    tags?: ImageStreamSpecTagType[];
+  };
+  status?: {
+    dockerImageRepository?: string;
+    publicDockerImageRepository?: string;
+    tags?: {
+      tag: string;
+    }[];
+  };
+};
+
+export type ImageStreamSpecTagType = {
+  name: string;
+  annotations?: ImageStreamSpecTagAnnotations;
+  from: {
+    kind: string;
+    name: string;
+  };
+};
+
+/** A status object when Kube backend can't handle a request. */
+export type K8sStatus = {
+  kind: string;
+  apiVersion: string;
+  code: number;
+  message: string;
+  reason: string;
+  status: string;
+};
+
+export type PersistentVolumeClaimKind = K8sResourceCommon & {
+  metadata: {
+    annotations?: DisplayNameAnnotations;
+    name: string;
+    namespace: string;
+  };
+  spec: {
+    accessModes: string[];
+    resources: {
+      requests: {
+        storage: string;
+      };
+    };
+    storageClassName?: string;
+    volumeMode: 'Filesystem' | 'Block';
+  };
+  status?: {
+    phase: string;
+    capacity?: {
+      storage: string;
+    };
+  } & Record<string, unknown>;
+};
+
+export type NotebookKind = K8sResourceCommon & {
+  metadata: {
+    annotations: DisplayNameAnnotations & NotebookAnnotations;
+    name: string;
+    namespace: string;
+    labels: Partial<{
+      'opendatahub.io/user': string; // translated username -- see translateUsername
+    }>;
+  };
+  spec: {
+    template: {
+      spec: {
+        affinity?: NotebookAffinity;
+        enableServiceLinks?: boolean;
+        containers: NotebookContainer[];
+        volumes?: Volume[];
+        tolerations?: NotebookToleration[];
+      };
+    };
+  };
+  status?: {
+    containerState?: {
+      terminated?: { [key: string]: string };
+    };
+  };
+};
+
+export type PodKind = K8sResourceCommon & {
+  status: {
+    containerStatuses: { ready: boolean; state?: { running?: boolean } }[];
+  };
+};
+
+export type ProjectKind = K8sResourceCommon & {
+  metadata: {
+    annotations?: DisplayNameAnnotations &
+      Partial<{
+        'openshift.io/requester': string; // the username of the user that requested this project
+      }>;
+    labels?: Partial<{
+      'opendatahub.io/user': string; // translated username -- see translateUsername
+    }>;
+    name: string;
+  };
+  status?: {
+    phase: 'Active' | 'Terminating';
+  };
+};
+
+type RoleBindingSubject = {
+  kind: string;
+  apiGroup: string;
+  name: string;
+};
+
+export type RoleBindingKind = K8sResourceCommon & {
+  subjects: RoleBindingSubject[];
+  roleRef: RoleBindingSubject;
+};
+
+export type RouteKind = K8sResourceCommon & {
+  spec: {
+    host: string;
+  };
+};
+
+export type SecretKind = K8sResourceCommon & {
+  metadata: {
+    name: string;
+    namespace: string;
+  };
+  data?: Record<string, string>;
+  stringData?: Record<string, string>;
+  type?: string;
+};
+
+export type AWSSecretKind = SecretKind & {
+  metadata: {
+    annotations?: DisplayNameAnnotations;
+    labels?: {
+      'opendatahub.io/managed': 'true';
+    };
+  };
+};
diff --git a/frontend/src/pages/ApplicationsPage.scss b/frontend/src/pages/ApplicationsPage.scss
index d5804dcb9b..66efb5f3d4 100644
--- a/frontend/src/pages/ApplicationsPage.scss
+++ b/frontend/src/pages/ApplicationsPage.scss
@@ -1,5 +1,8 @@
 .odh-apps {
   &__heading {
+    .pf-c-breadcrumb {
+      margin-bottom: var(--pf-global--spacer--md);
+    }
     &__text {
       margin-bottom: 1rem;
     }
diff --git a/frontend/src/pages/ApplicationsPage.tsx b/frontend/src/pages/ApplicationsPage.tsx
index a1bee7718c..3d2631ee3a 100644
--- a/frontend/src/pages/ApplicationsPage.tsx
+++ b/frontend/src/pages/ApplicationsPage.tsx
@@ -19,6 +19,7 @@ import './ApplicationsPage.scss';
 
 type ApplicationsPageProps = {
   title: string;
+  breadcrumb?: React.ReactNode;
   description: React.ReactNode;
   loaded: boolean;
   empty: boolean;
@@ -27,10 +28,12 @@ type ApplicationsPageProps = {
   emptyMessage?: string;
   emptyStatePage?: React.ReactNode;
   headerAction?: React.ReactNode;
+  provideChildrenPadding?: boolean;
 };
 
 const ApplicationsPage: React.FC<ApplicationsPageProps> = ({
   title,
+  breadcrumb,
   description,
   loaded,
   empty,
@@ -40,20 +43,24 @@ const ApplicationsPage: React.FC<ApplicationsPageProps> = ({
   emptyMessage,
   emptyStatePage,
   headerAction,
+  provideChildrenPadding,
 }) => {
-  const renderHeader = () => (
-    <PageSection className="odh-apps__heading" variant={PageSectionVariants.light}>
-      <Split>
-        <SplitItem isFilled>
-          <TextContent className="odh-apps__heading__text">
-            <Text component="h1">{title}</Text>
-            <Text component="p">{description}</Text>
-          </TextContent>
-        </SplitItem>
-        {headerAction && <SplitItem>{headerAction}</SplitItem>}
-      </Split>
-    </PageSection>
-  );
+  const renderHeader = () => {
+    return (
+      <PageSection className="odh-apps__heading" variant={PageSectionVariants.light}>
+        {breadcrumb}
+        <Split>
+          <SplitItem isFilled>
+            <TextContent className="odh-apps__heading__text">
+              <Text component="h1">{title}</Text>
+              <Text component="p">{description}</Text>
+            </TextContent>
+          </SplitItem>
+          {headerAction && <SplitItem>{headerAction}</SplitItem>}
+        </Split>
+      </PageSection>
+    );
+  };
 
   const renderContents = () => {
     if (loadError) {
@@ -102,6 +109,14 @@ const ApplicationsPage: React.FC<ApplicationsPageProps> = ({
       );
     }
 
+    if (provideChildrenPadding) {
+      return (
+        <PageSection variant="light" isFilled>
+          {children}
+        </PageSection>
+      );
+    }
+
     return children;
   };
 
diff --git a/frontend/src/pages/learningCenter/LearningCenter.tsx b/frontend/src/pages/learningCenter/LearningCenter.tsx
index a510dafc12..2eb6e9ff88 100644
--- a/frontend/src/pages/learningCenter/LearningCenter.tsx
+++ b/frontend/src/pages/learningCenter/LearningCenter.tsx
@@ -85,10 +85,10 @@ export const LearningCenter: React.FC = () => {
 
       // Add doc cards for all quick starts
       qsContext.allQuickStarts?.forEach((quickStart) => {
-        const odhDoc: OdhDocument = _.merge({}, quickStart, {
+        const odhDoc = _.merge({}, quickStart, {
           spec: { type: OdhDocumentType.QuickStart },
         });
-        docs.push(odhDoc);
+        docs.push(odhDoc as unknown as OdhDocument); // TODO: Fix QuickStart type dependency -- they updated their types and broke us
       });
 
       const updatedDocApps = docs
diff --git a/frontend/src/pages/notebookController/screens/admin/UserTableCellTransform.tsx b/frontend/src/pages/notebookController/screens/admin/UserTableCellTransform.tsx
index 6f3d27be20..5d275d0fe2 100644
--- a/frontend/src/pages/notebookController/screens/admin/UserTableCellTransform.tsx
+++ b/frontend/src/pages/notebookController/screens/admin/UserTableCellTransform.tsx
@@ -6,7 +6,7 @@ import NotebookActions from './NotebookActions';
 
 type TableDataRendererProps = {
   user: AdminViewUserData;
-  userProperty: keyof AdminViewUserData;
+  userProperty: string; //keyof AdminViewUserData;
 };
 
 const UserTableCellTransform: React.FC<TableDataRendererProps> = ({ user, userProperty }) => {
diff --git a/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx b/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx
index f9263a919b..d86fc905a4 100644
--- a/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx
+++ b/frontend/src/pages/notebookController/screens/server/SpawnerPage.tsx
@@ -116,7 +116,11 @@ const SpawnerPage: React.FC = () => {
       }
       let fetchedVariableRows: VariableRow[] = [];
       const envVarFileName = generateEnvVarFileNameFromUsername(username);
-      const response = await verifyResource(envVarFileName, projectName, fetchFunc);
+      const response = await verifyResource<ConfigMap | Secret>(
+        envVarFileName,
+        projectName,
+        fetchFunc,
+      );
       if (response && response.data) {
         const isSecret = response.kind === EnvVarResourceType.Secret;
         fetchedVariableRows = Object.entries(response.data).map(([key, value]) => {
diff --git a/frontend/src/pages/notebookController/screens/server/StopServerModal.tsx b/frontend/src/pages/notebookController/screens/server/StopServerModal.tsx
index 28ffa7f7af..b6554eb7e1 100644
--- a/frontend/src/pages/notebookController/screens/server/StopServerModal.tsx
+++ b/frontend/src/pages/notebookController/screens/server/StopServerModal.tsx
@@ -33,13 +33,12 @@ const StopServerModal: React.FC<StopServerModalProps> = ({ notebooksToStop, onNo
       }),
     )
       .then(() => {
+        setDeleting(false);
         onNotebooksStop(true);
       })
       .catch((e) => {
-        notification.error(`Error stopping ${textToShow}`, e.message);
-      })
-      .finally(() => {
         setDeleting(false);
+        notification.error(`Error stopping ${textToShow}`, e.message);
       });
   };
 
diff --git a/frontend/src/pages/notebookController/useNamespaces.ts b/frontend/src/pages/notebookController/useNamespaces.ts
index 63421241c5..00ebd9f23d 100644
--- a/frontend/src/pages/notebookController/useNamespaces.ts
+++ b/frontend/src/pages/notebookController/useNamespaces.ts
@@ -1,10 +1,15 @@
 import { useAppContext } from '../../app/AppContext';
 import { useDashboardNamespace } from '../../redux/selectors';
 
-const useNamespaces = (): { notebookNamespace: string; dashboardNamespace: string } => {
+const useNamespaces = (): {
+  /** @deprecated - all new functionality should use project creation under DSG */
+  notebookNamespace: string;
+  dashboardNamespace: string;
+} => {
   const { dashboardConfig } = useAppContext();
   const { dashboardNamespace } = useDashboardNamespace();
 
+  /** @deprecated */
   const notebookNamespace = dashboardConfig.spec.notebookController?.notebookNamespace;
 
   return { notebookNamespace: notebookNamespace || dashboardNamespace, dashboardNamespace };
diff --git a/frontend/src/pages/projects/ProjectDetailsContext.tsx b/frontend/src/pages/projects/ProjectDetailsContext.tsx
new file mode 100644
index 0000000000..9fcd44f37e
--- /dev/null
+++ b/frontend/src/pages/projects/ProjectDetailsContext.tsx
@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { PersistentVolumeClaimKind, ProjectKind } from '../../k8sTypes';
+import { Outlet, useParams } from 'react-router-dom';
+import {
+  Bullseye,
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  Spinner,
+  Title,
+} from '@patternfly/react-core';
+import useProject from './useProject';
+import { useNavigate } from 'react-router-dom';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import useProjectNotebookStates from './notebook/useProjectNotebookStates';
+import useProjectPvcs from './screens/detail/storage/useProjectPvcs';
+import useDataConnections from './screens/detail/data-connections/useDataConnections';
+import { DataConnection } from './types';
+import { NotebookState } from './notebook/types';
+import { POLL_INTERVAL } from '../../utilities/const';
+
+type ContextResourceData<T> = {
+  data: T[];
+  loaded: boolean;
+  error?: Error;
+  refresh: () => void;
+};
+
+type ProjectDetailsContextType = {
+  currentProject: ProjectKind;
+  refreshAllProjectData: () => void;
+  notebooks: ContextResourceData<NotebookState>;
+  pvcs: ContextResourceData<PersistentVolumeClaimKind>;
+  dataConnections: ContextResourceData<DataConnection>;
+};
+
+const DEFAULT_DATA: ContextResourceData<never> = {
+  data: [],
+  loaded: false,
+  refresh: () => undefined,
+};
+
+const useContextResourceData = <T,>(resourceData): ContextResourceData<T> => {
+  const [values, loaded, error, refresh] = resourceData;
+  React.useEffect(() => {
+    const timer = setInterval(() => refresh(), POLL_INTERVAL);
+    return () => clearInterval(timer);
+  }, [refresh]);
+  return React.useMemo(
+    () => ({
+      data: values,
+      loaded,
+      error,
+      refresh,
+    }),
+    [error, loaded, refresh, values],
+  );
+};
+
+export const ProjectDetailsContext = React.createContext<ProjectDetailsContextType>({
+  // We never will get into a case without a project, so fudge the default value
+  currentProject: null as unknown as ProjectKind,
+  refreshAllProjectData: () => undefined,
+  notebooks: DEFAULT_DATA,
+  pvcs: DEFAULT_DATA,
+  dataConnections: DEFAULT_DATA,
+});
+
+const ProjectDetailsContextProvider: React.FC = () => {
+  const navigate = useNavigate();
+  const { namespace } = useParams<{ namespace: string }>();
+  const [project, loaded, error] = useProject(namespace);
+  const notebooks = useContextResourceData<NotebookState>(useProjectNotebookStates(namespace));
+  const pvcs = useContextResourceData<PersistentVolumeClaimKind>(useProjectPvcs(namespace));
+  const dataConnections = useContextResourceData<DataConnection>(useDataConnections(namespace));
+
+  const notebookRefresh = notebooks.refresh;
+  const pvcRefresh = pvcs.refresh;
+  const dataConnectionRefresh = dataConnections.refresh;
+  const refreshAllProjectData = React.useCallback(() => {
+    notebookRefresh();
+    setTimeout(notebookRefresh, 2000);
+    pvcRefresh();
+    dataConnectionRefresh();
+  }, [notebookRefresh, pvcRefresh, dataConnectionRefresh]);
+
+  if (error) {
+    return (
+      <Bullseye>
+        <EmptyState>
+          <EmptyStateIcon icon={ExclamationCircleIcon} />
+          <Title headingLevel="h4" size="lg">
+            Problem loading project details
+          </Title>
+          <EmptyStateBody>{error.message}</EmptyStateBody>
+          <Button variant="primary" onClick={() => navigate('/projects')}>
+            View my projects
+          </Button>
+        </EmptyState>
+      </Bullseye>
+    );
+  }
+
+  if (!loaded || !project) {
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+
+  return (
+    <ProjectDetailsContext.Provider
+      value={{ currentProject: project, notebooks, pvcs, dataConnections, refreshAllProjectData }}
+    >
+      <Outlet />
+    </ProjectDetailsContext.Provider>
+  );
+};
+
+export default ProjectDetailsContextProvider;
diff --git a/frontend/src/pages/projects/ProjectViewRoutes.tsx b/frontend/src/pages/projects/ProjectViewRoutes.tsx
new file mode 100644
index 0000000000..6f32c87c7d
--- /dev/null
+++ b/frontend/src/pages/projects/ProjectViewRoutes.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Navigate, Routes, Route } from 'react-router-dom';
+import ProjectDetails from './screens/detail/ProjectDetails';
+import ProjectView from './screens/projects/ProjectView';
+import ProjectDetailsContextProvider from './ProjectDetailsContext';
+import SpawnerPage from './screens/spawner/SpawnerPage';
+import EditSpawnerPage from './screens/spawner/EditSpawnerPage';
+
+const ProjectViewRoutes: React.FC = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<ProjectView />} />
+      <Route path="/:namespace/*" element={<ProjectDetailsContextProvider />}>
+        <Route index element={<ProjectDetails />} />
+        <Route path="spawner" element={<SpawnerPage />} />
+        <Route path="spawner/:notebookName" element={<EditSpawnerPage />} />
+        <Route path="*" element={<Navigate to="." />} />
+      </Route>
+      <Route path="*" element={<Navigate to="." />} />
+    </Routes>
+  );
+};
+
+export default ProjectViewRoutes;
diff --git a/frontend/src/pages/projects/components/DeleteModal.tsx b/frontend/src/pages/projects/components/DeleteModal.tsx
new file mode 100644
index 0000000000..224d7a9d93
--- /dev/null
+++ b/frontend/src/pages/projects/components/DeleteModal.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Alert, Button, Modal, Stack, StackItem, TextInput } from '@patternfly/react-core';
+
+type DeleteModalProps = {
+  title: string;
+  isOpen: boolean;
+  onClose: () => void;
+  deleting: boolean;
+  onDelete: () => void;
+  deleteName: string;
+  submitButtonLabel?: string;
+  error?: Error;
+};
+
+const DeleteModal: React.FC<DeleteModalProps> = ({
+  children,
+  title,
+  isOpen,
+  onClose,
+  deleting,
+  onDelete,
+  deleteName,
+  error,
+  submitButtonLabel = 'Delete',
+}) => {
+  const [value, setValue] = React.useState('');
+
+  const onBeforeClose = (deleted: boolean) => {
+    setValue('');
+
+    if (deleted) {
+      onDelete();
+    } else {
+      onClose();
+    }
+  };
+
+  return (
+    <Modal
+      title={title}
+      titleIconVariant="warning"
+      isOpen={isOpen}
+      onClose={() => onBeforeClose(false)}
+      actions={[
+        <Button
+          key="delete-button"
+          variant="danger"
+          isDisabled={deleting || value !== deleteName}
+          onClick={() => onBeforeClose(true)}
+        >
+          {submitButtonLabel}
+        </Button>,
+        <Button key="cancel-button" variant="secondary" onClick={() => onBeforeClose(false)}>
+          Cancel
+        </Button>,
+      ]}
+      variant="small"
+    >
+      <Stack hasGutter>
+        <StackItem>{children}</StackItem>
+        <StackItem>
+          Confirm deletion by typing <strong>{deleteName}</strong> below:
+        </StackItem>
+        <StackItem>
+          <TextInput
+            id="delete-modal-input"
+            value={value}
+            onChange={(newValue) => setValue(newValue)}
+          />
+        </StackItem>
+        {error && (
+          <StackItem>
+            <Alert title={`Error deleting ${deleteName}`} isInline variant="danger">
+              {error.message}
+            </Alert>
+          </StackItem>
+        )}
+      </Stack>
+    </Modal>
+  );
+};
+
+export default DeleteModal;
diff --git a/frontend/src/pages/projects/components/DeleteModalConnectedAlert.tsx b/frontend/src/pages/projects/components/DeleteModalConnectedAlert.tsx
new file mode 100644
index 0000000000..f2e305620e
--- /dev/null
+++ b/frontend/src/pages/projects/components/DeleteModalConnectedAlert.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { NotebookKind } from '../../../k8sTypes';
+import { Alert } from '@patternfly/react-core';
+import { getNotebookDisplayName } from '../utils';
+
+type DeleteModalConnectedAlertProps = {
+  loaded: boolean;
+  error?: Error;
+  connectedNotebooks: NotebookKind[];
+};
+
+const DeleteModalConnectedAlert: React.FC<DeleteModalConnectedAlertProps> = ({
+  loaded,
+  error,
+  connectedNotebooks,
+}) => {
+  const warning = 'This action cannot be undone.';
+  if (!loaded) {
+    return <>{warning}</>;
+  }
+  if (error) {
+    <Alert variant="warning" isInline title="Cannot fetch connected workbenches">
+      {error.message}
+    </Alert>;
+  }
+  return connectedNotebooks.length !== 0 ? (
+    <Alert
+      variant="warning"
+      isInline
+      title={
+        <>
+          This resource is connected to{' '}
+          {connectedNotebooks.map((notebook) => getNotebookDisplayName(notebook)).join(', ')}
+        </>
+      }
+    >
+      {`${warning} It will restart the workbenches it connects to.`}
+    </Alert>
+  ) : (
+    <>{warning}</>
+  );
+};
+
+export default DeleteModalConnectedAlert;
diff --git a/frontend/src/pages/projects/components/ExistingPVCField.tsx b/frontend/src/pages/projects/components/ExistingPVCField.tsx
new file mode 100644
index 0000000000..51b2a8a564
--- /dev/null
+++ b/frontend/src/pages/projects/components/ExistingPVCField.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { Alert, FormGroup, Select, SelectOption } from '@patternfly/react-core';
+import { getPvcDisplayName } from '../utils';
+import { PersistentVolumeClaimKind } from '../../../k8sTypes';
+
+type ExistingPVCFieldProps = {
+  fieldId: string;
+  storages: PersistentVolumeClaimKind[];
+  loaded: boolean;
+  loadError?: Error;
+  selectedStorage?: string;
+  setStorage: (storage?: string) => void;
+  selectDirection?: 'up' | 'down';
+  menuAppendTo?: HTMLElement | 'parent';
+};
+
+const ExistingPVCField: React.FC<ExistingPVCFieldProps> = ({
+  fieldId,
+  storages,
+  loaded,
+  loadError,
+  selectedStorage,
+  setStorage,
+  selectDirection = 'down',
+  menuAppendTo = 'parent',
+}) => {
+  const [isOpen, setOpen] = React.useState<boolean>(false);
+
+  if (loadError) {
+    return (
+      <Alert title="Error loading pvcs" variant="danger">
+        {loadError.message}
+      </Alert>
+    );
+  }
+
+  const empty = storages.length === 0;
+  let placeholderText: string;
+  if (!loaded) {
+    placeholderText = 'Loading storages...';
+  } else if (empty) {
+    placeholderText = 'No existing storages available';
+  } else {
+    placeholderText = 'Select a persistent storage';
+  }
+
+  return (
+    <FormGroup isRequired label="Persistent storage" fieldId={fieldId}>
+      <Select
+        variant="typeahead"
+        selections={selectedStorage}
+        isOpen={isOpen}
+        onClear={() => {
+          setStorage(undefined);
+          setOpen(false);
+        }}
+        isDisabled={empty}
+        onSelect={(e, selection) => {
+          if (typeof selection === 'string') {
+            setStorage(selection);
+            setOpen(false);
+          }
+        }}
+        onToggle={setOpen}
+        placeholderText={placeholderText}
+        direction={selectDirection}
+        menuAppendTo={menuAppendTo}
+      >
+        {storages.map((pvc) => (
+          <SelectOption key={pvc.metadata.name} value={pvc.metadata.name}>
+            {getPvcDisplayName(pvc)}
+          </SelectOption>
+        ))}
+      </Select>
+    </FormGroup>
+  );
+};
+
+export default ExistingPVCField;
diff --git a/frontend/src/pages/projects/components/ExistingProjectField.tsx b/frontend/src/pages/projects/components/ExistingProjectField.tsx
new file mode 100644
index 0000000000..6971d8efa0
--- /dev/null
+++ b/frontend/src/pages/projects/components/ExistingProjectField.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Alert, FormGroup, Select, SelectOption, Skeleton } from '@patternfly/react-core';
+import { getProjectDisplayName } from '../utils';
+import useUserProjects from '../screens/projects/useUserProjects';
+
+type ExistingProjectFieldProps = {
+  fieldId: string;
+  selectedProject?: string;
+  onSelect: (selection?: string) => void;
+  selectDirection?: 'up' | 'down';
+  menuAppendTo?: HTMLElement | 'parent';
+};
+
+const ExistingProjectField: React.FC<ExistingProjectFieldProps> = ({
+  fieldId,
+  selectedProject,
+  onSelect,
+  selectDirection = 'down',
+  menuAppendTo = 'parent',
+}) => {
+  const [isOpen, setOpen] = React.useState<boolean>(false);
+
+  const [projects, loaded, loadError] = useUserProjects();
+
+  if (!loaded) {
+    return <Skeleton />;
+  }
+
+  if (loadError) {
+    return (
+      <Alert title="Error loading projects" variant="danger">
+        {loadError.message}
+      </Alert>
+    );
+  }
+
+  const options = projects.map((project) => (
+    <SelectOption key={project.metadata.name} value={project.metadata.name}>
+      {getProjectDisplayName(project)}
+    </SelectOption>
+  ));
+
+  return (
+    <FormGroup label="Project" fieldId={fieldId}>
+      <Select
+        variant="typeahead"
+        selections={selectedProject}
+        isOpen={isOpen}
+        onClear={() => {
+          onSelect(undefined);
+          setOpen(false);
+        }}
+        onSelect={(e, selection) => {
+          if (typeof selection === 'string') {
+            onSelect(selection);
+            setOpen(false);
+          }
+        }}
+        onToggle={setOpen}
+        placeholderText="Select the project connected to the PV"
+        direction={selectDirection}
+        menuAppendTo={menuAppendTo}
+      >
+        {options}
+      </Select>
+    </FormGroup>
+  );
+};
+
+export default ExistingProjectField;
diff --git a/frontend/src/pages/projects/components/GenericSidebar.tsx b/frontend/src/pages/projects/components/GenericSidebar.tsx
new file mode 100644
index 0000000000..604162b85d
--- /dev/null
+++ b/frontend/src/pages/projects/components/GenericSidebar.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import {
+  JumpLinks,
+  JumpLinksItem,
+  Sidebar,
+  SidebarContent,
+  SidebarPanel,
+} from '@patternfly/react-core';
+
+type GenericSidebarProps = {
+  sections: string[];
+  titles: Record<string, string>;
+  scrollableSelector: string;
+  maxWidth?: number;
+};
+
+const GenericSidebar: React.FC<GenericSidebarProps> = ({
+  children,
+  sections,
+  titles,
+  scrollableSelector,
+  maxWidth,
+}) => {
+  return (
+    <Sidebar hasGutter>
+      <SidebarPanel variant="sticky" style={{ maxWidth }}>
+        <JumpLinks isVertical label="Jump to section" scrollableSelector={scrollableSelector}>
+          {sections.map((section) => (
+            <JumpLinksItem key={section} href={`#${section}`}>
+              {titles[section]}
+            </JumpLinksItem>
+          ))}
+        </JumpLinks>
+      </SidebarPanel>
+      <SidebarContent style={{ paddingBottom: 'var(--pf-global--spacer--lg)' }}>
+        {children}
+      </SidebarContent>
+    </Sidebar>
+  );
+};
+
+export default GenericSidebar;
diff --git a/frontend/src/pages/projects/components/IndentSection.tsx b/frontend/src/pages/projects/components/IndentSection.tsx
new file mode 100644
index 0000000000..638686243c
--- /dev/null
+++ b/frontend/src/pages/projects/components/IndentSection.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Flex, FlexItem } from '@patternfly/react-core';
+
+const IndentSection: React.FC = ({ children }) => {
+  return (
+    <Flex>
+      <FlexItem spacer={{ default: 'spacerLg' }} />
+      <FlexItem flex={{ default: 'flex_1' }}>{children}</FlexItem>
+    </Flex>
+  );
+};
+
+export default IndentSection;
diff --git a/frontend/src/pages/projects/components/NameDescriptionField.tsx b/frontend/src/pages/projects/components/NameDescriptionField.tsx
new file mode 100644
index 0000000000..3f6bd484be
--- /dev/null
+++ b/frontend/src/pages/projects/components/NameDescriptionField.tsx
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { FormGroup, Stack, StackItem, TextArea, TextInput, Tooltip } from '@patternfly/react-core';
+import { NameDescType } from '../types';
+import { isValidK8sName, translateDisplayNameForK8s } from '../utils';
+import { HelpIcon } from '@patternfly/react-icons';
+
+type NameDescriptionFieldProps = {
+  nameFieldId: string;
+  descriptionFieldId: string;
+  data: NameDescType;
+  setData: (data: NameDescType) => void;
+  autoFocusName?: boolean;
+  showK8sName?: boolean;
+  disableK8sName?: boolean;
+};
+
+const NameDescriptionField: React.FC<NameDescriptionFieldProps> = ({
+  nameFieldId,
+  descriptionFieldId,
+  data,
+  setData,
+  autoFocusName,
+  showK8sName,
+  disableK8sName,
+}) => {
+  const autoSelectNameRef = React.useRef<HTMLInputElement | null>(null);
+
+  React.useEffect(() => {
+    if (autoFocusName) {
+      autoSelectNameRef.current?.focus();
+    }
+  }, [autoFocusName]);
+
+  const k8sName = React.useMemo(() => translateDisplayNameForK8s(data.name), [data.name]);
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <FormGroup label="Name" isRequired fieldId={nameFieldId}>
+          <TextInput
+            isRequired
+            ref={autoSelectNameRef}
+            id={nameFieldId}
+            name={nameFieldId}
+            aria-labelledby={nameFieldId}
+            value={data.name}
+            onChange={(name) => setData({ ...data, name })}
+          />
+        </FormGroup>
+      </StackItem>
+      {showK8sName && (
+        <StackItem>
+          <FormGroup
+            label="Resource name"
+            labelIcon={
+              <Tooltip
+                position="right"
+                content={
+                  <Stack hasGutter>
+                    <StackItem>
+                      Resource names are what your resources are labeled in OpenShift.
+                    </StackItem>
+                    <StackItem>Resource names are not editable after creation.</StackItem>
+                  </Stack>
+                }
+              >
+                <HelpIcon />
+              </Tooltip>
+            }
+            isRequired
+            fieldId={nameFieldId}
+            helperText={
+              !disableK8sName &&
+              "Must consist of lower case alphanumeric characters or '-', and must start and end with an alphanumeric character"
+            }
+          >
+            <TextInput
+              isRequired
+              isDisabled={disableK8sName}
+              id={`resource-${nameFieldId}`}
+              name={`resource-${nameFieldId}`}
+              aria-labelledby={`resource-${nameFieldId}`}
+              value={data.k8sName ?? k8sName}
+              onChange={(k8sName) => {
+                setData({ ...data, k8sName });
+              }}
+              validated={!isValidK8sName(data.k8sName) ? 'error' : undefined}
+            />
+          </FormGroup>
+        </StackItem>
+      )}
+      <StackItem>
+        <FormGroup label="Description" fieldId={descriptionFieldId}>
+          <TextArea
+            resizeOrientation="vertical"
+            id={descriptionFieldId}
+            name={descriptionFieldId}
+            aria-labelledby={descriptionFieldId}
+            value={data.description}
+            onChange={(description) => setData({ ...data, description })}
+          />
+        </FormGroup>
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default NameDescriptionField;
diff --git a/frontend/src/pages/projects/components/PVSizeField.tsx b/frontend/src/pages/projects/components/PVSizeField.tsx
new file mode 100644
index 0000000000..9913ccc9f8
--- /dev/null
+++ b/frontend/src/pages/projects/components/PVSizeField.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { FormGroup, InputGroup, InputGroupText, NumberInput } from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
+import { isHTMLInputElement, normalizeBetween } from '../../../utilities/utils';
+import useDefaultPvcSize from '../screens/spawner/storage/useAvailablePvcSize';
+
+type PVSizeFieldProps = {
+  fieldID: string;
+  size: number;
+  setSize: (size: number) => void;
+  disable?: boolean;
+};
+
+const PVSizeField: React.FC<PVSizeFieldProps> = ({ fieldID, size, setSize, disable }) => {
+  const MIN_SIZE = 1;
+  const defaultSize = useDefaultPvcSize();
+  const availableSize = defaultSize * 2;
+
+  const onStep = (step: number) => {
+    setSize(normalizeBetween(size + step, MIN_SIZE, availableSize));
+  };
+  return (
+    <FormGroup
+      label="Persistent storage size"
+      helperText={disable ? 'Cannot change size after creation' : ''}
+      helperTextIcon={<ExclamationTriangleIcon />}
+      validated={disable ? 'warning' : 'default'}
+      fieldId={fieldID}
+    >
+      <InputGroup>
+        <NumberInput
+          id={fieldID}
+          isDisabled={disable}
+          name={fieldID}
+          value={size}
+          max={availableSize}
+          min={MIN_SIZE}
+          onPlus={() => onStep(1)}
+          onMinus={() => onStep(-1)}
+          onChange={(event) => {
+            if (isHTMLInputElement(event.target)) {
+              const newSize = Number(event.target.value);
+              setSize(
+                isNaN(newSize) ? availableSize : normalizeBetween(newSize, MIN_SIZE, availableSize),
+              );
+            }
+          }}
+        />
+        <InputGroupText variant="plain">GiB</InputGroupText>
+      </InputGroup>
+    </FormGroup>
+  );
+};
+
+export default PVSizeField;
diff --git a/frontend/src/pages/projects/components/PasswordInput.tsx b/frontend/src/pages/projects/components/PasswordInput.tsx
new file mode 100644
index 0000000000..5b89275f42
--- /dev/null
+++ b/frontend/src/pages/projects/components/PasswordInput.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Button, InputGroup, TextInput } from '@patternfly/react-core';
+import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons';
+
+const PasswordInput: React.FC<React.ComponentProps<typeof TextInput>> = (props) => {
+  const [isPassword, setPassword] = React.useState(true);
+
+  return (
+    <InputGroup>
+      <TextInput {...props} type={isPassword ? 'password' : 'text'} />
+      <Button variant="control" onClick={() => setPassword(!isPassword)}>
+        {isPassword ? <EyeSlashIcon /> : <EyeIcon />}
+      </Button>
+    </InputGroup>
+  );
+};
+
+export default PasswordInput;
diff --git a/frontend/src/pages/projects/components/ResourceNameTooltip.tsx b/frontend/src/pages/projects/components/ResourceNameTooltip.tsx
new file mode 100644
index 0000000000..78c47fb16f
--- /dev/null
+++ b/frontend/src/pages/projects/components/ResourceNameTooltip.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Stack,
+  StackItem,
+  Tooltip,
+} from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+import { K8sResourceCommon } from '@openshift/dynamic-plugin-sdk-utils';
+
+type ResourceNameTooltipProps = {
+  resource: K8sResourceCommon;
+};
+
+const ResourceNameTooltip: React.FC<ResourceNameTooltipProps> = ({ children, resource }) => {
+  return (
+    <div>
+      {children}{' '}
+      {resource.metadata?.name && (
+        <div style={{ display: 'inline-block' }}>
+          <Tooltip
+            removeFindDomNode
+            position="right"
+            content={
+              <Stack hasGutter>
+                <StackItem>
+                  Resource names and types are used to find your resources in OpenShift.
+                </StackItem>
+                <StackItem>
+                  <DescriptionList isCompact isHorizontal>
+                    <DescriptionListGroup>
+                      <DescriptionListTerm>Resource name</DescriptionListTerm>
+                      <DescriptionListDescription>
+                        {resource.metadata.name}
+                      </DescriptionListDescription>
+                    </DescriptionListGroup>
+                    <DescriptionListGroup>
+                      <DescriptionListTerm>Resource type</DescriptionListTerm>
+                      <DescriptionListDescription>{resource.kind}</DescriptionListDescription>
+                    </DescriptionListGroup>
+                  </DescriptionList>
+                </StackItem>
+              </Stack>
+            }
+          >
+            <OutlinedQuestionCircleIcon />
+          </Tooltip>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ResourceNameTooltip;
diff --git a/frontend/src/pages/projects/components/StorageSizeBars.tsx b/frontend/src/pages/projects/components/StorageSizeBars.tsx
new file mode 100644
index 0000000000..195d606ed6
--- /dev/null
+++ b/frontend/src/pages/projects/components/StorageSizeBars.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import {
+  Bullseye,
+  Progress,
+  ProgressMeasureLocation,
+  Spinner,
+  Split,
+  SplitItem,
+  Text,
+  Tooltip,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { PersistentVolumeClaimKind } from '../../../k8sTypes';
+import { getPvcTotalSize } from '../utils';
+import { usePVCFreeAmount } from '../../../api';
+import { bytesAsGB } from '../../../utilities/number';
+
+type StorageSizeBarProps = {
+  pvc: PersistentVolumeClaimKind;
+};
+
+const StorageSizeBar: React.FC<StorageSizeBarProps> = ({ pvc }) => {
+  const [inUseInBytes, loaded, error] = usePVCFreeAmount(pvc);
+  const maxValue = getPvcTotalSize(pvc);
+
+  if (!error && isNaN(inUseInBytes)) {
+    return (
+      <Tooltip
+        removeFindDomNode
+        content="No active storage information at this time, check back later"
+      >
+        <Text component="small">Max {maxValue}</Text>
+      </Tooltip>
+    );
+  }
+
+  const inUseValue = `${bytesAsGB(inUseInBytes)}Gi`;
+  const percentage = (parseFloat(inUseValue) / parseFloat(maxValue)) * 100;
+  const percentageLabel = error ? '' : `Storage is ${percentage}% full`;
+
+  let inUseRender: React.ReactNode;
+  if (error) {
+    inUseRender = (
+      <Tooltip removeFindDomNode content={`Unable to get storage data. ${error.message}`}>
+        <ExclamationCircleIcon color="var(--pf-global--danger-color--100)" />
+      </Tooltip>
+    );
+  } else if (!loaded) {
+    inUseRender = <Spinner size="sm" />;
+  } else {
+    inUseRender = inUseValue;
+  }
+
+  const progressBar = (
+    <Progress
+      aria-label={percentageLabel || 'Storage progress bar'}
+      measureLocation={ProgressMeasureLocation.none}
+      value={percentage}
+      style={{ gridGap: 0 }} // PF issue with split & measureLocation
+    />
+  );
+
+  return (
+    <Split hasGutter>
+      <SplitItem>
+        <Bullseye>
+          <Text component="small">{inUseRender}</Text>
+        </Bullseye>
+      </SplitItem>
+      <SplitItem isFilled style={{ maxWidth: 200 }}>
+        {percentageLabel ? (
+          <Tooltip removeFindDomNode content={percentageLabel}>
+            {progressBar}
+          </Tooltip>
+        ) : (
+          progressBar
+        )}
+      </SplitItem>
+      <SplitItem>
+        <Bullseye>
+          <Text component="small">{maxValue}</Text>
+        </Bullseye>
+      </SplitItem>
+    </Split>
+  );
+};
+
+export default StorageSizeBar;
diff --git a/frontend/src/pages/projects/dataConnections/AWSField.tsx b/frontend/src/pages/projects/dataConnections/AWSField.tsx
new file mode 100644
index 0000000000..44659152ca
--- /dev/null
+++ b/frontend/src/pages/projects/dataConnections/AWSField.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { EnvVariableDataEntry } from '../types';
+import { AWS_KEYS, AWS_REQUIRED_KEYS } from './const';
+import AWSInputField from './AWSInputField';
+import { Stack, StackItem } from '@patternfly/react-core';
+
+type AWSFieldProps = {
+  values: EnvVariableDataEntry[];
+  onUpdate: (data: EnvVariableDataEntry[]) => void;
+};
+
+const AWSField: React.FC<AWSFieldProps> = ({ values, onUpdate }) => {
+  const update = (key: AWS_KEYS, value: string) => {
+    onUpdate(values.map((d) => (d.key === key ? { key, value } : d)));
+  };
+
+  return (
+    <Stack hasGutter>
+      {Object.values(AWS_KEYS).map((value: AWS_KEYS) => (
+        <StackItem key={value}>
+          <AWSInputField
+            isPassword={value === AWS_KEYS.SECRET_ACCESS_KEY}
+            isRequired={AWS_REQUIRED_KEYS.includes(value)}
+            onChange={update}
+            type={value}
+            value={values.find((data) => data.key === value)?.value || ''}
+          />
+        </StackItem>
+      ))}
+    </Stack>
+  );
+};
+
+export default AWSField;
diff --git a/frontend/src/pages/projects/dataConnections/AWSInputField.tsx b/frontend/src/pages/projects/dataConnections/AWSInputField.tsx
new file mode 100644
index 0000000000..bfa858e9ae
--- /dev/null
+++ b/frontend/src/pages/projects/dataConnections/AWSInputField.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { AWS_KEYS } from './const';
+import { FormGroup, TextInput } from '@patternfly/react-core';
+import PasswordInput from '../components/PasswordInput';
+
+type AWSInputFieldProps = {
+  isPassword?: boolean;
+  isRequired: boolean;
+  onChange: (key: AWS_KEYS, value: string) => void;
+  type: AWS_KEYS;
+  value: string;
+};
+
+const AWSInputField: React.FC<AWSInputFieldProps> = ({
+  isPassword,
+  isRequired,
+  onChange,
+  type,
+  value,
+}) => {
+  const ComponentField = isPassword ? PasswordInput : TextInput;
+
+  return (
+    <FormGroup isRequired={isRequired} label={type}>
+      <ComponentField
+        aria-label={`AWS field ${type}`}
+        isRequired={isRequired}
+        value={value}
+        onChange={(value) => onChange(type, value)}
+      />
+    </FormGroup>
+  );
+};
+
+export default AWSInputField;
diff --git a/frontend/src/pages/projects/dataConnections/const.ts b/frontend/src/pages/projects/dataConnections/const.ts
new file mode 100644
index 0000000000..7f72fc6afc
--- /dev/null
+++ b/frontend/src/pages/projects/dataConnections/const.ts
@@ -0,0 +1,36 @@
+export enum AWS_KEYS {
+  NAME = 'Name',
+  ACCESS_KEY_ID = 'AWS_ACCESS_KEY_ID',
+  SECRET_ACCESS_KEY = 'AWS_SECRET_ACCESS_KEY',
+  S3_ENDPOINT = 'AWS_S3_ENDPOINT',
+  DEFAULT_REGION = 'AWS_DEFAULT_REGION',
+}
+
+export const AWS_REQUIRED_KEYS: AWS_KEYS[] = [
+  AWS_KEYS.NAME,
+  AWS_KEYS.ACCESS_KEY_ID,
+  AWS_KEYS.SECRET_ACCESS_KEY,
+];
+
+export const EMPTY_AWS_SECRET_DATA: { key: AWS_KEYS; value: string }[] = [
+  {
+    key: AWS_KEYS.NAME,
+    value: '',
+  },
+  {
+    key: AWS_KEYS.ACCESS_KEY_ID,
+    value: '',
+  },
+  {
+    key: AWS_KEYS.SECRET_ACCESS_KEY,
+    value: '',
+  },
+  {
+    key: AWS_KEYS.S3_ENDPOINT,
+    value: 'https://s3.amazonaws.com/',
+  },
+  {
+    key: AWS_KEYS.DEFAULT_REGION,
+    value: 'us-east-1',
+  },
+];
diff --git a/frontend/src/pages/projects/notebook/ConnectedNotebooks.tsx b/frontend/src/pages/projects/notebook/ConnectedNotebooks.tsx
new file mode 100644
index 0000000000..822991bb37
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/ConnectedNotebooks.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { List, ListItem, Spinner } from '@patternfly/react-core';
+import { getNotebookDisplayName } from '../utils';
+import useRelatedNotebooks, { ConnectedNotebookContext } from './useRelatedNotebooks';
+
+type ConnectedNotebooksProps = {
+  context: ConnectedNotebookContext;
+  relatedResourceName: string;
+};
+
+const ConnectedNotebooks: React.FC<ConnectedNotebooksProps> = ({
+  context,
+  relatedResourceName,
+}) => {
+  const {
+    notebooks: connectedNotebooks,
+    loaded,
+    error,
+  } = useRelatedNotebooks(context, relatedResourceName);
+
+  if (!loaded) {
+    return <Spinner size="md" />;
+  }
+
+  if (error) {
+    // TODO: What is the best way to handle this??
+    return <>N/A</>;
+  }
+
+  if (connectedNotebooks.length === 0) {
+    return <>No connections</>;
+  }
+
+  return (
+    <List isPlain>
+      {connectedNotebooks.map((notebook) => (
+        <ListItem key={notebook.metadata.uid}>{getNotebookDisplayName(notebook)}</ListItem>
+      ))}
+    </List>
+  );
+};
+
+export default ConnectedNotebooks;
diff --git a/frontend/src/pages/projects/notebook/DeleteNotebookModal.tsx b/frontend/src/pages/projects/notebook/DeleteNotebookModal.tsx
new file mode 100644
index 0000000000..d4acca3de7
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/DeleteNotebookModal.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { NotebookKind } from '../../../k8sTypes';
+import { getNotebookDisplayName } from '../utils';
+import { deleteNotebook } from '../../../api';
+import DeleteModal from '../components/DeleteModal';
+
+type DeleteNotebookModalProps = {
+  notebook?: NotebookKind;
+  onClose: (deleted: boolean) => void;
+};
+
+const DeleteNotebookModal: React.FC<DeleteNotebookModalProps> = ({ notebook, onClose }) => {
+  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [error, setError] = React.useState<Error | undefined>();
+
+  const onBeforeClose = (deleted: boolean) => {
+    onClose(deleted);
+    setIsDeleting(false);
+    setError(undefined);
+  };
+
+  const displayName = notebook ? getNotebookDisplayName(notebook) : 'this workbench';
+
+  return (
+    <DeleteModal
+      title="Delete workbench?"
+      isOpen={!!notebook}
+      onClose={() => onBeforeClose(false)}
+      submitButtonLabel="Delete workbench"
+      onDelete={() => {
+        if (notebook) {
+          setIsDeleting(true);
+          deleteNotebook(notebook.metadata.name, notebook.metadata.namespace)
+            .then(() => {
+              onBeforeClose(true);
+            })
+            .catch((e) => {
+              setError(e);
+              setIsDeleting(false);
+            });
+        }
+      }}
+      deleting={isDeleting}
+      error={error}
+      deleteName={displayName}
+    >
+      This action cannot be undone.
+    </DeleteModal>
+  );
+};
+
+export default DeleteNotebookModal;
diff --git a/frontend/src/pages/projects/notebook/ListNotebookState.tsx b/frontend/src/pages/projects/notebook/ListNotebookState.tsx
new file mode 100644
index 0000000000..2273def8f8
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/ListNotebookState.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Flex, FlexItem, Skeleton } from '@patternfly/react-core';
+import { NotebookState } from './types';
+import NotebookRouteLink from './NotebookRouteLink';
+import NotebookStatusToggle from './NotebookStatusToggle';
+
+/** Keep the size of each notebook state the same so they can stay horizontally aligned */
+const EQUAL_SIZE_STYLE = { height: 'var(--pf-c-switch--Height)' };
+
+type ListNotebookStateProps = {
+  notebookStates: NotebookState[];
+  loaded: boolean;
+  error?: Error;
+  show: 'notebook' | 'status';
+};
+
+const ListNotebookState: React.FC<ListNotebookStateProps> = ({
+  notebookStates,
+  loaded,
+  error,
+  show,
+}) => {
+  if (!loaded) {
+    return <Skeleton />;
+  }
+
+  if (error) {
+    return <>{error.message}</>;
+  }
+
+  if (notebookStates.length === 0) {
+    return <>-</>;
+  }
+
+  const notebookState = (state: NotebookState) => {
+    switch (show) {
+      case 'notebook':
+        return <NotebookRouteLink notebook={state.notebook} isRunning={state.isRunning} />;
+      case 'status':
+        return <NotebookStatusToggle notebookState={state} doListen />;
+      default:
+        console.error('Unknown show type', show);
+        return <>-</>;
+    }
+  };
+
+  return (
+    <Flex direction={{ default: 'column' }}>
+      {notebookStates.map((state) => (
+        <FlexItem key={state.notebook.metadata.name} style={EQUAL_SIZE_STYLE}>
+          {notebookState(state)}
+        </FlexItem>
+      ))}
+    </Flex>
+  );
+};
+
+export default ListNotebookState;
diff --git a/frontend/src/pages/projects/notebook/NotebookImagePackageDetails.tsx b/frontend/src/pages/projects/notebook/NotebookImagePackageDetails.tsx
new file mode 100644
index 0000000000..f30254dea3
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/NotebookImagePackageDetails.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Truncate,
+} from '@patternfly/react-core';
+import { getNameVersionString } from '../screens/spawner/spawnerUtils';
+import { ImageVersionDependencyType } from '../screens/spawner/types';
+
+type NotebookPackageDetailsProps = {
+  dependencies: ImageVersionDependencyType[];
+  title?: string;
+};
+
+const NotebookImagePackageDetails: React.FC<NotebookPackageDetailsProps> = ({
+  dependencies,
+  title,
+}) => {
+  if (dependencies.length === 0) {
+    return null;
+  }
+
+  return (
+    <DescriptionList>
+      <DescriptionListGroup>
+        <DescriptionListTerm>{title || 'Packages'}</DescriptionListTerm>
+        <DescriptionListDescription>
+          {dependencies.map(getNameVersionString).map((pkg) => (
+            <p key={pkg}>
+              <Truncate content={pkg} />
+            </p>
+          ))}
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+    </DescriptionList>
+  );
+};
+
+export default NotebookImagePackageDetails;
diff --git a/frontend/src/pages/projects/notebook/NotebookRouteLink.tsx b/frontend/src/pages/projects/notebook/NotebookRouteLink.tsx
new file mode 100644
index 0000000000..4088d92642
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/NotebookRouteLink.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Button, ButtonVariant } from '@patternfly/react-core';
+import { ExclamationCircleIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { NotebookKind } from '../../../k8sTypes';
+import useRouteForNotebook from './useRouteForNotebook';
+import { getNotebookDisplayName } from '../utils';
+import { hasStopAnnotation } from './utils';
+
+type NotebookRouteLinkProps = {
+  label?: React.ReactNode;
+  notebook: NotebookKind;
+  isRunning: boolean;
+  variant?: ButtonVariant;
+};
+
+const NotebookRouteLink: React.FC<NotebookRouteLinkProps> = ({
+  label,
+  notebook,
+  isRunning,
+  variant,
+}) => {
+  const [routeLink, loaded, error] = useRouteForNotebook(notebook);
+  const isStopped = hasStopAnnotation(notebook);
+  const canLink = !!routeLink && !error && !isStopped && isRunning;
+
+  return (
+    <Button
+      component="a"
+      isInline
+      isDisabled={!canLink}
+      isLoading={!loaded}
+      href={error || !routeLink ? undefined : routeLink}
+      target="_blank"
+      variant={variant || 'link'}
+      icon={
+        error ? (
+          <ExclamationCircleIcon title="Error getting link for notebook" />
+        ) : (
+          <ExternalLinkAltIcon />
+        )
+      }
+      iconPosition="right"
+      style={{ whiteSpace: 'nowrap' }}
+    >
+      {label ?? getNotebookDisplayName(notebook)}
+    </Button>
+  );
+};
+
+export default NotebookRouteLink;
diff --git a/frontend/src/pages/projects/notebook/NotebookStatusPopover.tsx b/frontend/src/pages/projects/notebook/NotebookStatusPopover.tsx
new file mode 100644
index 0000000000..aabf70af4d
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/NotebookStatusPopover.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { Button, Popover } from '@patternfly/react-core';
+import StartNotebookModal from './StartNotebookModal';
+import { NotebookState } from './types';
+import { getEventFullMessage, useNotebookStatus } from './utils';
+import { useDeepCompareMemoize } from '../../../utilities/useDeepCompareMemoize';
+
+type NotebookStatusPopoverProps = {
+  isVisible: boolean;
+  onClose: () => void;
+  notebookState: NotebookState;
+  stopNotebook: () => void;
+};
+
+const NotebookStatusPopover: React.FC<NotebookStatusPopoverProps> = ({
+  children,
+  onClose,
+  isVisible,
+  notebookState,
+  stopNotebook,
+}) => {
+  const { notebook, runningPodUid, isStarting } = notebookState;
+  const [isStartModalOpen, setStartModalOpen] = React.useState(false);
+  const [unstableNotebookStatus, events] = useNotebookStatus(notebook, runningPodUid, isStarting);
+  const notebookStatus = useDeepCompareMemoize(unstableNotebookStatus);
+
+  return (
+    <>
+      <Popover
+        shouldClose={onClose}
+        isVisible={isVisible}
+        headerContent="Notebook status"
+        bodyContent={
+          <>
+            {events[events.length - 1]
+              ? getEventFullMessage(events[events.length - 1])
+              : 'Waiting for notebook to start...'}
+          </>
+        }
+        footerContent={
+          <Button
+            variant="link"
+            isInline
+            onClick={() => {
+              setStartModalOpen(true);
+              onClose();
+            }}
+          >
+            Event log
+          </Button>
+        }
+      >
+        <>{children}</>
+      </Popover>
+      <StartNotebookModal
+        isOpen={isStartModalOpen}
+        notebookState={notebookState}
+        notebookStatus={notebookStatus}
+        events={events}
+        onClose={(stopped) => {
+          if (stopped) {
+            stopNotebook();
+          }
+          setStartModalOpen(false);
+        }}
+      />
+    </>
+  );
+};
+
+export default NotebookStatusPopover;
diff --git a/frontend/src/pages/projects/notebook/NotebookStatusToggle.tsx b/frontend/src/pages/projects/notebook/NotebookStatusToggle.tsx
new file mode 100644
index 0000000000..3c49a899ab
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/NotebookStatusToggle.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { Flex, FlexItem, Switch, Text } from '@patternfly/react-core';
+import { startNotebook, stopNotebook } from '../../../api';
+import { NotebookState } from './types';
+import useRefreshNotebookUntilStart from './useRefreshNotebookUntilStart';
+import StopNotebookConfirmModal from './StopNotebookConfirmModal';
+import useStopNotebookModalAvailability from './useStopNotebookModalAvailability';
+import NotebookStatusPopover from './NotebookStatusPopover';
+
+type NotebookStatusToggleProps = {
+  notebookState: NotebookState;
+  doListen: boolean;
+};
+
+const NotebookStatusToggle: React.FC<NotebookStatusToggleProps> = ({ notebookState, doListen }) => {
+  const { notebook, isStarting, isRunning, refresh } = notebookState;
+  const [isOpenConfirm, setOpenConfirm] = React.useState(false);
+  const [inProgress, setInProgress] = React.useState(false);
+  const [isPopoverVisible, setPopoverVisible] = React.useState(false);
+  const listenToNotebookStart = useRefreshNotebookUntilStart(notebookState, doListen);
+  const [dontShowModalValue] = useStopNotebookModalAvailability();
+  const notebookName = notebook.metadata.name;
+  const notebookNamespace = notebook.metadata.namespace;
+  const isRunningOrStarting = isStarting || isRunning;
+
+  /** If in progress, it is faking the opposite */
+  const isChecked = inProgress ? !isRunningOrStarting : isRunningOrStarting;
+
+  let label = '';
+  if (isStarting) {
+    label = 'Starting...';
+  } else if (inProgress) {
+    label = isChecked ? 'Starting...' : 'Stopping...';
+  } else {
+    label = isRunning ? 'Running' : 'Stopped';
+  }
+
+  const handleStop = React.useCallback(() => {
+    setInProgress(true);
+    stopNotebook(notebookName, notebookNamespace).then(() => {
+      refresh().then(() => setInProgress(false));
+      listenToNotebookStart(false);
+    });
+  }, [notebookName, notebookNamespace, refresh, listenToNotebookStart]);
+
+  return (
+    <>
+      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          <Switch
+            aria-label={label}
+            isDisabled={inProgress}
+            id={notebookName}
+            isChecked={isChecked}
+            onClick={() => {
+              if (isRunningOrStarting) {
+                if (dontShowModalValue) {
+                  handleStop();
+                } else {
+                  setOpenConfirm(true);
+                }
+              } else {
+                setInProgress(true);
+                startNotebook(notebookName, notebookNamespace).then(() => {
+                  refresh().then(() => setInProgress(false));
+                  listenToNotebookStart(true);
+                });
+              }
+            }}
+          />
+        </FlexItem>
+        <FlexItem>
+          <NotebookStatusPopover
+            isVisible={isPopoverVisible}
+            notebookState={notebookState}
+            stopNotebook={handleStop}
+            onClose={() => setPopoverVisible(false)}
+          >
+            <Text
+              onClick={() => {
+                if (isStarting) {
+                  setPopoverVisible((visible) => !visible);
+                }
+              }}
+            >
+              {label}
+            </Text>
+          </NotebookStatusPopover>
+        </FlexItem>
+      </Flex>
+      <StopNotebookConfirmModal
+        isOpen={isOpenConfirm}
+        notebook={notebook}
+        onClose={(confirmStatus) => {
+          if (confirmStatus) {
+            handleStop();
+          }
+          setOpenConfirm(false);
+        }}
+      />
+    </>
+  );
+};
+
+export default NotebookStatusToggle;
diff --git a/frontend/src/pages/projects/notebook/SelectNotebookField.tsx b/frontend/src/pages/projects/notebook/SelectNotebookField.tsx
new file mode 100644
index 0000000000..d56d7e4add
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/SelectNotebookField.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { FormGroup, Select, SelectOption } from '@patternfly/react-core';
+import { getNotebookDisplayName } from '../utils';
+import { NotebookKind } from '../../../k8sTypes';
+
+type SelectNotebookFieldProps = {
+  loaded: boolean;
+  notebooks: NotebookKind[];
+  selection: string;
+  onSelect: (selection?: string) => void;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  selectionHelperText?: string;
+  label?: string;
+};
+
+const SelectNotebookField: React.FC<SelectNotebookFieldProps> = ({
+  loaded,
+  notebooks,
+  isRequired,
+  selection,
+  onSelect,
+  isDisabled,
+  selectionHelperText,
+  label = 'Workbench',
+}) => {
+  const [notebookSelectOpen, setNotebookSelectOpen] = React.useState<boolean>(false);
+
+  const noNotebooks = notebooks.length === 0;
+  const disabled = !!isDisabled || !loaded || noNotebooks;
+
+  let placeholderText: string;
+  if (!loaded) {
+    placeholderText = 'Fetching workbenches...';
+  } else if (noNotebooks) {
+    placeholderText = 'No available workbenches';
+  } else {
+    placeholderText = 'Choose an existing workbench';
+  }
+
+  return (
+    <FormGroup
+      label={label}
+      helperText={!noNotebooks && selectionHelperText}
+      fieldId="connect-existing-workbench"
+      isRequired={isRequired}
+    >
+      <Select
+        variant="typeahead"
+        selections={selection}
+        isOpen={notebookSelectOpen}
+        isDisabled={disabled}
+        onClear={() => {
+          onSelect();
+          setNotebookSelectOpen(false);
+        }}
+        onSelect={(e, selection) => {
+          if (typeof selection === 'string') {
+            onSelect(selection);
+            setNotebookSelectOpen(false);
+          }
+        }}
+        onToggle={(isOpen) => setNotebookSelectOpen(isOpen)}
+        placeholderText={placeholderText}
+        menuAppendTo="parent"
+      >
+        {notebooks.map((notebook) => (
+          <SelectOption key={notebook.metadata.name} value={notebook.metadata.name}>
+            {getNotebookDisplayName(notebook)}
+          </SelectOption>
+        ))}
+      </Select>
+    </FormGroup>
+  );
+};
+
+export default SelectNotebookField;
diff --git a/frontend/src/pages/projects/notebook/StartNotebookModal.tsx b/frontend/src/pages/projects/notebook/StartNotebookModal.tsx
new file mode 100644
index 0000000000..60f001e9c0
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/StartNotebookModal.tsx
@@ -0,0 +1,199 @@
+import * as React from 'react';
+import {
+  Alert,
+  AlertVariant,
+  Button,
+  ButtonVariant,
+  List,
+  ListItem,
+  Modal,
+  ModalVariant,
+  Panel,
+  PanelMain,
+  Progress,
+  ProgressVariant,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import NotebookRouteLink from './NotebookRouteLink';
+import { NotebookState } from './types';
+import { getEventFullMessage } from './utils';
+import { EventStatus, NotebookStatus } from '../../../types';
+import { EventKind } from '../../../k8sTypes';
+
+type StartNotebookModalProps = {
+  isOpen: boolean;
+  notebookState: NotebookState;
+  notebookStatus: NotebookStatus | null;
+  events: EventKind[];
+  onClose: (stopped: boolean) => void;
+};
+
+type SpawnStatus = {
+  status: AlertVariant;
+  title: string;
+  description: React.ReactNode;
+};
+
+const StartNotebookModal: React.FC<StartNotebookModalProps> = ({
+  isOpen,
+  notebookStatus,
+  events,
+  notebookState,
+  onClose,
+}) => {
+  const { notebook, isRunning, isStarting } = notebookState;
+  const [spawnPercentile, setSpawnPercentile] = React.useState<number>(0);
+  const [spawnStatus, setSpawnStatus] = React.useState<SpawnStatus | null>(null);
+
+  const spawnFailed = spawnStatus?.status === AlertVariant.danger;
+
+  React.useEffect(() => {
+    if (!isOpen) {
+      // Reset the modal
+      setSpawnPercentile(0);
+      setSpawnStatus(null);
+    } else if (isRunning) {
+      setSpawnPercentile(100);
+      setSpawnStatus({
+        status: AlertVariant.success,
+        title: 'Success',
+        description: 'The notebook server is up and running.',
+      });
+    }
+  }, [isOpen, isRunning]);
+
+  React.useEffect(() => {
+    if (isStarting && !isRunning && isOpen) {
+      if (!notebookStatus) {
+        return;
+      }
+      if (notebookStatus.currentStatus === EventStatus.IN_PROGRESS) {
+        setSpawnPercentile(notebookStatus.percentile);
+        setSpawnStatus(null);
+      } else if (notebookStatus.currentStatus === EventStatus.ERROR) {
+        setSpawnStatus({
+          status: AlertVariant.danger,
+          title: notebookStatus.currentEventReason,
+          description: notebookStatus.currentEventDescription,
+        });
+      } else if (notebookStatus.currentStatus === EventStatus.INFO) {
+        setSpawnStatus({
+          status: AlertVariant.info,
+          title: notebookStatus.currentEventReason,
+          description: notebookStatus.currentEventDescription,
+        });
+      } else if (notebookStatus.currentStatus === EventStatus.WARNING) {
+        setSpawnStatus({
+          status: AlertVariant.warning,
+          title: notebookStatus.currentEventReason,
+          description: notebookStatus.currentEventDescription,
+        });
+      }
+    }
+  }, [notebookStatus, isStarting, isRunning, isOpen]);
+
+  const renderProgress = () => {
+    let variant: ProgressVariant | undefined;
+    switch (spawnStatus?.status) {
+      case AlertVariant.danger:
+        variant = ProgressVariant.danger;
+        break;
+      case AlertVariant.success:
+        variant = ProgressVariant.success;
+        break;
+      case AlertVariant.warning:
+        variant = ProgressVariant.warning;
+        break;
+      default:
+        variant = undefined;
+    }
+
+    const currentEvent = notebookStatus?.currentEvent;
+    let title: string;
+    if (events.length > 0 && currentEvent) {
+      title = currentEvent;
+    } else if (isOpen && !isStarting) {
+      title = 'Creating resources...';
+    } else {
+      title = 'Waiting for server request to start...';
+    }
+    return (
+      <Progress data-id="progress-bar" value={spawnPercentile} title={title} variant={variant} />
+    );
+  };
+
+  const renderStatus = () => {
+    if (!spawnStatus) {
+      return null;
+    }
+    return (
+      <Alert isInline variant={spawnStatus.status} title={spawnStatus.title}>
+        <p>{spawnStatus.description}</p>
+      </Alert>
+    );
+  };
+
+  const renderButtons = () =>
+    !isRunning ? (
+      <Button
+        data-id="close-spawn"
+        key="cancel"
+        variant={spawnFailed ? 'primary' : 'secondary'}
+        onClick={() => onClose(true)}
+        isDisabled={!open}
+      >
+        Cancel
+      </Button>
+    ) : (
+      <NotebookRouteLink
+        label="Open"
+        notebook={notebook}
+        isRunning={isRunning}
+        variant={ButtonVariant.primary}
+      />
+    );
+  const renderLogs = () => (
+    <Stack hasGutter>
+      <StackItem>
+        <strong>Event log</strong>
+      </StackItem>
+      <StackItem>
+        <Panel isScrollable>
+          <PanelMain maxHeight="250px">
+            <List isPlain isBordered data-id="event-logs">
+              {events.reverse().map((event, index) => (
+                <ListItem key={`notebook-event-${event.metadata.uid ?? index}`}>
+                  {getEventFullMessage(event)}
+                </ListItem>
+              ))}
+              <ListItem>Server requested</ListItem>
+            </List>
+          </PanelMain>
+        </Panel>
+      </StackItem>
+    </Stack>
+  );
+
+  return (
+    <Modal
+      aria-label="Starting server modal"
+      description="Depending on the size and resources requested, this can take several minutes."
+      appendTo={document.body}
+      variant={ModalVariant.small}
+      title="Starting server"
+      isOpen={isOpen}
+      showClose
+      onClose={() => onClose(false)}
+    >
+      <Stack hasGutter>
+        <StackItem>{renderProgress()}</StackItem>
+        <StackItem>{renderStatus()}</StackItem>
+        <StackItem>{renderButtons()}</StackItem>
+        <StackItem>{renderLogs()}</StackItem>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default StartNotebookModal;
diff --git a/frontend/src/pages/projects/notebook/StopNotebookConfirmModal.tsx b/frontend/src/pages/projects/notebook/StopNotebookConfirmModal.tsx
new file mode 100644
index 0000000000..f32a107029
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/StopNotebookConfirmModal.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { Button, Checkbox, Modal, Stack, StackItem } from '@patternfly/react-core';
+import NotebookRouteLink from './NotebookRouteLink';
+import { NotebookKind } from '../../../k8sTypes';
+import useStopNotebookModalAvailability from './useStopNotebookModalAvailability';
+
+type StopNotebookConfirmProps = {
+  isOpen: boolean;
+  notebook?: NotebookKind;
+  onClose: (confirmStatus: boolean) => void;
+};
+
+const StopNotebookConfirmModal: React.FC<StopNotebookConfirmProps> = ({
+  isOpen,
+  notebook,
+  onClose,
+}) => {
+  const [dontShowModalValue, setDontShowModalValue] = useStopNotebookModalAvailability();
+  const onBeforeClose = (confirmStatus: boolean) => {
+    if (!confirmStatus) {
+      // Disable the choice -- we were in this modal and they checked and then cancelled -- so undo it
+      setDontShowModalValue(false);
+    }
+
+    onClose(confirmStatus);
+  };
+
+  return (
+    <Modal
+      variant="small"
+      title="Stop workbench?"
+      isOpen={isOpen}
+      onClose={() => onBeforeClose(false)}
+      actions={[
+        <Button key="confirm-stop" variant="primary" onClick={() => onBeforeClose(true)}>
+          Stop workbench
+        </Button>,
+        <Button key="cancel" variant="secondary" onClick={() => onBeforeClose(false)}>
+          Cancel
+        </Button>,
+      ]}
+    >
+      <Stack hasGutter>
+        <StackItem>
+          Are you sure you want to stop the workbench? Any changes without saving will be erased.
+        </StackItem>
+        {notebook && (
+          <StackItem>
+            To save changes, access your{' '}
+            <NotebookRouteLink label="workbench" notebook={notebook} isRunning />.
+          </StackItem>
+        )}
+        <StackItem>
+          <Checkbox
+            id="dont-show-again"
+            label="Don't show again"
+            isChecked={dontShowModalValue}
+            onChange={(checked) => setDontShowModalValue(checked)}
+          />
+        </StackItem>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default StopNotebookConfirmModal;
diff --git a/frontend/src/pages/projects/notebook/service.ts b/frontend/src/pages/projects/notebook/service.ts
new file mode 100644
index 0000000000..eda16185e5
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/service.ts
@@ -0,0 +1,46 @@
+import { NotebookKind, PodKind } from '../../../k8sTypes';
+import { NotebookDataState } from './types';
+import { getPodsForNotebook } from '../../../api';
+import { hasStopAnnotation } from './utils';
+
+const checkPodContainersReady = (pod: PodKind): boolean => {
+  const containerStatuses = pod.status?.containerStatuses || [];
+  if (containerStatuses.length === 0) {
+    return false;
+  }
+  return containerStatuses.every(
+    (containerStatus) => containerStatus.ready && containerStatus.state?.running,
+  );
+};
+
+export const getNotebooksStatus = async (
+  notebooks: NotebookKind[],
+): Promise<NotebookDataState[]> => {
+  if (notebooks.length === 0) {
+    return [];
+  }
+
+  return Promise.all(
+    notebooks.map((notebook) =>
+      getPodsForNotebook(notebook.metadata.namespace, notebook.metadata.name),
+    ),
+  ).then((podsPerNotebook) =>
+    podsPerNotebook.reduce<NotebookDataState[]>((acc, pods, i) => {
+      const isStopped = hasStopAnnotation(notebooks[i]);
+      const podsReady = pods.some((pod) => checkPodContainersReady(pod));
+      return [
+        ...acc,
+        {
+          notebook: notebooks[i],
+          isStarting: !isStopped && !podsReady,
+          isRunning: !isStopped && podsReady,
+          runningPodUid: pods[0]?.metadata?.uid || '',
+        },
+      ];
+    }, []),
+  );
+};
+
+export const getNotebookStatus = async (notebook: NotebookKind): Promise<NotebookDataState> => {
+  return getNotebooksStatus([notebook]).then((states) => states[0]);
+};
diff --git a/frontend/src/pages/projects/notebook/types.ts b/frontend/src/pages/projects/notebook/types.ts
new file mode 100644
index 0000000000..d82e5dd72f
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/types.ts
@@ -0,0 +1,17 @@
+import { NotebookKind } from '../../../k8sTypes';
+
+/** The state behind the notebook status */
+export type NotebookDataState = {
+  notebook: NotebookKind;
+  isStarting: boolean;
+  isRunning: boolean;
+  runningPodUid: string;
+};
+
+/** A refresh function that can be waited on to complete the refresh and then acted on */
+export type NotebookRefresh = () => Promise<void>;
+
+/** The actionable state we should use -- contains runtime functions for use-cases */
+export type NotebookState = NotebookDataState & {
+  refresh: NotebookRefresh;
+};
diff --git a/frontend/src/pages/projects/notebook/useNonConnectedNotebooks.ts b/frontend/src/pages/projects/notebook/useNonConnectedNotebooks.ts
new file mode 100644
index 0000000000..87d89a7510
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/useNonConnectedNotebooks.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import useRelatedNotebooks from './useRelatedNotebooks';
+import { ProjectDetailsContext } from '../ProjectDetailsContext';
+
+const useNonConnectedNotebooks = (
+  ...args: Parameters<typeof useRelatedNotebooks>
+): ReturnType<typeof useRelatedNotebooks> => {
+  const {
+    notebooks: { data },
+  } = React.useContext(ProjectDetailsContext);
+  const allNotebooks = data.map(({ notebook }) => notebook);
+  const { notebooks, ...rest } = useRelatedNotebooks(...args);
+  const availableNotebooks = _.difference(allNotebooks, notebooks);
+
+  return { notebooks: availableNotebooks, ...rest };
+};
+
+export default useNonConnectedNotebooks;
diff --git a/frontend/src/pages/projects/notebook/useProjectNotebookStates.ts b/frontend/src/pages/projects/notebook/useProjectNotebookStates.ts
new file mode 100644
index 0000000000..62ad2f03d1
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/useProjectNotebookStates.ts
@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { getNotebook, getNotebooks } from '../../../api';
+import { NotebookRefresh, NotebookState } from './types';
+import { getNotebooksStatus, getNotebookStatus } from './service';
+
+const useProjectNotebookStates = (
+  namespace?: string,
+): [
+  notebooks: NotebookState[],
+  loaded: boolean,
+  loadError: Error | undefined,
+  refreshNotebooks: () => void,
+] => {
+  const [notebookState, setNotebookState] = React.useState<NotebookState[]>([]);
+  const [loaded, setLoaded] = React.useState(false);
+  const [loadError, setLoadError] = React.useState<Error | undefined>(undefined);
+
+  const refreshNotebookState = React.useCallback(
+    (notebookName: string): ReturnType<NotebookRefresh> => {
+      if (!namespace) {
+        return Promise.reject(new Error('Failed to refresh based on namespace issues'));
+      }
+
+      return new Promise((resolve, reject) => {
+        getNotebook(notebookName, namespace)
+          .then((notebook) => {
+            if (!notebook) {
+              resolve();
+              return;
+            }
+
+            // Have a notebook, get a proper status of it
+            getNotebookStatus(notebook)
+              .then((notebookStatus) => {
+                // Now that we have the latest status, update state
+                setNotebookState((notebookStates) =>
+                  notebookStates.map((state) =>
+                    state.notebook.metadata.name === notebookName
+                      ? {
+                          ...notebookStatus,
+                          refresh: () => refreshNotebookState(notebookName),
+                        }
+                      : state,
+                  ),
+                );
+
+                resolve();
+              })
+              .catch(reject);
+          })
+          .catch(reject);
+      });
+    },
+    [namespace],
+  );
+
+  const fetchAllNotebooks = React.useCallback(() => {
+    if (namespace) {
+      getNotebooks(namespace)
+        .then((notebooks) => {
+          getNotebooksStatus(notebooks)
+            .then((state) => {
+              setNotebookState(
+                state.map((state) => ({
+                  ...state,
+                  refresh: () => refreshNotebookState(state.notebook.metadata.name),
+                })),
+              );
+              setLoaded(true);
+            })
+            .catch((e) => {
+              setLoadError(e);
+              setLoaded(true);
+            });
+        })
+        .catch((e) => {
+          setLoadError(e);
+          setLoaded(true);
+        });
+    }
+  }, [namespace, refreshNotebookState]);
+
+  React.useEffect(() => {
+    fetchAllNotebooks();
+  }, [fetchAllNotebooks]);
+
+  return [notebookState, loaded, loadError, fetchAllNotebooks];
+};
+
+export default useProjectNotebookStates;
diff --git a/frontend/src/pages/projects/notebook/useRefreshNotebookUntilStart.ts b/frontend/src/pages/projects/notebook/useRefreshNotebookUntilStart.ts
new file mode 100644
index 0000000000..3943e412c3
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/useRefreshNotebookUntilStart.ts
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { FAST_POLL_INTERVAL } from '../../../utilities/const';
+import { NotebookState } from './types';
+
+const useRefreshNotebookUntilStart = (
+  notebookState: NotebookState,
+  doListen: boolean,
+): ((listen: boolean) => void) => {
+  const [watchingForNotebook, setWatchingForNotebook] = React.useState(false);
+  const lastNotebookState = React.useRef<NotebookState>(notebookState);
+  lastNotebookState.current = notebookState;
+
+  React.useEffect(() => {
+    let interval;
+    if (watchingForNotebook && doListen) {
+      interval = setInterval(() => {
+        const { isRunning, refresh } = lastNotebookState.current;
+        if (!isRunning) {
+          refresh().catch((e) => {
+            console.error('Error refreshing, stopping notebook refresh', e);
+            setWatchingForNotebook(false);
+          });
+        } else {
+          setWatchingForNotebook(false);
+        }
+      }, FAST_POLL_INTERVAL);
+    }
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [watchingForNotebook, doListen]);
+
+  return React.useCallback((listen: boolean) => {
+    setWatchingForNotebook(listen);
+  }, []);
+};
+
+export default useRefreshNotebookUntilStart;
diff --git a/frontend/src/pages/projects/notebook/useRelatedNotebooks.ts b/frontend/src/pages/projects/notebook/useRelatedNotebooks.ts
new file mode 100644
index 0000000000..80586a12bc
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/useRelatedNotebooks.ts
@@ -0,0 +1,54 @@
+import { NotebookKind } from '../../../k8sTypes';
+import { getNotebookPVCNames, getNotebookSecretNames } from '../pvc/utils';
+import * as React from 'react';
+import { ProjectDetailsContext } from '../ProjectDetailsContext';
+
+export enum ConnectedNotebookContext {
+  PVC = 'pvc',
+  DATA_CONNECTION = 'data-connection',
+}
+
+const useRelatedNotebooks = (
+  context: ConnectedNotebookContext,
+  resourceName?: string,
+): { notebooks: NotebookKind[]; loaded: boolean; error: Error | undefined } => {
+  const {
+    notebooks: { data, loaded, error },
+  } = React.useContext(ProjectDetailsContext);
+
+  const connectedNotebooks = React.useMemo(() => {
+    if (!resourceName) {
+      return [];
+    }
+    switch (context) {
+      case ConnectedNotebookContext.PVC:
+        return data.reduce<NotebookKind[]>((acc, { notebook }) => {
+          const relatedPVCNames = getNotebookPVCNames(notebook);
+          if (!relatedPVCNames.includes(resourceName)) {
+            return acc;
+          }
+
+          return [...acc, notebook];
+        }, []);
+      case ConnectedNotebookContext.DATA_CONNECTION:
+        return data.reduce<NotebookKind[]>((acc, { notebook }) => {
+          const relatedEnvs = getNotebookSecretNames(notebook);
+          if (!relatedEnvs.includes(resourceName)) {
+            return acc;
+          }
+
+          return [...acc, notebook];
+        }, []);
+      default:
+        return [];
+    }
+  }, [context, resourceName, data]);
+
+  return {
+    notebooks: connectedNotebooks,
+    loaded,
+    error,
+  };
+};
+
+export default useRelatedNotebooks;
diff --git a/frontend/src/pages/projects/notebook/useRouteForNotebook.ts b/frontend/src/pages/projects/notebook/useRouteForNotebook.ts
new file mode 100644
index 0000000000..aa2ead1fff
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/useRouteForNotebook.ts
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { getRoute } from '../../../api';
+import { NotebookKind } from '../../../k8sTypes';
+
+const useRouteForNotebook = (
+  notebook: NotebookKind,
+): [routeLink: string | null, loaded: boolean, loadError: Error | null] => {
+  const [route, setRoute] = React.useState<string | null>(null);
+  const [loaded, setLoaded] = React.useState(false);
+  const [loadError, setLoadError] = React.useState<Error | null>(null);
+
+  const routeName = notebook.metadata.name;
+  const routeNamespace = notebook.metadata.namespace;
+
+  React.useEffect(() => {
+    getRoute(routeName, routeNamespace)
+      .then((route) => {
+        setRoute(`https://${route.spec.host}/notebook/${routeNamespace}/${routeName}`);
+        setLoaded(true);
+      })
+      .catch((e) => {
+        setLoadError(e);
+        setLoaded(true);
+      });
+  }, [routeName, routeNamespace]);
+
+  return [route, loaded, loadError];
+};
+
+export default useRouteForNotebook;
diff --git a/frontend/src/pages/projects/notebook/useStopNotebookModalAvailability.ts b/frontend/src/pages/projects/notebook/useStopNotebookModalAvailability.ts
new file mode 100644
index 0000000000..e3012a90c6
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/useStopNotebookModalAvailability.ts
@@ -0,0 +1,7 @@
+import { useLocalStorage } from '../../../components/localStorage';
+
+const useStopNotebookModalAvailability = (): [boolean, (v: boolean) => void] => {
+  return useLocalStorage<boolean>('odh.dashboard.dsg.stop.modal.preference', false);
+};
+
+export default useStopNotebookModalAvailability;
diff --git a/frontend/src/pages/projects/notebook/useWatchNotebookEvents.ts b/frontend/src/pages/projects/notebook/useWatchNotebookEvents.ts
new file mode 100644
index 0000000000..ef2ecbb0d7
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/useWatchNotebookEvents.ts
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { EventKind } from '../../../k8sTypes';
+import { getNotebookEvents } from '../../../api';
+import { FAST_POLL_INTERVAL } from '../../../utilities/const';
+
+export const useWatchNotebookEvents = (
+  projectName: string,
+  podUid: string,
+  activeFetch: boolean,
+): EventKind[] => {
+  const [notebookEvents, setNoteBookEvents] = React.useState<EventKind[]>([]);
+
+  React.useEffect(() => {
+    let watchHandle;
+    let cancelled = false;
+
+    const clear = () => {
+      cancelled = true;
+      clearTimeout(watchHandle);
+    };
+
+    if (activeFetch) {
+      const watchNotebookEvents = () => {
+        if (projectName && podUid) {
+          getNotebookEvents(projectName, podUid)
+            .then((data: EventKind[]) => {
+              if (cancelled) {
+                return;
+              }
+              setNoteBookEvents(data);
+            })
+            .catch((e) => {
+              console.error('Error fetching notebook events', e);
+              clear();
+            });
+          watchHandle = setTimeout(watchNotebookEvents, FAST_POLL_INTERVAL);
+        }
+      };
+
+      watchNotebookEvents();
+    }
+    return clear;
+  }, [projectName, podUid, activeFetch]);
+
+  return notebookEvents;
+};
diff --git a/frontend/src/pages/projects/notebook/utils.ts b/frontend/src/pages/projects/notebook/utils.ts
new file mode 100644
index 0000000000..3e9a1f9c48
--- /dev/null
+++ b/frontend/src/pages/projects/notebook/utils.ts
@@ -0,0 +1,210 @@
+import { EventKind, NotebookKind } from '../../../k8sTypes';
+import { EventStatus, NotebookStatus } from '../../../types';
+import { useWatchNotebookEvents } from './useWatchNotebookEvents';
+
+export const hasStopAnnotation = (notebook: NotebookKind): boolean => {
+  return !!(
+    notebook.metadata.annotations?.['kubeflow-resource-stopped'] &&
+    notebook.metadata.annotations['kubeflow-resource-stopped'] !== 'odh-notebook-controller-lock'
+  );
+};
+
+export const getNotebookMountPaths = (notebook?: NotebookKind): string[] => {
+  if (!notebook) {
+    return [];
+  }
+
+  return notebook.spec.template.spec.containers
+    .map((container) => container.volumeMounts?.map((volumeMount) => volumeMount.mountPath) || [])
+    .flat();
+};
+
+export const getEventTimestamp = (event: EventKind): string =>
+  event.lastTimestamp || event.eventTime;
+
+const filterEvents = (
+  allEvents: EventKind[],
+  lastActivity: Date,
+): [filterEvents: EventKind[], thisInstanceEvents: EventKind[], gracePeriod: boolean] => {
+  const thisInstanceEvents = allEvents.filter(
+    (event) => new Date(getEventTimestamp(event)) >= lastActivity,
+  );
+  if (thisInstanceEvents.length === 0) {
+    // Filtered out all of the events, exit early
+    return [[], [], false];
+  }
+
+  let filteredEvents = thisInstanceEvents;
+
+  const now = Date.now();
+  let gracePeriod = false;
+
+  // Ignore the rest of the filter logic if we pass 20 minutes
+  const maxCap = new Date(lastActivity).setMinutes(lastActivity.getMinutes() + 20);
+  if (now <= maxCap) {
+    // Haven't hit the cap yet, filter events for accepted scenarios
+    const infoEvents = filteredEvents.filter((event) => event.type === 'Normal');
+    const idleTime = new Date(lastActivity).setSeconds(lastActivity.getSeconds() + 30);
+    gracePeriod = idleTime - now > 0;
+
+    // Suppress the warnings when we are idling
+    if (gracePeriod) {
+      filteredEvents = infoEvents;
+    }
+
+    // If we are scaling up, we want to focus on that
+    const hasScaleUp = infoEvents.some((event) => event.reason === 'TriggeredScaleUp');
+    if (hasScaleUp) {
+      // Scaling up event is present -- look for issues with it
+      const hasScaleUpIssueIndex = thisInstanceEvents.findIndex(
+        (event) => event.reason === 'NotTriggerScaleUp',
+      );
+      if (hasScaleUpIssueIndex >= 0) {
+        // Has scale up issue, show that
+        filteredEvents = [thisInstanceEvents[hasScaleUpIssueIndex]];
+      } else {
+        // Haven't hit a failure in scale up, show just infos
+        filteredEvents = infoEvents;
+      }
+    }
+  }
+
+  return [filteredEvents, thisInstanceEvents, gracePeriod];
+};
+
+export const useNotebookStatus = (
+  notebook: NotebookKind,
+  podUid: string,
+  spawnInProgress: boolean,
+): [status: NotebookStatus | null, events: EventKind[]] => {
+  const events = useWatchNotebookEvents(notebook.metadata.namespace, podUid, spawnInProgress);
+
+  const annotationTime = notebook?.metadata.annotations?.['notebooks.kubeflow.org/last-activity'];
+  const lastActivity = annotationTime ? new Date(annotationTime) : null;
+
+  if (!lastActivity) {
+    // Notebook not started, we don't have a filter time, ignore
+    return [null, []];
+  }
+
+  const [filteredEvents, thisInstanceEvents, gracePeriod] = filterEvents(events, lastActivity);
+  if (filteredEvents.length === 0) {
+    return [null, thisInstanceEvents];
+  }
+
+  // Parse the last event
+  let percentile = 0;
+  let status: EventStatus = EventStatus.IN_PROGRESS;
+  const lastItem = filteredEvents[filteredEvents.length - 1];
+  let currentEvent = '';
+  if (lastItem.message.includes('oauth-proxy')) {
+    switch (lastItem.reason) {
+      case 'Pulling': {
+        currentEvent = 'Pulling oauth proxy';
+        percentile = 72;
+        break;
+      }
+      case 'Pulled': {
+        currentEvent = 'Oauth proxy pulled';
+        percentile = 80;
+        break;
+      }
+      case 'Created': {
+        currentEvent = 'Oauth proxy container created';
+        percentile = 88;
+        break;
+      }
+      case 'Started': {
+        currentEvent = 'Oauth proxy container started';
+        percentile = 96;
+        break;
+      }
+      case 'Killing': {
+        currentEvent = 'Stopping container oauth-proxy';
+        status = EventStatus.WARNING;
+        break;
+      }
+      default: {
+        if (lastItem.type === 'Warning') {
+          currentEvent = 'Issue creating oauth proxy container';
+          status = EventStatus.WARNING;
+        }
+      }
+    }
+  } else {
+    switch (lastItem.reason) {
+      case 'SuccessfulCreate': {
+        currentEvent = 'Pod created';
+        percentile = 8;
+        break;
+      }
+      case 'Scheduled': {
+        currentEvent = 'Pod assigned';
+        percentile = 16;
+        break;
+      }
+      case 'SuccessfulAttachVolume': {
+        currentEvent = 'PVC attached';
+        percentile = 24;
+        break;
+      }
+      case 'AddedInterface': {
+        currentEvent = 'Interface added';
+        percentile = 32;
+        break;
+      }
+      case 'Pulling': {
+        currentEvent = 'Pulling notebook image';
+        percentile = 40;
+        break;
+      }
+      case 'Pulled': {
+        currentEvent = 'Notebook image pulled';
+        percentile = 48;
+        break;
+      }
+      case 'Created': {
+        currentEvent = 'Notebook container created';
+        percentile = 56;
+        break;
+      }
+      case 'Started': {
+        currentEvent = 'Notebook container started';
+        percentile = 64;
+        break;
+      }
+      case 'NotTriggerScaleUp':
+        currentEvent = 'Failed to scale-up';
+        status = EventStatus.ERROR;
+        break;
+      case 'TriggeredScaleUp': {
+        currentEvent = 'Pod triggered scale-up';
+        status = EventStatus.INFO;
+        break;
+      }
+      default: {
+        if (!gracePeriod && lastItem.reason === 'FailedScheduling') {
+          currentEvent = 'Insufficient resources to start';
+          status = EventStatus.ERROR;
+        } else if (lastItem.type === 'Warning') {
+          currentEvent = 'Issue creating notebook container';
+          status = EventStatus.WARNING;
+        }
+      }
+    }
+  }
+
+  return [
+    {
+      percentile,
+      currentEvent,
+      currentEventReason: lastItem.reason,
+      currentEventDescription: lastItem.message,
+      currentStatus: status,
+    },
+    thisInstanceEvents,
+  ];
+};
+
+export const getEventFullMessage = (event: EventKind): string =>
+  `${getEventTimestamp(event)} [${event.type}] ${event.message}`;
diff --git a/frontend/src/pages/projects/pvc/AddNotebookStorage.tsx b/frontend/src/pages/projects/pvc/AddNotebookStorage.tsx
new file mode 100644
index 0000000000..70f543f5ec
--- /dev/null
+++ b/frontend/src/pages/projects/pvc/AddNotebookStorage.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { Button, Form, Modal } from '@patternfly/react-core';
+import { NotebookKind } from '../../../k8sTypes';
+import { getNotebookDisplayName } from '../utils';
+import AddExistingStorageField from '../screens/spawner/storage/AddExistingStorageField';
+import { useExistingStorageDataObjectForNotebook } from '../screens/spawner/storage/utils';
+import MountPathField from './MountPathField';
+import { getNotebookMountPaths } from '../notebook/utils';
+import { attachNotebookPVC } from '../../../api';
+
+type AddNotebookStorageProps = {
+  notebook?: NotebookKind;
+  onClose: (submitted: boolean) => void;
+};
+
+const AddNotebookStorage: React.FC<AddNotebookStorageProps> = ({ notebook, onClose }) => {
+  const [existingData, setExistingData, resetDefaults] = useExistingStorageDataObjectForNotebook();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const notebookDisplayName = notebook ? getNotebookDisplayName(notebook) : 'this notebook';
+  const inUseMountPaths = getNotebookMountPaths(notebook);
+
+  const canSubmit =
+    !isSubmitting &&
+    !!existingData.name &&
+    !!existingData.mountPath.value &&
+    !existingData.mountPath.error;
+
+  const beforeClose = (submitted: boolean) => {
+    resetDefaults();
+    onClose(submitted);
+    setIsSubmitting(false);
+  };
+
+  const submit = () => {
+    if (notebook) {
+      setIsSubmitting(true);
+      attachNotebookPVC(
+        notebook.metadata.name,
+        notebook.metadata.namespace,
+        existingData.name,
+        existingData.mountPath.value,
+      )
+        .then(() => {
+          beforeClose(true);
+        })
+        .catch(() => {
+          // TODO: Support error path
+        });
+    }
+  };
+
+  return (
+    <Modal
+      variant="small"
+      title={`Add storage to ${notebookDisplayName}`}
+      isOpen={!!notebook}
+      onClose={() => beforeClose(false)}
+      actions={[
+        <Button key="submit" variant="primary" isDisabled={!canSubmit} onClick={submit}>
+          Attach storage
+        </Button>,
+        <Button key="cancel" variant="secondary" onClick={() => beforeClose(false)}>
+          Cancel
+        </Button>,
+      ]}
+    >
+      <Form
+        onSubmit={(e) => {
+          e.preventDefault();
+          submit();
+        }}
+      >
+        <AddExistingStorageField
+          data={{ storage: existingData.name }}
+          setData={({ storage }) => setExistingData('name', storage)}
+        />
+        <MountPathField
+          inUseMountPaths={inUseMountPaths}
+          mountPath={existingData.mountPath}
+          setMountPath={(mountPath) => setExistingData('mountPath', mountPath)}
+        />
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddNotebookStorage;
diff --git a/frontend/src/pages/projects/pvc/DeletePVCModal.tsx b/frontend/src/pages/projects/pvc/DeletePVCModal.tsx
new file mode 100644
index 0000000000..ae8f1731b9
--- /dev/null
+++ b/frontend/src/pages/projects/pvc/DeletePVCModal.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { getPvcDisplayName } from '../utils';
+import { PersistentVolumeClaimKind } from '../../../k8sTypes';
+import { deletePvc, removeNotebookPVC } from '../../../api';
+import useRelatedNotebooks, { ConnectedNotebookContext } from '../notebook/useRelatedNotebooks';
+import DeleteModal from '../components/DeleteModal';
+import DeleteModalConnectedAlert from '../components/DeleteModalConnectedAlert';
+
+type DeletePVCModalProps = {
+  pvcToDelete?: PersistentVolumeClaimKind;
+  onClose: (deleted: boolean) => void;
+};
+
+const DeletePVCModal: React.FC<DeletePVCModalProps> = ({ pvcToDelete, onClose }) => {
+  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [error, setError] = React.useState<Error | undefined>();
+  const {
+    notebooks: connectedNotebooks,
+    loaded: notebookLoaded,
+    error: notebookError,
+  } = useRelatedNotebooks(ConnectedNotebookContext.PVC, pvcToDelete?.metadata.name);
+
+  const onBeforeClose = (deleted: boolean) => {
+    onClose(deleted);
+    setIsDeleting(false);
+    setError(undefined);
+  };
+
+  const displayName = pvcToDelete ? getPvcDisplayName(pvcToDelete) : 'this storage';
+
+  return (
+    <DeleteModal
+      title="Delete storage?"
+      isOpen={!!pvcToDelete}
+      onClose={() => onBeforeClose(false)}
+      submitButtonLabel="Delete storage"
+      onDelete={() => {
+        if (pvcToDelete) {
+          const { name, namespace } = pvcToDelete.metadata;
+          setIsDeleting(true);
+          Promise.all(
+            connectedNotebooks.map((notebook) =>
+              removeNotebookPVC(notebook.metadata.name, namespace, name),
+            ),
+          )
+            .then(() =>
+              deletePvc(name, namespace).then(() => {
+                onBeforeClose(true);
+              }),
+            )
+            .catch((e) => {
+              setError(e);
+              setIsDeleting(false);
+            });
+        }
+      }}
+      deleting={isDeleting}
+      error={error}
+      deleteName={displayName}
+    >
+      <DeleteModalConnectedAlert
+        connectedNotebooks={connectedNotebooks}
+        error={notebookError}
+        loaded={notebookLoaded}
+      />
+    </DeleteModal>
+  );
+};
+
+export default DeletePVCModal;
diff --git a/frontend/src/pages/projects/pvc/MountPathField.tsx b/frontend/src/pages/projects/pvc/MountPathField.tsx
new file mode 100644
index 0000000000..fd1eae3fdd
--- /dev/null
+++ b/frontend/src/pages/projects/pvc/MountPathField.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { FormGroup, InputGroup, InputGroupText, TextInput } from '@patternfly/react-core';
+import { MountPath } from '../types';
+
+type MountPathFieldProps = {
+  inUseMountPaths: string[];
+  mountPath: MountPath;
+  setMountPath: (mountPath: MountPath) => void;
+};
+
+const MountPathField: React.FC<MountPathFieldProps> = ({
+  inUseMountPaths,
+  mountPath,
+  setMountPath,
+}) => {
+  return (
+    <FormGroup
+      isRequired
+      helperText="Must consist of lower case letters and dashes"
+      helperTextInvalid={mountPath.error}
+      label="Mount folder"
+      validated={mountPath.error ? 'error' : 'success'}
+    >
+      <InputGroup>
+        <InputGroupText variant="plain">/</InputGroupText>
+        <TextInput
+          isRequired
+          aria-label="mount-path-folder-value"
+          type="text"
+          value={mountPath.value}
+          placeholder="eg. data"
+          onChange={(value) => {
+            let error = '';
+            if (value.length === 0) {
+              error = 'Required';
+            } else if (!/^[a-z-]+$/.test(value)) {
+              error = 'Must only consist of lower case letters and dashes';
+            } else if (inUseMountPaths.includes(value)) {
+              error = 'Mount folder is already in use for this workbench';
+            }
+            setMountPath({ value, error });
+          }}
+        />
+      </InputGroup>
+    </FormGroup>
+  );
+};
+
+export default MountPathField;
diff --git a/frontend/src/pages/projects/pvc/const.ts b/frontend/src/pages/projects/pvc/const.ts
new file mode 100644
index 0000000000..5b448cfaa3
--- /dev/null
+++ b/frontend/src/pages/projects/pvc/const.ts
@@ -0,0 +1 @@
+export const ROOT_MOUNT_PATH = '/opt/app-root/src';
diff --git a/frontend/src/pages/projects/pvc/useNotebookPVCItems.ts b/frontend/src/pages/projects/pvc/useNotebookPVCItems.ts
new file mode 100644
index 0000000000..7b0a233c76
--- /dev/null
+++ b/frontend/src/pages/projects/pvc/useNotebookPVCItems.ts
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { NotebookKind, PersistentVolumeClaimKind } from '../../../k8sTypes';
+import { getNotebookPVCNames } from './utils';
+import { useDeepCompareMemoize } from '../../../utilities/useDeepCompareMemoize';
+import { ProjectDetailsContext } from '../ProjectDetailsContext';
+
+const useNotebookPVCItems = (
+  notebook: NotebookKind,
+): [pvcs: PersistentVolumeClaimKind[], loaded: boolean, loadError?: Error] => {
+  const {
+    pvcs: { data: allPvcs, loaded, error },
+  } = React.useContext(ProjectDetailsContext);
+
+  const pvcNames = useDeepCompareMemoize(getNotebookPVCNames(notebook));
+
+  const pvcs = React.useMemo(
+    () => allPvcs.filter((pvc) => pvcNames.includes(pvc.metadata.name)),
+    [allPvcs, pvcNames],
+  );
+
+  return [pvcs, loaded, error];
+};
+
+export default useNotebookPVCItems;
diff --git a/frontend/src/pages/projects/pvc/utils.ts b/frontend/src/pages/projects/pvc/utils.ts
new file mode 100644
index 0000000000..f45e58155d
--- /dev/null
+++ b/frontend/src/pages/projects/pvc/utils.ts
@@ -0,0 +1,23 @@
+import { NotebookKind } from '../../../k8sTypes';
+import { EnvironmentFromVariable, SecretRef } from '../types';
+
+export const getNotebookPVCNames = (notebook: NotebookKind): string[] => {
+  const volumes = notebook.spec.template.spec.volumes || [];
+  return volumes
+    .map<string | undefined>((volume) => volume.persistentVolumeClaim?.claimName)
+    .filter((v): v is string => !!v);
+};
+
+export const getEnvFromList = (notebook: NotebookKind): EnvironmentFromVariable[] =>
+  notebook.spec.template.spec.containers[0].envFrom || [];
+
+export const getSecretsFromList = (notebook: NotebookKind): SecretRef[] =>
+  getEnvFromList(notebook).filter<SecretRef>(
+    (envFrom): envFrom is SecretRef => !!envFrom.secretRef?.name,
+  );
+
+export const getNotebookSecretNames = (notebook: NotebookKind): string[] => {
+  return getSecretsFromList(notebook).map<string>(({ secretRef: { name } }) => name);
+};
+
+export const hasEnvFrom = (notebook: NotebookKind): boolean => getEnvFromList(notebook).length > 0;
diff --git a/frontend/src/pages/projects/screens/detail/DetailsSection.tsx b/frontend/src/pages/projects/screens/detail/DetailsSection.tsx
new file mode 100644
index 0000000000..304c5dc7a1
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/DetailsSection.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import {
+  Alert,
+  Bullseye,
+  Flex,
+  FlexItem,
+  Spinner,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
+import { ProjectSectionID } from './types';
+
+type DetailsSectionProps = {
+  id: ProjectSectionID;
+  actions: React.ReactNode[];
+  title: string;
+  isLoading: boolean;
+  loadError?: Error;
+  isEmpty: boolean;
+  emptyState: React.ReactNode;
+};
+
+const DetailsSection: React.FC<DetailsSectionProps> = ({
+  actions,
+  children,
+  emptyState,
+  id,
+  isEmpty,
+  isLoading,
+  loadError,
+  title,
+}) => {
+  const renderContent = () => {
+    if (loadError) {
+      return (
+        <Alert variant="danger" isInline title="Loading error">
+          {loadError.message}
+        </Alert>
+      );
+    }
+
+    if (isLoading) {
+      return (
+        <Bullseye>
+          <Spinner />
+        </Bullseye>
+      );
+    }
+
+    if (isEmpty) {
+      return emptyState;
+    }
+
+    return children;
+  };
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <Flex>
+          <FlexItem>
+            <Title id={id} headingLevel="h4" size="xl">
+              {title}
+            </Title>
+          </FlexItem>
+          <FlexItem>{actions}</FlexItem>
+        </Flex>
+      </StackItem>
+      <StackItem>{renderContent()}</StackItem>
+    </Stack>
+  );
+};
+
+export default DetailsSection;
diff --git a/frontend/src/pages/projects/screens/detail/EmptyDetailsList.tsx b/frontend/src/pages/projects/screens/detail/EmptyDetailsList.tsx
new file mode 100644
index 0000000000..b9597be94a
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/EmptyDetailsList.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Divider, EmptyState, EmptyStateBody, EmptyStateIcon, Title } from '@patternfly/react-core';
+import { CubesIcon } from '@patternfly/react-icons';
+
+type EmptyDetailsListProps = {
+  title: string;
+  description: string;
+  includeDivider?: boolean;
+};
+
+const EmptyDetailsList: React.FC<EmptyDetailsListProps> = ({
+  title,
+  description,
+  includeDivider,
+}) => {
+  return (
+    <>
+      <EmptyState variant="xs">
+        <EmptyStateIcon icon={CubesIcon} />
+        <Title headingLevel="h5" size="lg">
+          {title}
+        </Title>
+        <EmptyStateBody>{description}</EmptyStateBody>
+      </EmptyState>
+      {includeDivider && <Divider />}
+    </>
+  );
+};
+
+export default EmptyDetailsList;
diff --git a/frontend/src/pages/projects/screens/detail/ProjectDetails.tsx b/frontend/src/pages/projects/screens/detail/ProjectDetails.tsx
new file mode 100644
index 0000000000..3651781a83
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/ProjectDetails.tsx
@@ -0,0 +1,70 @@
+import { Breadcrumb, BreadcrumbItem, PageSection, Stack, StackItem } from '@patternfly/react-core';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import ApplicationsPage from '../../../ApplicationsPage';
+import { ProjectSectionTitles } from './const';
+import DataConnectionsList from './data-connections/DataConnectionsList';
+import GenericSidebar from '../../components/GenericSidebar';
+import StorageList from './storage/StorageList';
+import { ProjectSectionID } from './types';
+import NotebookList from './notebooks/NotebookList';
+import { ProjectDetailsContext } from '../../ProjectDetailsContext';
+import { getProjectDescription, getProjectDisplayName } from '../../utils';
+
+type SectionType = {
+  id: ProjectSectionID;
+  component: React.ReactNode;
+};
+
+const ProjectDetails: React.FC = () => {
+  const { currentProject } = React.useContext(ProjectDetailsContext);
+  const displayName = getProjectDisplayName(currentProject);
+  const description = getProjectDescription(currentProject);
+
+  const scrollableSelectorID = 'project-details-list';
+  const sections: SectionType[] = [
+    { id: ProjectSectionID.WORKBENCHES, component: <NotebookList /> },
+    { id: ProjectSectionID.CLUSTER_STORAGES, component: <StorageList /> },
+    { id: ProjectSectionID.DATA_CONNECTIONS, component: <DataConnectionsList /> },
+  ];
+
+  return (
+    <ApplicationsPage
+      title={displayName}
+      description={description}
+      breadcrumb={
+        <Breadcrumb>
+          <BreadcrumbItem render={() => <Link to="/projects">Data science projects</Link>} />
+          <BreadcrumbItem isActive>{displayName}</BreadcrumbItem>
+        </Breadcrumb>
+      }
+      loaded
+      empty={false}
+    >
+      <PageSection
+        id={scrollableSelectorID}
+        hasOverflowScroll
+        isFilled
+        aria-label="project-details-page-section"
+        variant="light"
+      >
+        <GenericSidebar
+          sections={Object.values(ProjectSectionID)}
+          titles={ProjectSectionTitles}
+          scrollableSelector={`#${scrollableSelectorID}`}
+          maxWidth={175}
+        >
+          <Stack hasGutter>
+            {sections.map(({ id, component }) => (
+              <StackItem key={id} id={id} aria-label={ProjectSectionTitles[id]}>
+                {component}
+              </StackItem>
+            ))}
+          </Stack>
+        </GenericSidebar>
+      </PageSection>
+    </ApplicationsPage>
+  );
+};
+
+export default ProjectDetails;
diff --git a/frontend/src/pages/projects/screens/detail/const.ts b/frontend/src/pages/projects/screens/detail/const.ts
new file mode 100644
index 0000000000..2da7890154
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/const.ts
@@ -0,0 +1,7 @@
+import { ProjectSectionID, ProjectSectionTitlesType } from './types';
+
+export const ProjectSectionTitles: ProjectSectionTitlesType = {
+  [ProjectSectionID.WORKBENCHES]: 'Workbenches',
+  [ProjectSectionID.CLUSTER_STORAGES]: 'Cluster storage',
+  [ProjectSectionID.DATA_CONNECTIONS]: 'Data connections',
+};
diff --git a/frontend/src/pages/projects/screens/detail/data-connections/AddDataConnectionModal.tsx b/frontend/src/pages/projects/screens/detail/data-connections/AddDataConnectionModal.tsx
new file mode 100644
index 0000000000..666202c251
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/data-connections/AddDataConnectionModal.tsx
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { Button, Form, Modal } from '@patternfly/react-core';
+import AWSField from '../../../dataConnections/AWSField';
+import { EnvVariableDataEntry } from '../../../types';
+import { EMPTY_AWS_SECRET_DATA } from '../../../dataConnections/const';
+import { isAWSValid } from '../../spawner/spawnerUtils';
+import { assembleSecret, createSecret } from '../../../../../api';
+import { ProjectDetailsContext } from '../../../ProjectDetailsContext';
+
+type AddDataConnectionModalProps = {
+  isOpen: boolean;
+  onClose: (submitted: boolean) => void;
+};
+
+const AddDataConnectionModal: React.FC<AddDataConnectionModalProps> = ({ isOpen, onClose }) => {
+  const [isProgress, setIsProgress] = React.useState(false);
+  const [awsData, setAWSData] = React.useState<EnvVariableDataEntry[]>(EMPTY_AWS_SECRET_DATA);
+  const { currentProject } = React.useContext(ProjectDetailsContext);
+  const projectName = currentProject.metadata.name;
+
+  const canCreate = !isProgress && isAWSValid(awsData);
+
+  const submit = () => {
+    setIsProgress(true);
+    createSecret(
+      assembleSecret(
+        projectName,
+        awsData.reduce<Record<string, string>>(
+          (acc, { key, value }) => ({ ...acc, [key]: value }),
+          {},
+        ),
+        'aws',
+      ),
+    ).then(() => {
+      onBeforeClose(true);
+    });
+  };
+  const onBeforeClose = (submitted: boolean) => {
+    onClose(submitted);
+    setIsProgress(false);
+    setAWSData(EMPTY_AWS_SECRET_DATA);
+  };
+
+  return (
+    <Modal
+      title="Add data connection"
+      variant="medium"
+      isOpen={isOpen}
+      onClose={() => onBeforeClose(false)}
+      showClose
+      actions={[
+        <Button key="submit-dc" variant="primary" isDisabled={!canCreate} onClick={submit}>
+          Add data connection
+        </Button>,
+        <Button key="cancel-dc" variant="secondary" onClick={() => onBeforeClose(false)}>
+          Cancel
+        </Button>,
+      ]}
+    >
+      <Form
+        onSubmit={(e) => {
+          e.preventDefault();
+          submit();
+        }}
+      >
+        <AWSField values={awsData} onUpdate={(data) => setAWSData(data)} />
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddDataConnectionModal;
diff --git a/frontend/src/pages/projects/screens/detail/data-connections/ChangeDataConnectionWorkbenchModal.tsx b/frontend/src/pages/projects/screens/detail/data-connections/ChangeDataConnectionWorkbenchModal.tsx
new file mode 100644
index 0000000000..2aa42b12c0
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/data-connections/ChangeDataConnectionWorkbenchModal.tsx
@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { Button, Form, Modal } from '@patternfly/react-core';
+import { DataConnection } from '../../../types';
+import SelectNotebookField from '../../../notebook/SelectNotebookField';
+import { ProjectDetailsContext } from '../../../ProjectDetailsContext';
+import useRelatedNotebooks, {
+  ConnectedNotebookContext,
+} from '../../../notebook/useRelatedNotebooks';
+import { getDataConnectionResourceName } from './utils';
+import useNonConnectedNotebooks from '../../../notebook/useNonConnectedNotebooks';
+import { attachNotebookSecret, replaceNotebookSecret } from '../../../../../api';
+import { getSecretsFromList, hasEnvFrom } from '../../../pvc/utils';
+import ExistingConnectedNotebooks from '../storage/ExistingConnectedNotebooks';
+import { K8sResourceCommon } from '@openshift/dynamic-plugin-sdk-utils';
+
+type ChangeDataConnectionWorkbenchModalProps = {
+  dataConnection?: DataConnection;
+  onClose: (successfulConnection: boolean) => void;
+};
+
+const ChangeDataConnectionWorkbenchModal: React.FC<ChangeDataConnectionWorkbenchModalProps> = ({
+  dataConnection,
+  onClose,
+}) => {
+  const [inProgress, setInProgress] = React.useState(false);
+  const [selectedNotebook, setSelectedNotebook] = React.useState<string>('');
+  const resourceName = dataConnection ? getDataConnectionResourceName(dataConnection) : '';
+  const { notebooks: connectedNotebooks, loaded: connectedLoaded } = useRelatedNotebooks(
+    ConnectedNotebookContext.DATA_CONNECTION,
+    resourceName,
+  );
+  const [removedNotebooks, setRemovedNotebooks] = React.useState<string[]>([]);
+  const { notebooks: nonConnectedNotebooks, loaded: nonConnectedLoaded } = useNonConnectedNotebooks(
+    ConnectedNotebookContext.DATA_CONNECTION,
+    resourceName,
+  );
+  const { currentProject } = React.useContext(ProjectDetailsContext);
+  const namespace = currentProject.metadata.name;
+
+  const noExistingConnections = connectedNotebooks.length === 0;
+  const changedExistingConnections = removedNotebooks.length > 0;
+  const canSubmit =
+    !inProgress &&
+    (noExistingConnections ? !!selectedNotebook : changedExistingConnections || !!selectedNotebook);
+
+  const submit = () => {
+    if (resourceName && namespace) {
+      const promiseActions: Promise<K8sResourceCommon>[] = [];
+
+      if (selectedNotebook) {
+        const relatedNotebook = nonConnectedNotebooks.find(
+          (notebook) => notebook.metadata.name === selectedNotebook,
+        );
+        if (relatedNotebook) {
+          const hasExistingEnvFrom = hasEnvFrom(relatedNotebook);
+          promiseActions.push(
+            attachNotebookSecret(selectedNotebook, namespace, resourceName, hasExistingEnvFrom),
+          );
+        }
+      }
+
+      if (connectedNotebooks.length > 0) {
+        const disconnectedNotebooks = connectedNotebooks.filter((notebook) =>
+          removedNotebooks.includes(notebook.metadata.name),
+        );
+        if (disconnectedNotebooks.length > 0) {
+          disconnectedNotebooks.forEach((notebook) => {
+            const secretEnvFroms = getSecretsFromList(notebook);
+            const newSecretEnvFroms = secretEnvFroms.filter(
+              ({ secretRef: { name } }) => name !== resourceName,
+            );
+            if (secretEnvFroms.length === newSecretEnvFroms.length) {
+              // nothing changed, ignore -- shouldn't happen but no sense in patching
+              return;
+            }
+
+            promiseActions.push(
+              replaceNotebookSecret(notebook.metadata.name, namespace, newSecretEnvFroms),
+            );
+          });
+        }
+      }
+
+      if (promiseActions.length > 0) {
+        setInProgress(true);
+        Promise.all(promiseActions).then(() => {
+          onBeforeClose(true);
+        });
+      }
+    }
+  };
+  const onBeforeClose = (successfulConnection: boolean) => {
+    onClose(successfulConnection);
+    setSelectedNotebook('');
+    setInProgress(false);
+  };
+
+  return (
+    <Modal
+      title="Update connected workbenches"
+      variant="medium"
+      isOpen={!!dataConnection}
+      onClose={() => onBeforeClose(false)}
+      showClose
+      actions={[
+        <Button key="submit-dc" variant="primary" isDisabled={!canSubmit} onClick={submit}>
+          Update connected workbenches
+        </Button>,
+        <Button key="cancel-dc" variant="secondary" onClick={() => onBeforeClose(false)}>
+          Cancel
+        </Button>,
+      ]}
+    >
+      <Form>
+        {!noExistingConnections && (
+          <ExistingConnectedNotebooks
+            loaded={connectedLoaded}
+            connectedNotebooks={connectedNotebooks}
+            onNotebookRemove={(removedNotebook) =>
+              setRemovedNotebooks([...removedNotebooks, removedNotebook.metadata.name])
+            }
+          />
+        )}
+        <SelectNotebookField
+          loaded={nonConnectedLoaded}
+          notebooks={nonConnectedNotebooks}
+          isRequired={noExistingConnections}
+          selection={selectedNotebook}
+          onSelect={(selection) => setSelectedNotebook(selection || '')}
+          selectionHelperText="Connect to an existing workbench that does not have this data connection"
+        />
+      </Form>
+    </Modal>
+  );
+};
+
+export default ChangeDataConnectionWorkbenchModal;
diff --git a/frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsList.tsx b/frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsList.tsx
new file mode 100644
index 0000000000..38a2fe44ae
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsList.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Button } from '@patternfly/react-core';
+import EmptyDetailsList from '../EmptyDetailsList';
+import { ProjectSectionID } from '../types';
+import DetailsSection from '../DetailsSection';
+import { ProjectSectionTitles } from '../const';
+import DataConnectionsTable from './DataConnectionsTable';
+import AddDataConnectionModal from './AddDataConnectionModal';
+import { ProjectDetailsContext } from '../../../ProjectDetailsContext';
+
+const DataConnectionsList: React.FC = () => {
+  const {
+    dataConnections: { data: connections, loaded, error },
+    refreshAllProjectData,
+  } = React.useContext(ProjectDetailsContext);
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <DetailsSection
+        id={ProjectSectionID.DATA_CONNECTIONS}
+        title={ProjectSectionTitles[ProjectSectionID.DATA_CONNECTIONS]}
+        actions={[
+          <Button
+            key={`action-${ProjectSectionID.DATA_CONNECTIONS}`}
+            variant="secondary"
+            onClick={() => setOpen(true)}
+          >
+            Add data connection
+          </Button>,
+        ]}
+        isLoading={!loaded}
+        isEmpty={connections.length === 0}
+        loadError={error}
+        emptyState={
+          <EmptyDetailsList
+            title="No data connections"
+            description="To get started, add data to your project."
+          />
+        }
+      >
+        <DataConnectionsTable connections={connections} refreshData={refreshAllProjectData} />
+      </DetailsSection>
+      <AddDataConnectionModal
+        isOpen={open}
+        onClose={(submitted) => {
+          if (submitted) {
+            refreshAllProjectData();
+          }
+          setOpen(false);
+        }}
+      />
+    </>
+  );
+};
+
+export default DataConnectionsList;
diff --git a/frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsTable.tsx b/frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsTable.tsx
new file mode 100644
index 0000000000..f4401572b2
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsTable.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { TableComposable, Tbody, Th, Thead, Tr } from '@patternfly/react-table';
+import useTableColumnSort from '../../../../../utilities/useTableColumnSort';
+import { DataConnection } from '../../../types';
+import { columns } from './data';
+import DataConnectionsTableRow from './DataConnectionsTableRow';
+import { getDataConnectionId } from './utils';
+import DeleteDataConnectionModal from './DeleteDataConnectionModal';
+import ChangeDataConnectionWorkbenchModal from './ChangeDataConnectionWorkbenchModal';
+
+type DataConnectionsTableProps = {
+  connections: DataConnection[];
+  refreshData: () => void;
+};
+
+const DataConnectionsTable: React.FC<DataConnectionsTableProps> = ({
+  connections: unsortedDataConnections,
+  refreshData,
+}) => {
+  const [deleteDataConnection, setDeleteDataConnection] = React.useState<
+    DataConnection | undefined
+  >();
+  const [connectExistingWorkbench, setConnectExistingWorkbench] = React.useState<
+    DataConnection | undefined
+  >();
+  const sort = useTableColumnSort<DataConnection>(columns, 0);
+  const sortedDataConnections = sort.transformData(unsortedDataConnections);
+
+  return (
+    <>
+      <TableComposable variant="compact">
+        <Thead>
+          <Tr>
+            {columns.map((col, i) => (
+              <Th key={col.field} sort={sort.getColumnSort(i)} width={col.width}>
+                {col.label}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {sortedDataConnections.map((dataConnection) => (
+            <DataConnectionsTableRow
+              key={getDataConnectionId(dataConnection)}
+              obj={dataConnection}
+              onDeleteDataConnection={setDeleteDataConnection}
+              onConnectExistingWorkbench={setConnectExistingWorkbench}
+            />
+          ))}
+        </Tbody>
+      </TableComposable>
+      <ChangeDataConnectionWorkbenchModal
+        dataConnection={connectExistingWorkbench}
+        onClose={(successfulConnect) => {
+          if (successfulConnect) {
+            refreshData();
+          }
+          setConnectExistingWorkbench(undefined);
+        }}
+      />
+      <DeleteDataConnectionModal
+        dataConnection={deleteDataConnection}
+        onClose={(deleted) => {
+          if (deleted) {
+            refreshData();
+          }
+          setDeleteDataConnection(undefined);
+        }}
+      />
+    </>
+  );
+};
+
+export default DataConnectionsTable;
diff --git a/frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsTableRow.tsx b/frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsTableRow.tsx
new file mode 100644
index 0000000000..601ff00886
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/data-connections/DataConnectionsTableRow.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { ActionsColumn, Td, Tr } from '@patternfly/react-table';
+import { Text, Title } from '@patternfly/react-core';
+import ConnectedNotebooks from '../../../notebook/ConnectedNotebooks';
+import { ConnectedNotebookContext } from '../../../notebook/useRelatedNotebooks';
+import { DataConnection } from '../../../types';
+import {
+  getDataConnectionDescription,
+  getDataConnectionDisplayName,
+  getDataConnectionProvider,
+  getDataConnectionResourceName,
+  getDataConnectionType,
+} from './utils';
+import ResourceNameTooltip from '../../../components/ResourceNameTooltip';
+
+type DataConnectionsTableRowProps = {
+  obj: DataConnection;
+  onDeleteDataConnection: (dataConnection: DataConnection) => void;
+  onConnectExistingWorkbench: (dataConnection: DataConnection) => void;
+};
+
+const DataConnectionsTableRow: React.FC<DataConnectionsTableRowProps> = ({
+  obj,
+  onDeleteDataConnection,
+  onConnectExistingWorkbench,
+}) => {
+  return (
+    <Tr>
+      {/* This cell is used to align with the other lists which have a toggle button */}
+      <Td className="pf-c-table__toggle">
+        <div style={{ width: 46 }} />
+      </Td>
+      <Td dataLabel="Name">
+        <Title headingLevel="h4">
+          <ResourceNameTooltip resource={obj.data}>
+            {getDataConnectionDisplayName(obj)}
+          </ResourceNameTooltip>
+        </Title>
+        <Text>{getDataConnectionDescription(obj)}</Text>
+      </Td>
+      <Td dataLabel="Type">{getDataConnectionType(obj)}</Td>
+      <Td dataLabel="Connected workbenches">
+        <ConnectedNotebooks
+          context={ConnectedNotebookContext.DATA_CONNECTION}
+          relatedResourceName={getDataConnectionResourceName(obj)}
+        />
+      </Td>
+      <Td dataLabel="Provider">{getDataConnectionProvider(obj)}</Td>
+      <Td isActionCell>
+        <ActionsColumn
+          items={[
+            {
+              title: 'Change connected workbenches',
+              onClick: () => {
+                onConnectExistingWorkbench(obj);
+              },
+            },
+            {
+              title: 'Delete data connection',
+              onClick: () => {
+                onDeleteDataConnection(obj);
+              },
+            },
+          ]}
+        />
+      </Td>
+    </Tr>
+  );
+};
+
+export default DataConnectionsTableRow;
diff --git a/frontend/src/pages/projects/screens/detail/data-connections/DeleteDataConnectionModal.tsx b/frontend/src/pages/projects/screens/detail/data-connections/DeleteDataConnectionModal.tsx
new file mode 100644
index 0000000000..e7a61ff7ff
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/data-connections/DeleteDataConnectionModal.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { DataConnection, DataConnectionType } from '../../../types';
+import {
+  deleteDataConnection,
+  getDataConnectionDisplayName,
+  getDataConnectionResourceName,
+} from './utils';
+import DeleteModal from '../../../components/DeleteModal';
+import useRelatedNotebooks, {
+  ConnectedNotebookContext,
+} from '../../../notebook/useRelatedNotebooks';
+import { removeNotebookSecret } from '../../../../../api';
+import DeleteModalConnectedAlert from '../../../components/DeleteModalConnectedAlert';
+
+type DeleteDataConnectionModalProps = {
+  dataConnection?: DataConnection;
+  onClose: (deleted: boolean) => void;
+};
+
+const DeleteDataConnectionModal: React.FC<DeleteDataConnectionModalProps> = ({
+  dataConnection,
+  onClose,
+}) => {
+  const [isDeleting, setIsDeleting] = React.useState(false);
+  const [error, setError] = React.useState<Error | undefined>();
+  const resourceName = dataConnection ? getDataConnectionResourceName(dataConnection) : '';
+  const {
+    notebooks: connectedNotebooks,
+    loaded: notebookLoaded,
+    error: notebookError,
+  } = useRelatedNotebooks(ConnectedNotebookContext.DATA_CONNECTION, resourceName);
+
+  const onBeforeClose = (deleted: boolean) => {
+    onClose(deleted);
+    setIsDeleting(false);
+    setError(undefined);
+  };
+
+  const displayName = dataConnection
+    ? getDataConnectionDisplayName(dataConnection)
+    : 'this data connection';
+
+  return (
+    <DeleteModal
+      title="Delete data connection?"
+      isOpen={!!dataConnection}
+      onClose={() => onBeforeClose(false)}
+      submitButtonLabel="Delete data connection"
+      onDelete={() => {
+        if (dataConnection) {
+          setIsDeleting(true);
+          Promise.all(
+            connectedNotebooks.map((notebook) => {
+              if (dataConnection.type === DataConnectionType.AWS) {
+                removeNotebookSecret(
+                  notebook.metadata.name,
+                  notebook.metadata.namespace,
+                  resourceName,
+                );
+              }
+            }),
+          )
+            .then(() =>
+              deleteDataConnection(dataConnection).then(() => {
+                onBeforeClose(true);
+              }),
+            )
+            .catch((e) => {
+              setError(e);
+              setIsDeleting(false);
+            });
+        }
+      }}
+      deleting={isDeleting}
+      error={error}
+      deleteName={displayName}
+    >
+      <DeleteModalConnectedAlert
+        connectedNotebooks={connectedNotebooks}
+        error={notebookError}
+        loaded={notebookLoaded}
+      />
+    </DeleteModal>
+  );
+};
+
+export default DeleteDataConnectionModal;
diff --git a/frontend/src/pages/projects/screens/detail/data-connections/connectionRenderers.tsx b/frontend/src/pages/projects/screens/detail/data-connections/connectionRenderers.tsx
new file mode 100644
index 0000000000..ecd8a487c3
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/data-connections/connectionRenderers.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { DataConnectionType } from '../../../types';
+import { CubeIcon } from '@patternfly/react-icons';
+
+export const DATA_CONNECTION_TYPES: { [key in DataConnectionType]: React.ReactNode } = {
+  [DataConnectionType.AWS]: (
+    <>
+      <CubeIcon /> Object storage
+    </>
+  ),
+};
diff --git a/frontend/src/pages/projects/screens/detail/data-connections/data.ts b/frontend/src/pages/projects/screens/detail/data-connections/data.ts
new file mode 100644
index 0000000000..335c981d9d
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/data-connections/data.ts
@@ -0,0 +1,40 @@
+import { SortableData } from '../../../../../utilities/useTableColumnSort';
+import { DataConnection } from '../../../types';
+import { getDataConnectionDisplayName } from './utils';
+
+export const columns: SortableData<DataConnection>[] = [
+  {
+    field: 'empty',
+    label: '',
+    sortable: false,
+  },
+  {
+    field: 'name',
+    label: 'Name',
+    width: 20,
+    sortable: (a, b) =>
+      getDataConnectionDisplayName(a).localeCompare(getDataConnectionDisplayName(b)),
+  },
+  {
+    field: 'type',
+    label: 'Type',
+    width: 20,
+    sortable: false,
+  },
+  {
+    field: 'connections',
+    label: 'Connected workbenches',
+    width: 30,
+    sortable: false,
+  },
+  {
+    field: 'provider',
+    label: 'Provider',
+    sortable: false,
+  },
+  {
+    field: 'kebab',
+    label: '',
+    sortable: false,
+  },
+];
diff --git a/frontend/src/pages/projects/screens/detail/data-connections/useDataConnections.ts b/frontend/src/pages/projects/screens/detail/data-connections/useDataConnections.ts
new file mode 100644
index 0000000000..22ac5209b0
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/data-connections/useDataConnections.ts
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { DataConnection, DataConnectionAWS, DataConnectionType } from '../../../types';
+import { getSecretsByLabel } from '../../../../../api';
+import { AWSSecretKind } from '../../../../../k8sTypes';
+
+const useDataConnections = (
+  namespace?: string,
+): [
+  connections: DataConnection[],
+  loaded: boolean,
+  loadError: Error | undefined,
+  refreshDataConnections: () => void,
+] => {
+  const [connections, setConnections] = React.useState<DataConnection[]>([]);
+  const [loaded, setLoaded] = React.useState(false);
+  const [error, setError] = React.useState<Error | undefined>();
+
+  const fetchDataConnections = React.useCallback(() => {
+    if (!namespace) {
+      return;
+    }
+    getSecretsByLabel(`opendatahub.io/managed=true`, namespace)
+      .then((secrets) => {
+        const dataConnections = secrets
+          .filter<AWSSecretKind>( // TODO: this will make more sense when we have more data connection types
+            (secret): secret is AWSSecretKind =>
+              !!secret.metadata.labels?.[`opendatahub.io/managed`], // note, always true is fine for now
+          )
+          .map<DataConnectionAWS>((secret) => ({
+            type: DataConnectionType.AWS,
+            data: secret,
+          }));
+        setConnections(dataConnections);
+        setLoaded(true);
+      })
+      .catch((e) => {
+        setError(e);
+      });
+  }, [namespace]);
+
+  React.useEffect(() => {
+    fetchDataConnections();
+  }, [fetchDataConnections]);
+
+  return [connections, loaded, error, fetchDataConnections];
+};
+
+export default useDataConnections;
diff --git a/frontend/src/pages/projects/screens/detail/data-connections/utils.ts b/frontend/src/pages/projects/screens/detail/data-connections/utils.ts
new file mode 100644
index 0000000000..a87e9ae91b
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/data-connections/utils.ts
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { deleteSecret } from '../../../../../api';
+import { K8sStatus } from '../../../../../k8sTypes';
+import { DataConnection, DataConnectionAWS, DataConnectionType } from '../../../types';
+import { getSecretDescription, getSecretDisplayName } from '../../../utils';
+import { DATA_CONNECTION_TYPES } from './connectionRenderers';
+
+export const isDataConnectionAWS = (
+  dataConnection: DataConnection,
+): dataConnection is DataConnectionAWS => dataConnection.type === DataConnectionType.AWS;
+
+export const getDataConnectionId = (dataConnection: DataConnection): string => {
+  if (isDataConnectionAWS(dataConnection)) {
+    return dataConnection.data.metadata.uid || dataConnection.data.metadata.name;
+  }
+
+  throw new Error('Invalid data connection type');
+};
+
+export const getDataConnectionResourceName = (dataConnection: DataConnection): string => {
+  if (isDataConnectionAWS(dataConnection)) {
+    return dataConnection.data.metadata.name;
+  }
+
+  throw new Error('Invalid data connection type');
+};
+
+export const getDataConnectionDisplayName = (dataConnection: DataConnection): string => {
+  if (isDataConnectionAWS(dataConnection)) {
+    return getSecretDisplayName(dataConnection.data);
+  }
+
+  throw new Error('Invalid data connection type');
+};
+
+export const getDataConnectionDescription = (dataConnection: DataConnection): string => {
+  if (isDataConnectionAWS(dataConnection)) {
+    return getSecretDescription(dataConnection.data);
+  }
+
+  return '';
+};
+
+export const getDataConnectionType = (dataConnection: DataConnection): React.ReactNode => {
+  const connectionType = DATA_CONNECTION_TYPES[dataConnection.type];
+  if (connectionType) {
+    return connectionType;
+  }
+
+  throw new Error('Invalid data connection type');
+};
+
+export const getDataConnectionProvider = (dataConnection: DataConnection): string => {
+  switch (dataConnection.type) {
+    case DataConnectionType.AWS:
+      return 'AWS S3';
+    default:
+      throw new Error('Invalid data connection type');
+  }
+};
+
+export const deleteDataConnection = (dataConnection: DataConnection): Promise<K8sStatus> => {
+  switch (dataConnection.type) {
+    case DataConnectionType.AWS:
+      return deleteSecret(
+        dataConnection.data.metadata.namespace,
+        dataConnection.data.metadata.name,
+      );
+    default:
+      throw new Error('Invalid data connection type');
+  }
+};
diff --git a/frontend/src/pages/projects/screens/detail/notebooks/NotebookList.tsx b/frontend/src/pages/projects/screens/detail/notebooks/NotebookList.tsx
new file mode 100644
index 0000000000..f4f02b1a1f
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/notebooks/NotebookList.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Button } from '@patternfly/react-core';
+import EmptyDetailsList from '../EmptyDetailsList';
+import { ProjectSectionID } from '../types';
+import DetailsSection from '../DetailsSection';
+import { ProjectSectionTitles } from '../const';
+import { ProjectDetailsContext } from '../../../ProjectDetailsContext';
+import { useNavigate } from 'react-router-dom';
+import NotebookTable from './NotebookTable';
+import { FAST_POLL_INTERVAL } from '../../../../../utilities/const';
+
+const NotebookList: React.FC = () => {
+  const {
+    currentProject,
+    notebooks: { data: notebookStates, loaded, error: loadError, refresh: refreshNotebooks },
+    refreshAllProjectData: refresh,
+  } = React.useContext(ProjectDetailsContext);
+  const navigate = useNavigate();
+  const projectName = currentProject.metadata.name;
+
+  React.useEffect(() => {
+    let interval;
+    if (notebookStates.some((notebookState) => notebookState.isStarting)) {
+      interval = setInterval(() => refreshNotebooks(), FAST_POLL_INTERVAL);
+    }
+    return () => clearInterval(interval);
+  }, [notebookStates, refreshNotebooks]);
+
+  return (
+    <DetailsSection
+      id={ProjectSectionID.WORKBENCHES}
+      title={ProjectSectionTitles[ProjectSectionID.WORKBENCHES]}
+      actions={[
+        <Button
+          key={`action-${ProjectSectionID.WORKBENCHES}`}
+          onClick={() => navigate(`/projects/${projectName}/spawner`)}
+          variant="secondary"
+        >
+          Create workbench
+        </Button>,
+      ]}
+      isLoading={!loaded}
+      loadError={loadError}
+      isEmpty={notebookStates.length === 0}
+      emptyState={
+        <EmptyDetailsList
+          title="No workbenches"
+          description="To get started, create a workbench."
+          includeDivider
+        />
+      }
+    >
+      <NotebookTable notebookStates={notebookStates} refresh={refresh} />
+    </DetailsSection>
+  );
+};
+
+export default NotebookList;
diff --git a/frontend/src/pages/projects/screens/detail/notebooks/NotebookSizeDetails.tsx b/frontend/src/pages/projects/screens/detail/notebooks/NotebookSizeDetails.tsx
new file mode 100644
index 0000000000..054595fff0
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/notebooks/NotebookSizeDetails.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import {
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+} from '@patternfly/react-core';
+import { NotebookSize } from '../../../../../types';
+
+type NotebookSizeDetailsProps = {
+  notebookSize: NotebookSize;
+};
+
+const NotebookSizeDetails: React.FC<NotebookSizeDetailsProps> = ({ notebookSize }) => {
+  const {
+    resources: { requests, limits },
+  } = notebookSize;
+
+  return (
+    <DescriptionList>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Limits</DescriptionListTerm>
+        <DescriptionListDescription>
+          {limits?.cpu ?? 'Unknown'} CPU, {limits?.memory ?? 'Unknown'} Memory
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+      <DescriptionListGroup>
+        <DescriptionListTerm>Requests</DescriptionListTerm>
+        <DescriptionListDescription>
+          {requests?.cpu ?? 'Unknown'} CPU, {requests?.memory ?? 'Unknown'} Memory
+        </DescriptionListDescription>
+      </DescriptionListGroup>
+    </DescriptionList>
+  );
+};
+
+export default NotebookSizeDetails;
diff --git a/frontend/src/pages/projects/screens/detail/notebooks/NotebookStorageBars.tsx b/frontend/src/pages/projects/screens/detail/notebooks/NotebookStorageBars.tsx
new file mode 100644
index 0000000000..69d235af0d
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/notebooks/NotebookStorageBars.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import {
+  Alert,
+  Button,
+  List,
+  ListItem,
+  Spinner,
+  Stack,
+  StackItem,
+  Text,
+} from '@patternfly/react-core';
+import { PlusCircleIcon } from '@patternfly/react-icons';
+import { NotebookKind } from '../../../../../k8sTypes';
+import useNotebookPVCItems from '../../../pvc/useNotebookPVCItems';
+import { getPvcDisplayName } from '../../../utils';
+import StorageSizeBar from '../../../components/StorageSizeBars';
+
+type NotebookStorageBarsProps = {
+  notebook: NotebookKind;
+  onAddStorage: (notebook: NotebookKind) => void;
+};
+
+const NotebookStorageBars: React.FC<NotebookStorageBarsProps> = ({ notebook, onAddStorage }) => {
+  const [pvcs, loaded, loadError] = useNotebookPVCItems(notebook);
+
+  return (
+    <Stack>
+      <StackItem>
+        <strong>Workbench storages</strong>
+      </StackItem>
+      <StackItem>
+        {!loaded ? (
+          <Spinner size="md" />
+        ) : loadError ? (
+          <Alert variant="danger" isInline title="Error loading storages">
+            {loadError.message}
+          </Alert>
+        ) : (
+          <List isPlain>
+            {pvcs.map((pvc) => (
+              <ListItem key={pvc.metadata.name}>
+                <Stack>
+                  <StackItem>
+                    <Text component="small">{getPvcDisplayName(pvc)}</Text>
+                  </StackItem>
+                  <StackItem>
+                    <StorageSizeBar pvc={pvc} />
+                  </StackItem>
+                </Stack>
+              </ListItem>
+            ))}
+            <ListItem>
+              <Button
+                variant="link"
+                isInline
+                icon={<PlusCircleIcon />}
+                onClick={() => onAddStorage(notebook)}
+              >
+                Add storage
+              </Button>
+            </ListItem>
+          </List>
+        )}
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default NotebookStorageBars;
diff --git a/frontend/src/pages/projects/screens/detail/notebooks/NotebookTable.tsx b/frontend/src/pages/projects/screens/detail/notebooks/NotebookTable.tsx
new file mode 100644
index 0000000000..cc67bdd26c
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/notebooks/NotebookTable.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { TableComposable, Th, Thead, Tr } from '@patternfly/react-table';
+import NotebookTableRow from './NotebookTableRow';
+import { NotebookState } from '../../../notebook/types';
+import { columns } from './data';
+import useTableColumnSort from '../../../../../utilities/useTableColumnSort';
+import { NotebookKind } from '../../../../../k8sTypes';
+import DeleteNotebookModal from '../../../notebook/DeleteNotebookModal';
+import AddNotebookStorage from '../../../pvc/AddNotebookStorage';
+
+type NotebookTableProps = {
+  notebookStates: NotebookState[];
+  refresh: () => void;
+};
+
+const NotebookTable: React.FC<NotebookTableProps> = ({
+  notebookStates: unsortedNotebookStates,
+  refresh,
+}) => {
+  const [addNotebookStorage, setAddNotebookStorage] = React.useState<NotebookKind | undefined>();
+  const [notebookToDelete, setNotebookToDelete] = React.useState<NotebookKind | undefined>();
+  const sort = useTableColumnSort<NotebookState>(columns, 1);
+  const sortedNotebookStates = sort.transformData(unsortedNotebookStates);
+
+  return (
+    <>
+      <TableComposable variant="compact">
+        <Thead>
+          <Tr>
+            {columns.map((col, i) => (
+              <Th key={col.field} sort={sort.getColumnSort(i)} width={col.width}>
+                {col.label}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        {sortedNotebookStates.map((notebookState) => (
+          <NotebookTableRow
+            key={notebookState.notebook.metadata.uid}
+            obj={notebookState}
+            onNotebookDelete={setNotebookToDelete}
+            onNotebookAddStorage={setAddNotebookStorage}
+          />
+        ))}
+      </TableComposable>
+      <AddNotebookStorage
+        notebook={addNotebookStorage}
+        onClose={(submitted) => {
+          if (submitted) {
+            refresh();
+          }
+          setAddNotebookStorage(undefined);
+        }}
+      />
+      <DeleteNotebookModal
+        notebook={notebookToDelete}
+        onClose={(deleted) => {
+          if (deleted) {
+            refresh();
+          }
+          setNotebookToDelete(undefined);
+        }}
+      />
+    </>
+  );
+};
+
+export default NotebookTable;
diff --git a/frontend/src/pages/projects/screens/detail/notebooks/NotebookTableRow.tsx b/frontend/src/pages/projects/screens/detail/notebooks/NotebookTableRow.tsx
new file mode 100644
index 0000000000..4e94025e17
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/notebooks/NotebookTableRow.tsx
@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { ActionsColumn, ExpandableRowContent, Tbody, Td, Tr } from '@patternfly/react-table';
+import { Spinner, Text, TextVariants, Title } from '@patternfly/react-core';
+import { NotebookState } from '../../../notebook/types';
+import { getNotebookDescription, getNotebookDisplayName } from '../../../utils';
+import NotebookRouteLink from '../../../notebook/NotebookRouteLink';
+import NotebookStatusToggle from '../../../notebook/NotebookStatusToggle';
+import { NotebookKind } from '../../../../../k8sTypes';
+import NotebookImagePackageDetails from '../../../notebook/NotebookImagePackageDetails';
+import useNotebookDeploymentSize from './useNotebookDeploymentSize';
+import useNotebookImage from './useNotebookImage';
+import NotebookSizeDetails from './NotebookSizeDetails';
+import NotebookStorageBars from './NotebookStorageBars';
+import ResourceNameTooltip from '../../../components/ResourceNameTooltip';
+import { useNavigate } from 'react-router-dom';
+import { ProjectDetailsContext } from '../../../ProjectDetailsContext';
+
+type NotebookTableRowProps = {
+  obj: NotebookState;
+  onNotebookDelete: (notebook: NotebookKind) => void;
+  onNotebookAddStorage: (notebook: NotebookKind) => void;
+};
+
+const NotebookTableRow: React.FC<NotebookTableRowProps> = ({
+  obj,
+  onNotebookDelete,
+  onNotebookAddStorage,
+}) => {
+  const { currentProject } = React.useContext(ProjectDetailsContext);
+  const navigate = useNavigate();
+  const [isExpanded, setExpanded] = React.useState<boolean>(false);
+  const notebookSize = useNotebookDeploymentSize(obj.notebook);
+  const [notebookImage, loaded] = useNotebookImage(obj.notebook);
+
+  return (
+    <Tbody isExpanded={isExpanded}>
+      <Tr>
+        <Td expand={{ rowIndex: 0, isExpanded, onToggle: () => setExpanded(!isExpanded) }} />
+        <Td dataLabel="Name">
+          <Title headingLevel="h4">
+            <ResourceNameTooltip resource={obj.notebook}>
+              {getNotebookDisplayName(obj.notebook)}
+            </ResourceNameTooltip>
+          </Title>
+          <Text>{getNotebookDescription(obj.notebook)}</Text>
+        </Td>
+        <Td dataLabel="Notebook image">
+          {!loaded ? (
+            <Spinner size="md" />
+          ) : (
+            <Text component="p">{notebookImage?.imageName ?? 'Unknown'}</Text>
+          )}
+          {isExpanded && notebookImage?.tagSoftware && (
+            <Text component={TextVariants.small}>{notebookImage.tagSoftware}</Text>
+          )}
+        </Td>
+        <Td dataLabel="Container size">{notebookSize?.name ?? 'Unknown'}</Td>
+        <Td dataLabel="Status">
+          <NotebookStatusToggle notebookState={obj} doListen={false} />
+        </Td>
+        <Td>
+          <NotebookRouteLink label="Open" notebook={obj.notebook} isRunning={obj.isRunning} />
+        </Td>
+        <Td isActionCell>
+          <ActionsColumn
+            items={[
+              {
+                title: 'Edit workbench',
+                onClick: () => {
+                  navigate(
+                    `/projects/${currentProject.metadata.name}/spawner/${obj.notebook.metadata.name}`,
+                  );
+                },
+              },
+              {
+                title: 'Delete workbench',
+                onClick: () => {
+                  onNotebookDelete(obj.notebook);
+                },
+              },
+            ]}
+          />
+        </Td>
+      </Tr>
+      <Tr isExpanded={isExpanded}>
+        <Td />
+        <Td dataLabel="Workbench storages">
+          <ExpandableRowContent>
+            <NotebookStorageBars notebook={obj.notebook} onAddStorage={onNotebookAddStorage} />
+          </ExpandableRowContent>
+        </Td>
+        <Td dataLabel="Packages">
+          <ExpandableRowContent>
+            {notebookImage ? (
+              <NotebookImagePackageDetails dependencies={notebookImage.dependencies} />
+            ) : (
+              'Unknown package info'
+            )}
+          </ExpandableRowContent>
+        </Td>
+        <Td dataLabel="Limits">
+          <ExpandableRowContent>
+            {notebookSize && <NotebookSizeDetails notebookSize={notebookSize} />}
+          </ExpandableRowContent>
+        </Td>
+        <Td />
+        <Td />
+        <Td />
+      </Tr>
+    </Tbody>
+  );
+};
+
+export default NotebookTableRow;
diff --git a/frontend/src/pages/projects/screens/detail/notebooks/data.ts b/frontend/src/pages/projects/screens/detail/notebooks/data.ts
new file mode 100644
index 0000000000..c39f5f3384
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/notebooks/data.ts
@@ -0,0 +1,45 @@
+import { SortableData } from '../../../../../utilities/useTableColumnSort';
+import { getNotebookDisplayName, getNotebookStatusPriority } from '../../../utils';
+import { NotebookState } from '../../../notebook/types';
+
+export const columns: SortableData<NotebookState>[] = [
+  {
+    field: 'expand',
+    label: '',
+    sortable: false,
+  },
+  {
+    field: 'name',
+    label: 'Name',
+    width: 30,
+    sortable: (a, b) =>
+      getNotebookDisplayName(a.notebook).localeCompare(getNotebookDisplayName(b.notebook)),
+  },
+  {
+    field: 'image',
+    label: 'Notebook image',
+    width: 20,
+    sortable: false,
+  },
+  {
+    field: 'size',
+    label: 'Container size',
+    width: 15,
+    sortable: false,
+  },
+  {
+    field: 'status',
+    label: 'Status',
+    sortable: (a, b) => getNotebookStatusPriority(a) - getNotebookStatusPriority(b),
+  },
+  {
+    field: 'open',
+    label: '',
+    sortable: false,
+  },
+  {
+    field: 'kebab',
+    label: '',
+    sortable: false,
+  },
+];
diff --git a/frontend/src/pages/projects/screens/detail/notebooks/useNotebookDeploymentSize.ts b/frontend/src/pages/projects/screens/detail/notebooks/useNotebookDeploymentSize.ts
new file mode 100644
index 0000000000..3e3a69e50b
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/notebooks/useNotebookDeploymentSize.ts
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { AppContext } from '../../../../../app/AppContext';
+import { NotebookContainer, NotebookSize } from '../../../../../types';
+import { getNotebookSizes } from '../../../../notebookController/screens/server/usePreferredNotebookSize';
+import { NotebookKind } from '../../../../../k8sTypes';
+
+const useNotebookDeploymentSize = (notebook?: NotebookKind): NotebookSize | null => {
+  const { dashboardConfig } = React.useContext(AppContext);
+
+  if (!notebook) {
+    return null;
+  }
+
+  const container: NotebookContainer | undefined = notebook?.spec.template.spec.containers.find(
+    (container) => container.name === notebook.metadata.name,
+  );
+
+  if (!container) {
+    return null;
+  }
+
+  const sizes = getNotebookSizes(dashboardConfig);
+  const size = sizes.find((size) => _.isEqual(size.resources.limits, container.resources?.limits));
+
+  if (!size) {
+    return null;
+  }
+
+  return size;
+};
+
+export default useNotebookDeploymentSize;
diff --git a/frontend/src/pages/projects/screens/detail/notebooks/useNotebookImage.ts b/frontend/src/pages/projects/screens/detail/notebooks/useNotebookImage.ts
new file mode 100644
index 0000000000..62866f2853
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/notebooks/useNotebookImage.ts
@@ -0,0 +1,37 @@
+import { NotebookKind } from '../../../../../k8sTypes';
+import {
+  getImageStreamDisplayName,
+  getImageVersionDependencies,
+  getRelatedVersionDescription,
+} from '../../spawner/spawnerUtils';
+import { ImageVersionDependencyType } from '../../spawner/types';
+import useNotebookImageData from './useNotebookImageData';
+
+export type NotebookImage = {
+  imageName: string;
+  tagSoftware?: string;
+  dependencies: ImageVersionDependencyType[];
+};
+
+const useNotebookImage = (
+  notebook: NotebookKind,
+): [notebookImage: NotebookImage | null, loaded: boolean] => {
+  const [imageData, loaded] = useNotebookImageData(notebook);
+
+  if (!imageData) {
+    return [null, loaded];
+  }
+
+  const { imageStream, imageVersion } = imageData;
+
+  return [
+    {
+      imageName: getImageStreamDisplayName(imageStream),
+      tagSoftware: getRelatedVersionDescription(imageStream),
+      dependencies: getImageVersionDependencies(imageVersion, false),
+    },
+    loaded,
+  ];
+};
+
+export default useNotebookImage;
diff --git a/frontend/src/pages/projects/screens/detail/notebooks/useNotebookImageData.ts b/frontend/src/pages/projects/screens/detail/notebooks/useNotebookImageData.ts
new file mode 100644
index 0000000000..fd18f3665e
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/notebooks/useNotebookImageData.ts
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { ImageStreamKind, ImageStreamSpecTagType, NotebookKind } from '../../../../../k8sTypes';
+import useNamespaces from '../../../../notebookController/useNamespaces';
+import useImageStreams from '../../spawner/useImageStreams';
+import { NotebookContainer } from '../../../../../types';
+
+const useNotebookImageData = (
+  notebook?: NotebookKind,
+): [
+  data: { imageStream: ImageStreamKind; imageVersion: ImageStreamSpecTagType } | null,
+  loaded: boolean,
+] => {
+  const { dashboardNamespace } = useNamespaces();
+  const [images, loaded] = useImageStreams(dashboardNamespace);
+
+  return React.useMemo(() => {
+    if (!notebook) {
+      return [null, false];
+    }
+
+    if (!loaded) {
+      return [null, false];
+    }
+
+    const container: NotebookContainer | undefined = notebook.spec.template.spec.containers.find(
+      (container) => container.name === notebook.metadata.name,
+    );
+    const imageTag = container?.image.split('/').at(-1)?.split(':');
+
+    if (!imageTag || imageTag.length < 2 || !container) {
+      return [null, true];
+    }
+
+    const [imageName, versionName] = imageTag;
+    const imageStream = images.find((image) => image.metadata.name === imageName);
+
+    if (!imageStream) {
+      return [null, true];
+    }
+
+    const versions = imageStream.spec.tags || [];
+    const imageVersion = versions.find((version) => version.name === versionName);
+
+    if (!imageVersion) {
+      return [null, true];
+    }
+
+    return [{ imageStream, imageVersion }, loaded];
+  }, [images, loaded, notebook]);
+};
+
+export default useNotebookImageData;
diff --git a/frontend/src/pages/projects/screens/detail/storage/ConnectExistingNotebook.tsx b/frontend/src/pages/projects/screens/detail/storage/ConnectExistingNotebook.tsx
new file mode 100644
index 0000000000..26301aff10
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/storage/ConnectExistingNotebook.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Alert } from '@patternfly/react-core';
+import { getNotebookMountPaths } from '../../../notebook/utils';
+import { ForNotebookSelection } from '../../../types';
+import MountPathField from '../../../pvc/MountPathField';
+import { ProjectDetailsContext } from '../../../ProjectDetailsContext';
+import SelectNotebookField from '../../../notebook/SelectNotebookField';
+
+type ConnectExistingNotebookProps = {
+  forNotebookData: ForNotebookSelection;
+  setForNotebookData: (value: ForNotebookSelection) => void;
+  isDisabled: boolean;
+};
+
+const ConnectExistingNotebook: React.FC<ConnectExistingNotebookProps> = ({
+  forNotebookData,
+  setForNotebookData,
+  isDisabled,
+}) => {
+  const {
+    notebooks: { data, loaded, error },
+  } = React.useContext(ProjectDetailsContext);
+  const notebooks = data.map(({ notebook }) => notebook);
+
+  if (error) {
+    return (
+      <Alert variant="danger" isInline title="Unable to fetch notebooks">
+        {error.message}
+      </Alert>
+    );
+  }
+
+  const inUseMountPaths = getNotebookMountPaths(
+    notebooks.find((notebook) => notebook.metadata.name === forNotebookData.name),
+  );
+
+  return (
+    <>
+      <SelectNotebookField
+        isDisabled={isDisabled}
+        loaded={loaded}
+        notebooks={notebooks}
+        selection={forNotebookData.name}
+        onSelect={(selection) => {
+          if (selection) {
+            setForNotebookData({
+              name: selection,
+              mountPath: { value: '', error: '' },
+            });
+          } else {
+            setForNotebookData({ name: '', mountPath: { value: '', error: '' } });
+          }
+        }}
+        selectionHelperText="Optionally connect it to an existing workbench"
+      />
+      {forNotebookData.name && (
+        <MountPathField
+          inUseMountPaths={inUseMountPaths}
+          mountPath={forNotebookData.mountPath}
+          setMountPath={(mountPath) => {
+            setForNotebookData({ ...forNotebookData, mountPath });
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default ConnectExistingNotebook;
diff --git a/frontend/src/pages/projects/screens/detail/storage/ExistingConnectedNotebooks.tsx b/frontend/src/pages/projects/screens/detail/storage/ExistingConnectedNotebooks.tsx
new file mode 100644
index 0000000000..127b273fd7
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/storage/ExistingConnectedNotebooks.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { Alert, Chip, ChipGroup, FormGroup, Spinner, Text } from '@patternfly/react-core';
+import { getNotebookDisplayName } from '../../../utils';
+import { NotebookKind } from '../../../../../k8sTypes';
+
+type ExistingConnectedNotebooksProps = {
+  connectedNotebooks: NotebookKind[];
+  onNotebookRemove: (notebook: NotebookKind) => void;
+  loaded: boolean;
+  error?: Error;
+};
+
+const ExistingConnectedNotebooks: React.FC<ExistingConnectedNotebooksProps> = ({
+  connectedNotebooks,
+  onNotebookRemove,
+  loaded,
+  error,
+}) => {
+  const [notebooksToShow, setNotebooksToShow] = React.useState<NotebookKind[]>(connectedNotebooks);
+  let content: React.ReactNode;
+  if (error) {
+    content = (
+      <Alert variant="danger" isInline title="Failed to fetch existing connected workbenches">
+        {error.message}
+      </Alert>
+    );
+  } else if (!loaded) {
+    content = <Spinner size="md" />;
+  } else if (notebooksToShow.length === 0) {
+    content = <Text component="small">All existing connections have been removed.</Text>;
+  } else {
+    content = (
+      <ChipGroup>
+        {notebooksToShow.map((notebook) => {
+          const notebookDisplayName = getNotebookDisplayName(notebook);
+          return (
+            <Chip
+              key={notebookDisplayName}
+              onClick={() => {
+                setNotebooksToShow(
+                  notebooksToShow.filter(
+                    (notebookToShow) => notebookToShow.metadata.name !== notebook.metadata.name,
+                  ),
+                );
+                onNotebookRemove(notebook);
+              }}
+            >
+              {notebookDisplayName}
+            </Chip>
+          );
+        })}
+      </ChipGroup>
+    );
+  }
+
+  return <FormGroup label="Existing connected workbenches">{content}</FormGroup>;
+};
+
+export default ExistingConnectedNotebooks;
diff --git a/frontend/src/pages/projects/screens/detail/storage/ManageStorageModal.scss b/frontend/src/pages/projects/screens/detail/storage/ManageStorageModal.scss
new file mode 100644
index 0000000000..31610106aa
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/storage/ManageStorageModal.scss
@@ -0,0 +1,12 @@
+// temp fix until https://github.com/patternfly/patternfly-react/issues/8028 is resolved
+.checkbox-radio-fix-body-width-50 {
+  .pf-c-check__body, .pf-c-radio__body {
+    width: 50%;
+  }
+}
+
+.checkbox-radio-fix-body-width {
+  .pf-c-check__body, .pf-c-radio__body {
+    width: 100%;
+  }
+}
diff --git a/frontend/src/pages/projects/screens/detail/storage/ManageStorageModal.tsx b/frontend/src/pages/projects/screens/detail/storage/ManageStorageModal.tsx
new file mode 100644
index 0000000000..c35e226dac
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/storage/ManageStorageModal.tsx
@@ -0,0 +1,174 @@
+import * as React from 'react';
+import { Alert, Button, Form, Modal } from '@patternfly/react-core';
+import {
+  assemblePvc,
+  attachNotebookPVC,
+  createPvc,
+  removeNotebookPVC,
+  updatePvcDescription,
+  updatePvcDisplayName,
+} from '../../../../../api';
+import { NotebookKind, PersistentVolumeClaimKind } from '../../../../../k8sTypes';
+import { ProjectDetailsContext } from '../../../ProjectDetailsContext';
+import { useCreateStorageObjectForNotebook } from '../../spawner/storage/utils';
+import CreateNewStorageSection from '../../spawner/storage/CreateNewStorageSection';
+import ConnectExistingNotebook from './ConnectExistingNotebook';
+import ExistingConnectedNotebooks from './ExistingConnectedNotebooks';
+import useRelatedNotebooks, {
+  ConnectedNotebookContext,
+} from '../../../notebook/useRelatedNotebooks';
+import { getPvcDescription, getPvcDisplayName } from '../../../utils';
+
+import './ManageStorageModal.scss';
+
+type AddStorageModalProps = {
+  existingData?: PersistentVolumeClaimKind;
+  isOpen: boolean;
+  onClose: (submit: boolean) => void;
+};
+
+const ManageStorageModal: React.FC<AddStorageModalProps> = ({ existingData, isOpen, onClose }) => {
+  const [createData, setCreateData, resetData] = useCreateStorageObjectForNotebook(existingData);
+  const [actionInProgress, setActionInProgress] = React.useState<boolean>(false);
+  const [error, setError] = React.useState<Error | undefined>();
+  const { currentProject } = React.useContext(ProjectDetailsContext);
+  const namespace = currentProject.metadata.name;
+  const {
+    notebooks: connectedNotebooks,
+    loaded: notebookLoaded,
+    error: notebookError,
+  } = useRelatedNotebooks(ConnectedNotebookContext.PVC, existingData?.metadata.name);
+  const [removedNotebooks, setRemovedNotebooks] = React.useState<string[]>([]);
+
+  const onBeforeClose = (submitted: boolean) => {
+    onClose(submitted);
+    setActionInProgress(false);
+    setRemovedNotebooks([]);
+    resetData();
+  };
+
+  const hasValidNotebookRelationship = createData.forNotebook.name
+    ? !!createData.forNotebook.mountPath.value && !createData.forNotebook.mountPath.error
+    : true;
+  const canCreate = !actionInProgress && createData.nameDesc.name && hasValidNotebookRelationship;
+
+  const submit = async () => {
+    setError(undefined);
+    setActionInProgress(true);
+
+    const {
+      nameDesc: { name, description },
+      size,
+      forNotebook: { name: notebookName, mountPath },
+    } = createData;
+
+    const pvc = assemblePvc(name, namespace, description, size);
+
+    const handleError = (e: Error) => {
+      setError(e);
+      setActionInProgress(false);
+    };
+    const handleNotebookNameConnection = (pvcName: string) => {
+      if (notebookName) {
+        attachNotebookPVC(notebookName, namespace, pvcName, mountPath.value)
+          .then(() => {
+            setActionInProgress(false);
+            onBeforeClose(true);
+          })
+          .catch((e) => {
+            setError(e);
+            setActionInProgress(false);
+          });
+      } else {
+        setActionInProgress(false);
+        onBeforeClose(true);
+      }
+    };
+
+    if (existingData) {
+      const pvcName = existingData.metadata.name;
+      if (getPvcDisplayName(existingData) !== createData.nameDesc.name) {
+        await updatePvcDisplayName(pvcName, namespace, createData.nameDesc.name);
+      }
+      if (getPvcDescription(existingData) !== createData.nameDesc.description) {
+        await updatePvcDescription(pvcName, namespace, createData.nameDesc.description);
+      }
+      if (removedNotebooks.length > 0) {
+        // Remove connected pvcs
+        Promise.all(
+          removedNotebooks.map((notebookName) =>
+            removeNotebookPVC(notebookName, namespace, pvcName),
+          ),
+        )
+          .then(() => handleNotebookNameConnection(pvcName))
+          .catch(handleError);
+        return;
+      }
+      handleNotebookNameConnection(pvcName);
+    } else {
+      createPvc(pvc)
+        .then((createdPvc) => handleNotebookNameConnection(createdPvc.metadata.name))
+        .catch(handleError);
+    }
+  };
+
+  return (
+    <Modal
+      title={existingData ? 'Edit storage' : 'Add storage'}
+      description={
+        existingData
+          ? 'Edit storage and optionally connect it to another existing workbench.'
+          : 'Add a storage and optionally connect it with an existing workbench.'
+      }
+      variant="medium"
+      isOpen={isOpen}
+      onClose={() => onBeforeClose(false)}
+      showClose
+      actions={[
+        <Button key="submit-storage" variant="primary" isDisabled={!canCreate} onClick={submit}>
+          {existingData ? 'Update' : 'Add'} storage
+        </Button>,
+        <Button key="cancel-storage" variant="secondary" onClick={() => onBeforeClose(false)}>
+          Cancel
+        </Button>,
+      ]}
+    >
+      <Form
+        onSubmit={(e) => {
+          e.preventDefault();
+          submit();
+        }}
+      >
+        <CreateNewStorageSection
+          data={createData}
+          setData={(key, value) => setCreateData(key, value)}
+          disableSize={!!existingData}
+        />
+        {createData.hasExistingNotebookConnections && (
+          <ExistingConnectedNotebooks
+            connectedNotebooks={connectedNotebooks}
+            onNotebookRemove={(notebook: NotebookKind) =>
+              setRemovedNotebooks([...removedNotebooks, notebook.metadata.name])
+            }
+            loaded={notebookLoaded}
+            error={notebookError}
+          />
+        )}
+        <ConnectExistingNotebook
+          setForNotebookData={(forNotebookData) => {
+            setCreateData('forNotebook', forNotebookData);
+          }}
+          forNotebookData={createData.forNotebook}
+          isDisabled={connectedNotebooks.length !== 0 && removedNotebooks.length === 0}
+        />
+      </Form>
+      {error && (
+        <Alert isInline variant="danger" title="Error creating storage">
+          {error.message}
+        </Alert>
+      )}
+    </Modal>
+  );
+};
+
+export default ManageStorageModal;
diff --git a/frontend/src/pages/projects/screens/detail/storage/StorageList.tsx b/frontend/src/pages/projects/screens/detail/storage/StorageList.tsx
new file mode 100644
index 0000000000..55eaf6d9a7
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/storage/StorageList.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Button } from '@patternfly/react-core';
+import EmptyDetailsList from '../EmptyDetailsList';
+import DetailsSection from '../DetailsSection';
+import { ProjectSectionID } from '../types';
+import { ProjectSectionTitles } from '../const';
+import ManageStorageModal from './ManageStorageModal';
+import { ProjectDetailsContext } from '../../../ProjectDetailsContext';
+import StorageTable from './StorageTable';
+
+const StorageList: React.FC = () => {
+  const [isOpen, setOpen] = React.useState<boolean>(false);
+  const {
+    pvcs: { data: pvcs, loaded, error: loadError },
+    refreshAllProjectData: refresh,
+  } = React.useContext(ProjectDetailsContext);
+
+  return (
+    <>
+      <DetailsSection
+        id={ProjectSectionID.CLUSTER_STORAGES}
+        title={ProjectSectionTitles[ProjectSectionID.CLUSTER_STORAGES]}
+        actions={[
+          <Button
+            onClick={() => setOpen(true)}
+            key={`action-${ProjectSectionID.CLUSTER_STORAGES}`}
+            variant="secondary"
+          >
+            Add cluster storage
+          </Button>,
+        ]}
+        isLoading={!loaded}
+        isEmpty={pvcs.length === 0}
+        loadError={loadError}
+        emptyState={
+          <EmptyDetailsList
+            title="No storage"
+            description="Choose existing, or add new on cluster storage."
+            includeDivider
+          />
+        }
+      >
+        <StorageTable pvcs={pvcs} refresh={refresh} />
+      </DetailsSection>
+      <ManageStorageModal
+        isOpen={isOpen}
+        onClose={(submit: boolean) => {
+          setOpen(false);
+          if (submit) {
+            refresh();
+          }
+        }}
+      />
+    </>
+  );
+};
+
+export default StorageList;
diff --git a/frontend/src/pages/projects/screens/detail/storage/StorageTable.tsx b/frontend/src/pages/projects/screens/detail/storage/StorageTable.tsx
new file mode 100644
index 0000000000..ce1ae7402d
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/storage/StorageTable.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { TableComposable, Th, Thead, Tr } from '@patternfly/react-table';
+import StorageTableRow from './StorageTableRow';
+import { columns } from './data';
+import useTableColumnSort from '../../../../../utilities/useTableColumnSort';
+import { PersistentVolumeClaimKind } from '../../../../../k8sTypes';
+import DeletePVCModal from '../../../pvc/DeletePVCModal';
+import ManageStorageModal from './ManageStorageModal';
+
+type StorageTableProps = {
+  pvcs: PersistentVolumeClaimKind[];
+  refresh: () => void;
+};
+
+const StorageTable: React.FC<StorageTableProps> = ({ pvcs: unsortedPvcs, refresh }) => {
+  const [deleteStorage, setDeleteStorage] = React.useState<PersistentVolumeClaimKind | undefined>();
+  const [editPVC, setEditPVC] = React.useState<PersistentVolumeClaimKind | undefined>();
+  const sort = useTableColumnSort<PersistentVolumeClaimKind>(columns, 1);
+  const sortedPvcs = sort.transformData(unsortedPvcs);
+
+  return (
+    <>
+      <TableComposable variant="compact">
+        <Thead>
+          <Tr>
+            {columns.map((col, i) => (
+              <Th key={col.field} sort={sort.getColumnSort(i)} width={col.width}>
+                {col.label}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        {sortedPvcs.map((pvc) => (
+          <StorageTableRow
+            key={pvc.metadata.uid}
+            obj={pvc}
+            onEditPVC={setEditPVC}
+            onDeletePVC={setDeleteStorage}
+          />
+        ))}
+      </TableComposable>
+      <ManageStorageModal
+        isOpen={!!editPVC}
+        existingData={editPVC}
+        onClose={(updated) => {
+          if (updated) {
+            refresh();
+          }
+          setEditPVC(undefined);
+        }}
+      />
+      <DeletePVCModal
+        pvcToDelete={deleteStorage}
+        onClose={(deleted) => {
+          if (deleted) {
+            refresh();
+          }
+          setDeleteStorage(undefined);
+        }}
+      />
+    </>
+  );
+};
+
+export default StorageTable;
diff --git a/frontend/src/pages/projects/screens/detail/storage/StorageTableRow.tsx b/frontend/src/pages/projects/screens/detail/storage/StorageTableRow.tsx
new file mode 100644
index 0000000000..ee673308c0
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/storage/StorageTableRow.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { ActionsColumn, ExpandableRowContent, Tbody, Td, Tr } from '@patternfly/react-table';
+import { Text, Title } from '@patternfly/react-core';
+import { getPvcDescription, getPvcDisplayName } from '../../../utils';
+import { PersistentVolumeClaimKind } from '../../../../../k8sTypes';
+import { HddIcon } from '@patternfly/react-icons';
+import StorageSizeBar from '../../../components/StorageSizeBars';
+import ConnectedNotebooks from '../../../notebook/ConnectedNotebooks';
+import { ConnectedNotebookContext } from '../../../notebook/useRelatedNotebooks';
+import ResourceNameTooltip from '../../../components/ResourceNameTooltip';
+
+type StorageTableRowProps = {
+  obj: PersistentVolumeClaimKind;
+  onDeletePVC: (pvc: PersistentVolumeClaimKind) => void;
+  onEditPVC: (pvc: PersistentVolumeClaimKind) => void;
+};
+
+const StorageTableRow: React.FC<StorageTableRowProps> = ({ obj, onDeletePVC, onEditPVC }) => {
+  const [isExpanded, setExpanded] = React.useState<boolean>(false);
+
+  return (
+    <Tbody isExpanded={isExpanded}>
+      <Tr>
+        <Td expand={{ rowIndex: 0, isExpanded, onToggle: () => setExpanded(!isExpanded) }} />
+        <Td dataLabel="Name">
+          <Title headingLevel="h4">
+            <ResourceNameTooltip resource={obj}>{getPvcDisplayName(obj)}</ResourceNameTooltip>
+          </Title>
+          <Text>{getPvcDescription(obj)}</Text>
+        </Td>
+        <Td dataLabel="Type">
+          <Text>
+            <HddIcon />
+            {` Persistent storage`}
+          </Text>
+        </Td>
+        <Td dataLabel="Connected workbenches">
+          <ConnectedNotebooks
+            context={ConnectedNotebookContext.PVC}
+            relatedResourceName={obj.metadata.name}
+          />
+        </Td>
+        <Td isActionCell>
+          <ActionsColumn
+            items={[
+              {
+                title: 'Edit storage',
+                onClick: () => {
+                  onEditPVC(obj);
+                },
+              },
+              {
+                title: 'Delete storage',
+                onClick: () => {
+                  onDeletePVC(obj);
+                },
+              },
+            ]}
+          />
+        </Td>
+      </Tr>
+      <Tr isExpanded={isExpanded}>
+        <Td />
+        <Td dataLabel="Size">
+          <ExpandableRowContent>
+            <strong>Size</strong>
+            <StorageSizeBar pvc={obj} />
+          </ExpandableRowContent>
+        </Td>
+        <Td />
+        <Td />
+        <Td />
+      </Tr>
+    </Tbody>
+  );
+};
+
+export default StorageTableRow;
diff --git a/frontend/src/pages/projects/screens/detail/storage/data.ts b/frontend/src/pages/projects/screens/detail/storage/data.ts
new file mode 100644
index 0000000000..b58290586d
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/storage/data.ts
@@ -0,0 +1,34 @@
+import { SortableData } from '../../../../../utilities/useTableColumnSort';
+import { getPvcDisplayName } from '../../../utils';
+import { PersistentVolumeClaimKind } from '../../../../../k8sTypes';
+
+export const columns: SortableData<PersistentVolumeClaimKind>[] = [
+  {
+    field: 'expand',
+    label: '',
+    sortable: false,
+  },
+  {
+    field: 'name',
+    label: 'Name',
+    width: 30,
+    sortable: (a, b) => getPvcDisplayName(a).localeCompare(getPvcDisplayName(b)),
+  },
+  {
+    field: 'type',
+    label: 'Type',
+    width: 25,
+    sortable: false,
+  },
+  {
+    field: 'connected',
+    label: 'Connected workbenches',
+    width: 25,
+    sortable: false,
+  },
+  {
+    field: 'kebab',
+    label: '',
+    sortable: false,
+  },
+];
diff --git a/frontend/src/pages/projects/screens/detail/storage/useProjectPvcs.ts b/frontend/src/pages/projects/screens/detail/storage/useProjectPvcs.ts
new file mode 100644
index 0000000000..3a0dcc927b
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/storage/useProjectPvcs.ts
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { getPvcs } from '../../../../../api';
+import { PersistentVolumeClaimKind } from '../../../../../k8sTypes';
+
+const useProjectPvcs = (
+  namespace?: string,
+): [
+  pvcs: PersistentVolumeClaimKind[],
+  loaded: boolean,
+  loadError: Error | undefined,
+  forceRefresh: () => void,
+] => {
+  const [pvcs, setPvcs] = React.useState<PersistentVolumeClaimKind[]>([]);
+  const [loaded, setLoaded] = React.useState(false);
+  const [loadError, setLoadError] = React.useState<Error | undefined>(undefined);
+
+  const getProjectPvcs = React.useCallback(() => {
+    if (namespace) {
+      getPvcs(namespace)
+        .then((newPvcs) => {
+          setPvcs(newPvcs);
+          setLoaded(true);
+        })
+        .catch((e) => {
+          setLoadError(e);
+          setLoaded(true);
+        });
+    } else {
+      setPvcs([]);
+      setLoaded(true);
+      setLoadError(undefined);
+    }
+  }, [namespace]);
+
+  const forceRefresh = React.useCallback(() => {
+    getProjectPvcs();
+  }, [getProjectPvcs]);
+
+  React.useEffect(() => {
+    getProjectPvcs();
+  }, [getProjectPvcs]);
+
+  return [pvcs, loaded, loadError, forceRefresh];
+};
+
+export default useProjectPvcs;
diff --git a/frontend/src/pages/projects/screens/detail/types.ts b/frontend/src/pages/projects/screens/detail/types.ts
new file mode 100644
index 0000000000..2043c8ca40
--- /dev/null
+++ b/frontend/src/pages/projects/screens/detail/types.ts
@@ -0,0 +1,9 @@
+export enum ProjectSectionID {
+  WORKBENCHES = 'workbenches',
+  CLUSTER_STORAGES = 'cluster-storages',
+  DATA_CONNECTIONS = 'data-connections',
+}
+
+export type ProjectSectionTitlesType = {
+  [key in ProjectSectionID]: string;
+};
diff --git a/frontend/src/pages/projects/screens/projects/DeleteProjectModal.tsx b/frontend/src/pages/projects/screens/projects/DeleteProjectModal.tsx
new file mode 100644
index 0000000000..0b0f4ab9a8
--- /dev/null
+++ b/frontend/src/pages/projects/screens/projects/DeleteProjectModal.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { ProjectKind } from '../../../../k8sTypes';
+import { getProjectDisplayName } from '../../utils';
+import { deleteProject } from '../../../../api';
+import DeleteModal from '../../components/DeleteModal';
+
+type DeleteProjectModalProps = {
+  onClose: (deleted: boolean) => void;
+  deleteData?: ProjectKind;
+};
+
+const DeleteProjectModal: React.FC<DeleteProjectModalProps> = ({ deleteData, onClose }) => {
+  const [deleting, setDeleting] = React.useState(false);
+  const [error, setError] = React.useState<Error | undefined>();
+
+  const onBeforeClose = (deleted: boolean) => {
+    onClose(deleted);
+    setDeleting(false);
+    setError(undefined);
+  };
+
+  const displayName = deleteData ? getProjectDisplayName(deleteData) : 'this project';
+
+  return (
+    <DeleteModal
+      title="Delete project?"
+      isOpen={!!deleteData}
+      onClose={() => onBeforeClose(false)}
+      deleting={deleting}
+      submitButtonLabel="Delete project"
+      onDelete={() => {
+        if (deleteData) {
+          setDeleting(true);
+          deleteProject(deleteData?.metadata.name)
+            .then(() => onBeforeClose(true))
+            .catch((e) => {
+              onBeforeClose(false);
+              setError(e);
+            });
+        }
+      }}
+      deleteName={displayName}
+      error={error}
+    >
+      This action cannot be undone. It will destroy all workbenches, storages, data connections and
+      other resources in <strong>{displayName}</strong>.
+    </DeleteModal>
+  );
+};
+
+export default DeleteProjectModal;
diff --git a/frontend/src/pages/projects/screens/projects/EmptyProjects.tsx b/frontend/src/pages/projects/screens/projects/EmptyProjects.tsx
new file mode 100644
index 0000000000..565548b13b
--- /dev/null
+++ b/frontend/src/pages/projects/screens/projects/EmptyProjects.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import {
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  EmptyStateSecondaryActions,
+  Title,
+} from '@patternfly/react-core';
+import { CubesIcon } from '@patternfly/react-icons';
+import NewProjectButton from './NewProjectButton';
+import { Link } from 'react-router-dom';
+
+const EmptyProjects: React.FC = () => {
+  return (
+    <EmptyState>
+      <EmptyStateIcon icon={CubesIcon} />
+      <Title headingLevel="h4" size="lg">
+        No data science projects yet.
+      </Title>
+      <EmptyStateBody>
+        To get started, create a data science project or launch a notebook with Jupyter.
+      </EmptyStateBody>
+      <NewProjectButton />
+      <EmptyStateSecondaryActions>
+        <Button variant="link">
+          <Link to="/notebookController">Launch Jupyter</Link>
+        </Button>
+      </EmptyStateSecondaryActions>
+    </EmptyState>
+  );
+};
+
+export default EmptyProjects;
diff --git a/frontend/src/pages/projects/screens/projects/ManageProjectModal.tsx b/frontend/src/pages/projects/screens/projects/ManageProjectModal.tsx
new file mode 100644
index 0000000000..a768429f6f
--- /dev/null
+++ b/frontend/src/pages/projects/screens/projects/ManageProjectModal.tsx
@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { Alert, Button, Form, Modal } from '@patternfly/react-core';
+import {
+  createProject,
+  createRoleBinding,
+  generateRoleBindingData,
+  updateProject,
+} from '../../../../api';
+import { useNavigate } from 'react-router-dom';
+import { useDashboardNamespace, useUser } from '../../../../redux/selectors';
+import { ProjectKind } from '../../../../k8sTypes';
+import { getProjectDescription, getProjectDisplayName, isValidK8sName } from '../../utils';
+import NameDescriptionField from '../../components/NameDescriptionField';
+import { NameDescType } from '../../types';
+
+type ManageProjectModalProps = {
+  editProjectData?: ProjectKind;
+  open: boolean;
+  onClose: () => void;
+};
+
+const ManageProjectModal: React.FC<ManageProjectModalProps> = ({
+  editProjectData,
+  onClose,
+  open,
+}) => {
+  const navigate = useNavigate();
+  const [fetching, setFetching] = React.useState(false);
+  const [error, setError] = React.useState<Error | undefined>();
+  const [nameDesc, setNameDesc] = React.useState<NameDescType>({
+    name: '',
+    k8sName: undefined,
+    description: '',
+  });
+  const { username } = useUser();
+  const { dashboardNamespace } = useDashboardNamespace();
+
+  const canSubmit =
+    !fetching && nameDesc.name.trim().length > 0 && isValidK8sName(nameDesc.k8sName);
+
+  const editNameValue = editProjectData ? getProjectDisplayName(editProjectData) : '';
+  const editDescriptionValue = editProjectData ? getProjectDescription(editProjectData) : '';
+  const editResourceNameValue = editProjectData ? editProjectData.metadata.name : undefined;
+  React.useEffect(() => {
+    setNameDesc({
+      name: editNameValue,
+      k8sName: editResourceNameValue,
+      description: editDescriptionValue,
+    });
+  }, [editDescriptionValue, editNameValue, editResourceNameValue]);
+
+  const onBeforeClose = () => {
+    onClose();
+    setFetching(false);
+    setError(undefined);
+    setNameDesc({ name: '', k8sName: undefined, description: '' });
+  };
+
+  const submit = () => {
+    setFetching(true);
+    const { name, description, k8sName } = nameDesc;
+    if (editProjectData) {
+      updateProject(editProjectData, name, description).then(() => onBeforeClose());
+    } else {
+      createProject(username, name, description, k8sName)
+        .then((projectName) => {
+          const rbName = `${projectName}-image-pullers`;
+          const roleBindingData = generateRoleBindingData(rbName, dashboardNamespace, projectName);
+          createRoleBinding(roleBindingData).then(() => navigate(`/projects/${projectName}`));
+        })
+        .catch((e) => {
+          setError(e);
+          setFetching(false);
+        });
+    }
+  };
+
+  return (
+    <Modal
+      title={editProjectData ? 'Edit data science project' : 'Create data science project'}
+      variant="medium"
+      isOpen={open}
+      onClose={onBeforeClose}
+      actions={[
+        <Button key="confirm" variant="primary" isDisabled={!canSubmit} onClick={submit}>
+          {editProjectData ? 'Update' : 'Create'}
+        </Button>,
+        <Button key="cancel" variant="link" onClick={onBeforeClose}>
+          Cancel
+        </Button>,
+      ]}
+    >
+      <Form
+        onSubmit={(e) => {
+          e.preventDefault();
+          submit();
+        }}
+      >
+        <NameDescriptionField
+          nameFieldId="manage-project-modal-name"
+          descriptionFieldId="manage-project-modal-description"
+          data={nameDesc}
+          setData={setNameDesc}
+          autoFocusName
+          showK8sName
+          disableK8sName={!!editProjectData}
+        />
+      </Form>
+      {error && (
+        <Alert variant="danger" isInline title="Error creating project">
+          {error.message}
+        </Alert>
+      )}
+    </Modal>
+  );
+};
+
+export default ManageProjectModal;
diff --git a/frontend/src/pages/projects/screens/projects/NewProjectButton.tsx b/frontend/src/pages/projects/screens/projects/NewProjectButton.tsx
new file mode 100644
index 0000000000..d77f5ed354
--- /dev/null
+++ b/frontend/src/pages/projects/screens/projects/NewProjectButton.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Button } from '@patternfly/react-core';
+import ManageProjectModal from './ManageProjectModal';
+
+const NewProjectButton: React.FC = () => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button variant="primary" onClick={() => setOpen(true)}>
+        Create data science project
+      </Button>
+      <ManageProjectModal open={open} onClose={() => setOpen(false)} />
+    </>
+  );
+};
+
+export default NewProjectButton;
diff --git a/frontend/src/pages/projects/screens/projects/ProjectLink.tsx b/frontend/src/pages/projects/screens/projects/ProjectLink.tsx
new file mode 100644
index 0000000000..f56ea08729
--- /dev/null
+++ b/frontend/src/pages/projects/screens/projects/ProjectLink.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { ProjectKind } from '../../../../k8sTypes';
+import { getProjectDisplayName } from '../../utils';
+
+type ProjectLinkProps = {
+  project: ProjectKind;
+};
+
+const ProjectLink: React.FC<ProjectLinkProps> = ({ project }) => {
+  const projectName = getProjectDisplayName(project);
+
+  return <Link to={`/projects/${project.metadata.name}`}>{projectName}</Link>;
+};
+
+export default ProjectLink;
diff --git a/frontend/src/pages/projects/screens/projects/ProjectListView.tsx b/frontend/src/pages/projects/screens/projects/ProjectListView.tsx
new file mode 100644
index 0000000000..27d6d187d1
--- /dev/null
+++ b/frontend/src/pages/projects/screens/projects/ProjectListView.tsx
@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { Button, Pagination, Toolbar, ToolbarContent, ToolbarItem } from '@patternfly/react-core';
+import { ProjectKind } from '../../../../k8sTypes';
+import useTableColumnSort from '../../../../utilities/useTableColumnSort';
+import { getProjectDisplayName, getProjectOwner } from '../../utils';
+import ProjectTable from './ProjectTable';
+import NewProjectButton from './NewProjectButton';
+import { columns } from './tableData';
+import { Link } from 'react-router-dom';
+import ProjectSearchField, { SearchType } from './ProjectSearchField';
+
+const MIN_PAGE_SIZE = 10;
+
+type ProjectListViewProps = {
+  projects: ProjectKind[];
+  refreshProjects: () => Promise<void>;
+};
+
+const ProjectListView: React.FC<ProjectListViewProps> = ({
+  projects: unfilteredProjects,
+  refreshProjects,
+}) => {
+  const [searchType, setSearchType] = React.useState<SearchType>(SearchType.NAME);
+  const [search, setSearch] = React.useState('');
+  const [page, setPage] = React.useState(1);
+  const [pageSize, setPageSize] = React.useState(MIN_PAGE_SIZE);
+  const sort = useTableColumnSort<ProjectKind>(columns, 0);
+  const filteredProjects = sort.transformData(unfilteredProjects).filter((project) => {
+    if (!search) return true;
+
+    switch (searchType) {
+      case SearchType.NAME:
+        return getProjectDisplayName(project).toLowerCase().includes(search.toLowerCase());
+      case SearchType.USER:
+        return getProjectOwner(project).toLowerCase().includes(search.toLowerCase());
+      default:
+        return true;
+    }
+  });
+
+  const resetFilters = () => {
+    setSearch('');
+  };
+
+  const showPagination = unfilteredProjects.length > MIN_PAGE_SIZE;
+  const pagination = (pageDirection: 'up' | 'down') =>
+    showPagination && (
+      <Pagination
+        dropDirection={pageDirection}
+        perPageComponent="button"
+        itemCount={filteredProjects.length}
+        perPage={pageSize}
+        page={page}
+        onSetPage={(e, newPage) => setPage(newPage)}
+        onPerPageSelect={(e, newSize, newPage) => {
+          setPageSize(newSize);
+          setPage(newPage);
+        }}
+        widgetId="table-pagination"
+      />
+    );
+
+  return (
+    <>
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarItem>
+            <ProjectSearchField
+              searchType={searchType}
+              searchValue={search}
+              onSearchTypeChange={(searchType) => {
+                setSearchType(searchType);
+              }}
+              onSearchValueChange={(searchValue) => {
+                setPage(1);
+                setSearch(searchValue);
+              }}
+            />
+          </ToolbarItem>
+          <ToolbarItem>
+            <NewProjectButton />
+          </ToolbarItem>
+          <ToolbarItem>
+            <Button variant="link">
+              <Link to="/notebookController">Launch Jupyter</Link>
+            </Button>
+          </ToolbarItem>
+          <ToolbarItem variant="pagination" alignment={{ default: 'alignRight' }}>
+            {pagination('down')}
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <ProjectTable
+        clearFilters={resetFilters}
+        projects={filteredProjects.slice(pageSize * (page - 1))}
+        getColumnSort={sort.getColumnSort}
+        refreshProjects={refreshProjects}
+      />
+      {showPagination && (
+        <Toolbar>
+          <ToolbarContent>
+            <ToolbarItem variant="pagination" alignment={{ default: 'alignRight' }}>
+              {pagination('up')}
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      )}
+    </>
+  );
+};
+
+export default ProjectListView;
diff --git a/frontend/src/pages/projects/screens/projects/ProjectSearchField.tsx b/frontend/src/pages/projects/screens/projects/ProjectSearchField.tsx
new file mode 100644
index 0000000000..b63dc1ec7e
--- /dev/null
+++ b/frontend/src/pages/projects/screens/projects/ProjectSearchField.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { InputGroup, SearchInput, Select, SelectOption } from '@patternfly/react-core';
+
+export enum SearchType {
+  NAME = 'Name',
+  USER = 'User',
+}
+
+type ProjectSearchFieldProps = {
+  searchType: SearchType;
+  onSearchTypeChange: (searchType: SearchType) => void;
+  searchValue: string;
+  onSearchValueChange: (searchValue: string) => void;
+};
+
+const ProjectSearchField: React.FC<ProjectSearchFieldProps> = ({
+  searchValue,
+  searchType,
+  onSearchValueChange,
+  onSearchTypeChange,
+}) => {
+  const [typeOpen, setTypeOpen] = React.useState(false);
+
+  return (
+    <InputGroup>
+      <Select
+        isOpen={typeOpen}
+        onToggle={() => setTypeOpen(!typeOpen)}
+        selections={searchType}
+        onSelect={(e, key) => {
+          if (typeof key === 'string') {
+            onSearchTypeChange(SearchType[key]);
+            setTypeOpen(false);
+          }
+        }}
+      >
+        {Object.keys(SearchType).map((key) => (
+          <SelectOption key={key} value={key}>
+            {SearchType[key]}
+          </SelectOption>
+        ))}
+      </Select>
+      <SearchInput
+        placeholder={`Find by ${searchType.toLowerCase()}`}
+        value={searchValue}
+        onChange={(newSearch) => {
+          onSearchValueChange(newSearch);
+        }}
+        onClear={() => onSearchValueChange('')}
+        style={{ minWidth: '200px' }}
+      />
+    </InputGroup>
+  );
+};
+
+export default ProjectSearchField;
diff --git a/frontend/src/pages/projects/screens/projects/ProjectTable.tsx b/frontend/src/pages/projects/screens/projects/ProjectTable.tsx
new file mode 100644
index 0000000000..9f389b4720
--- /dev/null
+++ b/frontend/src/pages/projects/screens/projects/ProjectTable.tsx
@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { Button } from '@patternfly/react-core';
+import { GetColumnSort } from '../../../../utilities/useTableColumnSort';
+import { ProjectKind } from '../../../../k8sTypes';
+import ProjectTableRow from './ProjectTableRow';
+import { columns } from './tableData';
+import ManageProjectModal from './ManageProjectModal';
+import DeleteProjectModal from './DeleteProjectModal';
+
+type ProjectTableProps = {
+  clearFilters: () => void;
+  projects: ProjectKind[];
+  getColumnSort: GetColumnSort;
+  refreshProjects: () => Promise<void>;
+};
+
+const ProjectTable: React.FC<ProjectTableProps> = ({
+  clearFilters,
+  projects,
+  getColumnSort,
+  refreshProjects,
+}) => {
+  const [deleteData, setDeleteData] = React.useState<ProjectKind | undefined>();
+  const [editData, setEditData] = React.useState<ProjectKind | undefined>();
+  const [refreshIds, setRefreshIds] = React.useState<string[]>([]);
+
+  return (
+    <>
+      <TableComposable>
+        <Thead>
+          <Tr>
+            {columns.map((col, i) => (
+              <Th key={col.field} sort={getColumnSort(i)}>
+                {col.label}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {projects.length === 0 && (
+            <Tr>
+              <Td colSpan={columns.length} style={{ textAlign: 'center' }}>
+                No projects match your filters.{' '}
+                <Button variant="link" isInline onClick={clearFilters}>
+                  Clear filters
+                </Button>
+              </Td>
+            </Tr>
+          )}
+          {projects.map((project) => (
+            <ProjectTableRow
+              key={project.metadata.uid}
+              obj={project}
+              isRefreshing={refreshIds.includes(project.metadata.uid || '')}
+              setEditData={(data) => setEditData(data)}
+              setDeleteData={(data) => setDeleteData(data)}
+            />
+          ))}
+        </Tbody>
+      </TableComposable>
+      <ManageProjectModal
+        open={!!editData}
+        onClose={() => {
+          const refreshId = editData?.metadata.uid;
+          if (refreshId) {
+            setRefreshIds((otherIds) => [...otherIds, refreshId]);
+          }
+          setEditData(undefined);
+
+          refreshProjects()
+            .then(() => setRefreshIds((ids) => ids.filter((id) => id !== refreshId)))
+            .catch((e) => console.error('Failed refresh', e));
+        }}
+        editProjectData={editData}
+      />
+      <DeleteProjectModal
+        deleteData={deleteData}
+        onClose={(deleted) => {
+          setDeleteData(undefined);
+          if (deleted) {
+            refreshProjects().catch((e) => console.error('Failed refresh', e));
+          }
+        }}
+      />
+    </>
+  );
+};
+
+export default ProjectTable;
diff --git a/frontend/src/pages/projects/screens/projects/ProjectTableRow.tsx b/frontend/src/pages/projects/screens/projects/ProjectTableRow.tsx
new file mode 100644
index 0000000000..cfeb609fa0
--- /dev/null
+++ b/frontend/src/pages/projects/screens/projects/ProjectTableRow.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Text, TextVariants, Timestamp } from '@patternfly/react-core';
+import { ProjectKind } from '../../../../k8sTypes';
+import { ActionsColumn, Td, Tr } from '@patternfly/react-table';
+import ProjectLink from './ProjectLink';
+import useProjectNotebookStates from '../../notebook/useProjectNotebookStates';
+import ListNotebookState from '../../notebook/ListNotebookState';
+import ResourceNameTooltip from '../../components/ResourceNameTooltip';
+import { getProjectOwner } from '../../utils';
+
+type ProjectTableRowProps = {
+  obj: ProjectKind;
+  isRefreshing: boolean;
+  setEditData: (data: ProjectKind) => void;
+  setDeleteData: (data: ProjectKind) => void;
+};
+
+const ProjectTableRow: React.FC<ProjectTableRowProps> = ({
+  obj: project,
+  isRefreshing,
+  setEditData,
+  setDeleteData,
+}) => {
+  const [notebookStates, loaded, error] = useProjectNotebookStates(project.metadata.name);
+  const owner = getProjectOwner(project);
+
+  return (
+    <Tr>
+      <Td dataLabel="Name">
+        <ResourceNameTooltip resource={project}>
+          <ProjectLink project={project} />
+        </ResourceNameTooltip>
+        {owner && <Text component={TextVariants.small}>{owner}</Text>}
+      </Td>
+      <Td dataLabel="Workbench">
+        <ListNotebookState
+          notebookStates={notebookStates}
+          loaded={loaded}
+          error={error}
+          show="notebook"
+        />
+      </Td>
+      <Td dataLabel="Status">
+        <ListNotebookState
+          notebookStates={notebookStates}
+          loaded={loaded}
+          error={error}
+          show="status"
+        />
+      </Td>
+      <Td dataLabel="Created">
+        {project.metadata.creationTimestamp ? (
+          <Timestamp date={new Date(project.metadata.creationTimestamp)} />
+        ) : (
+          'Unknown'
+        )}
+      </Td>
+      <Td isActionCell>
+        <ActionsColumn
+          items={[
+            {
+              title: 'Edit project',
+              isDisabled: isRefreshing,
+              onClick: () => {
+                setEditData(project);
+              },
+            },
+            {
+              title: 'Delete project',
+              onClick: () => {
+                setDeleteData(project);
+              },
+            },
+          ]}
+        />
+      </Td>
+    </Tr>
+  );
+};
+
+export default ProjectTableRow;
diff --git a/frontend/src/pages/projects/screens/projects/ProjectView.tsx b/frontend/src/pages/projects/screens/projects/ProjectView.tsx
new file mode 100644
index 0000000000..061ae325a6
--- /dev/null
+++ b/frontend/src/pages/projects/screens/projects/ProjectView.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import ApplicationsPage from '../../../ApplicationsPage';
+import EmptyProjects from './EmptyProjects';
+import useUserProjects from './useUserProjects';
+import ProjectListView from './ProjectListView';
+
+const ProjectView: React.FC = () => {
+  const [projects, loaded, loadError, refreshProjects] = useUserProjects();
+
+  return (
+    <ApplicationsPage
+      title="Data science projects"
+      description="View your existing projects or create new projects."
+      loaded={loaded}
+      empty={projects.length === 0}
+      loadError={loadError}
+      emptyStatePage={<EmptyProjects />}
+      provideChildrenPadding
+    >
+      <ProjectListView projects={projects} refreshProjects={refreshProjects} />
+    </ApplicationsPage>
+  );
+};
+
+export default ProjectView;
diff --git a/frontend/src/pages/projects/screens/projects/tableData.tsx b/frontend/src/pages/projects/screens/projects/tableData.tsx
new file mode 100644
index 0000000000..c8fde5dbaf
--- /dev/null
+++ b/frontend/src/pages/projects/screens/projects/tableData.tsx
@@ -0,0 +1,31 @@
+import { SortableData } from '../../../../utilities/useTableColumnSort';
+import { ProjectKind } from '../../../../k8sTypes';
+import { getProjectCreationTime, getProjectDisplayName } from '../../utils';
+
+export const columns: SortableData<ProjectKind>[] = [
+  {
+    field: 'name',
+    label: 'Name',
+    sortable: (a, b) => getProjectDisplayName(a).localeCompare(getProjectDisplayName(b)),
+  },
+  {
+    field: 'notebooks',
+    label: 'Workbench',
+    sortable: false,
+  },
+  {
+    field: 'notebook-status',
+    label: 'Status',
+    sortable: false,
+  },
+  {
+    field: 'created',
+    label: 'Created',
+    sortable: (a, b) => getProjectCreationTime(a) - getProjectCreationTime(b),
+  },
+  {
+    field: 'kebab',
+    label: '',
+    sortable: false,
+  },
+];
diff --git a/frontend/src/pages/projects/screens/projects/useUserProjects.ts b/frontend/src/pages/projects/screens/projects/useUserProjects.ts
new file mode 100644
index 0000000000..0cbe4cad8b
--- /dev/null
+++ b/frontend/src/pages/projects/screens/projects/useUserProjects.ts
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { getProjects } from '../../../../api';
+import { ProjectKind } from '../../../../k8sTypes';
+
+const useUserProjects = (): [
+  projects: ProjectKind[],
+  loaded: boolean,
+  loadError: Error | undefined,
+  fetchProjects: () => Promise<void>,
+] => {
+  const [projects, setProjects] = React.useState<ProjectKind[]>([]);
+  const [loaded, setLoaded] = React.useState(false);
+  const [loadError, setLoadError] = React.useState<Error | undefined>(undefined);
+
+  const fetchProjects = React.useCallback(() => {
+    return getProjects('opendatahub.io/dashboard=true')
+      .then((newProjects) => {
+        setProjects(newProjects.filter(({ status }) => status?.phase === 'Active'));
+      })
+      .catch((e) => {
+        setLoadError(e);
+      });
+  }, []);
+
+  React.useEffect(() => {
+    if (!loaded) {
+      fetchProjects().then(() => {
+        setLoaded(true);
+      });
+    }
+    // TODO: No cleanup -- custom hook to manage that??
+  }, [loaded, fetchProjects]);
+
+  return [projects, loaded, loadError, fetchProjects];
+};
+
+export default useUserProjects;
diff --git a/frontend/src/pages/projects/screens/spawner/EditSpawnerPage.tsx b/frontend/src/pages/projects/screens/spawner/EditSpawnerPage.tsx
new file mode 100644
index 0000000000..6c500cb42c
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/EditSpawnerPage.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import SpawnerPage from './SpawnerPage';
+import { useParams } from 'react-router';
+import { ProjectDetailsContext } from '../../ProjectDetailsContext';
+import {
+  Bullseye,
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  Spinner,
+  Title,
+} from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { useNavigate } from 'react-router-dom';
+import { getProjectDisplayName } from '../../utils';
+
+const EditSpawnerPage: React.FC = () => {
+  const {
+    currentProject,
+    notebooks: { data, loaded, error },
+  } = React.useContext(ProjectDetailsContext);
+  const navigate = useNavigate();
+  const { notebookName } = useParams();
+
+  const relatedNotebookState = data.find(
+    (notebookState) => notebookState.notebook.metadata.name === notebookName,
+  );
+
+  if (error) {
+    return (
+      <Bullseye>
+        <EmptyState>
+          <EmptyStateIcon icon={ExclamationCircleIcon} />
+          <Title headingLevel="h4" size="lg">
+            Problem loading project details
+          </Title>
+          <EmptyStateBody>{error.message}</EmptyStateBody>
+          <Button variant="primary" onClick={() => navigate('/projects')}>
+            View my projects
+          </Button>
+        </EmptyState>
+      </Bullseye>
+    );
+  }
+
+  if (!loaded) {
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+
+  if (!relatedNotebookState) {
+    return (
+      <Bullseye>
+        <EmptyState>
+          <EmptyStateIcon icon={ExclamationCircleIcon} />
+          <Title headingLevel="h4" size="lg">
+            Unable to edit workbench
+          </Title>
+          <EmptyStateBody>
+            We were unable to find a notebook by this name in your project{' '}
+            {getProjectDisplayName(currentProject)}.
+          </EmptyStateBody>
+          <Button
+            variant="primary"
+            onClick={() => navigate(`/projects/${currentProject.metadata.name}`)}
+          >
+            Return to {getProjectDisplayName(currentProject)}
+          </Button>
+        </EmptyState>
+      </Bullseye>
+    );
+  }
+
+  return <SpawnerPage existingNotebook={relatedNotebookState.notebook} />;
+};
+
+export default EditSpawnerPage;
diff --git a/frontend/src/pages/projects/screens/spawner/SpawnerFooter.tsx b/frontend/src/pages/projects/screens/spawner/SpawnerFooter.tsx
new file mode 100644
index 0000000000..f024939798
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/SpawnerFooter.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ActionList, ActionListItem, Button } from '@patternfly/react-core';
+import { createNotebook, updateNotebook } from '../../../../api';
+import { checkRequiredFieldsForNotebookStart } from './spawnerUtils';
+import { StartNotebookData, StorageData, EnvVariable } from '../../types';
+import { createPvcDataForNotebook, createConfigMapsAndSecretsForNotebook } from './service';
+import { useUser } from '../../../../redux/selectors';
+import { ProjectDetailsContext } from '../../ProjectDetailsContext';
+import { NotebookKind } from '../../../../k8sTypes';
+
+type SpawnerFooterProps = {
+  editNotebook?: NotebookKind;
+  startNotebookData: StartNotebookData;
+  storageData: StorageData;
+  envVariables: EnvVariable[];
+};
+
+const SpawnerFooter: React.FC<SpawnerFooterProps> = ({
+  editNotebook,
+  startNotebookData,
+  storageData,
+  envVariables,
+}) => {
+  const { refreshAllProjectData } = React.useContext(ProjectDetailsContext);
+  const { projectName } = startNotebookData;
+  const navigate = useNavigate();
+  const [createInProgress, setCreateInProgress] = React.useState<boolean>(false);
+  const isButtonDisabled =
+    createInProgress ||
+    !checkRequiredFieldsForNotebookStart(startNotebookData, storageData, envVariables);
+  const { username } = useUser();
+
+  const redirect = () => {
+    refreshAllProjectData();
+    navigate(`/projects/${projectName}`);
+  };
+
+  const onUpdateNotebook = async () => {
+    if (editNotebook) {
+      updateNotebook(editNotebook, startNotebookData, username).then(redirect);
+    }
+  };
+
+  const onCreateNotebook = async () => {
+    setCreateInProgress(true);
+    const { volumes, volumeMounts } = await createPvcDataForNotebook(projectName, storageData);
+    const envFrom = await createConfigMapsAndSecretsForNotebook(projectName, envVariables);
+    const newStartData = { ...startNotebookData, volumes, volumeMounts, envFrom };
+
+    createNotebook(newStartData, username).then(redirect);
+  };
+
+  return (
+    <ActionList>
+      <ActionListItem>
+        <Button
+          isDisabled={isButtonDisabled}
+          variant="primary"
+          id="create-button"
+          onClick={editNotebook ? onUpdateNotebook : onCreateNotebook}
+        >
+          {editNotebook ? 'Update' : 'Create'} workbench
+        </Button>
+      </ActionListItem>
+      <ActionListItem>
+        <Button
+          variant="link"
+          id="cancel-button"
+          onClick={() => navigate(`/projects/${projectName}`)}
+        >
+          Cancel
+        </Button>
+      </ActionListItem>
+    </ActionList>
+  );
+};
+
+export default SpawnerFooter;
diff --git a/frontend/src/pages/projects/screens/spawner/SpawnerPage.tsx b/frontend/src/pages/projects/screens/spawner/SpawnerPage.tsx
new file mode 100644
index 0000000000..6cbf7f8240
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/SpawnerPage.tsx
@@ -0,0 +1,192 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { Breadcrumb, BreadcrumbItem, Form, FormSection, PageSection } from '@patternfly/react-core';
+import ApplicationsPage from '../../../../pages/ApplicationsPage';
+import { ImageStreamAndVersion } from '../../../../types';
+import GenericSidebar from '../../components/GenericSidebar';
+import NameDescriptionField from '../../components/NameDescriptionField';
+import { ProjectDetailsContext } from '../../ProjectDetailsContext';
+import { EnvVariable, NameDescType, StorageType } from '../../types';
+import { getNotebookDescription, getNotebookDisplayName, getProjectDisplayName } from '../../utils';
+import { SpawnerPageSectionID } from './types';
+import { ScrollableSelectorID, SpawnerPageSectionTitles } from './const';
+import SpawnerFooter from './SpawnerFooter';
+import ImageSelectorField from './imageSelector/ImageSelectorField';
+import ContainerSizeSelector from './deploymentSize/ContainerSizeSelector';
+import { useNotebookSize } from './useNotebookSize';
+import StorageField from './storage/StorageField';
+import EnvironmentVariables from './environmentVariables/EnvironmentVariables';
+import { useStorageDataObject } from './storage/utils';
+import GPUSelectField from '../../../notebookController/screens/server/GPUSelectField';
+import { NotebookKind } from '../../../../k8sTypes';
+import useNotebookImageData from '../detail/notebooks/useNotebookImageData';
+import useNotebookDeploymentSize from '../detail/notebooks/useNotebookDeploymentSize';
+
+type SpawnerPageProps = {
+  existingNotebook?: NotebookKind;
+};
+
+const SpawnerPage: React.FC<SpawnerPageProps> = ({ existingNotebook }) => {
+  const { currentProject } = React.useContext(ProjectDetailsContext);
+  const displayName = getProjectDisplayName(currentProject);
+
+  const [nameDesc, setNameDesc] = React.useState<NameDescType>({
+    name: '',
+    k8sName: undefined,
+    description: '',
+  });
+  const [selectedImage, setSelectedImage] = React.useState<ImageStreamAndVersion>({
+    imageStream: undefined,
+    imageVersion: undefined,
+  });
+  const { selectedSize, setSelectedSize, sizes } = useNotebookSize();
+  const [selectedGpu, setSelectedGpu] = React.useState<string>('0');
+  const [storageData, setStorageData] = useStorageDataObject(StorageType.EPHEMERAL);
+  const [envVariables, setEnvVariables] = React.useState<EnvVariable[]>([]);
+
+  React.useEffect(() => {
+    if (existingNotebook) {
+      setNameDesc({
+        name: getNotebookDisplayName(existingNotebook),
+        k8sName: existingNotebook.metadata.name,
+        description: getNotebookDescription(existingNotebook),
+      });
+    }
+  }, [existingNotebook]);
+
+  const [data, loaded] = useNotebookImageData(existingNotebook);
+  React.useEffect(() => {
+    const { imageStream, imageVersion } = data || {};
+    if (loaded && imageStream && imageVersion) {
+      setSelectedImage({ imageStream, imageVersion });
+    }
+  }, [data, loaded]);
+
+  const notebookSize = useNotebookDeploymentSize(existingNotebook);
+  React.useEffect(() => {
+    if (notebookSize) {
+      setSelectedSize(notebookSize.name);
+    }
+  }, [notebookSize, setSelectedSize]);
+
+  const editNotebookDisplayName = existingNotebook ? getNotebookDisplayName(existingNotebook) : '';
+
+  return (
+    <ApplicationsPage
+      title={existingNotebook ? `Edit ${editNotebookDisplayName}` : 'Create workbench'}
+      breadcrumb={
+        <Breadcrumb>
+          <BreadcrumbItem render={() => <Link to="/projects">Data science projects</Link>} />
+          <BreadcrumbItem
+            render={() => (
+              <Link to={`/projects/${currentProject.metadata.name}`}>{displayName}</Link>
+            )}
+          />
+          {existingNotebook && <BreadcrumbItem>{editNotebookDisplayName}</BreadcrumbItem>}
+          <BreadcrumbItem>{existingNotebook ? 'Edit' : 'Create'} workbench</BreadcrumbItem>
+        </Breadcrumb>
+      }
+      description={
+        existingNotebook
+          ? 'Modify properties for your workbench.'
+          : 'Configure properties for your workbench.'
+      }
+      loaded
+      empty={false}
+    >
+      <PageSection
+        isFilled
+        id={ScrollableSelectorID}
+        aria-label="spawner-page-spawner-section"
+        hasOverflowScroll
+        variant="light"
+      >
+        <GenericSidebar
+          sections={Object.values(SpawnerPageSectionID)}
+          titles={SpawnerPageSectionTitles}
+          scrollableSelector={`#${ScrollableSelectorID}`}
+        >
+          <Form style={{ maxWidth: 600 }}>
+            <FormSection
+              id={SpawnerPageSectionID.NAME_DESCRIPTION}
+              aria-label={SpawnerPageSectionTitles[SpawnerPageSectionID.NAME_DESCRIPTION]}
+            >
+              <NameDescriptionField
+                nameFieldId="workbench-name"
+                descriptionFieldId="workbench-description"
+                data={nameDesc}
+                setData={setNameDesc}
+                autoFocusName
+              />
+            </FormSection>
+            <FormSection
+              title={SpawnerPageSectionTitles[SpawnerPageSectionID.NOTEBOOK_IMAGE]}
+              id={SpawnerPageSectionID.NOTEBOOK_IMAGE}
+              aria-label={SpawnerPageSectionTitles[SpawnerPageSectionID.NOTEBOOK_IMAGE]}
+            >
+              <ImageSelectorField
+                selectedImage={selectedImage}
+                setSelectedImage={setSelectedImage}
+              />
+            </FormSection>
+            <FormSection
+              title={SpawnerPageSectionTitles[SpawnerPageSectionID.DEPLOYMENT_SIZE]}
+              id={SpawnerPageSectionID.DEPLOYMENT_SIZE}
+              aria-label={SpawnerPageSectionTitles[SpawnerPageSectionID.DEPLOYMENT_SIZE]}
+            >
+              <ContainerSizeSelector
+                sizes={sizes}
+                setValue={setSelectedSize}
+                value={selectedSize}
+              />
+              <GPUSelectField
+                value={selectedGpu}
+                setValue={(value: string) => setSelectedGpu(value)}
+              />
+            </FormSection>
+            {!existingNotebook && ( // TODO: Support these functionalities
+              <>
+                <FormSection
+                  title={SpawnerPageSectionTitles[SpawnerPageSectionID.ENVIRONMENT_VARIABLES]}
+                  id={SpawnerPageSectionID.ENVIRONMENT_VARIABLES}
+                  aria-label={SpawnerPageSectionTitles[SpawnerPageSectionID.ENVIRONMENT_VARIABLES]}
+                >
+                  <EnvironmentVariables
+                    envVariables={envVariables}
+                    setEnvVariables={setEnvVariables}
+                  />
+                </FormSection>
+                <FormSection
+                  title={SpawnerPageSectionTitles[SpawnerPageSectionID.CLUSTER_STORAGE]}
+                  id={SpawnerPageSectionID.CLUSTER_STORAGE}
+                  aria-label={SpawnerPageSectionTitles[SpawnerPageSectionID.CLUSTER_STORAGE]}
+                >
+                  <StorageField storageData={storageData} setStorageData={setStorageData} />
+                </FormSection>
+              </>
+            )}
+          </Form>
+        </GenericSidebar>
+      </PageSection>
+      <PageSection stickyOnBreakpoint={{ default: 'bottom' }} variant="light">
+        <SpawnerFooter
+          editNotebook={existingNotebook}
+          startNotebookData={{
+            notebookName: nameDesc.name,
+            description: nameDesc.description,
+            projectName: currentProject.metadata.name,
+            image: selectedImage,
+            notebookSize: selectedSize,
+            gpus: parseInt(selectedGpu),
+            volumes: [],
+            volumeMounts: [],
+          }}
+          storageData={storageData}
+          envVariables={envVariables}
+        />
+      </PageSection>
+    </ApplicationsPage>
+  );
+};
+
+export default SpawnerPage;
diff --git a/frontend/src/pages/projects/screens/spawner/const.ts b/frontend/src/pages/projects/screens/spawner/const.ts
new file mode 100644
index 0000000000..5c86060507
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/const.ts
@@ -0,0 +1,70 @@
+import { BUILD_PHASE } from '../../../../k8sTypes';
+import { SpawnerPageSectionID, SpawnerPageSectionTitlesType } from './types';
+
+export const SpawnerPageSectionTitles: SpawnerPageSectionTitlesType = {
+  [SpawnerPageSectionID.NAME_DESCRIPTION]: 'Name and description',
+  [SpawnerPageSectionID.NOTEBOOK_IMAGE]: 'Notebook image',
+  [SpawnerPageSectionID.DEPLOYMENT_SIZE]: 'Deployment size',
+  [SpawnerPageSectionID.ENVIRONMENT_VARIABLES]: 'Environment variables',
+  [SpawnerPageSectionID.CLUSTER_STORAGE]: 'Cluster storage',
+};
+
+export const ScrollableSelectorID = 'workbench-spawner-page';
+
+export const FAILED_PHASES = [BUILD_PHASE.ERROR, BUILD_PHASE.FAILED];
+export const PENDING_PHASES = [BUILD_PHASE.NEW, BUILD_PHASE.PENDING, BUILD_PHASE.CANCELLED];
+
+export const DEFAULT_NOTEBOOK_SIZES = [
+  {
+    name: 'Small',
+    resources: {
+      requests: {
+        cpu: '1',
+        memory: '8Gi',
+      },
+      limits: {
+        cpu: '2',
+        memory: '8Gi',
+      },
+    },
+  },
+  {
+    name: 'Medium',
+    resources: {
+      requests: {
+        cpu: '3',
+        memory: '24Gi',
+      },
+      limits: {
+        cpu: '6',
+        memory: '24Gi',
+      },
+    },
+  },
+  {
+    name: 'Large',
+    resources: {
+      requests: {
+        cpu: '7',
+        memory: '56Gi',
+      },
+      limits: {
+        cpu: '14',
+        memory: '56Gi',
+      },
+    },
+  },
+  {
+    name: 'X Large',
+    resources: {
+      requests: {
+        cpu: '15',
+        memory: '120Gi',
+      },
+      limits: {
+        cpu: '30',
+        memory: '120Gi',
+      },
+    },
+  },
+];
diff --git a/frontend/src/pages/projects/screens/spawner/deploymentSize/ContainerSizeSelector.tsx b/frontend/src/pages/projects/screens/spawner/deploymentSize/ContainerSizeSelector.tsx
new file mode 100644
index 0000000000..59c5f5d382
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/deploymentSize/ContainerSizeSelector.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import {
+  FormGroup,
+  HelperText,
+  HelperTextItem,
+  Select,
+  SelectOption,
+} from '@patternfly/react-core';
+import { NotebookSize } from '../../../../../types';
+import { getSizeDescription } from '../spawnerUtils';
+
+type ContainerSizeSelectorProps = {
+  value: NotebookSize;
+  setValue: (newValue: string) => void;
+  sizes: NotebookSize[];
+};
+
+const ContainerSizeSelector: React.FC<ContainerSizeSelectorProps> = ({
+  value,
+  setValue,
+  sizes,
+}) => {
+  const [sizeDropdownOpen, setSizeDropdownOpen] = React.useState<boolean>(false);
+
+  return (
+    <FormGroup
+      label="Container size"
+      fieldId="container-size"
+      helperText={
+        value.notUserDefined ? (
+          <HelperText>
+            <HelperTextItem variant="warning" hasIcon>
+              Your last selected size was no longer available, we have set the size to the default
+              one.
+            </HelperTextItem>
+          </HelperText>
+        ) : undefined
+      }
+    >
+      <Select
+        data-id="container-size-select"
+        isOpen={sizeDropdownOpen}
+        onToggle={() => setSizeDropdownOpen(!sizeDropdownOpen)}
+        aria-labelledby="container-size"
+        selections={value.name}
+        onSelect={(event, selection) => {
+          // We know we are setting values as a string
+          if (typeof selection === 'string') {
+            setValue(selection);
+            setSizeDropdownOpen(false);
+          }
+        }}
+      >
+        {sizes.map((size) => {
+          const name = size.name;
+          const desc = getSizeDescription(size);
+          return <SelectOption key={name} value={name} description={desc} />;
+        })}
+      </Select>
+    </FormGroup>
+  );
+};
+
+export default ContainerSizeSelector;
diff --git a/frontend/src/pages/projects/screens/spawner/environmentVariables/ConfigMapUploadField.tsx b/frontend/src/pages/projects/screens/spawner/environmentVariables/ConfigMapUploadField.tsx
new file mode 100644
index 0000000000..109691038f
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/environmentVariables/ConfigMapUploadField.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { FileUpload, FormGroup } from '@patternfly/react-core';
+import { parse } from 'yaml';
+import { isConfigMapKind, isStringKeyValuePairObject } from './utils';
+import { EnvVariableDataEntry } from '../../../types';
+
+type ConfigMapUploadFieldProps = {
+  onUpdate: (data: EnvVariableDataEntry[]) => void;
+};
+
+const ConfigMapUploadField: React.FC<ConfigMapUploadFieldProps> = ({ onUpdate }) => {
+  const [fileValue, setFileValue] = React.useState<string>('');
+  const [filename, setFilename] = React.useState<string>('');
+  const [isLoading, setLoading] = React.useState<boolean>(false);
+  const [error, setError] = React.useState<string>('');
+
+  return (
+    <FormGroup
+      fieldId="configmap-upload"
+      helperText="Upload a Config Map yaml file"
+      helperTextInvalid={error}
+      validated={error ? 'error' : 'default'}
+    >
+      <FileUpload
+        id="configmap-upload"
+        type="text"
+        value={fileValue}
+        filename={filename}
+        onFileInputChange={(_e, file) => setFilename(file.name)}
+        filenamePlaceholder="Drag and drop a file or upload one"
+        allowEditingUploadedText={false}
+        onReadStarted={() => setLoading(true)}
+        onReadFinished={() => setLoading(false)}
+        onClearClick={() => {
+          setFilename('');
+          setFileValue('');
+          setError('');
+          onUpdate([]);
+        }}
+        dropzoneProps={{
+          accept: '.yaml',
+        }}
+        onDataChange={(data) => {
+          setFileValue(data);
+          try {
+            const parsedData = parse(data);
+            if (!isConfigMapKind(parsedData)) {
+              setError('This file is not Config Map kind, please upload a Config Map kind file.');
+            } else {
+              const configMapData = parsedData.data;
+              if (!configMapData) {
+                setError('Data field cannot be empty, please check your file.');
+              } else if (!isStringKeyValuePairObject(configMapData)) {
+                setError('Data need to be string key value pairs, please check your file.');
+              } else {
+                setError('');
+                onUpdate(Object.entries(configMapData).map(([key, value]) => ({ key, value })));
+              }
+            }
+          } catch (e) {
+            setError(
+              'Cannot parse this file, please make sure this is a valid YAML file with only one Config Map defined.',
+            );
+          }
+        }}
+        validated={error ? 'error' : 'default'}
+        isLoading={isLoading}
+        isReadOnly
+        browseButtonText="Upload"
+      />
+    </FormGroup>
+  );
+};
+
+export default ConfigMapUploadField;
diff --git a/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvConfigMap.tsx b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvConfigMap.tsx
new file mode 100644
index 0000000000..2255e4e888
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvConfigMap.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { ConfigMapCategory, EnvVariableData } from '../../../types';
+import EnvDataTypeField from './EnvDataTypeField';
+import GenericKeyValuePairField from './GenericKeyValuePairField';
+import { EMPTY_KEY_VALUE_PAIR } from './const';
+import ConfigMapUploadField from './ConfigMapUploadField';
+
+type EnvConfigMapProps = {
+  env?: EnvVariableData;
+  onUpdate: (envVariableData: EnvVariableData) => void;
+};
+
+const DEFAULT_ENV: EnvVariableData = {
+  category: null,
+  data: [],
+};
+
+const EnvConfigMap: React.FC<EnvConfigMapProps> = ({ env = DEFAULT_ENV, onUpdate }) => {
+  return (
+    <EnvDataTypeField
+      selection={env.category || ''}
+      onSelection={(value) => onUpdate({ ...env, category: value as ConfigMapCategory, data: [] })}
+      options={{
+        [ConfigMapCategory.GENERIC]: (
+          <GenericKeyValuePairField
+            values={env.data.length === 0 ? [EMPTY_KEY_VALUE_PAIR] : env.data}
+            onUpdate={(newEnvData) => onUpdate({ ...env, data: newEnvData })}
+          />
+        ),
+        [ConfigMapCategory.UPLOAD]: (
+          <ConfigMapUploadField onUpdate={(newEnvData) => onUpdate({ ...env, data: newEnvData })} />
+        ),
+      }}
+    />
+  );
+};
+
+export default EnvConfigMap;
diff --git a/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvDataTypeField.tsx b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvDataTypeField.tsx
new file mode 100644
index 0000000000..7beb54b76b
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvDataTypeField.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Select, SelectOption, Stack, StackItem } from '@patternfly/react-core';
+import IndentSection from '../../../components/IndentSection';
+
+type EnvDataTypeFieldProps = {
+  options: { [optionLabel: string]: React.ReactNode };
+  selection: string;
+  onSelection: (value: string) => void;
+};
+
+const EnvDataTypeField: React.FC<EnvDataTypeFieldProps> = ({ options, onSelection, selection }) => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <Select
+          isOpen={open}
+          onToggle={() => setOpen(!open)}
+          selections={selection}
+          placeholderText="Select one"
+          onSelect={(e, value) => {
+            if (typeof value === 'string') {
+              onSelection(value);
+              setOpen(false);
+            }
+          }}
+        >
+          {Object.keys(options).map((option) => (
+            <SelectOption key={option} value={option}>
+              {option}
+            </SelectOption>
+          ))}
+        </Select>
+      </StackItem>
+      {selection && (
+        <StackItem>
+          <IndentSection>{options[selection]}</IndentSection>
+        </StackItem>
+      )}
+    </Stack>
+  );
+};
+
+export default EnvDataTypeField;
diff --git a/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvSecret.tsx b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvSecret.tsx
new file mode 100644
index 0000000000..ecaa475336
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvSecret.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { EnvVariableData, SecretCategory } from '../../../types';
+import EnvDataTypeField from './EnvDataTypeField';
+import GenericKeyValuePairField from './GenericKeyValuePairField';
+import { EMPTY_KEY_VALUE_PAIR } from './const';
+import AWSField from '../../../dataConnections/AWSField';
+import { EMPTY_AWS_SECRET_DATA } from '../../../dataConnections/const';
+
+type EnvSecretProps = {
+  env?: EnvVariableData;
+  onUpdate: (envVariableData: EnvVariableData) => void;
+};
+
+const DEFAULT_ENV: EnvVariableData = {
+  category: null,
+  data: [],
+};
+
+const EnvSecret: React.FC<EnvSecretProps> = ({ env = DEFAULT_ENV, onUpdate }) => {
+  return (
+    <EnvDataTypeField
+      selection={env.category || ''}
+      onSelection={(value) => onUpdate({ ...env, category: value as SecretCategory, data: [] })}
+      options={{
+        [SecretCategory.GENERIC]: (
+          <GenericKeyValuePairField
+            values={env.data.length === 0 ? [EMPTY_KEY_VALUE_PAIR] : env.data}
+            onUpdate={(newEnvData) => onUpdate({ ...env, data: newEnvData })}
+            valueIsSecret
+          />
+        ),
+        [SecretCategory.AWS]: (
+          <AWSField
+            values={env.data.length === 0 ? EMPTY_AWS_SECRET_DATA : env.data}
+            onUpdate={(newEnvData) => onUpdate({ ...env, data: newEnvData })}
+          />
+        ),
+      }}
+    />
+  );
+};
+
+export default EnvSecret;
diff --git a/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSelectField.tsx b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSelectField.tsx
new file mode 100644
index 0000000000..3e24773e4c
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSelectField.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import {
+  Button,
+  Select,
+  SelectOption,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { EnvironmentVariableType, EnvVariable } from '../../../types';
+import { MinusCircleIcon } from '@patternfly/react-icons';
+import EnvTypeSwitch from './EnvTypeSwitch';
+import IndentSection from '../../../components/IndentSection';
+
+type EnvTypeSelectFieldProps = {
+  envVariable: EnvVariable;
+  onUpdate: (envVariable: EnvVariable) => void;
+  onRemove: () => void;
+};
+
+const EnvTypeSelectField: React.FC<EnvTypeSelectFieldProps> = ({
+  envVariable,
+  onUpdate,
+  onRemove,
+}) => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Split>
+      <SplitItem isFilled>
+        <Stack hasGutter>
+          <StackItem>
+            <Select
+              isOpen={open}
+              onToggle={() => setOpen(!open)}
+              selections={envVariable.type || ''}
+              placeholderText="Select one"
+              onSelect={(e, value) => {
+                if (typeof value === 'string') {
+                  onUpdate({
+                    type: value as EnvironmentVariableType,
+                  });
+                  setOpen(false);
+                }
+              }}
+            >
+              {Object.values(EnvironmentVariableType).map((type) => (
+                <SelectOption key={type} value={type}>
+                  {type}
+                </SelectOption>
+              ))}
+            </Select>
+          </StackItem>
+          {envVariable.type && (
+            <StackItem>
+              <IndentSection>
+                <EnvTypeSwitch
+                  env={envVariable}
+                  onUpdate={(envValue) => onUpdate({ ...envVariable, values: envValue })}
+                />
+              </IndentSection>
+            </StackItem>
+          )}
+        </Stack>
+      </SplitItem>
+      <SplitItem>
+        <Button variant="plain" icon={<MinusCircleIcon />} onClick={() => onRemove()} />
+      </SplitItem>
+    </Split>
+  );
+};
+
+export default EnvTypeSelectField;
diff --git a/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSwitch.tsx b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSwitch.tsx
new file mode 100644
index 0000000000..952c1b9c30
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvTypeSwitch.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { EnvironmentVariableType, EnvVariable, EnvVariableData } from '../../../types';
+import EnvConfigMap from './EnvConfigMap';
+import EnvSecret from './EnvSecret';
+
+type EnvTypeSwitchProps = {
+  env: EnvVariable;
+  onUpdate: (envVariableData: EnvVariableData) => void;
+};
+
+const EnvTypeSwitch: React.FC<EnvTypeSwitchProps> = ({ env, onUpdate }) => {
+  switch (env.type) {
+    case EnvironmentVariableType.CONFIG_MAP:
+      return <EnvConfigMap env={env.values} onUpdate={onUpdate} />;
+    case EnvironmentVariableType.SECRET:
+      return <EnvSecret env={env.values} onUpdate={onUpdate} />;
+    default:
+      return null;
+  }
+};
+
+export default EnvTypeSwitch;
diff --git a/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvironmentVariables.tsx b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvironmentVariables.tsx
new file mode 100644
index 0000000000..c97e4097cb
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/environmentVariables/EnvironmentVariables.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Button, Divider } from '@patternfly/react-core';
+import { EnvVariable } from '../../../types';
+import { PlusCircleIcon } from '@patternfly/react-icons';
+import EnvTypeSelectField from './EnvTypeSelectField';
+
+type EnvironmentVariablesProps = {
+  envVariables: EnvVariable[];
+  setEnvVariables: (envVars: EnvVariable[]) => void;
+};
+const EnvironmentVariables: React.FC<EnvironmentVariablesProps> = ({
+  envVariables,
+  setEnvVariables,
+}) => {
+  return (
+    <>
+      {envVariables.map((envVariable, i) => (
+        <>
+          <EnvTypeSelectField
+            key={i}
+            envVariable={envVariable}
+            onUpdate={(updatedVariable) => {
+              setEnvVariables(
+                envVariables.map((envVariable, mapIndex) =>
+                  mapIndex === i ? updatedVariable : envVariable,
+                ),
+              );
+            }}
+            onRemove={() =>
+              setEnvVariables(envVariables.filter((v, filterIndex) => filterIndex !== i))
+            }
+          />
+          {i !== envVariables.length - 1 && <Divider />}
+        </>
+      ))}
+      <Button
+        variant="link"
+        isInline
+        icon={<PlusCircleIcon />}
+        iconPosition="left"
+        onClick={() => setEnvVariables([...envVariables, { type: null }])}
+      >
+        {envVariables.length === 0 ? 'Add variable' : 'Add more variables'}
+      </Button>
+    </>
+  );
+};
+
+export default EnvironmentVariables;
diff --git a/frontend/src/pages/projects/screens/spawner/environmentVariables/GenericKeyValuePairField.tsx b/frontend/src/pages/projects/screens/spawner/environmentVariables/GenericKeyValuePairField.tsx
new file mode 100644
index 0000000000..40b4df6789
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/environmentVariables/GenericKeyValuePairField.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react';
+import {
+  Button,
+  Divider,
+  FormGroup,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+  TextInput,
+} from '@patternfly/react-core';
+import { EnvVariableDataEntry } from '../../../types';
+import { MinusCircleIcon, PlusCircleIcon } from '@patternfly/react-icons';
+import { EMPTY_KEY_VALUE_PAIR } from './const';
+import { removeArrayItem, updateArrayValue } from './utils';
+import PasswordInput from '../../../components/PasswordInput';
+
+type GenericKeyValuePairFieldProps = {
+  values: EnvVariableDataEntry[];
+  onUpdate: (data: EnvVariableDataEntry[]) => void;
+  valueIsSecret?: boolean;
+};
+
+const GenericKeyValuePairField: React.FC<GenericKeyValuePairFieldProps> = ({
+  values,
+  onUpdate,
+  valueIsSecret,
+}) => {
+  const ValueComponent = valueIsSecret ? PasswordInput : TextInput;
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <Stack hasGutter>
+          {values.map(({ key, value }, i) => (
+            <StackItem key={i}>
+              <Split>
+                <SplitItem isFilled>
+                  <Stack hasGutter>
+                    <StackItem>
+                      <FormGroup isRequired label="Key" fieldId="label">
+                        <TextInput
+                          isRequired
+                          aria-label={`key of item ${i}`}
+                          value={key}
+                          onChange={(updatedKey) =>
+                            onUpdate(updateArrayValue(values, i, { key: updatedKey }))
+                          }
+                        />
+                      </FormGroup>
+                    </StackItem>
+                    <StackItem>
+                      <FormGroup isRequired label="Value" fieldId="label">
+                        <ValueComponent
+                          isRequired
+                          aria-label={`value of item ${i}`}
+                          value={value}
+                          onChange={(updatedValue) =>
+                            onUpdate(updateArrayValue(values, i, { value: updatedValue }))
+                          }
+                        />
+                      </FormGroup>
+                    </StackItem>
+                    {i !== values.length - 1 && (
+                      <StackItem>
+                        <Divider />
+                      </StackItem>
+                    )}
+                  </Stack>
+                </SplitItem>
+                <SplitItem style={{ paddingTop: 'var(--pf-global--spacer--xl)' }}>
+                  <Button
+                    isDisabled={values.length === 1}
+                    variant="plain"
+                    icon={<MinusCircleIcon />}
+                    onClick={() => onUpdate(removeArrayItem(values, i))}
+                  />
+                </SplitItem>
+              </Split>
+            </StackItem>
+          ))}
+        </Stack>
+      </StackItem>
+      <StackItem>
+        <Button
+          variant="link"
+          isInline
+          icon={<PlusCircleIcon />}
+          iconPosition="left"
+          onClick={() => onUpdate([...values, EMPTY_KEY_VALUE_PAIR])}
+        >
+          Add another variable
+        </Button>
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default GenericKeyValuePairField;
diff --git a/frontend/src/pages/projects/screens/spawner/environmentVariables/const.ts b/frontend/src/pages/projects/screens/spawner/environmentVariables/const.ts
new file mode 100644
index 0000000000..66c44d8bb6
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/environmentVariables/const.ts
@@ -0,0 +1,6 @@
+import { EnvVariableDataEntry } from '../../../types';
+
+export const EMPTY_KEY_VALUE_PAIR: EnvVariableDataEntry = {
+  key: '',
+  value: '',
+};
diff --git a/frontend/src/pages/projects/screens/spawner/environmentVariables/utils.ts b/frontend/src/pages/projects/screens/spawner/environmentVariables/utils.ts
new file mode 100644
index 0000000000..f4a6e3a21c
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/environmentVariables/utils.ts
@@ -0,0 +1,15 @@
+import { ConfigMapKind } from '../../../../../k8sTypes';
+
+export const updateArrayValue = <T>(values: T[], index: number, partialValue: Partial<T>): T[] =>
+  values.map((v, i) => (i === index ? { ...v, ...partialValue } : v));
+
+export const removeArrayItem = <T>(values: T[], index: number): T[] =>
+  values.filter((v, i) => i !== index);
+
+export const isConfigMapKind = (object: unknown): object is ConfigMapKind =>
+  (object as ConfigMapKind).kind === 'ConfigMap';
+
+export const isStringKeyValuePairObject = (object: unknown): object is Record<string, string> =>
+  Object.entries(object as Record<string, string>).every(
+    ([key, value]) => typeof key === 'string' && typeof value === 'string',
+  );
diff --git a/frontend/src/pages/projects/screens/spawner/imageSelector/ImageSelectorField.tsx b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageSelectorField.tsx
new file mode 100644
index 0000000000..5bb032bb43
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageSelectorField.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { Alert, Skeleton } from '@patternfly/react-core';
+import { ImageStreamKind } from '../../../../../k8sTypes';
+import {
+  getDefaultVersionForImageStream,
+  getExistingVersionsForImageStream,
+} from '../spawnerUtils';
+import ImageStreamSelector from './ImageStreamSelector';
+import ImageVersionSelector from './ImageVersionSelector';
+import ImageStreamPopover from './ImageStreamPopover';
+import { ImageStreamAndVersion } from '../../../../../types';
+import useImageStreams from '../useImageStreams';
+import { useDashboardNamespace } from '../../../../../redux/selectors';
+import useBuildStatuses from '../useBuildStatuses';
+
+type ImageSelectorFieldProps = {
+  selectedImage: ImageStreamAndVersion;
+  setSelectedImage: React.Dispatch<React.SetStateAction<ImageStreamAndVersion>>;
+};
+
+const ImageSelectorField: React.FC<ImageSelectorFieldProps> = ({
+  selectedImage,
+  setSelectedImage,
+}) => {
+  const { dashboardNamespace } = useDashboardNamespace();
+  const buildStatuses = useBuildStatuses(dashboardNamespace);
+  const [imageStreams, loaded, error] = useImageStreams(dashboardNamespace);
+
+  const imageVersionData = React.useMemo(() => {
+    const imageStream = selectedImage.imageStream;
+    if (!imageStream) {
+      return { buildStatuses, imageStream, imageVersions: [] };
+    }
+    return {
+      buildStatuses,
+      imageStream,
+      imageVersions: getExistingVersionsForImageStream(imageStream),
+    };
+  }, [selectedImage.imageStream, buildStatuses]);
+
+  const onImageStreamSelect = (newImageStream: ImageStreamKind) => {
+    const version = getDefaultVersionForImageStream(newImageStream, buildStatuses);
+    const versions = getExistingVersionsForImageStream(newImageStream);
+    const initialVersion = versions.find((v) => v.name === version?.name);
+
+    return setSelectedImage({
+      imageStream: newImageStream,
+      imageVersion: initialVersion,
+    });
+  };
+
+  if (!loaded) {
+    return <Skeleton />;
+  }
+
+  return (
+    <>
+      {error ? (
+        <Alert title="Image loading error" variant="danger">
+          {error.message}
+        </Alert>
+      ) : (
+        <>
+          <ImageStreamSelector
+            imageStreams={imageStreams}
+            buildStatuses={buildStatuses}
+            onImageStreamSelect={onImageStreamSelect}
+            selectedImageStream={selectedImage.imageStream}
+          />
+          <ImageVersionSelector
+            data={imageVersionData}
+            setSelectedImageVersion={(selection) =>
+              setSelectedImage((oldSelectedImage) => ({
+                ...oldSelectedImage,
+                imageVersion: selection,
+              }))
+            }
+            selectedImageVersion={selectedImage.imageVersion}
+          />
+          <ImageStreamPopover selectedImage={selectedImage} />
+        </>
+      )}
+    </>
+  );
+};
+
+export default ImageSelectorField;
diff --git a/frontend/src/pages/projects/screens/spawner/imageSelector/ImageStreamPopover.tsx b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageStreamPopover.tsx
new file mode 100644
index 0000000000..8adf319fdb
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageStreamPopover.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Button, Popover, Stack, StackItem } from '@patternfly/react-core';
+import { QuestionCircleIcon } from '@patternfly/react-icons';
+import { getImageStreamDescription, getImageVersionDependencies } from '../spawnerUtils';
+import { ImageStreamAndVersion } from '../../../../../types';
+import NotebookImagePackageDetails from '../../../notebook/NotebookImagePackageDetails';
+
+type ImageStreamPopoverProps = {
+  selectedImage: ImageStreamAndVersion;
+};
+
+const ImageStreamPopover: React.FC<ImageStreamPopoverProps> = ({ selectedImage }) => {
+  const { imageStream, imageVersion } = selectedImage;
+
+  if (!imageStream || !imageVersion) {
+    return null;
+  }
+
+  const description = getImageStreamDescription(imageStream);
+  const dependencies = getImageVersionDependencies(imageVersion, false);
+
+  if (!description && dependencies.length === 0) {
+    return null;
+  }
+
+  return (
+    // have to use <span> here to make sure the Button is inline, maybe it's an PF bug
+    <span>
+      <Popover
+        removeFindDomNode
+        headerContent="Package information"
+        bodyContent={
+          <Stack hasGutter>
+            <StackItem>{description}</StackItem>
+            {dependencies.length !== 0 && (
+              <StackItem>
+                <NotebookImagePackageDetails
+                  title="Packages included"
+                  dependencies={dependencies}
+                />
+              </StackItem>
+            )}
+          </Stack>
+        }
+        position="right"
+      >
+        <Button isInline variant="link" icon={<QuestionCircleIcon />}>
+          View package information
+        </Button>
+      </Popover>
+    </span>
+  );
+};
+
+export default ImageStreamPopover;
diff --git a/frontend/src/pages/projects/screens/spawner/imageSelector/ImageStreamSelector.tsx b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageStreamSelector.tsx
new file mode 100644
index 0000000000..92d1485355
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageStreamSelector.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { FormGroup, Select, SelectOption } from '@patternfly/react-core';
+import { BuildStatus } from '../types';
+import {
+  checkImageStreamAvailability,
+  compareImageStreamOrder,
+  getImageStreamSelectOptionObject,
+  getRelatedVersionDescription,
+  isImageStreamSelectOptionObject,
+} from '../spawnerUtils';
+import { ImageStreamKind } from '../../../../../k8sTypes';
+
+type ImageStreamSelectorProps = {
+  imageStreams: ImageStreamKind[];
+  buildStatuses: BuildStatus[];
+  selectedImageStream?: ImageStreamKind;
+  onImageStreamSelect: (selection: ImageStreamKind) => void;
+};
+
+const ImageStreamSelector: React.FC<ImageStreamSelectorProps> = ({
+  imageStreams,
+  selectedImageStream,
+  onImageStreamSelect,
+  buildStatuses,
+}) => {
+  const [imageSelectionOpen, setImageSelectionOpen] = React.useState<boolean>(false);
+
+  const selectOptionObjects = [...imageStreams]
+    .sort(compareImageStreamOrder)
+    .map((imageStream) => getImageStreamSelectOptionObject(imageStream));
+
+  const options = selectOptionObjects.map((optionObject) => {
+    const imageStream = optionObject.imageStream;
+    const description = getRelatedVersionDescription(imageStream);
+    return (
+      <SelectOption
+        key={imageStream.metadata.name}
+        value={optionObject}
+        description={description}
+        isDisabled={!checkImageStreamAvailability(imageStream, buildStatuses)}
+      />
+    );
+  });
+
+  return (
+    <FormGroup
+      isRequired
+      helperText="Preloaded notebook images maintained by Red Hat or independent software vendors."
+      label="Image selection"
+      fieldId="workbench-image-stream-selection"
+    >
+      <Select
+        id="workbench-image-stream-selection"
+        onToggle={(open) => setImageSelectionOpen(open)}
+        onSelect={(e, selection) => {
+          // We know selection here is ImageStreamSelectOptionObjectType
+          if (isImageStreamSelectOptionObject(selection)) {
+            onImageStreamSelect(selection.imageStream);
+            setImageSelectionOpen(false);
+          }
+        }}
+        isOpen={imageSelectionOpen}
+        selections={selectOptionObjects.find(
+          (optionObject) =>
+            optionObject.imageStream.metadata.name === selectedImageStream?.metadata.name,
+        )}
+        placeholderText="Select one"
+        maxHeight={250}
+      >
+        {options}
+      </Select>
+    </FormGroup>
+  );
+};
+
+export default ImageStreamSelector;
diff --git a/frontend/src/pages/projects/screens/spawner/imageSelector/ImageVersionSelector.tsx b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageVersionSelector.tsx
new file mode 100644
index 0000000000..095c884829
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageVersionSelector.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { FormGroup, Select, SelectOption } from '@patternfly/react-core';
+import { ImageVersionSelectDataType } from '../types';
+import {
+  checkTagBuildValid,
+  compareImageVersionOrder,
+  getAvailableVersionsForImageStream,
+  getImageVersionDependencies,
+  getImageVersionSelectOptionObject,
+  getImageVersionSoftwareString,
+  isImageVersionSelectOptionObject,
+} from '../spawnerUtils';
+import ImageVersionTooltip from './ImageVersionTooltip';
+import { ImageStreamSpecTagType } from '../../../../../k8sTypes';
+
+type ImageVersionSelectorProps = {
+  data: ImageVersionSelectDataType;
+  selectedImageVersion?: ImageStreamSpecTagType;
+  setSelectedImageVersion: (selection: ImageStreamSpecTagType) => void;
+};
+
+const ImageVersionSelector: React.FC<ImageVersionSelectorProps> = ({
+  selectedImageVersion,
+  setSelectedImageVersion,
+  data,
+}) => {
+  const [versionSelectionOpen, setVersionSelectionOpen] = React.useState<boolean>(false);
+
+  const { imageStream, buildStatuses, imageVersions } = data;
+
+  if (!imageStream || getAvailableVersionsForImageStream(imageStream, buildStatuses).length <= 1) {
+    return null;
+  }
+
+  const selectOptionObjects = [...imageVersions]
+    .sort(compareImageVersionOrder)
+    .map((imageVersion) => getImageVersionSelectOptionObject(imageStream, imageVersion));
+
+  const options = selectOptionObjects.map((optionObject) => {
+    const imageVersion = optionObject.imageVersion;
+    // Cannot wrap the SelectOption with Tooltip because Select component requires SelectOption as the children
+    // Can only wrap the SelectOption children with Tooltip
+    // But in this way, you will only see the tooltip when you hover the option main text (excluding description), not the whole button
+    return (
+      <SelectOption
+        key={`${imageStream.metadata.name}-${imageVersion.name}`}
+        value={optionObject}
+        description={getImageVersionSoftwareString(imageVersion)}
+        isDisabled={!checkTagBuildValid(buildStatuses, imageStream, imageVersion)}
+      >
+        <ImageVersionTooltip dependencies={getImageVersionDependencies(imageVersion, false)}>
+          {optionObject.toString()}
+        </ImageVersionTooltip>
+      </SelectOption>
+    );
+  });
+
+  return (
+    <FormGroup
+      isRequired
+      label="Version selection"
+      helperText="Hover an option to learn more information about the package."
+      fieldId="workbench-image-version-selection"
+    >
+      <Select
+        id="workbench-image-version-selection"
+        onToggle={(open) => setVersionSelectionOpen(open)}
+        onSelect={(e, selection) => {
+          // We know selection here is ImageVersionSelectOptionObjectType
+          if (isImageVersionSelectOptionObject(selection)) {
+            setSelectedImageVersion(selection.imageVersion);
+            setVersionSelectionOpen(false);
+          }
+        }}
+        isOpen={versionSelectionOpen}
+        selections={selectOptionObjects.find(
+          (optionObject) => optionObject.imageVersion.name === selectedImageVersion?.name,
+        )}
+        placeholderText="Select one"
+      >
+        {options}
+      </Select>
+    </FormGroup>
+  );
+};
+
+export default ImageVersionSelector;
diff --git a/frontend/src/pages/projects/screens/spawner/imageSelector/ImageVersionTooltip.tsx b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageVersionTooltip.tsx
new file mode 100644
index 0000000000..be5e874403
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/imageSelector/ImageVersionTooltip.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Tooltip } from '@patternfly/react-core';
+import { ImageVersionDependencyType } from '../types';
+import NotebookImagePackageDetails from '../../../notebook/NotebookImagePackageDetails';
+
+type ImageVersionTooltipProps = {
+  dependencies: ImageVersionDependencyType[];
+};
+
+const ImageVersionTooltip: React.FC<ImageVersionTooltipProps> = ({ children, dependencies }) => {
+  if (dependencies.length === 0) {
+    return null;
+  }
+
+  return (
+    <Tooltip
+      removeFindDomNode
+      content={
+        <NotebookImagePackageDetails title="Packages included" dependencies={dependencies} />
+      }
+      position="right"
+    >
+      <div>{children}</div>
+    </Tooltip>
+  );
+};
+
+export default ImageVersionTooltip;
diff --git a/frontend/src/pages/projects/screens/spawner/service.ts b/frontend/src/pages/projects/screens/spawner/service.ts
new file mode 100644
index 0000000000..9a99e6592e
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/service.ts
@@ -0,0 +1,101 @@
+import {
+  assembleConfigMap,
+  assemblePvc,
+  assembleSecret,
+  createConfigMap,
+  createPvc,
+  createSecret,
+} from '../../../../api';
+import { Volume, VolumeMount } from '../../../../types';
+import {
+  ConfigMapCategory,
+  EnvironmentFromVariable,
+  EnvVariable,
+  SecretCategory,
+  StorageData,
+  StorageType,
+} from '../../types';
+import { getVolumesByStorageData } from './spawnerUtils';
+import { ROOT_MOUNT_PATH } from '../../pvc/const';
+import { ConfigMapKind, SecretKind } from '../../../../k8sTypes';
+
+export const createPvcDataForNotebook = async (
+  projectName: string,
+  storageData: StorageData,
+): Promise<{ volumes: Volume[]; volumeMounts: VolumeMount[] }> => {
+  const {
+    storageType,
+    creating: {
+      nameDesc: { name: pvcName, description: pvcDescription },
+      size,
+    },
+  } = storageData;
+
+  const { volumes, volumeMounts } = getVolumesByStorageData(storageData);
+
+  if (storageType === StorageType.NEW_PVC) {
+    const pvcData = assemblePvc(pvcName, projectName, pvcDescription, size);
+    const pvc = await createPvc(pvcData);
+    const newPvcName = pvc.metadata.name;
+    volumes.push({ name: newPvcName, persistentVolumeClaim: { claimName: newPvcName } });
+    volumeMounts.push({ mountPath: ROOT_MOUNT_PATH, name: newPvcName });
+  }
+  return { volumes, volumeMounts };
+};
+
+export const createConfigMapsAndSecretsForNotebook = async (
+  projectName: string,
+  envVariables: EnvVariable[],
+): Promise<EnvironmentFromVariable[]> => {
+  const creatingPromises = envVariables
+    .map<Promise<SecretKind | ConfigMapKind> | null>((envVar) => {
+      if (!envVar.values) {
+        return null;
+      }
+
+      const dataAsRecord = envVar.values.data.reduce<Record<string, string>>(
+        (acc, { key, value }) => ({ ...acc, [key]: value }),
+        {},
+      );
+
+      switch (envVar.values.category) {
+        case SecretCategory.GENERIC:
+          return createSecret(assembleSecret(projectName, dataAsRecord));
+        case ConfigMapCategory.GENERIC:
+        case ConfigMapCategory.UPLOAD:
+          return createConfigMap(assembleConfigMap(projectName, dataAsRecord));
+        case SecretCategory.AWS:
+          return createSecret(assembleSecret(projectName, dataAsRecord, 'aws'));
+        default:
+          return null;
+      }
+    })
+    .filter((v): v is Promise<SecretKind | ConfigMapKind> => !!v);
+
+  return Promise.all(creatingPromises)
+    .then((results: (ConfigMapKind | SecretKind)[]) => {
+      return results.reduce<EnvironmentFromVariable[]>((acc, resource) => {
+        let envFrom;
+        if (resource.kind === 'Secret') {
+          envFrom = {
+            secretRef: {
+              name: resource.metadata.name,
+            },
+          };
+        } else if (resource.kind === 'ConfigMap') {
+          envFrom = {
+            configMapRef: {
+              name: resource.metadata.name,
+            },
+          };
+        } else {
+          return acc;
+        }
+        return [...acc, envFrom];
+      }, []);
+    })
+    .catch((e) => {
+      console.error('Creating environment variables failed: ', e);
+      throw e;
+    });
+};
diff --git a/frontend/src/pages/projects/screens/spawner/spawnerUtils.ts b/frontend/src/pages/projects/screens/spawner/spawnerUtils.ts
new file mode 100644
index 0000000000..2440735ce0
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/spawnerUtils.ts
@@ -0,0 +1,336 @@
+import compareVersions from 'compare-versions';
+import { NotebookSize, Volume, VolumeMount } from '../../../../types';
+import { BuildKind, ImageStreamKind, ImageStreamSpecTagType } from '../../../../k8sTypes';
+import { FAILED_PHASES, PENDING_PHASES } from './const';
+import {
+  BuildStatus,
+  ImageStreamSelectOptionObjectType,
+  ImageVersionDependencyType,
+  ImageVersionSelectOptionObjectType,
+} from './types';
+import {
+  ConfigMapCategory,
+  EnvVariable,
+  EnvVariableDataEntry,
+  SecretCategory,
+  StartNotebookData,
+  StorageData,
+  StorageType,
+} from '../../types';
+import { ROOT_MOUNT_PATH } from '../../pvc/const';
+import { AWS_KEYS, AWS_REQUIRED_KEYS } from '../../dataConnections/const';
+
+/******************* Common utils *******************/
+export const getVersion = (version?: string, prefix?: string): string => {
+  if (!version) {
+    return '';
+  }
+  const versionString =
+    version.startsWith('v') || version.startsWith('V') ? version.slice(1) : version;
+
+  return `${prefix ? prefix : ''}${versionString}`;
+};
+
+export const getNameVersionString = (software: ImageVersionDependencyType): string =>
+  `${software.name} ${getVersion(software.version, 'v')}`;
+
+/******************* PF Select related utils *******************/
+/**
+ * Create object for PF Select component to use
+ * `toString` decides the text shown for the select option
+ */
+export const getImageStreamSelectOptionObject = (
+  imageStream: ImageStreamKind,
+): ImageStreamSelectOptionObjectType => ({
+  imageStream,
+  toString: () => getImageStreamDisplayName(imageStream),
+});
+export const getImageVersionSelectOptionObject = (
+  imageStream: ImageStreamKind,
+  imageVersion: ImageStreamSpecTagType,
+): ImageVersionSelectOptionObjectType => ({
+  imageVersion,
+  toString: () =>
+    `${imageVersion.name}${checkVersionRecommended(imageVersion) ? ' (Recommended)' : ''}`,
+});
+export const isImageStreamSelectOptionObject = (
+  object: unknown,
+): object is ImageStreamSelectOptionObjectType => {
+  return (object as ImageStreamSelectOptionObjectType).imageStream !== undefined;
+};
+export const isImageVersionSelectOptionObject = (
+  object: unknown,
+): object is ImageVersionSelectOptionObjectType => {
+  return (object as ImageVersionSelectOptionObjectType).imageVersion !== undefined;
+};
+
+/******************* Compare utils for sorting *******************/
+const getBuildNumber = (build: BuildKind): number => {
+  const buildNumber = build.metadata.annotations?.['openshift.io/build.number'] || '-1';
+  return parseInt(buildNumber, 10);
+};
+
+export const compareBuilds = (b1: BuildKind, b2: BuildKind): number => {
+  const b1Pending = PENDING_PHASES.includes(b1.status.phase);
+  const b2Pending = PENDING_PHASES.includes(b2.status.phase);
+
+  if (b1Pending && !b2Pending) {
+    return -1;
+  }
+  if (b2Pending && !b1Pending) {
+    return 1;
+  }
+  return getBuildNumber(b1) - getBuildNumber(b2);
+};
+
+export const compareTagVersions = (
+  a: ImageStreamSpecTagType,
+  b: ImageStreamSpecTagType,
+): number => {
+  if (compareVersions.validate(a.name) && compareVersions.validate(b.name)) {
+    return compareVersions(b.name, a.name);
+  }
+  return b.name.localeCompare(a.name);
+};
+
+export const compareImageVersionOrder = (
+  a: ImageStreamSpecTagType,
+  b: ImageStreamSpecTagType,
+): number => compareTagVersions(a, b);
+
+export const compareImageStreamOrder = (a: ImageStreamKind, b: ImageStreamKind): number =>
+  getImageSteamOrder(a) - getImageSteamOrder(b);
+
+/******************* ImageStream and ImageVersion utils *******************/
+export const getImageStreamDisplayName = (imageStream: ImageStreamKind): string =>
+  imageStream.metadata.annotations?.['opendatahub.io/notebook-image-name'] ||
+  imageStream.metadata.name;
+
+export const getImageStreamDescription = (imageStream: ImageStreamKind): string =>
+  imageStream.metadata.annotations?.['opendatahub.io/notebook-image-desc'] || '';
+
+export const getImageSteamOrder = (imageStream: ImageStreamKind): number =>
+  parseInt(imageStream.metadata.annotations?.['opendatahub.io/notebook-image-order'] || '100');
+
+/**
+ * Parse annotation software field or dependencies field from long string to array
+ */
+export const getImageVersionDependencies = (
+  imageVersion: ImageStreamSpecTagType,
+  isSoftware = false,
+): ImageVersionDependencyType[] => {
+  const depString = isSoftware
+    ? imageVersion.annotations?.['opendatahub.io/notebook-software'] || ''
+    : imageVersion.annotations?.['opendatahub.io/notebook-python-dependencies'] || '';
+  let dependencies: ImageVersionDependencyType[];
+  try {
+    dependencies = JSON.parse(depString);
+  } catch (e) {
+    if (depString.includes('[')) {
+      // It was intended to be an array but failed to parse, log the error
+      console.error(`JSON parse error when parsing ${imageVersion.name}`);
+    }
+    dependencies = [];
+  }
+  return dependencies || [];
+};
+
+/**
+ * Get the long string of the software that the version is using
+ */
+export const getImageVersionSoftwareString = (imageVersion: ImageStreamSpecTagType): string => {
+  const dependencies = getImageVersionDependencies(imageVersion, true);
+  const softwareString = dependencies.map((software) => getNameVersionString(software));
+  return softwareString.join(', ');
+};
+
+/**
+ * Get all the `imageStream.spec.tags` and filter the ones exists in `imageStream.status.tags`
+ */
+export const getExistingVersionsForImageStream = (
+  imageStream: ImageStreamKind,
+): ImageStreamSpecTagType[] => {
+  const allVersions = imageStream.spec.tags || [];
+  return allVersions.filter((version) => checkVersionExistence(imageStream, version));
+};
+
+/**
+ * Takes an ImageStream and returns the related description we show next to the name
+ */
+export const getRelatedVersionDescription = (imageStream: ImageStreamKind): string | undefined => {
+  const versions = getExistingVersionsForImageStream(imageStream);
+  return versions.length === 1 ? getImageVersionSoftwareString(versions[0]) : undefined;
+};
+
+/**
+ * Get all the existing tags and check their build status, filter out the available ones
+ */
+export const getAvailableVersionsForImageStream = (
+  imageStream: ImageStreamKind,
+  buildStatuses: BuildStatus[],
+): ImageStreamSpecTagType[] => {
+  const existingVersions = getExistingVersionsForImageStream(imageStream);
+  return existingVersions.filter((version) =>
+    checkTagBuildValid(buildStatuses, imageStream, version),
+  );
+};
+
+/**
+ * Get the recommended tag or the default tag
+ * if no recommended or default, return the latest version
+ */
+export const getDefaultVersionForImageStream = (
+  imageStream: ImageStreamKind,
+  buildStatuses: BuildStatus[],
+): ImageStreamSpecTagType | undefined => {
+  const availableVersions = getAvailableVersionsForImageStream(imageStream, buildStatuses);
+  if (availableVersions.length === 0) {
+    return undefined;
+  }
+
+  const sortedVersions = [...availableVersions].sort(compareTagVersions);
+
+  const defaultVersion = sortedVersions.find(
+    (version) =>
+      version.annotations?.['opendatahub.io/notebook-image-recommended'] ||
+      version.annotations?.['opendatahub.io/default-image'],
+  );
+  if (defaultVersion) {
+    return defaultVersion;
+  }
+
+  // Return the most recent version
+  return sortedVersions[0];
+};
+
+/******************* Deployment Size utils *******************/
+export const getSizeDescription = (size: NotebookSize): string =>
+  `Limits: ${size.resources.limits?.cpu || '??'} CPU, ` +
+  `${size.resources.limits?.memory || '??'} Memory ` +
+  `Requests: ${size.resources.requests?.cpu || '??'} CPU, ` +
+  `${size.resources.requests?.memory || '??'} Memory`;
+
+/******************* Storage utils *******************/
+export const getVolumesByStorageData = (
+  storageData: StorageData,
+): { volumes: Volume[]; volumeMounts: VolumeMount[] } => {
+  const { storageType, existing } = storageData;
+  const volumes: Volume[] = [];
+  const volumeMounts: VolumeMount[] = [];
+
+  if (storageType === StorageType.EPHEMERAL) {
+    volumes.push({ name: 'cache-volume', emptyDir: {} });
+    volumeMounts.push({ mountPath: '/cache', name: 'cache-volume' });
+    return { volumes, volumeMounts };
+  } else if (storageType === StorageType.EXISTING_PVC) {
+    const { storage } = existing;
+    if (storage) {
+      volumes.push({ name: storage, persistentVolumeClaim: { claimName: storage } });
+      volumeMounts.push({ mountPath: ROOT_MOUNT_PATH, name: storage });
+    }
+  }
+
+  return { volumes, volumeMounts };
+};
+
+/******************* Checking utils *******************/
+/**
+ * Check if there is 1 or more versions available for an image stream
+ */
+export const checkImageStreamAvailability = (
+  imageStream: ImageStreamKind,
+  buildStatuses: BuildStatus[],
+): boolean => {
+  const tags = getAvailableVersionsForImageStream(imageStream, buildStatuses);
+  return tags.length !== 0;
+};
+
+export const checkTagBuildValid = (
+  buildStatuses: BuildStatus[],
+  imageStream: ImageStreamKind,
+  imageVersion: ImageStreamSpecTagType,
+): boolean => {
+  const imageStreamVersion = `${imageStream.metadata.name}:${imageVersion.name}`;
+  const build = buildStatuses.find(
+    (buildStatus) => buildStatus.imageStreamVersion === imageStreamVersion,
+  );
+  if (!build) {
+    return true;
+  }
+  return !PENDING_PHASES.includes(build.status) && !FAILED_PHASES.includes(build.status);
+};
+
+export const checkVersionExistence = (
+  imageStream: ImageStreamKind,
+  imageVersion: ImageStreamSpecTagType,
+): boolean => {
+  const versions = imageStream.status?.tags || [];
+  return versions.some((version) => version.tag === imageVersion.name);
+};
+
+export const checkVersionRecommended = (imageVersion: ImageStreamSpecTagType): boolean =>
+  !!imageVersion.annotations?.['opendatahub.io/notebook-image-recommended'];
+
+export const isValidGenericKey = (key: string): boolean => !!key;
+
+export const isAWSValid = (values: EnvVariableDataEntry[]): boolean =>
+  values.every(({ key, value }) => (AWS_REQUIRED_KEYS.includes(key as AWS_KEYS) ? !!value : true));
+
+export const isEnvVariableDataValid = (envVariables: EnvVariable[]): boolean => {
+  if (envVariables.length === 0) {
+    return true;
+  }
+
+  const hasValidValuesForType = (
+    values: EnvVariableDataEntry[],
+    type: ConfigMapCategory | SecretCategory,
+  ) => {
+    if (values.length === 0) {
+      // No entries -- they have partial form structure
+      return false;
+    }
+
+    switch (type) {
+      case ConfigMapCategory.GENERIC:
+      case SecretCategory.GENERIC:
+      case ConfigMapCategory.UPLOAD:
+        return values.every(({ key, value }) => isValidGenericKey(key) && !!value);
+      case SecretCategory.AWS:
+        return isAWSValid(values);
+      default:
+        return false;
+    }
+  };
+
+  const isValid = envVariables.every(
+    (envVar) =>
+      !!envVar.type &&
+      !!envVar.values &&
+      !!envVar.values.category &&
+      hasValidValuesForType(envVar.values.data, envVar.values.category),
+  );
+
+  return isValid;
+};
+
+export const checkRequiredFieldsForNotebookStart = (
+  startNotebookData: StartNotebookData,
+  storageData: StorageData,
+  envVariables: EnvVariable[],
+): boolean => {
+  const { projectName, notebookName, notebookSize, image } = startNotebookData;
+  const { storageType, creating, existing } = storageData;
+  const isNotebookDataValid = !!(
+    projectName &&
+    notebookName &&
+    notebookSize &&
+    image.imageStream &&
+    image.imageVersion
+  );
+
+  const newStorageFieldInvalid = storageType === StorageType.NEW_PVC && !creating.nameDesc.name;
+  const existingStorageFiledInvalid = storageType === StorageType.EXISTING_PVC && !existing.storage;
+  const isStorageDataValid = !newStorageFieldInvalid && !existingStorageFiledInvalid;
+
+  return isNotebookDataValid && isStorageDataValid && isEnvVariableDataValid(envVariables);
+};
diff --git a/frontend/src/pages/projects/screens/spawner/storage/AddExistingStorageField.tsx b/frontend/src/pages/projects/screens/spawner/storage/AddExistingStorageField.tsx
new file mode 100644
index 0000000000..0323be6ff1
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/storage/AddExistingStorageField.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ExistingStorageObject } from '../../../types';
+import ExistingPVCField from '../../../components/ExistingPVCField';
+import useAvailablePvcs from './useAvailablePvcs';
+import { ProjectDetailsContext } from '../../../ProjectDetailsContext';
+
+type AddExistingStorageFieldProps = {
+  data: ExistingStorageObject;
+  setData: (data: ExistingStorageObject) => void;
+  selectDirection?: 'up' | 'down';
+  menuAppendTo?: HTMLElement | 'parent';
+};
+
+const AddExistingStorageField: React.FC<AddExistingStorageFieldProps> = ({
+  data,
+  setData,
+  selectDirection,
+  menuAppendTo,
+}) => {
+  const {
+    currentProject,
+    notebooks: { data: allNotebooks },
+  } = React.useContext(ProjectDetailsContext);
+  const [pvcs, loaded, loadError] = useAvailablePvcs(currentProject.metadata.name, allNotebooks);
+
+  return (
+    <ExistingPVCField
+      fieldId="add-existing-storage-pv-selection"
+      storages={pvcs}
+      loaded={loaded}
+      loadError={loadError}
+      selectedStorage={data.storage}
+      setStorage={(storage) => setData({ ...data, storage: storage || '' })}
+      selectDirection={selectDirection}
+      menuAppendTo={menuAppendTo}
+    />
+  );
+};
+
+export default AddExistingStorageField;
diff --git a/frontend/src/pages/projects/screens/spawner/storage/CreateNewStorageSection.tsx b/frontend/src/pages/projects/screens/spawner/storage/CreateNewStorageSection.tsx
new file mode 100644
index 0000000000..7c280b94bb
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/storage/CreateNewStorageSection.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
+import { CreatingStorageObject } from '../../../types';
+import PVSizeField from '../../../components/PVSizeField';
+import NameDescriptionField from '../../../components/NameDescriptionField';
+import { UpdateObjectAtPropAndValue } from '../../../types';
+
+type CreateNewStorageSectionProps = {
+  data: CreatingStorageObject;
+  setData: UpdateObjectAtPropAndValue<CreatingStorageObject>;
+  disableSize?: boolean;
+};
+
+const CreateNewStorageSection: React.FC<CreateNewStorageSectionProps> = ({
+  data,
+  setData,
+  disableSize,
+}) => {
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <NameDescriptionField
+          nameFieldId="create-new-storage-name"
+          descriptionFieldId="create-new-storage-description"
+          data={data.nameDesc}
+          setData={(newData) => setData('nameDesc', newData)}
+          autoFocusName
+        />
+      </StackItem>
+      <StackItem>
+        <PVSizeField
+          fieldID="create-new-storage-size"
+          disable={disableSize}
+          size={data.size}
+          setSize={(size) => setData('size', size)}
+        />
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default CreateNewStorageSection;
diff --git a/frontend/src/pages/projects/screens/spawner/storage/StorageField.tsx b/frontend/src/pages/projects/screens/spawner/storage/StorageField.tsx
new file mode 100644
index 0000000000..8827694837
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/storage/StorageField.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { FormGroup, Radio, Stack, StackItem } from '@patternfly/react-core';
+import { StorageData, StorageType, UpdateObjectAtPropAndValue } from '../../../types';
+import CreateNewStorageSection from './CreateNewStorageSection';
+import AddExistingStorageField from './AddExistingStorageField';
+import { getDashboardMainContainer } from '../../../../../utilities/utils';
+
+import '../../detail/storage/ManageStorageModal.scss';
+
+type StorageFieldType = {
+  storageData: StorageData;
+  setStorageData: UpdateObjectAtPropAndValue<StorageData>;
+};
+
+const StorageField: React.FC<StorageFieldType> = ({ storageData, setStorageData }) => {
+  const { storageType, creating, existing } = storageData;
+
+  return (
+    <FormGroup fieldId="cluster-storage" role="radiogroup">
+      <Stack hasGutter>
+        <StackItem>
+          <Radio
+            name="ephemeral-storage-type-radio"
+            id="ephemeral-storage-type-radio"
+            label="Ephemeral storage"
+            description="This is temporary storage that is cleared when logged out."
+            isChecked={storageType === StorageType.EPHEMERAL}
+            onChange={() => setStorageData('storageType', StorageType.EPHEMERAL)}
+          />
+        </StackItem>
+        <StackItem>
+          <Radio
+            className="checkbox-radio-fix-body-width"
+            name="persistent-new-storage-type-radio"
+            id="persistent-new-storage-type-radio"
+            label="Create new persistent storage"
+            description="This creates a storage that is retained when logged out."
+            isChecked={storageType === StorageType.NEW_PVC}
+            onChange={() => setStorageData('storageType', StorageType.NEW_PVC)}
+            body={
+              storageType === StorageType.NEW_PVC && (
+                <CreateNewStorageSection
+                  data={creating}
+                  setData={(key, value) =>
+                    setStorageData('creating', { ...creating, [key]: value })
+                  }
+                />
+              )
+            }
+          />
+        </StackItem>
+        <StackItem>
+          <Radio
+            className="checkbox-radio-fix-body-width"
+            name="persistent-existing-storage-type-radio"
+            id="persistent-existing-storage-type-radio"
+            label="Use existing persistent storage"
+            description="This reuses a previously created persistent storage."
+            isChecked={storageType === StorageType.EXISTING_PVC}
+            onChange={() => setStorageData('storageType', StorageType.EXISTING_PVC)}
+            body={
+              storageType === StorageType.EXISTING_PVC && (
+                <AddExistingStorageField
+                  data={existing}
+                  setData={(data) => setStorageData('existing', data)}
+                  selectDirection="up"
+                  menuAppendTo={getDashboardMainContainer()}
+                />
+              )
+            }
+          />
+        </StackItem>
+      </Stack>
+    </FormGroup>
+  );
+};
+
+export default StorageField;
diff --git a/frontend/src/pages/projects/screens/spawner/storage/useAvailablePvcSize.ts b/frontend/src/pages/projects/screens/spawner/storage/useAvailablePvcSize.ts
new file mode 100644
index 0000000000..87518bee85
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/storage/useAvailablePvcSize.ts
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { AppContext } from '../../../../../app/AppContext';
+
+const DEFAULT_PVC_SIZE = 20;
+
+const useDefaultPvcSize = (): number => {
+  const {
+    dashboardConfig: {
+      spec: { notebookController },
+    },
+  } = React.useContext(AppContext);
+
+  let defaultPvcSize = DEFAULT_PVC_SIZE;
+  if (notebookController?.pvcSize) {
+    const parsedConfigSize = parseInt(notebookController?.pvcSize);
+    if (!isNaN(parsedConfigSize)) {
+      defaultPvcSize = parsedConfigSize;
+    }
+  }
+
+  return defaultPvcSize;
+};
+
+export default useDefaultPvcSize;
diff --git a/frontend/src/pages/projects/screens/spawner/storage/useAvailablePvcs.ts b/frontend/src/pages/projects/screens/spawner/storage/useAvailablePvcs.ts
new file mode 100644
index 0000000000..ef1e399963
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/storage/useAvailablePvcs.ts
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { getPvcs } from '../../../../../api';
+import { PersistentVolumeClaimKind } from '../../../../../k8sTypes';
+import { NotebookState } from '../../../notebook/types';
+import { getNotebookPVCNames } from '../../../pvc/utils';
+
+const useAvailablePvcs = (
+  projectName: string,
+  notebooks: NotebookState[],
+): [pvcs: PersistentVolumeClaimKind[], loaded: boolean, loadError: Error | undefined] => {
+  const [pvcs, setPvcs] = React.useState<PersistentVolumeClaimKind[]>([]);
+  const [loaded, setLoaded] = React.useState(false);
+  const [loadError, setLoadError] = React.useState<Error | undefined>(undefined);
+
+  React.useEffect(() => {
+    if (projectName) {
+      getPvcs(projectName)
+        .then((newPvcs) => {
+          const usedPvcs = _.uniq(
+            notebooks.flatMap((notebook) => getNotebookPVCNames(notebook.notebook)),
+          );
+          setPvcs(newPvcs.filter((pvc) => !usedPvcs.includes(pvc.metadata.name)));
+          setLoaded(true);
+        })
+        .catch((e) => {
+          setLoadError(e);
+          setLoaded(true);
+        });
+    }
+  }, [projectName, notebooks]);
+
+  return [pvcs, loaded, loadError];
+};
+
+export default useAvailablePvcs;
diff --git a/frontend/src/pages/projects/screens/spawner/storage/utils.ts b/frontend/src/pages/projects/screens/spawner/storage/utils.ts
new file mode 100644
index 0000000000..26f5c2afdb
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/storage/utils.ts
@@ -0,0 +1,106 @@
+import {
+  CreatingStorageObjectForNotebook,
+  ExistingStorageObjectForNotebook,
+  StorageData,
+  StorageType,
+  UpdateObjectAtPropAndValue,
+} from '../../../types';
+import useGenericObjectState from '../../../useGenericObjectState';
+import { getPvcDescription, getPvcDisplayName } from '../../../utils';
+import * as React from 'react';
+import { PersistentVolumeClaimKind } from '../../../../../k8sTypes';
+import useRelatedNotebooks, {
+  ConnectedNotebookContext,
+} from '../../../notebook/useRelatedNotebooks';
+import useDefaultPvcSize from './useAvailablePvcSize';
+
+export const useCreateStorageObjectForNotebook = (
+  existingData?: PersistentVolumeClaimKind,
+): [
+  data: CreatingStorageObjectForNotebook,
+  setData: UpdateObjectAtPropAndValue<CreatingStorageObjectForNotebook>,
+  resetDefaults: () => void,
+] => {
+  const defaultPvcSize = useDefaultPvcSize();
+  const createDataState = useGenericObjectState<CreatingStorageObjectForNotebook>({
+    nameDesc: {
+      name: '',
+      k8sName: undefined,
+      description: '',
+    },
+    size: defaultPvcSize,
+    forNotebook: {
+      name: '',
+      mountPath: {
+        value: '',
+        error: '',
+      },
+    },
+    hasExistingNotebookConnections: false,
+  });
+
+  const [, setCreateData] = createDataState;
+
+  const existingName = existingData ? getPvcDisplayName(existingData) : '';
+  const existingDescription = existingData ? getPvcDescription(existingData) : '';
+  const existingSize = existingData ? existingData.spec.resources.requests.storage : '';
+  const { notebooks: relatedNotebooks } = useRelatedNotebooks(
+    ConnectedNotebookContext.PVC,
+    existingData ? existingData.metadata.name : undefined,
+  );
+  React.useEffect(() => {
+    if (existingName) {
+      setCreateData('nameDesc', {
+        name: existingName,
+        description: existingDescription,
+      });
+
+      if (relatedNotebooks.length > 0) {
+        setCreateData('hasExistingNotebookConnections', true);
+      }
+
+      const newSize = parseInt(existingSize);
+      if (newSize) {
+        setCreateData('size', newSize);
+      }
+    }
+  }, [existingName, existingDescription, setCreateData, relatedNotebooks, existingSize]);
+
+  return createDataState;
+};
+
+export const useExistingStorageDataObjectForNotebook = (): [
+  data: ExistingStorageObjectForNotebook,
+  setData: UpdateObjectAtPropAndValue<ExistingStorageObjectForNotebook>,
+  resetDefaults: () => void,
+] =>
+  useGenericObjectState<ExistingStorageObjectForNotebook>({
+    name: '',
+    mountPath: {
+      value: '',
+      error: '',
+    },
+  });
+
+export const useStorageDataObject = (
+  storageType: StorageType,
+): [
+  data: StorageData,
+  setData: UpdateObjectAtPropAndValue<StorageData>,
+  resetDefaults: () => void,
+] => {
+  const defaultPvcSize = useDefaultPvcSize();
+  return useGenericObjectState<StorageData>({
+    storageType,
+    creating: {
+      nameDesc: {
+        name: '',
+        description: '',
+      },
+      size: defaultPvcSize,
+    },
+    existing: {
+      storage: '',
+    },
+  });
+};
diff --git a/frontend/src/pages/projects/screens/spawner/types.ts b/frontend/src/pages/projects/screens/spawner/types.ts
new file mode 100644
index 0000000000..8d9578ca92
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/types.ts
@@ -0,0 +1,41 @@
+import { BUILD_PHASE, ImageStreamKind, ImageStreamSpecTagType } from '../../../../k8sTypes';
+
+export enum SpawnerPageSectionID {
+  NAME_DESCRIPTION = 'name-and-description',
+  NOTEBOOK_IMAGE = 'notebook-image',
+  DEPLOYMENT_SIZE = 'deployment-size',
+  ENVIRONMENT_VARIABLES = 'environment-variables',
+  CLUSTER_STORAGE = 'cluster-storage',
+}
+
+export type SpawnerPageSectionTitlesType = {
+  [key in SpawnerPageSectionID]: string;
+};
+
+export type BuildStatus = {
+  name: string;
+  status: BUILD_PHASE;
+  imageStreamVersion: string;
+  timestamp?: string;
+};
+
+export type ImageVersionDependencyType = {
+  name: string;
+  version?: string;
+};
+
+export type ImageStreamSelectOptionObjectType = {
+  imageStream: ImageStreamKind;
+  toString: () => string;
+};
+
+export type ImageVersionSelectOptionObjectType = {
+  imageVersion: ImageStreamSpecTagType;
+  toString: () => string;
+};
+
+export type ImageVersionSelectDataType = {
+  buildStatuses: BuildStatus[];
+  imageStream?: ImageStreamKind;
+  imageVersions: ImageStreamSpecTagType[];
+};
diff --git a/frontend/src/pages/projects/screens/spawner/useBuildStatuses.ts b/frontend/src/pages/projects/screens/spawner/useBuildStatuses.ts
new file mode 100644
index 0000000000..76bbc468d8
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/useBuildStatuses.ts
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { getNotebookBuildConfigs, getBuildsForBuildConfig } from '../../../../api';
+import useNotification from '../../../../utilities/useNotification';
+import { BuildConfigKind, BuildKind, BUILD_PHASE } from '../../../../k8sTypes';
+import { BuildStatus } from './types';
+import { compareBuilds } from './spawnerUtils';
+
+const useBuildStatuses = (namespace?: string): BuildStatus[] => {
+  const notification = useNotification();
+  const [buildStatuses, setBuildStatuses] = React.useState<BuildStatus[]>([]);
+
+  React.useEffect(() => {
+    const getBuildStatus = async (
+      namespace: string,
+      buildConfig: BuildConfigKind,
+    ): Promise<BuildStatus> => {
+      const bcName = buildConfig.metadata.name;
+      const buildNotebookName =
+        buildConfig.metadata.labels?.['opendatahub.io/notebook-name'] || bcName;
+      return getBuildsForBuildConfig(namespace, bcName)
+        .then((builds) => {
+          if (builds.length <= 0) {
+            return {
+              name: buildNotebookName,
+              status: BUILD_PHASE.NONE,
+              imageStreamVersion: buildConfig.spec.output.to.name,
+            };
+          }
+          const mostRecent = builds.sort(compareBuilds).pop() as BuildKind;
+          return {
+            name: buildNotebookName,
+            status: mostRecent.status.phase,
+            imageStreamVersion: mostRecent.spec.output.to.name,
+            timestamp: mostRecent.status.completionTimestamp || mostRecent.status.startTimestamp,
+          };
+        })
+        .catch((e) => {
+          notification.error(`failed to get builds of ${buildNotebookName}`, e);
+          return {
+            name: buildNotebookName,
+            status: BUILD_PHASE.PENDING,
+            imageStreamVersion: buildConfig.spec.output.to.name,
+          };
+        });
+    };
+    if (namespace) {
+      getNotebookBuildConfigs(namespace)
+        .then((buildConfigs) => {
+          const getter = buildConfigs.map((buildConfig) => getBuildStatus(namespace, buildConfig));
+          Promise.all(getter).then((buildStatusesRes) => setBuildStatuses(buildStatusesRes));
+        })
+        .catch((e) => {
+          setBuildStatuses([]);
+          notification.error('Error getting build configs', e);
+        });
+    }
+  }, [namespace, notification]);
+
+  return buildStatuses;
+};
+
+export default useBuildStatuses;
diff --git a/frontend/src/pages/projects/screens/spawner/useImageStreams.ts b/frontend/src/pages/projects/screens/spawner/useImageStreams.ts
new file mode 100644
index 0000000000..d563850195
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/useImageStreams.ts
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { ImageStreamKind } from '../../../../k8sTypes';
+import { getNotebookImageStreams } from '../../../../api';
+
+const useImageStreams = (
+  namespace?: string,
+): [imageStreams: ImageStreamKind[], loaded: boolean, loadError: Error | undefined] => {
+  const [imageStreams, setImageStreams] = React.useState<ImageStreamKind[]>([]);
+  const [loaded, setLoaded] = React.useState(false);
+  const [loadError, setLoadError] = React.useState<Error | undefined>(undefined);
+
+  React.useEffect(() => {
+    if (namespace) {
+      getNotebookImageStreams(namespace)
+        .then((imageStreams) => {
+          setImageStreams(imageStreams);
+          setLoaded(true);
+        })
+        .catch((e) => {
+          setLoadError(e);
+          setLoaded(true);
+        });
+    }
+  }, [namespace]);
+
+  return [imageStreams, loaded, loadError];
+};
+
+export default useImageStreams;
diff --git a/frontend/src/pages/projects/screens/spawner/useNotebookSize.ts b/frontend/src/pages/projects/screens/spawner/useNotebookSize.ts
new file mode 100644
index 0000000000..22282b3e94
--- /dev/null
+++ b/frontend/src/pages/projects/screens/spawner/useNotebookSize.ts
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { useAppContext } from '../../../../app/AppContext';
+import { DashboardConfig, NotebookSize } from '../../../../types';
+import useNotification from '../../../../utilities/useNotification';
+import { useDeepCompareMemoize } from '../../../../utilities/useDeepCompareMemoize';
+import { DEFAULT_NOTEBOOK_SIZES } from './const';
+
+export const getNotebookSizes = (config: DashboardConfig): NotebookSize[] => {
+  let sizes = config.spec.notebookSizes || [];
+  if (sizes.length === 0) {
+    sizes = DEFAULT_NOTEBOOK_SIZES;
+  }
+  return sizes;
+};
+
+export const useNotebookSize = (): {
+  selectedSize: NotebookSize;
+  setSelectedSize: (size: string) => void;
+  sizes: NotebookSize[];
+} => {
+  const { dashboardConfig } = useAppContext();
+  const notification = useNotification();
+  const sizes = useDeepCompareMemoize(getNotebookSizes(dashboardConfig));
+
+  const [selectedSize, setSelectedSize] = React.useState<NotebookSize>(sizes[0]);
+
+  const setSelectedSizeSafe = React.useCallback(
+    (name: string) => {
+      let foundSize = sizes.find((size) => size.name === name);
+      if (!foundSize) {
+        foundSize = sizes[0];
+        notification.warning(
+          'The size you select is no longer available, we have set the size to the default one.',
+        );
+      }
+      setSelectedSize(foundSize);
+    },
+    [notification, sizes],
+  );
+
+  return { selectedSize, setSelectedSize: setSelectedSizeSafe, sizes };
+};
diff --git a/frontend/src/pages/projects/typeHelpers.ts b/frontend/src/pages/projects/typeHelpers.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/src/pages/projects/types.ts b/frontend/src/pages/projects/types.ts
new file mode 100644
index 0000000000..f447ef4e79
--- /dev/null
+++ b/frontend/src/pages/projects/types.ts
@@ -0,0 +1,127 @@
+import {
+  ImageStreamAndVersion,
+  NotebookSize,
+  NotebookTolerationSettings,
+  Volume,
+  VolumeMount,
+} from '../../types';
+import { ValueOf } from '../../typeHelpers';
+import { AWSSecretKind } from '../../k8sTypes';
+
+export type UpdateObjectAtPropAndValue<T> = (propKey: keyof T, propValue: ValueOf<T>) => void;
+
+export type NameDescType = {
+  name: string;
+  k8sName?: string;
+  description: string;
+};
+
+export type CreatingStorageObject = {
+  nameDesc: NameDescType;
+  size: number;
+};
+
+export type MountPath = {
+  /** Suffix to the root path */
+  value: string;
+  /** Any error with the value */
+  error: string;
+};
+
+export type ForNotebookSelection = {
+  name: string;
+  mountPath: MountPath;
+};
+
+export type CreatingStorageObjectForNotebook = CreatingStorageObject & {
+  forNotebook: ForNotebookSelection;
+  hasExistingNotebookConnections: boolean;
+};
+
+export type ExistingStorageObjectForNotebook = ForNotebookSelection;
+
+export type ExistingStorageObject = {
+  storage: string;
+};
+
+export enum StorageType {
+  EPHEMERAL = 'ephemeral',
+  NEW_PVC = 'new-persistent',
+  EXISTING_PVC = 'existing-persistent',
+}
+
+export type StorageData = {
+  storageType: StorageType;
+  creating: CreatingStorageObject;
+  existing: ExistingStorageObject;
+};
+
+export type StartNotebookData = {
+  projectName: string;
+  notebookName: string;
+  notebookSize: NotebookSize;
+  gpus: number;
+  image: ImageStreamAndVersion;
+  volumes?: Volume[];
+  volumeMounts?: VolumeMount[];
+  tolerationSettings?: NotebookTolerationSettings;
+  envFrom?: EnvironmentFromVariable[];
+  description?: string;
+  /** An override for the assembleNotebook so it doesn't regen an id */
+  notebookId?: string;
+};
+
+export type SecretRef = {
+  secretRef: {
+    name: string;
+  };
+};
+export type ConfigMapRef = {
+  configMapRef: {
+    name: string;
+  };
+};
+
+export type EnvironmentFromVariable = Partial<SecretRef> & Partial<ConfigMapRef>;
+
+export enum DataConnectionType {
+  AWS,
+}
+
+export type DataConnectionAWS = {
+  type: DataConnectionType.AWS;
+  data: AWSSecretKind;
+};
+
+export type DataConnection = {
+  type: DataConnectionType;
+  data: Record<string, unknown>; // likely will be a unified CR at some point
+} & DataConnectionAWS;
+
+export type EnvVariableDataEntry = {
+  key: string;
+  value: string;
+};
+
+export type EnvVariableData = {
+  category: SecretCategory | ConfigMapCategory | null;
+  data: EnvVariableDataEntry[];
+};
+
+export type EnvVariable = {
+  type: EnvironmentVariableType | null;
+  values?: EnvVariableData;
+};
+
+export enum EnvironmentVariableType {
+  CONFIG_MAP = 'Config Map',
+  SECRET = 'Secret',
+}
+export enum SecretCategory {
+  GENERIC = 'Key / value',
+  AWS = 'AWS',
+}
+export enum ConfigMapCategory {
+  GENERIC = 'Key / value',
+  UPLOAD = 'Upload',
+}
diff --git a/frontend/src/pages/projects/useGenericObjectState.ts b/frontend/src/pages/projects/useGenericObjectState.ts
new file mode 100644
index 0000000000..eb2fb638d7
--- /dev/null
+++ b/frontend/src/pages/projects/useGenericObjectState.ts
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { UpdateObjectAtPropAndValue } from './types';
+
+const useGenericObjectState = <T>(
+  defaultData: T,
+): [data: T, setData: UpdateObjectAtPropAndValue<T>, resetDefault: () => void] => {
+  const [value, setValue] = React.useState<T>(defaultData);
+
+  const setPropValue = React.useCallback<UpdateObjectAtPropAndValue<T>>((propKey, propValue) => {
+    setValue((oldValue) => ({ ...oldValue, [propKey]: propValue }));
+  }, []);
+
+  const defaultDataRef = React.useRef(defaultData);
+  const resetToDefault = React.useCallback(() => {
+    setValue(defaultDataRef.current);
+  }, []);
+
+  return [value, setPropValue, resetToDefault];
+};
+
+export default useGenericObjectState;
diff --git a/frontend/src/pages/projects/useProject.ts b/frontend/src/pages/projects/useProject.ts
new file mode 100644
index 0000000000..5b858fc421
--- /dev/null
+++ b/frontend/src/pages/projects/useProject.ts
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { getProject } from '../../api';
+import { ProjectKind } from '../../k8sTypes';
+
+const useProject = (
+  projectName?: string,
+): [resource: ProjectKind | null, loaded: boolean, error: Error | null] => {
+  const [project, setProject] = React.useState<ProjectKind | null>(null);
+  const [loaded, setLoaded] = React.useState(false);
+  const [error, setError] = React.useState<Error | null>(null);
+
+  React.useEffect(() => {
+    if (projectName) {
+      getProject(projectName)
+        .then((p) => {
+          if (p == null) {
+            throw new Error(`Project '${projectName}' not found`);
+          }
+          setProject(p);
+          setLoaded(true);
+        })
+        .catch((e) => setError(e));
+    }
+  }, [projectName]);
+
+  return [project, loaded, error];
+};
+
+export default useProject;
diff --git a/frontend/src/pages/projects/utils.ts b/frontend/src/pages/projects/utils.ts
new file mode 100644
index 0000000000..7df4d501f5
--- /dev/null
+++ b/frontend/src/pages/projects/utils.ts
@@ -0,0 +1,52 @@
+import {
+  K8sDSGResource,
+  NotebookKind,
+  PersistentVolumeClaimKind,
+  ProjectKind,
+  SecretKind,
+} from '../../k8sTypes';
+import { NotebookState } from './notebook/types';
+
+const getDisplayNameFromK8sResource = (resource: K8sDSGResource): string =>
+  resource.metadata.annotations?.['openshift.io/display-name'] || resource.metadata.name;
+const getDescriptionFromK8sResource = (resource: K8sDSGResource): string =>
+  resource.metadata.annotations?.['openshift.io/description'] || '';
+
+export const translateDisplayNameForK8s = (name: string): string => {
+  return name
+    .trim()
+    .toLowerCase()
+    .replace(/\s/g, '-')
+    .replace(/[^A-Za-z0-9-]/g, '');
+};
+export const isValidK8sName = (name?: string): boolean => {
+  return name === undefined || (name.length > 0 && /^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/.test(name));
+};
+
+export const getProjectDisplayName = (project: ProjectKind): string =>
+  getDisplayNameFromK8sResource(project);
+export const getProjectDescription = (project: ProjectKind): string =>
+  getDescriptionFromK8sResource(project);
+export const getProjectOwner = (project: ProjectKind): string =>
+  project.metadata.annotations?.['openshift.io/requester'] || '';
+export const getProjectCreationTime = (project: ProjectKind): number =>
+  project.metadata.creationTimestamp ? new Date(project.metadata.creationTimestamp).getTime() : 0;
+
+export const getNotebookDisplayName = (notebook: NotebookKind): string =>
+  getDisplayNameFromK8sResource(notebook);
+export const getNotebookDescription = (notebook: NotebookKind): string =>
+  getDescriptionFromK8sResource(notebook);
+export const getNotebookStatusPriority = (notebookState: NotebookState): number =>
+  notebookState.isRunning ? 1 : notebookState.isStarting ? 2 : 3;
+
+export const getPvcDisplayName = (pvc: PersistentVolumeClaimKind): string =>
+  getDisplayNameFromK8sResource(pvc);
+export const getPvcDescription = (pvc: PersistentVolumeClaimKind): string =>
+  getDescriptionFromK8sResource(pvc);
+export const getPvcTotalSize = (pvc: PersistentVolumeClaimKind): string =>
+  pvc.status?.capacity?.storage || pvc.spec.resources.requests.storage;
+
+export const getSecretDisplayName = (secret: SecretKind): string =>
+  getDisplayNameFromK8sResource(secret);
+export const getSecretDescription = (secret: SecretKind): string =>
+  getDescriptionFromK8sResource(secret);
diff --git a/frontend/src/typeHelpers.ts b/frontend/src/typeHelpers.ts
index 49b935e760..ea2790edea 100644
--- a/frontend/src/typeHelpers.ts
+++ b/frontend/src/typeHelpers.ts
@@ -7,6 +7,11 @@ export type RecursivePartial<T> = {
   [P in keyof T]?: RecursivePartial<T[P]>;
 };
 
+/**
+ * Unions all values of an object togethers -- antithesis to `keyof myObj`.
+ */
+export type ValueOf<T> = T[keyof T];
+
 /**
  * Never allow any properties of `Type`.
  *
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 77cd12e4e7..0cee4d3023 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -2,7 +2,19 @@
  * Common types, should be kept up to date with backend types
  */
 
+import { ImageStreamKind, ImageStreamSpecTagType } from './k8sTypes';
 import { EitherNotBoth } from './typeHelpers';
+import { EnvironmentFromVariable } from './pages/projects/types';
+
+export type PrometheusResponse = {
+  data: {
+    result: {
+      value: [number, string];
+    }[];
+    resultType: string;
+  };
+  status: string;
+};
 
 /**
  * In some YAML configs, we'll need to stringify a number -- this type just helps show it's not
@@ -38,6 +50,7 @@ export type DashboardCommonConfig = {
   disableISVBadges: boolean;
   disableAppLauncher: boolean;
   disableUserManagement: boolean;
+  disableProjects: boolean;
 };
 
 export type NotebookControllerUserState = {
@@ -92,12 +105,14 @@ export type ClusterSettings = {
   notebookTolerationSettings: NotebookTolerationSettings | null;
 };
 
+/** @deprecated -- use SDK type */
 export type Secret = {
   data?: Record<string, string>;
   stringData?: Record<string, string>;
   type?: string;
 } & K8sResourceCommon;
 
+/** @deprecated -- use SDK type */
 export type ConfigMap = {
   data?: Record<string, string>;
 } & K8sResourceCommon;
@@ -212,6 +227,11 @@ type K8sMetadata = {
   annotations?: { [key: string]: string };
 };
 
+/**
+ * @deprecated -- use the SDK version -- see k8sTypes.ts
+ * All references that use this are un-vetted data against existing types, should be converted over
+ * to the new K8sResourceCommon from the SDK to keep everythung unified on one front.
+ */
 export type K8sResourceCommon = {
   apiVersion?: string;
   kind?: string;
@@ -274,6 +294,7 @@ export type NotebookContainer = {
   imagePullPolicy?: string;
   workingDir?: string;
   env: EnvironmentVariable[];
+  envFrom?: EnvironmentFromVariable[];
   ports?: NotebookPort[];
   resources?: NotebookResources;
   livenessProbe?: Record<string, unknown>;
@@ -288,7 +309,7 @@ export type NotebookAffinity = {
 export type Notebook = K8sResourceCommon & {
   metadata: {
     annotations: Partial<{
-      'kubeflow-resource-stopped': string; // datestamp of stop (if omitted, it is running)
+      'kubeflow-resource-stopped': string | null; // datestamp of stop (if omitted, it is running)
       'notebooks.kubeflow.org/last-activity': string; // datestamp of last use
       'opendatahub.io/link': string; // redirect notebook url
       'opendatahub.io/username': string; // the untranslated username behind the notebook
@@ -394,33 +415,6 @@ export type BYONImagePackage = {
   visible: boolean;
 };
 
-export type PipelineRunKind = {
-  spec: {
-    params: {
-      name: string;
-      value: string;
-    }[];
-    pipelineRef: {
-      name: string;
-    };
-    workspaces?: [
-      {
-        name: string;
-        volumeClaimTemplate: {
-          spec: {
-            accessModes: string[];
-            resources: {
-              requests: {
-                storage: string;
-              };
-            };
-          };
-        };
-      },
-    ];
-  };
-} & K8sResourceCommon;
-
 export type ImageTag = {
   image: ImageInfo | undefined;
   tag: ImageTagInfo | undefined;
@@ -541,14 +535,7 @@ export type ImageInfo = {
 
 export type ImageType = 'byon' | 'jupyter' | 'other';
 
-export type PersistentVolumeClaim = {
-  apiVersion?: string;
-  kind?: string;
-  metadata: {
-    name: string;
-    namespace?: string;
-    annotations?: { [key: string]: string };
-  };
+export type PersistentVolumeClaim = K8sResourceCommon & {
   spec: {
     accessModes: string[];
     resources: {
@@ -579,7 +566,10 @@ export type Volume = {
 
 export type VolumeMount = { mountPath: string; name: string };
 
-/** Copy from partial of V1Status that will returned by the delete CoreV1Api */
+/**
+ * @deprecated -- use K8sStatus
+ * Copy from partial of V1Status that will returned by the delete CoreV1Api
+ */
 export type DeleteStatus = {
   apiVersion?: string;
   code?: number;
@@ -652,6 +642,11 @@ export type NotebookData = {
 
 export type UsernameMap<V> = { [username: string]: V };
 
+export type ImageStreamAndVersion = {
+  imageStream?: ImageStreamKind;
+  imageVersion?: ImageStreamSpecTagType;
+};
+
 export type gpuScale = {
   availableScale: number;
   gpuNumber: number;
diff --git a/frontend/src/utilities/NavData.ts b/frontend/src/utilities/NavData.ts
index e908b0bea2..d261f2fbaf 100644
--- a/frontend/src/utilities/NavData.ts
+++ b/frontend/src/utilities/NavData.ts
@@ -1,74 +1,91 @@
 import { DashboardConfig } from '../types';
-export type NavDataItem = {
-  id?: string;
-  label?: string;
-  href?: string;
-  group?: {
+
+type NavDataCommon = {
+  id: string;
+};
+
+export type NavDataHref = NavDataCommon & {
+  label: string;
+  href: string;
+};
+
+export type NavDataGroup = NavDataCommon & {
+  group: {
     id: string;
     title: string;
   };
-  children?: NavDataItem[];
+  children: NavDataHref[];
 };
 
-const baseNavData: NavDataItem[] = [
-  {
-    id: 'applications',
-    group: { id: 'apps', title: 'Applications' },
-    children: [
-      { id: 'apps-installed', label: 'Enabled', href: '/' },
-      { id: 'apps-explore', label: 'Explore', href: '/explore' },
-    ],
-  },
-  { id: 'resources', label: 'Resources', href: '/resources' },
-];
+export type NavDataItem = NavDataHref | NavDataGroup;
 
-export const getNavBarData = (
+export const isNavDataHref = (navData: NavDataItem): navData is NavDataHref =>
+  !!(navData as NavDataHref)?.href;
+export const isNavDataGroup = (navData: NavDataItem): navData is NavDataGroup =>
+  !!(navData as NavDataGroup)?.children;
+
+const getSettingsNav = (
   isAdmin: boolean,
   dashboardConfig: DashboardConfig,
-): NavDataItem[] => {
-  if (!isAdmin) return baseNavData;
-
-  const enabledFeatures: NavDataItem[] = [];
+): NavDataGroup | null => {
+  if (!isAdmin) return null;
 
+  const settingsNavs: NavDataHref[] = [];
   if (!dashboardConfig.spec.dashboardConfig.disableBYONImageStream)
-    enabledFeatures.push({
+    settingsNavs.push({
       id: 'settings-notebook-images',
       label: 'Notebook Images',
       href: '/notebookImages',
     });
 
   if (!dashboardConfig.spec.dashboardConfig.disableClusterManager)
-    enabledFeatures.push({
+    settingsNavs.push({
       id: 'settings-cluster-settings',
       label: 'Cluster settings',
       href: '/clusterSettings',
     });
 
   if (!dashboardConfig.spec.dashboardConfig.disableUserManagement)
-    enabledFeatures.push({
+    settingsNavs.push({
       id: 'settings-group-settings',
       label: 'User management',
       href: '/groupSettings',
     });
 
-  if (enabledFeatures.length > 0) {
-    return [
-      {
-        id: 'applications',
-        group: { id: 'apps', title: 'Applications' },
-        children: [
-          { id: 'apps-installed', label: 'Enabled', href: '/' },
-          { id: 'apps-explore', label: 'Explore', href: '/explore' },
-        ],
-      },
-      { id: 'resources', label: 'Resources', href: '/resources' },
-      {
-        id: 'settings',
-        group: { id: 'settings', title: 'Settings' },
-        children: enabledFeatures,
-      },
-    ];
+  if (settingsNavs.length === 0) return null;
+
+  return {
+    id: 'settings',
+    group: { id: 'settings', title: 'Settings' },
+    children: settingsNavs,
+  };
+};
+
+export const getNavBarData = (
+  isAdmin: boolean,
+  dashboardConfig: DashboardConfig,
+): NavDataItem[] => {
+  const navItems: NavDataItem[] = [];
+
+  navItems.push({
+    id: 'applications',
+    group: { id: 'apps', title: 'Applications' },
+    children: [
+      { id: 'apps-installed', label: 'Enabled', href: '/' },
+      { id: 'apps-explore', label: 'Explore', href: '/explore' },
+    ],
+  });
+
+  if (!dashboardConfig.spec.dashboardConfig.disableProjects) {
+    navItems.push({ id: 'dsg', label: 'Data Science Projects', href: '/projects' });
+  }
+
+  navItems.push({ id: 'resources', label: 'Resources', href: '/resources' });
+
+  const settingsNav = getSettingsNav(isAdmin, dashboardConfig);
+  if (settingsNav) {
+    navItems.push(settingsNav);
   }
 
-  return baseNavData;
+  return navItems;
 };
diff --git a/frontend/src/utilities/number.ts b/frontend/src/utilities/number.ts
new file mode 100644
index 0000000000..c0f107612c
--- /dev/null
+++ b/frontend/src/utilities/number.ts
@@ -0,0 +1,13 @@
+/**
+ * Returns a GB value. Will return 1 decimal point, unless it is less than 0.1, then it will
+ * return 2 decimal points so the value is not rounded to zero.
+ */
+export const bytesAsGB = (bytes: number | typeof NaN): number => {
+  if (isNaN(bytes)) {
+    return 0;
+  }
+
+  const asGigaBytes = bytes / 1024 / 1024 / 1024;
+
+  return parseFloat(asGigaBytes.toFixed(asGigaBytes < 0.1 ? 2 : 1));
+};
diff --git a/frontend/src/utilities/string.ts b/frontend/src/utilities/string.ts
new file mode 100644
index 0000000000..f0299b1a4a
--- /dev/null
+++ b/frontend/src/utilities/string.ts
@@ -0,0 +1,5 @@
+export const genRandomChars = (len = 6): string =>
+  Math.random()
+    .toString(36)
+    .replace(/[^a-z0-9]+/g, '')
+    .substr(1, len);
diff --git a/frontend/src/utilities/useTableColumnSort.ts b/frontend/src/utilities/useTableColumnSort.ts
index 41687cfbf0..251e97d8e5 100644
--- a/frontend/src/utilities/useTableColumnSort.ts
+++ b/frontend/src/utilities/useTableColumnSort.ts
@@ -1,16 +1,19 @@
 import * as React from 'react';
 import { ThProps } from '@patternfly/react-table';
 
+export type GetColumnSort = (columnIndex: number) => ThProps['sort'];
+
 export type SortableData<T> = {
   label: string;
-  field: keyof T;
+  field: string;
+  width?: ThProps['width'];
   /**
    * Set to false to disable sort.
    * Set to true to handle string and number fields automatically (everything else is equal).
    * Pass a function that will get the two results and what field needs to be matched.
    * Assume ASC -- the result will be inverted internally if needed.
    */
-  sortable: boolean | ((a: T, b: T, keyField: keyof T) => number);
+  sortable: boolean | ((a: T, b: T, keyField: string) => number);
 };
 
 /**
@@ -26,14 +29,14 @@ const useTableColumnSort = <T>(
   defaultSortColIndex?: number,
 ): {
   transformData: (data: T[]) => T[];
-  getColumnSort: (columnIndex: number) => ThProps['sort'];
+  getColumnSort: GetColumnSort;
 } => {
   const [activeSortIndex, setActiveSortIndex] = React.useState<number | undefined>(
     defaultSortColIndex,
   );
-  const [activeSortDirection, setActiveSortDirection] = React.useState<
-    'desc' | 'asc' | undefined
-  >();
+  const [activeSortDirection, setActiveSortDirection] = React.useState<'desc' | 'asc' | undefined>(
+    'asc',
+  );
 
   return {
     transformData: (data: T[]): T[] => {
@@ -41,14 +44,19 @@ const useTableColumnSort = <T>(
 
       return [...data].sort((a, b) => {
         const columnField = columns[activeSortIndex];
-        const dataValueA = a[columnField.field];
-        const dataValueB = b[columnField.field];
 
         const compute = () => {
           if (typeof columnField.sortable === 'function') {
             return columnField.sortable(a, b, columnField.field);
           }
 
+          if (!columnField.field) {
+            // If you lack the field, no auto sorting can be done
+            return 0;
+          }
+
+          const dataValueA = a[columnField.field];
+          const dataValueB = b[columnField.field];
           if (typeof dataValueA === 'string' && typeof dataValueB === 'string') {
             return dataValueA.localeCompare(dataValueB);
           }
diff --git a/frontend/src/utilities/utils.ts b/frontend/src/utilities/utils.ts
index cfeef05cce..8f89ff6cbf 100644
--- a/frontend/src/utilities/utils.ts
+++ b/frontend/src/utilities/utils.ts
@@ -46,7 +46,7 @@ export const calculateRelativeTime = (startTime: Date, endTime: Date): string =>
   return 'a few seconds ago';
 };
 
-// Returns the possible colors allowed for a patternly-react Label component
+// Returns the possible colors allowed for a patternfly-react Label component
 // There is no type defined for this so it must be exactly one of the possible strings
 // required :/
 // FixMe: Fix when https://github.com/patternfly/patternfly-react/issues/5895 is resolved
@@ -135,3 +135,22 @@ export const getTimeoutByHourAndMinute = (hour: number, minute: number): number
 export const isGroupEmpty = <T extends { enabled: boolean }>(groupList: Array<T>): boolean => {
   return groupList.filter((element) => element.enabled).length === 0;
 };
+
+export const getDashboardMainContainer = (): HTMLElement =>
+  document.getElementById('dashboard-page-main') || document.body;
+
+export const isHTMLInputElement = (object: unknown): object is HTMLInputElement => {
+  return (object as HTMLInputElement).value !== undefined;
+};
+
+export const normalizeBetween = (value: number, min?: number, max?: number): number => {
+  let returnedValue = value;
+  if (min !== undefined && max !== undefined) {
+    returnedValue = Math.max(Math.min(value, max), min);
+  } else if (min && value <= min) {
+    returnedValue = min;
+  } else if (max && value >= max) {
+    returnedValue = max;
+  }
+  return Math.floor(returnedValue);
+};
diff --git a/manifests/crd/odh-dashboard-crd.yaml b/manifests/crd/odh-dashboard-crd.yaml
index cf9d5d5aca..aaa5a90622 100644
--- a/manifests/crd/odh-dashboard-crd.yaml
+++ b/manifests/crd/odh-dashboard-crd.yaml
@@ -41,6 +41,8 @@ spec:
                       type: boolean
                     disableUserManagement:
                       type: boolean
+                    disableProjects:
+                      type: boolean
                 groupsConfig:
                   type: object
                   required:
diff --git a/manifests/overlays/authentication/deployment.yaml b/manifests/overlays/authentication/deployment.yaml
index 6784ed539b..1c2994ae34 100644
--- a/manifests/overlays/authentication/deployment.yaml
+++ b/manifests/overlays/authentication/deployment.yaml
@@ -5,10 +5,12 @@
     args:
       - --https-address=:8443
       - --provider=openshift
-      - --openshift-service-account=odh-dashboard
       - --upstream=http://localhost:8080
       - --tls-cert=/etc/tls/private/tls.crt
       - --tls-key=/etc/tls/private/tls.key
+      - --client-id=dashboard-oauth-client
+      - --client-secret-file=/etc/oauth/client/secret
+      - --scope=user:full
       - --cookie-secret-file=/etc/oauth/config/cookie_secret
       - --pass-access-token
       - '--openshift-delegate-urls={"/": {"resource": "services", "verb": "get", "name": "odh-dashboard"}}'
@@ -49,6 +51,8 @@
         name: proxy-tls
       - mountPath: /etc/oauth/config
         name: oauth-config
+      - mountPath: /etc/oauth/client
+        name: oauth-client
         
 - op: add
   path: /spec/template/spec/volumes
@@ -59,3 +63,6 @@
     - name: oauth-config
       secret:
         secretName: dashboard-oauth-config-generated
+    - name: oauth-client
+      secret:
+        secretName: dashboard-oauth-client-generated
diff --git a/manifests/overlays/authentication/secret.yaml b/manifests/overlays/authentication/secret.yaml
index eba2daa6f9..d65950cdb4 100644
--- a/manifests/overlays/authentication/secret.yaml
+++ b/manifests/overlays/authentication/secret.yaml
@@ -8,3 +8,15 @@ metadata:
     secret-generator.opendatahub.io/type: "oauth"
     secret-generator.opendatahub.io/complexity: "16"
 type: Opaque
+
+---
+apiVersion: v1
+kind: Secret
+metadata:
+  name: dashboard-oauth-client
+  annotations:
+    secret-generator.opendatahub.io/name: secret
+    secret-generator.opendatahub.io/type: random
+    secret-generator.opendatahub.io/complexity: "32"
+    secret-generator.opendatahub.io/oauth-client-route: odh-dashboard
+type: Opaque
diff --git a/manifests/overlays/odhdashboardconfig/odh-dashboard-config.yaml b/manifests/overlays/odhdashboardconfig/odh-dashboard-config.yaml
index 8ad6e74220..f3b0fa6d22 100644
--- a/manifests/overlays/odhdashboardconfig/odh-dashboard-config.yaml
+++ b/manifests/overlays/odhdashboardconfig/odh-dashboard-config.yaml
@@ -13,6 +13,7 @@ spec:
     disableSupport: false
     disableTracking: true
     enablement: true
+    disableProjects: true
   notebookController:
     enabled: true
   notebookSizes: