From 9d3b09d5cb026d98aec1a1c95833f6bde91a85a0 Mon Sep 17 00:00:00 2001
From: Guillaume Belanger <guillaume.belanger@canonical.com>
Date: Mon, 23 Sep 2024 07:27:04 -0400
Subject: [PATCH] chore: use Canonical react components (#80)

Signed-off-by: guillaume <guillaume.belanger27@gmail.com>
Co-authored-by: kayra1 <kayra.gemalmaz@canonical.com>
---
 ui/package-lock.json                          | 1079 +++++++++++++++--
 ui/package.json                               |    1 +
 ui/src/app/aside.tsx                          |    2 +-
 ui/src/app/certificate_requests/asideForm.tsx |  146 +--
 .../app/certificate_requests/components.tsx   |  212 ++--
 ui/src/app/certificate_requests/page.tsx      |   30 +-
 ui/src/app/certificate_requests/row.test.tsx  |   83 --
 ui/src/app/certificate_requests/row.tsx       |  211 ----
 ui/src/app/certificate_requests/table.tsx     |  404 ++++--
 ui/src/app/error.tsx                          |   11 +
 ui/src/app/initialize/page.tsx                |  130 +-
 ui/src/app/loading.tsx                        |   10 +
 ui/src/app/login/page.tsx                     |   91 +-
 ui/src/app/nav.tsx                            |    4 +-
 ui/src/app/{login.tsx => nav_account.tsx}     |    5 +-
 ui/src/app/users/asideForm.tsx                |  200 ++-
 ui/src/app/users/components.tsx               |  121 +-
 ui/src/app/users/page.tsx                     |   35 +-
 ui/src/app/users/row.tsx                      |   75 --
 ui/src/app/users/table.tsx                    |  118 +-
 ui/src/app/utils.ts                           |    9 +
 21 files changed, 1832 insertions(+), 1145 deletions(-)
 delete mode 100644 ui/src/app/certificate_requests/row.test.tsx
 delete mode 100644 ui/src/app/certificate_requests/row.tsx
 create mode 100644 ui/src/app/error.tsx
 create mode 100644 ui/src/app/loading.tsx
 rename ui/src/app/{login.tsx => nav_account.tsx} (93%)
 delete mode 100644 ui/src/app/users/row.tsx

diff --git a/ui/package-lock.json b/ui/package-lock.json
index d8ae3a46..79e5e551 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -6,6 +6,7 @@
     "": {
       "name": "notary",
       "dependencies": {
+        "@canonical/react-components": "^1.2.3",
         "jwt-decode": "^4.0.0",
         "next": "14.2.13",
         "pkijs": "^3.2.4",
@@ -46,7 +47,6 @@
       "version": "7.24.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
       "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.24.2",
         "picocolors": "^1.0.0"
@@ -236,7 +236,6 @@
       "version": "7.24.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz",
       "integrity": "sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -268,7 +267,6 @@
       "version": "7.24.5",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.5.tgz",
       "integrity": "sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.24.5",
         "chalk": "^2.4.2",
@@ -283,7 +281,6 @@
       "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,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -295,7 +292,6 @@
       "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,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -309,7 +305,6 @@
       "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,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -317,14 +312,12 @@
     "node_modules/@babel/highlight/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -333,7 +326,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -342,7 +334,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -452,6 +443,52 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@canonical/react-components": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@canonical/react-components/-/react-components-1.2.3.tgz",
+      "integrity": "sha512-uB3QyljoGXIwH5fLqpbv5jOS6P4djPpBJgYqIy0AhKPYqIPdWYH7B9FFvUTUE+26sJTBMZ3cg+BqVG6oodo2ZQ==",
+      "license": "LGPL-3.0",
+      "dependencies": {
+        "@types/jest": "29.5.12",
+        "@types/node": "20.16.3",
+        "@types/react": "18.3.5",
+        "@types/react-dom": "18.3.0",
+        "@types/react-table": "7.7.20",
+        "classnames": "2.5.1",
+        "jest-environment-jsdom": "29.7.0",
+        "lodash.isequal": "4.5.0",
+        "prop-types": "15.8.1",
+        "react-table": "7.8.0",
+        "react-useportal": "1.0.19"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "formik": "^2.4.5",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "vanilla-framework": "^3.15.1 || ^4.0.0"
+      }
+    },
+    "node_modules/@canonical/react-components/node_modules/@types/node": {
+      "version": "20.16.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.3.tgz",
+      "integrity": "sha512-/wdGiWRkMOm53gAsSyFMXFZHbVg7C6CbkrzHNpaHoYfsUWPg7m6ZRKtvQjgvQ9i8WT540a3ydRlRQbxjY30XxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.19.2"
+      }
+    },
+    "node_modules/@canonical/react-components/node_modules/@types/react": {
+      "version": "18.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz",
+      "integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -970,6 +1007,79 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/@jest/environment": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-29.7.0.tgz",
+      "integrity": "sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/fake-timers": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "jest-mock": "^29.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/expect-utils": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.7.0.tgz",
+      "integrity": "sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==",
+      "license": "MIT",
+      "dependencies": {
+        "jest-get-type": "^29.6.3"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/fake-timers": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-29.7.0.tgz",
+      "integrity": "sha512-q4DH1Ha4TTFPdxLsqDXK1d3+ioSL7yL5oCMJZgDYm6i+6CygW5E5xVr/D1HdsGxjt1ZWSfUAs9OxSB/BNelWrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@sinonjs/fake-timers": "^10.0.2",
+        "@types/node": "*",
+        "jest-message-util": "^29.7.0",
+        "jest-mock": "^29.7.0",
+        "jest-util": "^29.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/schemas": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@sinclair/typebox": "^0.27.8"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/types": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
+      "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^17.0.8",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -1229,6 +1339,30 @@
       "integrity": "sha512-hw437iINopmQuxWPSUEvqE56NCPsiU8N4AYtfHmJFckclktzK9YQJieD3XkDCDH4OjL+C7zgPUh73R/nrcHrqw==",
       "dev": true
     },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.27.8",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+      "license": "MIT"
+    },
+    "node_modules/@sinonjs/commons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
+      "integrity": "sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "node_modules/@sinonjs/fake-timers": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-10.3.0.tgz",
+      "integrity": "sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.0"
+      }
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -1290,6 +1424,15 @@
         }
       }
     },
+    "node_modules/@tootallnate/once": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
+      "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -1360,6 +1503,83 @@
         "hoist-non-react-statics": "^3.3.0"
       }
     },
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
+      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/istanbul-lib-report": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
+      "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "node_modules/@types/istanbul-reports": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
+      "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "node_modules/@types/jest": {
+      "version": "29.5.12",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.12.tgz",
+      "integrity": "sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==",
+      "license": "MIT",
+      "dependencies": {
+        "expect": "^29.0.0",
+        "pretty-format": "^29.0.0"
+      }
+    },
+    "node_modules/@types/jest/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@types/jest/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@types/jest/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/jsdom": {
+      "version": "20.0.1",
+      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz",
+      "integrity": "sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/tough-cookie": "*",
+        "parse5": "^7.0.0"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1376,7 +1596,6 @@
       "version": "22.5.5",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz",
       "integrity": "sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==",
-      "dev": true,
       "dependencies": {
         "undici-types": "~6.19.2"
       }
@@ -1399,7 +1618,15 @@
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
-      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-table": {
+      "version": "7.7.20",
+      "resolved": "https://registry.npmjs.org/@types/react-table/-/react-table-7.7.20.tgz",
+      "integrity": "sha512-ahMp4pmjVlnExxNwxyaDrFgmKxSbPwU23sGQw2gJK4EhCvnvmib2s/O/+y1dfV57dXOwpr2plfyBol+vEHbi2w==",
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*"
       }
@@ -1410,6 +1637,33 @@
       "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
       "dev": true
     },
+    "node_modules/@types/stack-utils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
+      "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/tough-cookie": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
+      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/yargs": {
+      "version": "17.0.33",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/@types/yargs-parser": {
+      "version": "21.0.3",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
+      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.2.0.tgz",
@@ -1792,11 +2046,17 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/abab": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
+      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
+      "deprecated": "Use your platform's native atob() and btoa() methods instead",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
       "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1804,6 +2064,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-globals": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-7.0.1.tgz",
+      "integrity": "sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.1.0",
+        "acorn-walk": "^8.0.2"
+      }
+    },
     "node_modules/acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
@@ -1813,6 +2083,18 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-walk": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+      "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
@@ -1854,7 +2136,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -2079,8 +2360,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
@@ -2141,7 +2421,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -2291,7 +2570,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -2326,6 +2604,27 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/ci-info": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
+      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2335,7 +2634,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -2346,14 +2644,12 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -2395,6 +2691,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssom": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
+      "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==",
+      "license": "MIT"
+    },
     "node_modules/cssstyle": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz",
@@ -2486,7 +2788,6 @@
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
       "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
-      "dev": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -2502,8 +2803,7 @@
     "node_modules/decimal.js": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
-      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
-      "dev": true
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
     },
     "node_modules/deep-eql": {
       "version": "5.0.2",
@@ -2520,6 +2820,16 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -2558,7 +2868,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -2577,6 +2886,15 @@
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
     },
+    "node_modules/diff-sequences": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
+      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2608,6 +2926,19 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/domexception": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
+      "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
+      "deprecated": "Use your platform's native DOMException instead",
+      "license": "MIT",
+      "dependencies": {
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2643,7 +2974,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -2868,6 +3198,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/escodegen": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
     "node_modules/eslint": {
       "version": "8.57.1",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
@@ -3236,6 +3587,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
@@ -3264,7 +3628,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -3282,11 +3645,26 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/expect": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz",
+      "integrity": "sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/expect-utils": "^29.7.0",
+        "jest-get-type": "^29.6.3",
+        "jest-matcher-utils": "^29.7.0",
+        "jest-message-util": "^29.7.0",
+        "jest-util": "^29.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3358,7 +3736,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -3431,7 +3808,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dev": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -3441,6 +3817,32 @@
         "node": ">= 6"
       }
     },
+    "node_modules/formik": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz",
+      "integrity": "sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3701,7 +4103,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3826,7 +4227,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -4099,7 +4499,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -4131,8 +4530,7 @@
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-      "dev": true
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
     },
     "node_modules/is-regex": {
       "version": "1.1.4",
@@ -4305,21 +4703,429 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
-    "node_modules/js-sha3": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
-      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
+    "node_modules/jest-diff": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
+      "integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==",
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^29.6.3",
+        "jest-get-type": "^29.6.3",
+        "pretty-format": "^29.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-diff/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-diff/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-diff/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
+    "node_modules/jest-environment-jsdom": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-29.7.0.tgz",
+      "integrity": "sha512-k9iQbsf9OyOfdzWH8HDmrRT0gSIcX+FLNW7IQq94tFX0gynPwqDTW0Ho6iMVNjGz/nb+l/vW3dWM2bbLLpkbXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "^29.7.0",
+        "@jest/fake-timers": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/jsdom": "^20.0.0",
+        "@types/node": "*",
+        "jest-mock": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "jsdom": "^20.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "license": "MIT",
+      "dependencies": {
+        "cssom": "~0.3.6"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/cssstyle/node_modules/cssom": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+      "license": "MIT"
+    },
+    "node_modules/jest-environment-jsdom/node_modules/data-urls": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
+      "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "abab": "^2.0.6",
+        "whatwg-mimetype": "^3.0.0",
+        "whatwg-url": "^11.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/html-encoding-sniffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/http-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+      "license": "MIT",
+      "dependencies": {
+        "@tootallnate/once": "2",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/jsdom": {
+      "version": "20.0.3",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
+      "integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "abab": "^2.0.6",
+        "acorn": "^8.8.1",
+        "acorn-globals": "^7.0.0",
+        "cssom": "^0.5.0",
+        "cssstyle": "^2.3.0",
+        "data-urls": "^3.0.2",
+        "decimal.js": "^10.4.2",
+        "domexception": "^4.0.0",
+        "escodegen": "^2.0.0",
+        "form-data": "^4.0.0",
+        "html-encoding-sniffer": "^3.0.0",
+        "http-proxy-agent": "^5.0.0",
+        "https-proxy-agent": "^5.0.1",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.2",
+        "parse5": "^7.1.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.1.2",
+        "w3c-xmlserializer": "^4.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^2.0.0",
+        "whatwg-mimetype": "^3.0.0",
+        "whatwg-url": "^11.0.0",
+        "ws": "^8.11.0",
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "canvas": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/tr46": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
+      "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/w3c-xmlserializer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
+      "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/whatwg-encoding": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/whatwg-mimetype": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/whatwg-url": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
+      "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^3.0.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/xml-name-validator": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-get-type": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
+      "integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-matcher-utils": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz",
+      "integrity": "sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==",
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "jest-diff": "^29.7.0",
+        "jest-get-type": "^29.6.3",
+        "pretty-format": "^29.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-matcher-utils/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-matcher-utils/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-matcher-utils/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
+    "node_modules/jest-message-util": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.7.0.tgz",
+      "integrity": "sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.12.13",
+        "@jest/types": "^29.6.3",
+        "@types/stack-utils": "^2.0.0",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "micromatch": "^4.0.4",
+        "pretty-format": "^29.7.0",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.3"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-message-util/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-message-util/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-message-util/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
+    "node_modules/jest-mock": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.7.0.tgz",
+      "integrity": "sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "jest-util": "^29.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-util": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
+      "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "graceful-fs": "^4.2.9",
+        "picomatch": "^2.2.3"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/js-sha3": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
+      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -4367,6 +5173,19 @@
         }
       }
     },
+    "node_modules/jsdom/node_modules/tough-cookie": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.0.0.tgz",
+      "integrity": "sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -4488,6 +5307,26 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4564,7 +5403,6 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -4582,7 +5420,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -4591,7 +5428,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -4631,8 +5467,7 @@
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/nano-time": {
       "version": "1.0.0",
@@ -4723,14 +5558,12 @@
     "node_modules/nwsapi": {
       "version": "2.2.12",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.12.tgz",
-      "integrity": "sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==",
-      "dev": true
+      "integrity": "sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w=="
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4927,7 +5760,6 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
       "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
-      "dev": true,
       "dependencies": {
         "entities": "^4.4.0"
       },
@@ -5022,7 +5854,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -5123,7 +5954,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -5133,14 +5963,12 @@
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -5217,6 +6045,13 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -5258,6 +6093,32 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-table": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz",
+      "integrity": "sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17.0.0-0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-useportal": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/react-useportal/-/react-useportal-1.0.19.tgz",
+      "integrity": "sha512-gXXxBu/j+gQrghUh5l0/GJxy3MoRxQRX0P3jpNI8c+4v/ey1ZGW3Tqh/wTYgBs8NdumvaYe+IiKGMYntEv07CA==",
+      "license": "MIT",
+      "dependencies": {
+        "use-ssr": "^1.0.25"
+      },
+      "peerDependencies": {
+        "react": "^16.8.6 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.1.tgz",
@@ -5484,8 +6345,7 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sass": {
       "version": "1.79.3",
@@ -5507,7 +6367,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
       "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
-      "dev": true,
       "dependencies": {
         "xmlchars": "^2.2.0"
       },
@@ -5625,11 +6484,20 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -5638,6 +6506,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stack-utils": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
+      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/stack-utils/node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -5870,7 +6759,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -5893,8 +6781,7 @@
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
-      "dev": true
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
     "node_modules/tapable": {
       "version": "2.2.1",
@@ -5911,6 +6798,13 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -5954,7 +6848,6 @@
       "version": "6.1.47",
       "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.47.tgz",
       "integrity": "sha512-R/K2tZ5MiY+mVrnSkNJkwqYT2vUv1lcT6wJvd2emGaMJ7PHUGRY4e3tUsdFCXgqxi2QgbHjL3yJgXCo40v9Hxw==",
-      "dev": true,
       "dependencies": {
         "tldts-core": "^6.1.47"
       },
@@ -5965,8 +6858,7 @@
     "node_modules/tldts-core": {
       "version": "6.1.47",
       "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.47.tgz",
-      "integrity": "sha512-6SWyFMnlst1fEt7GQVAAu16EGgFK0cLouH/2Mk6Ftlwhv3Ol40L0dlpGMcnnNiiOMyD2EV/aF3S+U2nKvvLvrA==",
-      "dev": true
+      "integrity": "sha512-6SWyFMnlst1fEt7GQVAAu16EGgFK0cLouH/2Mk6Ftlwhv3Ol40L0dlpGMcnnNiiOMyD2EV/aF3S+U2nKvvLvrA=="
     },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
@@ -5981,7 +6873,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -5990,10 +6881,9 @@
       }
     },
     "node_modules/tough-cookie": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.0.0.tgz",
-      "integrity": "sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==",
-      "dev": true,
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
       "dependencies": {
         "tldts": "^6.1.32"
       },
@@ -6066,6 +6956,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/type-fest": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@@ -6182,8 +7081,7 @@
     "node_modules/undici-types": {
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "dev": true
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw=="
     },
     "node_modules/universal-cookie": {
       "version": "7.1.4",
@@ -6243,6 +7141,16 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-ssr": {
+      "version": "1.0.25",
+      "resolved": "https://registry.npmjs.org/use-ssr/-/use-ssr-1.0.25.tgz",
+      "integrity": "sha512-VYF8kJKI+X7+U4XgGoUER2BUl0vIr+8OhlIhyldgSGE0KHMoDRXPvWeHUUeUktq7ACEOVLzXGq1+QRxcvtwvyQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/vanilla-framework": {
       "version": "4.16.0",
       "resolved": "https://registry.npmjs.org/vanilla-framework/-/vanilla-framework-4.16.0.tgz",
@@ -6436,7 +7344,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
       "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       }
@@ -6697,7 +7604,6 @@
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
       "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
-      "dev": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -6726,8 +7632,7 @@
     "node_modules/xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "dev": true
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
     "node_modules/yallist": {
       "version": "3.1.1",
diff --git a/ui/package.json b/ui/package.json
index 74c82912..0a06972a 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -11,6 +11,7 @@
     "test-live": "vitest"
   },
   "dependencies": {
+    "@canonical/react-components": "^1.2.3",
     "jwt-decode": "^4.0.0",
     "next": "14.2.13",
     "pkijs": "^3.2.4",
diff --git a/ui/src/app/aside.tsx b/ui/src/app/aside.tsx
index 59f95a62..1fa1f167 100644
--- a/ui/src/app/aside.tsx
+++ b/ui/src/app/aside.tsx
@@ -1,4 +1,4 @@
-import { SetStateAction, Dispatch, createContext, useContext, ComponentType } from "react"
+import { SetStateAction, Dispatch, createContext, useContext } from "react"
 import { useAuth } from "./auth/authContext"
 
 type AsideContextType = {
diff --git a/ui/src/app/certificate_requests/asideForm.tsx b/ui/src/app/certificate_requests/asideForm.tsx
index 85e17913..86fc08bd 100644
--- a/ui/src/app/certificate_requests/asideForm.tsx
+++ b/ui/src/app/certificate_requests/asideForm.tsx
@@ -1,96 +1,100 @@
 import { useMutation, useQueryClient } from "react-query";
-import { extractCSR } from "../utils";
+import { csrIsValid } from "../utils";
 import { useCookies } from "react-cookie";
 import { postCSR } from "../queries";
-import { ChangeEvent, useContext, useState } from "react";
+import { ChangeEvent, useContext, useState, useEffect } from "react";
 import { AsideContext } from "../aside";
+import { Textarea, Button, Input, Panel, Form } from "@canonical/react-components";
+
 
 export default function CertificateRequestsAsidePanel(): JSX.Element {
-    const asideContext = useContext(AsideContext)
-    const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
-    const [errorText, setErrorText] = useState<string>("")
-    const queryClient = useQueryClient()
+    const asideContext = useContext(AsideContext);
+    const [cookies] = useCookies(['user_token']);
+    const [errorText, setErrorText] = useState<string>("");
+    const [CSRPEMString, setCSRPEMString] = useState<string>("");
+    const queryClient = useQueryClient();
+
     const mutation = useMutation(postCSR, {
         onSuccess: () => {
-            setErrorText("")
-            asideContext.setIsOpen(false)
-            queryClient.invalidateQueries('csrs')
+            setErrorText("");
+            asideContext.setIsOpen(false);
+            queryClient.invalidateQueries('csrs');
         },
         onError: (e: Error) => {
-            setErrorText(e.message)
+            setErrorText(e.message);
         }
-    })
-    const [CSRPEMString, setCSRPEMString] = useState<string>("")
+    });
+
+    useEffect(() => {
+        if (CSRPEMString && !csrIsValid(CSRPEMString)) {
+            setErrorText("Invalid CSR format");
+        } else {
+            setErrorText("");
+        }
+    }, [CSRPEMString]);
+
     const handleTextChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-        setErrorText("")
         setCSRPEMString(event.target.value);
-    }
+    };
+
     const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
-        const file = event.target.files?.[0]
+        const file = event.target.files?.[0];
         if (file) {
             const reader = new FileReader();
             reader.onload = (e: ProgressEvent<FileReader>) => {
-                if (e.target) {
-                    if (e.target.result) {
-                        setCSRPEMString(e.target.result.toString());
-                    }
+                if (e.target?.result) {
+                    setCSRPEMString(e.target.result.toString());
                 }
             };
             reader.readAsText(file);
         }
     };
-    return (
-        <div className="p-panel" >
-            <div className="p-panel__header">
-                <h4 className="p-panel__title">Add a New Certificate Request</h4>
-                <div className="p-panel__controls">
-                    <button onClick={() => asideContext.setIsOpen(false)} className="p-button--base u-no-margin--bottom has-icon"><i className="p-icon--close"></i></button>
-                </div>
-            </div>
-            <div className="p-panel__content">
-                <form className="p-form p-form--stacked">
-                    <div className="p-form__group row">
-                        <label htmlFor="textarea">
-                            Enter or upload the CSR in PEM format below
-                        </label>
-                        <textarea id="csr-textarea" name="textarea" rows={10} placeholder="-----BEGIN CERTIFICATE REQUEST-----" onChange={handleTextChange} value={CSRPEMString} />
-                    </div>
-                    <div className="p-form__group row">
-                        <input type="file" name="upload" accept=".pem,.csr" onChange={handleFileChange}></input>
-                    </div>
-                    <div className="p-form__group row">
-                        <SubmitCSR csrText={CSRPEMString} errorText={errorText} onClickFunc={() => mutation.mutate({ authToken: cookies.user_token, csr: CSRPEMString })} />
-                    </div>
-                </form>
-            </div>
-        </div >
-    )
-}
 
-function SubmitCSR({ csrText, errorText, onClickFunc }: { csrText: string, errorText: string, onClickFunc: any }) {
-    let csrIsValid = false
-    try {
-        extractCSR(csrText.trim())
-        csrIsValid = true
-    }
-    catch { }
-    const validationComponent = csrText == "" ? <></> : csrIsValid ? <div><i className="p-icon--success"></i>Valid CSR</div> : <div><i className="p-icon--error"></i>Invalid CSR</div>
-    const buttonComponent = csrIsValid ? (
-        <button className="p-button--positive u-float-right" name="submit" onClick={(e) => { e.preventDefault(); onClickFunc() }} > Submit</button >
-    ) : (
-        <button className="p-button--positive u-float-right" name="submit" disabled={true} onClick={(e) => { e.preventDefault(); onClickFunc() }} >Submit</button>)
+    const handleSubmit = () => {
+        mutation.mutate({ authToken: cookies.user_token, csr: CSRPEMString });
+    };
+
     return (
-        <>
-            {errorText != "" &&
-                <div className="p-notification--negative">
-                    <div className="p-notification__content">
-                        <h5 className="p-notification__title">Error</h5>
-                        <p className="p-notification__message">{errorText.split("error: ")}</p>
-                    </div>
-                </div>
+        <Panel
+            title="Add a New Certificate Request"
+            controls={
+                <Button onClick={() => asideContext.setIsOpen(false)} hasIcon>
+                    <i className="p-icon--close" />
+                </Button>
             }
-            {validationComponent}
-            {buttonComponent}
-        </>
-    )
-}
\ No newline at end of file
+        >
+            <Form stacked={true}>
+                <div className="p-form__group row">
+                    <Textarea
+                        name="textarea"
+                        id="csr-textarea"
+                        label="Enter or upload the CSR in PEM format below"
+                        placeholder="-----BEGIN CERTIFICATE REQUEST-----"
+                        rows={10}
+                        onChange={handleTextChange}
+                        value={CSRPEMString}
+                        error={errorText}
+                    />
+                </div>
+                <div className="p-form__group row">
+                    <Input
+                        type="file"
+                        name="upload"
+                        accept=".pem,.csr"
+                        onChange={handleFileChange}
+                    />
+                </div>
+                <div className="p-form__group row">
+                    <Button
+                        appearance="positive"
+                        name="submit"
+                        disabled={!csrIsValid(CSRPEMString)}
+                        onClick={handleSubmit}
+                    >
+                        Submit
+                    </Button>
+                </div>
+            </Form>
+        </Panel>
+    );
+}
diff --git a/ui/src/app/certificate_requests/components.tsx b/ui/src/app/certificate_requests/components.tsx
index 3e94b685..af35ccf7 100644
--- a/ui/src/app/certificate_requests/components.tsx
+++ b/ui/src/app/certificate_requests/components.tsx
@@ -1,82 +1,9 @@
 import { Dispatch, SetStateAction, useState, ChangeEvent, useEffect } from "react"
 import { useMutation, useQueryClient } from "react-query"
-import { ConfirmationModalData } from "./row"
 import { csrMatchesCertificate, splitBundle, validateBundle } from "../utils"
 import { postCertToID } from "../queries"
 import { useCookies } from "react-cookie"
-
-interface ConfirmationModalProps {
-    modalData: ConfirmationModalData
-    setModalData: Dispatch<SetStateAction<ConfirmationModalData>>
-}
-
-
-export function ConfirmationModal({ modalData, setModalData }: ConfirmationModalProps) {
-    const confirmQuery = () => {
-        modalData?.onMouseDownFunc()
-        setModalData(null)
-    }
-    return (
-        <div className="p-modal" id="modal">
-            <section className="p-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description">
-                <header className="p-modal__header">
-                    <h2 className="p-modal__title" id="modal-title">Confirm Action</h2>
-                </header>
-                <p>{modalData?.warningText}</p>
-                <footer className="p-modal__footer">
-                    <button className="u-no-margin--bottom" aria-controls="modal" onMouseDown={() => setModalData(null)}>Cancel</button>
-                    <button className="p-button--negative u-no-margin--bottom" onMouseDown={confirmQuery}>Confirm</button>
-                </footer>
-            </section>
-        </div>
-    )
-}
-
-function SubmitCertificate({ existingCSRText, existingCertText, certText, onClickFunc }: { existingCSRText: string, existingCertText: string, certText: string, onClickFunc: any }) {
-    const [validationErrorText, setValidationErrorText] = useState<string>("")
-    useEffect(() => {
-        const validateCertificate = async () => {
-            try {
-                const certs = splitBundle(certText)
-                if (certs.length < 2) {
-                    setValidationErrorText("bundle with 2 certificates required")
-                    return
-                }
-                if (!csrMatchesCertificate(existingCSRText, certs[0])) {
-                    setValidationErrorText("Certificate does not match request")
-                    return
-                }
-                let validationMessage = await validateBundle(certText)
-                if (validationMessage != "") {
-                    setValidationErrorText("Bundle validation failed: " + validationMessage)
-                    return
-                }
-            }
-            catch {
-                setValidationErrorText("A certificate is invalid")
-                return
-            }
-            setValidationErrorText("")
-        }
-        validateCertificate()
-    }, [existingCSRText, existingCertText, certText])
-
-    const validationComponent = certText != "" && validationErrorText == "" ? (
-        <div><i className="p-icon--success"></i> Valid Certificate</div>
-    ) : (
-        <div><i className="p-icon--error"></i> {validationErrorText}</div>)
-    const buttonComponent = validationErrorText == "" ? (
-        <button className="p-button--positive" name="submit" onClick={onClickFunc} >Submit</button>
-    ) : (
-        <button className="p-button--positive" name="submit" disabled={true} onClick={onClickFunc} >Submit</button>
-    )
-    return (
-        <>
-            {validationComponent}
-            {buttonComponent}
-        </>
-    )
-}
+import { Button, Input, Textarea, Form, Modal, Icon } from "@canonical/react-components";
 
 interface SubmitCertificateModalProps {
     id: string
@@ -84,72 +11,110 @@ interface SubmitCertificateModalProps {
     cert: string
     setFormOpen: Dispatch<SetStateAction<boolean>>
 }
+
 export function SubmitCertificateModal({ id, csr, cert, setFormOpen }: SubmitCertificateModalProps) {
-    const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
-    const [errorText, setErrorText] = useState<string>("")
-    const queryClient = useQueryClient()
+    const [cookies] = useCookies(['user_token']);
+    const [errorText, setErrorText] = useState<string>("");
+    const [certificatePEMString, setCertificatePEMString] = useState<string>(cert);
+    const [validationErrorText, setValidationErrorText] = useState<string>("");
+    const queryClient = useQueryClient();
+
     const mutation = useMutation(postCertToID, {
         onSuccess: () => {
-            queryClient.invalidateQueries('csrs')
-            setErrorText("")
-            setFormOpen(false)
+            queryClient.invalidateQueries('csrs');
+            setErrorText("");
+            setFormOpen(false);
         },
         onError: (e: Error) => {
-            setErrorText(e.message)
+            setErrorText(e.message);
         }
-    })
-    const [certificatePEMString, setCertificatePEMString] = useState<string>("")
+    });
+
     const handleTextChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
         setCertificatePEMString(event.target.value);
-    }
+    };
+
     const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
-        const file = event.target.files?.[0]
+        const file = event.target.files?.[0];
         if (file) {
             const reader = new FileReader();
             reader.onload = (e: ProgressEvent<FileReader>) => {
-                if (e.target) {
-                    if (e.target.result) {
-                        setCertificatePEMString(e.target.result.toString());
-                    }
+                if (e.target?.result) {
+                    setCertificatePEMString(e.target.result.toString());
                 }
             };
             reader.readAsText(file);
         }
     };
+
+    useEffect(() => {
+        const validateCertificate = async () => {
+            try {
+                const certs = splitBundle(certificatePEMString);
+                if (certs.length < 2) {
+                    setValidationErrorText("Bundle with 2 certificates required");
+                    return;
+                }
+                if (!csrMatchesCertificate(csr, certs[0])) {
+                    setValidationErrorText("Certificate does not match request");
+                    return;
+                }
+                const validationMessage = await validateBundle(certificatePEMString);
+                if (validationMessage !== "") {
+                    setValidationErrorText("Bundle validation failed: " + validationMessage);
+                    return;
+                }
+            } catch {
+                setValidationErrorText("A certificate is invalid");
+                return;
+            }
+            setValidationErrorText("");
+        };
+        validateCertificate();
+    }, [csr, certificatePEMString]);
+
     return (
-        <div className="p-modal" id="modal">
-            <section className="p-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description">
-                <header className="p-modal__header">
-                    <h2 className="p-modal__title" id="modal-title">Submit Certificate</h2>
-                </header>
-                <form className="p-form p-form--stacked">
-                    <div className="p-form__group row">
-                        <label htmlFor="textarea">
-                            Enter or upload the Certificate in PEM format below
-                        </label>
-                        <textarea id="csr-textarea" name="textarea" rows={10} placeholder="-----BEGIN CERTIFICATE-----" onChange={handleTextChange} value={certificatePEMString} />
-                    </div>
-                    <div className="p-form__group row">
-                        <input type="file" name="upload" accept=".pem,.crt" onChange={handleFileChange}></input>
-                    </div>
-                    <div className="p-form__group row">
-                    </div>
-                </form>
-                <footer className="p-modal__footer">
-                    {errorText != "" &&
-                        <div className="p-notification--negative">
-                            <div className="p-notification__content">
-                                <h5 className="p-notification__title">Error</h5>
-                                <p className="p-notification__message">{errorText.split("error: ")}</p>
-                            </div>
-                        </div>
-                    }
-                    <SubmitCertificate existingCSRText={csr.trim()} existingCertText={cert.trim()} certText={certificatePEMString.trim()} onClickFunc={() => mutation.mutate({ id: id, authToken: cookies.user_token, cert: certificatePEMString })} />
-                    <button className="u-no-margin--bottom" aria-controls="modal" onMouseDown={() => setFormOpen(false)}>Cancel</button>
-                </footer>
-            </section>
-        </div>
-    )
+        <Modal
+            title="Submit Certificate"
+            buttonRow={
+                <>
+                    <Button
+                        onClick={() => mutation.mutate({ id, authToken: cookies.user_token, cert: certificatePEMString })}
+                        appearance="positive"
+                        disabled={validationErrorText !== "" || certificatePEMString === ""}
+                    >
+                        Submit
+                    </Button>
+                    <Button onMouseDown={() => setFormOpen(false)}>
+                        Cancel
+                    </Button>
+                </>
+            }
+        >
+            <Form stacked={true}>
+                <div className="p-form__group row">
+                    <Textarea
+                        name="textarea"
+                        id="csr-textarea"
+                        label="Enter or upload the Certificate in PEM format below"
+                        placeholder="-----BEGIN CERTIFICATE-----"
+                        rows={10}
+                        onChange={handleTextChange}
+                        value={certificatePEMString}
+                        error={validationErrorText || errorText}
+                    />
+                </div>
+                <div className="p-form__group row">
+                    <Input
+                        type="file"
+                        name="upload"
+                        accept=".pem,.crt"
+                        onChange={handleFileChange}
+                    />
+                </div>
+            </Form>
+        </Modal>
+    );
 }
 
 export function SuccessNotification({ successMessage }: { successMessage: string }) {
@@ -158,7 +123,8 @@ export function SuccessNotification({ successMessage }: { successMessage: string
     }
     return (
         <p style={style}>
-            <i className="p-icon--success"></i> {successMessage}
+            <Icon name="success" />
+            {successMessage}
         </p>
     );
 }
\ No newline at end of file
diff --git a/ui/src/app/certificate_requests/page.tsx b/ui/src/app/certificate_requests/page.tsx
index 2f7d650c..df46bd6d 100644
--- a/ui/src/app/certificate_requests/page.tsx
+++ b/ui/src/app/certificate_requests/page.tsx
@@ -6,35 +6,9 @@ import { getCertificateRequests } from "../queries"
 import { CSREntry } from "../types"
 import { useCookies } from "react-cookie"
 import { useRouter } from "next/navigation"
+import Loading from "../loading"
+import Error from "../error"
 
-function Error({ msg }: { msg: string }) {
-    return (
-        <caption>
-            <div className="p-strip">
-                <div className="row">
-                    <div className="u-align--left">
-                        <p className="p-heading--5">An error occured trying to load certificate requests</p>
-                        <p>{msg}</p>
-                    </div>
-                </div>
-            </div>
-        </caption>
-    )
-}
-
-function Loading() {
-    return (
-        <caption>
-            <div className="p-strip">
-                <div className="row">
-                    <div className="col-8 col-medium-4 col-small-3">
-                        <p className="p-heading--4 u-no-margin--bottom">Loading...</p>
-                    </div>
-                </div>
-            </div>
-        </caption>
-    )
-}
 
 export default function CertificateRequests() {
     const router = useRouter()
diff --git a/ui/src/app/certificate_requests/row.test.tsx b/ui/src/app/certificate_requests/row.test.tsx
deleted file mode 100644
index 6ffdbeea..00000000
--- a/ui/src/app/certificate_requests/row.test.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { expect, test } from 'vitest'
-import { Dispatch, SetStateAction } from "react"
-import { render, screen, fireEvent } from '@testing-library/react'
-import { QueryClient, QueryClientProvider } from 'react-query'
-import Row from './row'
-
-const csr =
-{
-    'ID': 1,
-    'CSR': `-----BEGIN CERTIFICATE REQUEST-----
-MIIC5zCCAc8CAQAwRzEWMBQGA1UEAwwNMTAuMTUyLjE4My41MzEtMCsGA1UELQwk
-MzlhY2UxOTUtZGM1YS00MzJiLTgwOTAtYWZlNmFiNGI0OWNmMIIBIjANBgkqhkiG
-9w0BAQEFAAOCAQ8AMIIBCgKCAQEAjM5Wz+HRtDveRzeDkEDM4ornIaefe8d8nmFi
-pUat9qCU3U9798FR460DHjCLGxFxxmoRitzHtaR4ew5H036HlGB20yas/CMDgSUI
-69DyAsyPwEJqOWBGO1LL50qXdl5/jOkO2voA9j5UsD1CtWSklyhbNhWMpYqj2ObW
-XcaYj9Gx/TwYhw8xsJ/QRWyCrvjjVzH8+4frfDhBVOyywN7sq+I3WwCbyBBcN8uO
-yae0b/q5+UJUiqgpeOAh/4Y7qI3YarMj4cm7dwmiCVjedUwh65zVyHtQUfLd8nFW
-Kl9775mNBc1yicvKDU3ZB5hZ1MZtpbMBwaA1yMSErs/fh5KaXwIDAQABoFswWQYJ
-KoZIhvcNAQkOMUwwSjBIBgNVHREEQTA/hwQKmLc1gjd2YXVsdC1rOHMtMC52YXVs
-dC1rOHMtZW5kcG9pbnRzLnZhdWx0LnN2Yy5jbHVzdGVyLmxvY2FsMA0GCSqGSIb3
-DQEBCwUAA4IBAQCJt8oVDbiuCsik4N5AOJIT7jKsMb+j0mizwjahKMoCHdx+zv0V
-FGkhlf0VWPAdEu3gHdJfduX88WwzJ2wBBUK38UuprAyvfaZfaYUgFJQNC6DH1fIa
-uHYEhvNJBdFJHaBvW7lrSFi57fTA9IEPrB3m/XN3r2F4eoHnaJJqHZmMwqVHck87
-cAQXk3fvTWuikHiCHqqdSdjDYj/8cyiwCrQWpV245VSbOE0WesWoEnSdFXVUfE1+
-RSKeTRuuJMcdGqBkDnDI22myj0bjt7q8eqBIjTiLQLnAFnQYpcCrhc8dKU9IJlv1
-H9Hay4ZO9LRew3pEtlx2WrExw/gpUcWM8rTI
------END CERTIFICATE REQUEST-----`,
-    'Certificate': `-----BEGIN CERTIFICATE-----
-MIIDrDCCApSgAwIBAgIURKr+jf7hj60SyAryIeN++9wDdtkwDQYJKoZIhvcNAQEL
-BQAwOTELMAkGA1UEBhMCVVMxKjAoBgNVBAMMIXNlbGYtc2lnbmVkLWNlcnRpZmlj
-YXRlcy1vcGVyYXRvcjAeFw0yNDAzMjcxMjQ4MDRaFw0yNTAzMjcxMjQ4MDRaMEcx
-FjAUBgNVBAMMDTEwLjE1Mi4xODMuNTMxLTArBgNVBC0MJDM5YWNlMTk1LWRjNWEt
-NDMyYi04MDkwLWFmZTZhYjRiNDljZjCCASIwDQYJKoZIhvcNAQEBBQADggEPADCC
-AQoCggEBAIzOVs/h0bQ73kc3g5BAzOKK5yGnn3vHfJ5hYqVGrfaglN1Pe/fBUeOt
-Ax4wixsRccZqEYrcx7WkeHsOR9N+h5RgdtMmrPwjA4ElCOvQ8gLMj8BCajlgRjtS
-y+dKl3Zef4zpDtr6APY+VLA9QrVkpJcoWzYVjKWKo9jm1l3GmI/Rsf08GIcPMbCf
-0EVsgq7441cx/PuH63w4QVTsssDe7KviN1sAm8gQXDfLjsmntG/6uflCVIqoKXjg
-If+GO6iN2GqzI+HJu3cJoglY3nVMIeuc1ch7UFHy3fJxVipfe++ZjQXNconLyg1N
-2QeYWdTGbaWzAcGgNcjEhK7P34eSml8CAwEAAaOBnTCBmjAhBgNVHSMEGjAYgBYE
-FN/vgl9cAapV7hH9lEyM7qYS958aMB0GA1UdDgQWBBRJJDZkHr64VqTC24DPQVld
-Ba3iPDAMBgNVHRMBAf8EAjAAMEgGA1UdEQRBMD+CN3ZhdWx0LWs4cy0wLnZhdWx0
-LWs4cy1lbmRwb2ludHMudmF1bHQuc3ZjLmNsdXN0ZXIubG9jYWyHBAqYtzUwDQYJ
-KoZIhvcNAQELBQADggEBAEH9NTwDiSsoQt/QXkWPMBrB830K0dlwKl5WBNgVxFP+
-hSfQ86xN77jNSp2VxOksgzF9J9u/ubAXvSFsou4xdP8MevBXoFJXeqMERq5RW3gc
-WyhXkzguv3dwH+n43GJFP6MQ+n9W/nPZCUQ0Iy7ueAvj0HFhGyZzAE2wxNFZdvCs
-gCX3nqYpp70oZIFDrhmYwE5ij5KXlHD4/1IOfNUKCDmQDgGPLI1tVtwQLjeRq7Hg
-XVelpl/LXTQawmJyvDaVT/Q9P+WqoDiMjrqF6Sy7DzNeeccWVqvqX5TVS6Ky56iS
-Mvo/+PAJHkBciR5Xn+Wg2a+7vrZvT6CBoRSOTozlLSM=
------END CERTIFICATE-----`
-}
-
-let actionMenuExpanded = 0
-const setActionMenuExpanded = (val: number) => {
-    actionMenuExpanded = val
-}
-
-const queryClient = new QueryClient()
-test('Certificate Requests Table Row', () => {
-    render(
-        <QueryClientProvider client={queryClient}>
-            <Row id={csr.ID} csr={csr.CSR} certificate={csr.Certificate} ActionMenuExpanded={actionMenuExpanded} setActionMenuExpanded={setActionMenuExpanded as Dispatch<SetStateAction<number>>} />
-        </QueryClientProvider>
-    )
-    const commonNames = screen.getAllByText('10.152.183.53');
-    expect(commonNames.length).toBeGreaterThan(0);
-    expect(screen.getByLabelText('certificate-expiry-date').innerHTML.trim()).toMatch(/^Thu Mar 27/)
-    const openActionsButton = screen.getByLabelText("action-menu-button")
-    fireEvent.click(openActionsButton);
-    expect(actionMenuExpanded).toBe(1)
-    render(
-        <QueryClientProvider client={queryClient}>
-            <Row id={csr.ID} csr={csr.CSR} certificate="rejected" ActionMenuExpanded={actionMenuExpanded} setActionMenuExpanded={setActionMenuExpanded as Dispatch<SetStateAction<number>>} />
-
-        </QueryClientProvider>
-    )
-    expect(screen.getByText('rejected')).toBeDefined()
-    render(
-        <QueryClientProvider client={queryClient}>
-            <Row id={csr.ID} csr={csr.CSR} certificate="" ActionMenuExpanded={actionMenuExpanded} setActionMenuExpanded={setActionMenuExpanded as Dispatch<SetStateAction<number>>} />
-        </QueryClientProvider>
-    )
-    expect(screen.getByText('outstanding')).toBeDefined()
-})
\ No newline at end of file
diff --git a/ui/src/app/certificate_requests/row.tsx b/ui/src/app/certificate_requests/row.tsx
deleted file mode 100644
index 780159e6..00000000
--- a/ui/src/app/certificate_requests/row.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import { useState, Dispatch, SetStateAction, useEffect, useRef } from "react"
-import { UseMutationResult, useMutation, useQueryClient } from "react-query"
-import { extractCSR, extractCert, splitBundle } from "../utils"
-import { RequiredCSRParams, deleteCSR, rejectCSR, revokeCertificate } from "../queries"
-import { ConfirmationModal, SubmitCertificateModal, SuccessNotification } from "./components"
-import "./../globals.scss"
-import { useCookies } from "react-cookie"
-
-type rowProps = {
-    id: number,
-    csr: string,
-    certificate: string
-
-    ActionMenuExpanded: number
-    setActionMenuExpanded: Dispatch<SetStateAction<number>>
-}
-
-export type ConfirmationModalData = {
-    onMouseDownFunc: () => void
-    warningText: string
-} | null
-
-export default function Row({ id, csr, certificate, ActionMenuExpanded, setActionMenuExpanded }: rowProps) {
-    const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
-    const red = "rgba(199, 22, 43, 1)"
-    const green = "rgba(14, 132, 32, 0.35)"
-    const yellow = "rgba(249, 155, 17, 0.45)"
-    const [successNotification, setSuccessNotification] = useState<string | null>(null)
-    const [detailsMenuOpen, setDetailsMenuOpen] = useState<boolean>(false)
-    const [certificateFormOpen, setCertificateFormOpen] = useState<boolean>(false)
-    const [confirmationModalData, setConfirmationModalData] = useState<ConfirmationModalData>(null)
-
-    const csrObj = extractCSR(csr)
-    const certs = splitBundle(certificate)
-    const clientCertificate = certs.at(0)
-    const certObj = clientCertificate ? extractCert(clientCertificate) : null
-
-    const queryClient = useQueryClient()
-    const deleteMutation = useMutation(deleteCSR, {
-        onSuccess: () => queryClient.invalidateQueries('csrs')
-    })
-    const rejectMutation = useMutation(rejectCSR, {
-        onSuccess: () => queryClient.invalidateQueries('csrs')
-    })
-    const revokeMutation = useMutation(revokeCertificate, {
-        onSuccess: () => queryClient.invalidateQueries('csrs')
-    })
-    const mutationFunc = (mutation: UseMutationResult<any, unknown, RequiredCSRParams, unknown>, params: RequiredCSRParams) => {
-        mutation.mutate(params)
-    }
-
-    const handleCopy = () => {
-        navigator.clipboard.writeText(csr).then(function () {
-            setSuccessNotification("CSR copied to clipboard")
-            setTimeout(() => {
-                setSuccessNotification(null);
-            }, 2500);
-        }, function (err) {
-            console.error('could not copy text: ', err);
-        });
-    }
-    const handleDownload = () => {
-        const blob = new Blob([csr], { type: 'text/plain' });
-        const link = document.createElement('a');
-        link.href = URL.createObjectURL(blob);
-        link.download = "csr-" + (csrObj.commonName !== undefined ? csrObj.commonName : id.toString()) + ".pem";
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        URL.revokeObjectURL(link.href);
-    };
-    const handleReject = () => {
-        setConfirmationModalData({
-            onMouseDownFunc: () => mutationFunc(rejectMutation, { id: id.toString(), authToken: cookies.user_token }),
-            warningText: "Rejecting a Certificate Request means the CSR will remain in this application, but its status will be moved to rejected and the associated certificate will be deleted if there is any. This action cannot be undone."
-        })
-    }
-    const handleDelete = () => {
-        setConfirmationModalData({
-            onMouseDownFunc: () => mutationFunc(deleteMutation, { id: id.toString(), authToken: cookies.user_token }),
-            warningText: "Deleting a Certificate Request means this row will be completely removed from the application. This action cannot be undone."
-        })
-    }
-    const handleRevoke = () => {
-        setConfirmationModalData({
-            onMouseDownFunc: () => mutationFunc(revokeMutation, { id: id.toString(), authToken: cookies.user_token }),
-            warningText: "Revoking a Certificate will delete it from the table. This action cannot be undone."
-        })
-    }
-
-    const getFieldDisplay = (label: string, field: string | undefined, compareField?: string | undefined) => {
-        const isMismatched = compareField !== undefined && compareField !== field;
-        return field ? (
-            <p>
-                <b>{label}:</b>{" "}
-                <span style={{ color: isMismatched ? red : 'inherit' }}>
-                    {field}
-                </span>
-            </p>
-        ) : null;
-    };
-
-    const getExpiryColor = (notAfter?: string): string => {
-        if (!notAfter) return 'inherit';
-
-        const expiryDate = new Date(notAfter);
-        const now = new Date();
-        const oneDayInMillis = 24 * 60 * 60 * 1000;
-        const timeDifference = expiryDate.getTime() - now.getTime();
-
-        if (timeDifference < 0) {
-            return red;
-        } else if (timeDifference < oneDayInMillis) {
-            return yellow;
-        } else {
-            return green;
-        }
-    };
-
-    return (
-        <>
-            <tr>
-                <td className="" width={5} aria-label="id">{id}</td>
-                <td className="">
-                    <button
-                        className="u-toggle p-contextual-menu__toggle p-button--base is-small"
-                        aria-controls="expanded-row"
-                        aria-expanded={detailsMenuOpen ? "true" : "false"}
-                        onClick={() => setDetailsMenuOpen(!detailsMenuOpen)}>
-                        <i className="p-icon--chevron-down p-contextual-menu__indicator"></i>
-                    </button>
-                    <span>{csrObj.commonName}</span>
-                </td>
-                <td className="" aria-label="csr-status">{certificate == "" ? "outstanding" : (certificate == "rejected" ? "rejected" : "fulfilled")}</td>
-                <td className="" aria-label="certificate-expiry-date" style={{ backgroundColor: getExpiryColor(certObj?.notAfter) }}> {certificate === "" ? "" : (certificate === "rejected" ? "" : certObj?.notAfter)}</td>
-                <td className="has-overflow" data-heading="Actions">
-                    <span className="p-contextual-menu--center u-no-margin--bottom">
-                        <button
-                            className="p-contextual-menu__toggle p-button--base is-small u-no-margin--bottom"
-                            aria-label="action-menu-button"
-                            aria-controls="action-menu"
-                            aria-expanded={ActionMenuExpanded == id ? "true" : "false"}
-                            aria-haspopup="true"
-                            onClick={() => setActionMenuExpanded(id)}
-                            onBlur={() => setActionMenuExpanded(0)}>
-                            <i className="p-icon--menu p-contextual-menu__indicator"></i>
-                        </button>
-                        {successNotification && <SuccessNotification successMessage={successNotification} />}
-                        <span className="p-contextual-menu__dropdown" id="action-menu" aria-hidden={ActionMenuExpanded == id ? "false" : "true"}>
-                            <span className="p-contextual-menu__group">
-                                <button className="p-contextual-menu__link" onMouseDown={handleCopy}>Copy Certificate Request to Clipboard</button>
-                                <button className="p-contextual-menu__link" onMouseDown={handleDownload}>Download Certificate Request</button>
-                                {certificate == "rejected" ?
-                                    <button className="p-contextual-menu__link" disabled={true} onMouseDown={handleReject}>Reject Certificate Request</button> :
-                                    <button className="p-contextual-menu__link" onMouseDown={handleReject}>Reject Certificate Request</button>}
-                                <button className="p-contextual-menu__link" onMouseDown={handleDelete}>Delete Certificate Request</button>
-                            </span>
-                            <span className="p-contextual-menu__group">
-                                <button className="p-contextual-menu__link" onMouseDown={() => setCertificateFormOpen(true)}>Upload Certificate</button>
-                                {certificate == "rejected" || certificate == "" ?
-                                    <button className="p-contextual-menu__link" disabled={true} onMouseDown={handleRevoke}>Revoke Certificate</button> :
-                                    <button className="p-contextual-menu__link" onMouseDown={handleRevoke}>Revoke Certificate</button>
-                                }
-                            </span>
-                        </span>
-                    </span>
-                </td>
-                <td id="expanded-row" className="p-table__expanding-panel" aria-hidden={detailsMenuOpen ? "false" : "true"}>
-                    <div className="row" style={{ display: 'flex', flexWrap: 'wrap', position: 'relative' }}>
-                        <div className="col-12 col-md-6">
-                            <div className="certificate-info">
-                                <h4>Request Details</h4>
-                                {getFieldDisplay("Common Name", csrObj.commonName)}
-                                {getFieldDisplay("Subject Alternative Name DNS", csrObj.sansDns && csrObj.sansDns.length > 0 ? csrObj.sansDns.join(', ') : "")}
-                                {getFieldDisplay("Subject Alternative Name IP addresses", csrObj.sansIp && csrObj.sansIp.length > 0 ? csrObj.sansIp.join(', ') : "")}
-                                {getFieldDisplay("Country", csrObj.country)}
-                                {getFieldDisplay("State or Province", csrObj.stateOrProvince)}
-                                {getFieldDisplay("Locality", csrObj.locality)}
-                                {getFieldDisplay("Organization", csrObj.organization)}
-                                {getFieldDisplay("Organizational Unit", csrObj.OrganizationalUnitName)}
-                                {getFieldDisplay("Email Address", csrObj.emailAddress)}
-                                <p><b>Certificate request for a certificate authority</b>: {csrObj.is_ca ? "Yes" : "No"}</p>
-                            </div>
-                        </div>
-                        {certObj && (certObj.notBefore || certObj.notAfter || certObj.issuerCommonName) && (
-                            <div className="col-12 col-md-6">
-                                <div className="certificate-info">
-                                    <h4>Certificate Details</h4>
-                                    {getFieldDisplay("Common Name", certObj.commonName, csrObj.commonName)}
-                                    {getFieldDisplay("Subject Alternative Name DNS", certObj.sansDns && certObj.sansDns.join(', '), csrObj.sansDns && csrObj.sansDns.join(', '))}
-                                    {getFieldDisplay("Subject Alternative Name IP addresses", certObj.sansIp && certObj.sansIp.join(', '), csrObj.sansIp && csrObj.sansIp.join(', '))}
-                                    {getFieldDisplay("Country", certObj.country, csrObj.country)}
-                                    {getFieldDisplay("State or Province", certObj.stateOrProvince, csrObj.stateOrProvince)}
-                                    {getFieldDisplay("Locality", certObj.locality, csrObj.locality)}
-                                    {getFieldDisplay("Organization", certObj.organization, csrObj.organization)}
-                                    {getFieldDisplay("Organizational Unit", certObj.OrganizationalUnitName, csrObj.OrganizationalUnitName)}
-                                    {getFieldDisplay("Email Address", certObj.emailAddress, csrObj.emailAddress)}
-                                    {getFieldDisplay("Start of validity", certObj.notBefore)}
-                                    {getFieldDisplay("Expiry Time", certObj.notAfter)}
-                                    {getFieldDisplay("Issuer Common Name", certObj.issuerCommonName)}
-                                </div>
-                            </div>
-                        )}
-                    </div>
-                </td>
-            </tr>
-            {confirmationModalData != null && <ConfirmationModal modalData={confirmationModalData} setModalData={setConfirmationModalData} />}
-            {certificateFormOpen && <SubmitCertificateModal id={id.toString()} csr={csr} cert={certificate} setFormOpen={setCertificateFormOpen} />}
-        </>
-    )
-}
\ No newline at end of file
diff --git a/ui/src/app/certificate_requests/table.tsx b/ui/src/app/certificate_requests/table.tsx
index 33a1d944..cba636cb 100644
--- a/ui/src/app/certificate_requests/table.tsx
+++ b/ui/src/app/certificate_requests/table.tsx
@@ -1,99 +1,327 @@
-import { useContext, useState, Dispatch, SetStateAction } from "react"
-import { AsideContext } from "../aside"
-import Row from "./row"
-import { CSREntry } from "../types"
+import { useContext, useState, Dispatch, SetStateAction } from "react";
+import { AsideContext } from "../aside";
+import { CSREntry } from "../types";
+import { Button, MainTable, Panel, EmptyState, ContextualMenu, ConfirmationModal } from "@canonical/react-components";
+import { RequiredCSRParams, deleteCSR, rejectCSR, revokeCertificate } from "../queries"
+import { useCookies } from "react-cookie";
+import { extractCSR, extractCert, splitBundle } from "../utils";
+import { UseMutationResult, useMutation, useQueryClient } from "react-query"
+import { SubmitCertificateModal, SuccessNotification } from "./components"
 
-function EmptyState({ asideOpen, setAsideOpen }: { asideOpen: boolean, setAsideOpen: Dispatch<SetStateAction<boolean>> }) {
+
+function CSREmptyState({ setAsideOpen }: { setAsideOpen: Dispatch<SetStateAction<boolean>> }) {
     return (
-        <caption>
-            <div className="p-strip">
-                <div className="row">
-                    <div className="col-8 col-medium-4 col-small-3">
-                        <p className="p-heading--4">No CSRs available yet.</p>
-                        <button className="u-no-margin--bottom p-button--positive" aria-label="add-csr-button" onClick={() => setAsideOpen(true)}>Add New CSR</button>
-                    </div>
-                </div>
-            </div>
-        </caption>
-    )
+        <EmptyState
+            image={""}
+            title="No CSRs available yet."
+        >
+            <p>
+                There are no Certificate Requests in Notary. Request your first certificate!
+            </p>
+            <Button
+                appearance="positive"
+                aria-label="add-csr-button"
+                onClick={() => setAsideOpen(true)}>
+                Add New CSR
+            </Button>
+        </EmptyState>
+    );
 }
 
 type TableProps = {
-    csrs: CSREntry[]
-}
+    csrs: CSREntry[];
+};
 
-function sortByCSRStatus(a: CSREntry, b: CSREntry) {
-    const aCSRStatus = a.certificate == "" ? "outstanding" : (a.certificate == "rejected" ? "rejected" : "fulfilled")
-    const bCSRStatus = b.certificate == "" ? "outstanding" : (b.certificate == "rejected" ? "rejected" : "fulfilled")
-    if (aCSRStatus < bCSRStatus) {
-        return -1;
-    } else if (aCSRStatus > bCSRStatus) {
-        return 1;
-    } else {
-        return 0;
-    }
-}
+export type ConfirmationModalData = {
+    onMouseDownFunc: () => void
+    warningText: string
+} | null
 
-function sortByCertStatus(a: CSREntry, b: CSREntry) {
-    const aCertStatus = (a.certificate == "" ? "" : (a.certificate == "rejected" ? "" : "date"))
-    const bCertStatus = (b.certificate == "" ? "" : (b.certificate == "rejected" ? "" : "date"))
-    if (aCertStatus < bCertStatus) {
-        return -1;
-    } else if (aCertStatus > bCertStatus) {
-        return 1;
-    } else {
-        return 0;
-    }
-}
 
 export function CertificateRequestsTable({ csrs: rows }: TableProps) {
-    const { isOpen: isAsideOpen, setIsOpen: setAsideIsOpen } = useContext(AsideContext)
-
-    const [actionsMenuExpanded, setActionsMenuExpanded] = useState<number>(0)
-    const [sortedColumn, setSortedColumn] = useState<string>('none')
-    const [sortDescending, setSortDescending] = useState<boolean>(true)
-    const sortedRows = () => {
-        switch (sortedColumn) {
-            case "csr":
-                return (sortDescending ? rows.sort(sortByCSRStatus).reverse() : rows.sort(sortByCSRStatus))
-            case "cert":
-                return (sortDescending ? rows.sort(sortByCertStatus).reverse() : rows.sort(sortByCertStatus))
-            default:
-                return rows
+    const { isOpen: isAsideOpen, setIsOpen: setAsideIsOpen } = useContext(AsideContext);
+    const [cookies] = useCookies(['user_token']);
+    const queryClient = useQueryClient();
+    const [certificateFormOpen, setCertificateFormOpen] = useState<boolean>(false);
+    const [confirmationModalData, setConfirmationModalData] = useState<ConfirmationModalData | null>(null);
+    const [selectedCSR, setSelectedCSR] = useState<CSREntry | null>(null);
+    const [showCSRContent, setShowCSRContent] = useState<number | null>(null);
+    const [showCertContent, setShowCertContent] = useState<number | null>(null);
+    const [successNotificationId, setSuccessNotificationId] = useState<number | null>(null);
+
+    const deleteMutation = useMutation(deleteCSR, {
+        onSuccess: () => queryClient.invalidateQueries('csrs'),
+    });
+
+    const rejectMutation = useMutation(rejectCSR, {
+        onSuccess: () => queryClient.invalidateQueries('csrs'),
+    });
+
+    const revokeMutation = useMutation(revokeCertificate, {
+        onSuccess: () => queryClient.invalidateQueries('csrs'),
+    });
+
+    const mutationFunc = (mutation: UseMutationResult<any, unknown, RequiredCSRParams, unknown>, params: RequiredCSRParams) => {
+        mutation.mutate(params);
+        setConfirmationModalData(null);
+    };
+
+    const handleCopy = (csr: string, id: number) => {
+        navigator.clipboard.writeText(csr).then(() => {
+            setSuccessNotificationId(id);
+            setTimeout(() => setSuccessNotificationId(null), 2500);
+        });
+    };
+
+    const handleDownload = (csr: string, id: number, csrObj: any) => {
+        const blob = new Blob([csr], { type: 'text/plain' });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = `csr-${csrObj.commonName || id}.pem`;
+        link.click();
+        URL.revokeObjectURL(link.href);
+    };
+
+    const handleReject = (id: number) => {
+        setConfirmationModalData({
+            onMouseDownFunc: () => mutationFunc(rejectMutation, { id: id.toString(), authToken: cookies.user_token }),
+            warningText: "Rejecting a Certificate Request means the CSR will remain in this application, but its status will be moved to rejected and the associated certificate will be deleted if there is any. This action cannot be undone.",
+        });
+    };
+
+    const handleDelete = (id: number) => {
+        setConfirmationModalData({
+            onMouseDownFunc: () => mutationFunc(deleteMutation, { id: id.toString(), authToken: cookies.user_token }),
+            warningText: "Deleting a Certificate Request means this row will be completely removed from the application. This action cannot be undone.",
+        });
+    };
+
+    const handleRevoke = (id: number) => {
+        setConfirmationModalData({
+            onMouseDownFunc: () => mutationFunc(revokeMutation, { id: id.toString(), authToken: cookies.user_token }),
+            warningText: "Revoking a Certificate will delete it from the table. This action cannot be undone.",
+        });
+    };
+
+    const handleExpand = (id: number, type: 'CSR' | 'Cert') => {
+        if (type === 'CSR') {
+            setShowCSRContent(id === showCSRContent ? null : id);
+            setShowCertContent(null);
+        } else {
+            setShowCertContent(id === showCertContent ? null : id);
+            setShowCSRContent(null);
         }
-    }
-    return (
-        <div className="p-panel">
-            <div className="p-panel__header is-sticky">
-                <h4 className="p-panel__title">Certificate Requests</h4>
-                <div className="p-panel__controls">
-                    {rows.length > 0 && <button className="u-no-margin--bottom p-button--positive" aria-label="add-csr-button" onClick={() => setAsideIsOpen(true)}>Add New CSR</button>}
-                </div>
-            </div>
-            <div className="p-panel__content">
-                <div className="u-fixed-width">
-                    <table id="csr-table" aria-label="Certificate Requests Table" className="p-table--expanding">
-                        <thead>
-                            <tr>
-                                <th>ID</th>
-                                <th>Details</th>
-                                <th aria-sort={sortedColumn == "csr" ? (sortDescending ? "descending" : "ascending") : "none"} onClick={() => { setSortedColumn('csr'); setSortDescending(!sortDescending) }}>CSR Status</th>
-                                <th aria-sort={sortedColumn == "cert" ? (sortDescending ? "descending" : "ascending") : "none"} onClick={() => { setSortedColumn('cert'); setSortDescending(!sortDescending) }}>Certificate Expiry Date</th>
-                                <th className="has-overflow">Actions</th>
-                                <th aria-hidden="true"></th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {
-                                sortedRows().map((row) => (
-                                    <Row key={row.id} id={row.id} csr={row.csr} certificate={row.certificate} ActionMenuExpanded={actionsMenuExpanded} setActionMenuExpanded={setActionsMenuExpanded} />
-                                )
-                                )}
-                        </tbody>
-                        {rows.length == 0 && <EmptyState asideOpen={isAsideOpen} setAsideOpen={setAsideIsOpen} />}
-                    </table>
+    };
+
+    const getExpiryColor = (notAfter?: string): string => {
+        if (!notAfter) return 'inherit';
+        const expiryDate = new Date(notAfter);
+        const now = new Date();
+        const timeDifference = expiryDate.getTime() - now.getTime();
+        if (timeDifference < 0) return "rgba(199, 22, 43, 1)";
+        if (timeDifference < 24 * 60 * 60 * 1000) return "rgba(249, 155, 17, 0.45)";
+        return "rgba(14, 132, 32, 0.35)";
+    };
+
+    const getFieldDisplay = (label: string, field: string | undefined, compareField?: string | undefined) => {
+        const isMismatched = compareField !== undefined && compareField !== field;
+        return field ? (
+            <p style={{ marginBottom: "4px" }}>
+                <b>{label}:</b>{" "}
+                <span style={{ color: isMismatched ? "rgba(199, 22, 43, 1)" : "inherit" }}>
+                    {field}
+                </span>
+            </p>
+        ) : null;
+    };
+
+    const csrrows = rows.map((csrEntry) => {
+        const { id, csr, certificate } = csrEntry;
+        const csrObj = extractCSR(csr);
+        const certs = splitBundle(certificate);
+        const clientCertificate = certs?.at(0);
+        const certObj = clientCertificate ? extractCert(clientCertificate) : null;
+
+        const isCSRContentVisible = showCSRContent === id;
+        const isCertContentVisible = showCertContent === id;
+
+        return {
+            sortData: {
+                id,
+                common_name: csrObj.commonName,
+                csr_status: certificate === "" ? "outstanding" : (certificate === "rejected" ? "rejected" : "fulfilled"),
+                cert_expiry_date: certObj?.notAfter || "",
+            },
+            columns: [
+                { content: id.toString() },
+                { content: csrObj.commonName || "N/A" },
+                { content: certificate === "" ? "outstanding" : (certificate === "rejected" ? "rejected" : "fulfilled") },
+                {
+                    content: certObj?.notAfter || "",
+                    style: { backgroundColor: getExpiryColor(certObj?.notAfter) },
+                },
+                {
+                    content: (
+                        <>
+                            {successNotificationId === id && <SuccessNotification successMessage="CSR copied to clipboard" />}
+                            <ContextualMenu
+                                hasToggleIcon
+                                position="right"
+                            >
+                                <span className="p-contextual-menu__group">
+                                    <Button
+                                        className="p-contextual-menu__link"
+                                        onMouseDown={() => handleCopy(csr, id)}>
+                                        Copy Certificate Request to Clipboard
+                                    </Button>
+                                    <Button
+                                        className="p-contextual-menu__link"
+                                        onMouseDown={() => handleDownload(csr, id, csrObj)}>
+                                        Download Certificate Request
+                                    </Button>
+                                    <Button
+                                        className="p-contextual-menu__link"
+                                        onMouseDown={() => handleExpand(id, 'CSR')}>
+                                        {isCSRContentVisible ? "Hide Certificate Request content" : "Show Certificate Request content"}
+                                    </Button>
+                                    <Button
+                                        className="p-contextual-menu__link"
+                                        disabled={certificate == "rejected"}
+                                        onMouseDown={() => handleReject(id)}>
+                                        Reject Certificate Request
+                                    </Button>
+                                    <Button
+                                        className="p-contextual-menu__link"
+                                        onMouseDown={() => handleDelete(id)}>
+                                        Delete Certificate Request
+                                    </Button>
+                                </span>
+                                <span className="p-contextual-menu__group">
+                                    <Button
+                                        className="p-contextual-menu__link"
+                                        onMouseDown={() => {
+                                            setCertificateFormOpen(true);
+                                            setSelectedCSR(csrEntry);
+                                        }}>
+                                        Upload Certificate
+                                    </Button>
+                                    <Button
+                                        className="p-contextual-menu__link"
+                                        disabled={certificate == "rejected" || certificate == ""}
+                                        onMouseDown={() => handleExpand(id, 'Cert')}>
+                                        {isCSRContentVisible ? "Hide Certificate content" : "Show Certificate content"}
+                                    </Button>
+                                    <Button
+                                        className="p-contextual-menu__link"
+                                        disabled={certificate == "rejected" || certificate == ""}
+                                        onMouseDown={() => handleRevoke(id)}>
+                                        Revoke Certificate
+                                    </Button>
+                                </span>
+                            </ContextualMenu>
+                        </>
+                    ),
+                    className: "u-align--right has-overflow",
+                    style: { height: "58px", overflow: "hidden" },
+                },
+            ],
+            expanded: isCSRContentVisible || isCertContentVisible,
+            expandedContent: (
+                <div >
+                    {isCSRContentVisible && (
+                        <div >
+                            <h4>Certificate Request Content</h4>
+                            {getFieldDisplay("Common Name", csrObj.commonName)}
+                            {getFieldDisplay("Subject Alternative Name DNS", csrObj.sansDns?.join(', '))}
+                            {getFieldDisplay("Subject Alternative Name IP addresses", csrObj.sansIp?.join(', '))}
+                            {getFieldDisplay("Country", csrObj.country)}
+                            {getFieldDisplay("State or Province", csrObj.stateOrProvince)}
+                            {getFieldDisplay("Locality", csrObj.locality)}
+                            {getFieldDisplay("Organization", csrObj.organization)}
+                            {getFieldDisplay("Organizational Unit", csrObj.OrganizationalUnitName)}
+                            {getFieldDisplay("Email Address", csrObj.emailAddress)}
+                            <p><b>Certificate request for a certificate authority</b>: {csrObj.is_ca ? "Yes" : "No"}</p>
+                        </div>
+                    )}
+                    {isCertContentVisible && certObj && (
+                        <div >
+                            <h4>Certificate Content</h4>
+                            {getFieldDisplay("Common Name", certObj.commonName)}
+                            {getFieldDisplay("Subject Alternative Name DNS", certObj.sansDns?.join(', '))}
+                            {getFieldDisplay("Subject Alternative Name IP addresses", certObj.sansIp?.join(', '))}
+                            {getFieldDisplay("Country", certObj.country)}
+                            {getFieldDisplay("State or Province", certObj.stateOrProvince)}
+                            {getFieldDisplay("Locality", certObj.locality)}
+                            {getFieldDisplay("Organization", certObj.organization)}
+                            {getFieldDisplay("Organizational Unit", certObj.OrganizationalUnitName)}
+                            {getFieldDisplay("Email Address", certObj.emailAddress)}
+                            {getFieldDisplay("Start of validity", certObj.notBefore)}
+                            {getFieldDisplay("Expiry Time", certObj.notAfter)}
+                            {getFieldDisplay("Issuer Common Name", certObj.issuerCommonName)}
+                            <p><b>Certificate for a certificate authority</b>: {certObj.is_ca ? "Yes" : "No"}</p>
+                        </div>
+                    )}
                 </div>
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
+            ),
+        };
+    });
+    return (
+        <Panel
+            stickyHeader
+            title="Certificate Requests"
+            className="u-fixed-width"
+            controls={rows.length > 0 && (
+                <Button appearance="positive" onClick={() => setAsideIsOpen(true)}>
+                    Add New CSR
+                </Button>
+            )}
+        >
+            <MainTable
+                emptyStateMsg={<CSREmptyState setAsideOpen={setAsideIsOpen} />}
+                expanding
+                sortable
+                headers={[
+                    {
+                        content: "ID",
+                        sortKey: "id",
+                    },
+                    {
+                        content: "Common Name",
+                        sortKey: "common_name",
+                    },
+                    {
+                        content: "CSR Status",
+                        sortKey: "csr_status",
+                    },
+                    {
+                        content: "Certificate Expiry Date",
+                        sortKey: "cert_expiry_date",
+                    },
+                    {
+                        content: "Actions",
+                        className: "u-align--right has-overflow"
+                    }
+                ]}
+                rows={csrrows}
+            />
+            {confirmationModalData && (
+                <ConfirmationModal
+                    title="Confirm Action"
+                    confirmButtonLabel="Confirm"
+                    onConfirm={confirmationModalData.onMouseDownFunc}
+                    close={() => setConfirmationModalData(null)}
+                >
+                    <p>{confirmationModalData.warningText}</p>
+                </ConfirmationModal>
+            )}
+            {certificateFormOpen && selectedCSR && (
+                <SubmitCertificateModal
+                    id={selectedCSR.id.toString()}
+                    csr={selectedCSR.csr}
+                    cert={selectedCSR.certificate}
+                    setFormOpen={setCertificateFormOpen}
+                />
+            )}
+        </Panel>
+    );
+}
diff --git a/ui/src/app/error.tsx b/ui/src/app/error.tsx
new file mode 100644
index 00000000..498692d3
--- /dev/null
+++ b/ui/src/app/error.tsx
@@ -0,0 +1,11 @@
+"use client"
+import { Strip } from "@canonical/react-components";
+
+export default function Error({ msg }: { msg: string }) {
+    return (
+        <Strip >
+            <p className="p-heading--5">An error occured trying to load content</p>
+            <p>{msg}</p>
+        </Strip>
+    )
+}
diff --git a/ui/src/app/initialize/page.tsx b/ui/src/app/initialize/page.tsx
index d620b58f..4076be90 100644
--- a/ui/src/app/initialize/page.tsx
+++ b/ui/src/app/initialize/page.tsx
@@ -6,9 +6,9 @@ import { useMutation, useQuery } from "react-query"
 import { useRouter } from "next/navigation"
 import { passwordIsValid } from "../utils"
 import { useAuth } from "../auth/authContext"
-import { Logo } from "../nav"
 import { useCookies } from "react-cookie"
 import { statusResponse } from "../types"
+import { Input, PasswordToggle, Button, Form, LoginPageLayout } from "@canonical/react-components";
 
 
 export default function Initialize() {
@@ -50,89 +50,61 @@ export default function Initialize() {
     const [password1, setPassword1] = useState<string>("")
     const [password2, setPassword2] = useState<string>("")
     const passwordsMatch = password1 === password2
+    const password1Error = password1 && !passwordIsValid(password1) ? "Password is not valid" : ""
+    const password2Error = password2 && !passwordsMatch ? "Passwords do not match" : ""
+
     const [errorText, setErrorText] = useState<string>("")
-    const [showPassword1, setShowPassword1] = useState<boolean>(false)
     const handleUsernameChange = (event: ChangeEvent<HTMLInputElement>) => { setUsername(event.target.value) }
     const handlePassword1Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword1(event.target.value) }
     const handlePassword2Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword2(event.target.value) }
     return (
         <>
-            <div style={{ backgroundColor: "#262626", height: "6.5vh" }}>
-                <div style={{ marginLeft: "30px" }}>
-                    <Logo />
-                </div>
-            </div>
-            <div style={{
-                display: "flex",
-                alignContent: "center",
-                justifyContent: "center",
-                flexWrap: "wrap",
-                height: "93.5vh",
-            }}>
-                <div className="p-panel" style={{
-                    width: "45rem",
-                    minWidth: "min-content",
-                    minHeight: "min-content",
-                }}>
-                    <fieldset>
-                        <div className="p-panel__header">
-                            <h2>Initialize Notary</h2>
-                        </div>
-                        <div className="p-panel__content">
-                            <form className={"p-form-validation " + ((!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
-                                <div className="p-form__group row">
-                                    <h4>Create the initial admin user</h4>
-                                    <label className="p-form__label">Username</label>
-                                    <input type="text" id="InputUsername" name="InputUsername" onChange={handleUsernameChange} />
-                                    <div>
-                                        <label className="p-form__label">Password</label>
-                                        <button className="p-button--base u-no-margin--bottom has-icon" style={{ float: "right" }} aria-live="polite" aria-controls="password" onClick={(e) => { e.preventDefault(); setShowPassword1(!showPassword1) }}>
-                                            {showPassword1 ? (
-                                                <>
-                                                    <span className="p-form-password-toggle__label">
-                                                        Hide
-                                                    </span>
-                                                    <i className="p-icon--hide"></i>
-                                                </>
-                                            ) : (
-                                                <>
-                                                    <span className="p-form-password-toggle__label">
-                                                        Show
-                                                    </span>
-                                                    <i className="p-icon--show"></i>
-                                                </>
-                                            )}
-                                        </button>
-                                    </div>
-                                    <input className="p-form-validation__input" type={showPassword1 ? "text" : "password"} id="password1" name="password" placeholder="******" autoComplete="current-password" required={true} onChange={handlePassword1Change} />
-                                    <p className="p-form-help-text">
-                                        Password must have 8 or more characters, must include at least one capital letter, one lowercase letter, and either a number or a symbol.
-                                    </p>
-                                    <label htmlFor="p-form__label">Confirm Password</label>
-                                    <input className="p-form-validation__input" type="password" id="InputPassword" name="password2" placeholder="******" autoComplete="current-password" onChange={handlePassword2Change} />
-                                    {!passwordIsValid(password1) && password1 != "" && <p className="p-form-validation__message">Password is not valid</p>}
-                                    {passwordIsValid(password1) && !passwordsMatch && password2 != "" && <p className="p-form-validation__message">Passwords do not match</p>}
-                                    {errorText &&
-                                        <div className="p-notification--negative">
-                                            <div className="p-notification__content">
-                                                <h5 className="p-notification__title">Error</h5>
-                                                <p className="p-notification__message">{errorText.split("error: ")}</p>
-                                            </div>
-                                        </div>
-                                    }
-                                    {!passwordsMatch || !passwordIsValid(password1) ? (
-                                        <>
-                                            <button className="p-button--positive" type="submit" name="submit" disabled={true}>Submit</button>
-                                        </>
-                                    ) : (
-                                        <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); postUserMutation.mutate({ username: username, password: password1 }) }}>Submit</button>
-                                    )}
-                                </div>
-                            </form>
-                        </div>
-                    </fieldset>
-                </div >
-            </div>
+            <LoginPageLayout
+                logo={{
+                    src: 'https://assets.ubuntu.com/v1/82818827-CoF_white.svg',
+                    title: 'Notary',
+                    url: '#'
+                }}
+                title="Initialize Notary"
+            >
+                <Form>
+                    <h4>Create the initial admin user</h4>
+                    <Input
+                        id="InputUsername"
+                        label="Username"
+                        type="text"
+                        required={true}
+                        onChange={handleUsernameChange}
+                    />
+                    <PasswordToggle
+                        help="Password must have 8 or more characters, must include at least one capital letter, one lowercase letter, and either a number or a symbol."
+                        id="password1"
+                        label="Password"
+                        onChange={handlePassword1Change}
+                        required={true}
+                        error={password1Error}
+                    />
+                    <PasswordToggle
+                        id="password2"
+                        label="Confirm Password"
+                        onChange={handlePassword2Change}
+                        required={true}
+                        error={password2Error}
+                    />
+                    <Button
+                        appearance="positive"
+                        disabled={!passwordsMatch || !passwordIsValid(password1)}
+                        onClick={(event) => {
+                            event.preventDefault();
+                            if (passwordsMatch && passwordIsValid(password1)) {
+                                postUserMutation.mutate({ username: username, password: password1 });
+                            }
+                        }}
+                    >
+                        Submit
+                    </Button>
+                </Form>
+            </LoginPageLayout>
         </>
     )
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/loading.tsx b/ui/src/app/loading.tsx
new file mode 100644
index 00000000..010395e0
--- /dev/null
+++ b/ui/src/app/loading.tsx
@@ -0,0 +1,10 @@
+"use client"
+import { Strip, Spinner } from "@canonical/react-components";
+
+export default function Loading() {
+    return (
+        <Strip >
+            <Spinner text="Loading..." />
+        </Strip>
+    )
+}
diff --git a/ui/src/app/login/page.tsx b/ui/src/app/login/page.tsx
index f423c1ea..0f739d1a 100644
--- a/ui/src/app/login/page.tsx
+++ b/ui/src/app/login/page.tsx
@@ -7,7 +7,7 @@ import { useCookies } from "react-cookie"
 import { useRouter } from "next/navigation"
 import { useAuth } from "../auth/authContext"
 import { statusResponse } from "../types"
-import { Logo } from "../nav"
+import { Input, PasswordToggle, Button, Form, Notification, LoginPageLayout } from "@canonical/react-components";
 
 
 export default function LoginPage() {
@@ -42,51 +42,50 @@ export default function LoginPage() {
     const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => { setPassword(event.target.value) }
     return (
         <>
-            <div style={{ backgroundColor: "#262626", height: "6.5vh" }}>
-                <div style={{ marginLeft: "30px" }}>
-                    <Logo />
-                </div>
-            </div>
-            <div style={{
-                display: "flex",
-                alignContent: "center",
-                justifyContent: "center",
-                flexWrap: "wrap",
-                height: "93.5vh",
-            }}>
-                <div className="p-panel" style={{
-                    width: "35rem",
-                    minWidth: "min-content",
-                    minHeight: "min-content",
-                }}>
-                    <div className="p-panel__content">
-                        <div className="u-fixed-width">
-                            <form className="p-form">
-                                <fieldset>
-                                    <h2 className="p-panel__title">Login</h2>
-                                    <label htmlFor="InputUsername">Username</label>
-                                    <input type="text" id="InputUsername" name="InputUsername" onChange={handleUsernameChange} />
-                                    <label htmlFor="InputPassword">Password</label>
-                                    <input type="password" id="InputPassword" name="InputPassword" placeholder="******" autoComplete="current-password" onChange={handlePasswordChange} />
-                                    {errorText &&
-                                        <div className="p-notification--negative">
-                                            <div className="p-notification__content">
-                                                <h5 className="p-notification__title">Error</h5>
-                                                <p className="p-notification__message">{errorText.split("error: ")}</p>
-                                            </div>
-                                        </div>
-                                    }
-                                    {password.length != 0 && username.length != 0 ? (
-                                        <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ username: username, password: password }) }}>Log In</button>
-                                    ) : (
-                                        <button disabled={true} className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ username: username, password: password }) }}>Log In</button>
-                                    )}
-                                </fieldset>
-                            </form>
-                        </div>
-                    </div>
-                </div >
-            </div >
+            <LoginPageLayout
+                logo={{
+                    src: 'https://assets.ubuntu.com/v1/82818827-CoF_white.svg',
+                    title: 'Notary',
+                    url: '#'
+                }}
+                title="Log in"
+            >
+                <Form>
+                    <Input
+                        id="InputUsername"
+                        label="Username"
+                        type="text"
+                        required={true}
+                        onChange={handleUsernameChange}
+                    />
+                    <PasswordToggle
+                        id="InputPassword"
+                        label="Password"
+                        required={true}
+                        onChange={handlePasswordChange}
+                    />
+                    {errorText &&
+                        <Notification
+                            severity="negative"
+                            title="Error"
+                        >
+                            {errorText.split("error: ")}
+                        </Notification>
+                    }
+                    <Button
+                        appearance="positive"
+                        disabled={password.length == 0 || username.length == 0}
+                        onClick={
+                            (event) => {
+                                event.preventDefault();
+                                mutation.mutate({ username: username, password: password })
+                            }
+                        }
+                    >
+                        Log In
+                    </Button>
+                </Form>
+            </LoginPageLayout>
         </>
     )
 }
\ No newline at end of file
diff --git a/ui/src/app/nav.tsx b/ui/src/app/nav.tsx
index 58512242..307117ab 100644
--- a/ui/src/app/nav.tsx
+++ b/ui/src/app/nav.tsx
@@ -1,10 +1,10 @@
 "use client"
 
-import { SetStateAction, Dispatch, useState, useContext } from "react"
+import { SetStateAction, Dispatch, useState } from "react"
 import { QueryClient, QueryClientProvider } from "react-query";
 import Image from "next/image";
 import { Aside, AsideContext } from "./aside";
-import { AccountTab } from "./login"
+import { AccountTab } from "./nav_account"
 import { usePathname } from "next/navigation";
 import { useAuth } from "./auth/authContext";
 import UploadCSRAsidePanel from "./certificate_requests/asideForm";
diff --git a/ui/src/app/login.tsx b/ui/src/app/nav_account.tsx
similarity index 93%
rename from ui/src/app/login.tsx
rename to ui/src/app/nav_account.tsx
index 08b5ddda..d8a88454 100644
--- a/ui/src/app/login.tsx
+++ b/ui/src/app/nav_account.tsx
@@ -1,9 +1,7 @@
 import { useContext, useState } from "react";
 import { useAuth } from "./auth/authContext";
 import { useCookies } from "react-cookie";
-import { useRouter } from "next/navigation";
-import { ChangePasswordModal, ChangePasswordModalContext, ChangePasswordModalData } from "./users/components";
-
+import { ChangePasswordModalContext } from "./users/components";
 
 
 export function AccountTab() {
@@ -26,6 +24,7 @@ export function AccountTab() {
                                 <span className="p-contextual-menu__group">
                                     <button className="p-contextual-menu__link" onMouseDown={() => changePasswordModalContext.setModalData({ "id": authDetails.user ? authDetails.user.id.toString() : "", "username": authDetails.user ? authDetails.user.username : "" })}>Change Password</button>
                                     <button className="p-contextual-menu__link" onMouseDown={() => removeCookie("user_token")}>Log Out</button>
+
                                 </span>
                             </span>
                         </div>
diff --git a/ui/src/app/users/asideForm.tsx b/ui/src/app/users/asideForm.tsx
index c3cd905c..f73729df 100644
--- a/ui/src/app/users/asideForm.tsx
+++ b/ui/src/app/users/asideForm.tsx
@@ -4,29 +4,27 @@ import { changePassword, postUser } from "../queries";
 import { ChangeEvent, useContext, useState } from "react";
 import { AsideContext } from "../aside";
 import { useAuth } from "../auth/authContext";
+import { Panel, Button, Input, PasswordToggle, Form } from "@canonical/react-components";
 
 export default function UsersPageAsidePanel() {
     const asideContext = useContext(AsideContext)
+    const panelTitle = asideContext.extraData == null ? "Add a New User" : "Change User Password"
     return (
-        <div className="p-panel" >
-            <div className="p-panel__header">
-                {asideContext.extraData == null ? (
-                    <h4 className="p-panel__title">Add a New User</h4>
-                ) : (
-                    <h4 className="p-panel__title">Change User Password</h4>
-                )}
-                <div className="p-panel__controls">
-                    <button onClick={() => asideContext.setIsOpen(false)} className="p-button--base u-no-margin--bottom has-icon"><i className="p-icon--close"></i></button>
-                </div>
-            </div>
-            <div className="p-panel__content">
-                {asideContext.extraData == null ? (
-                    <AddNewUserForm />
-                ) : (
-                    <ChangePasswordForm />
-                )}
-            </div>
-        </div >
+        <Panel
+            title={panelTitle}
+            controls={
+                <Button
+                    onClick={() => asideContext.setIsOpen(false)}
+                    hasIcon>
+                    <i className="p-icon--close" />
+                </Button>
+            }>
+            {asideContext.extraData == null ? (
+                <AddNewUserForm />
+            ) : (
+                <ChangePasswordForm />
+            )}
+        </Panel>
     )
 }
 
@@ -45,65 +43,51 @@ function AddNewUserForm() {
             setErrorText(e.message)
         }
     })
-    const [showPassword1, setShowPassword1] = useState<boolean>(false)
     const [username, setUsername] = useState<string>("")
     const [password1, setPassword1] = useState<string>("")
     const [password2, setPassword2] = useState<string>("")
     const passwordsMatch = password1 === password2
+    const password1Error = password1 && !passwordIsValid(password1) ? "Password is not valid" : ""
+    const password2Error = password2 && !passwordsMatch ? "Passwords do not match" : ""
+
     const [errorText, setErrorText] = useState<string>("")
     const handleUsernameChange = (event: ChangeEvent<HTMLInputElement>) => { setUsername(event.target.value) }
     const handlePassword1Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword1(event.target.value) }
     const handlePassword2Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword2(event.target.value) }
     return (
-        <form className={"p-form-validation " + ((!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
+        <Form>
             <div className="p-form__group row">
-                <label className="p-form__label">Username</label>
-                <input type="text" id="InputUsername" name="InputUsername" onChange={handleUsernameChange} />
-                <div>
-                    <label className="p-form__label">Password</label>
-                    <button className="p-button--base u-no-margin--bottom has-icon" style={{ float: "right" }} aria-live="polite" aria-controls="password" onClick={(e) => { e.preventDefault(); setShowPassword1(!showPassword1) }}>
-                        {showPassword1 ? (
-                            <>
-                                <span className="p-form-password-toggle__label">
-                                    Hide
-                                </span>
-                                <i className="p-icon--hide"></i>
-                            </>
-                        ) : (
-                            <>
-                                <span className="p-form-password-toggle__label">
-                                    Show
-                                </span>
-                                <i className="p-icon--show"></i>
-                            </>
-                        )}
-                    </button>
-                </div>
-                <input className="p-form-validation__input" type={showPassword1 ? "text" : "password"} id="password1" name="password" placeholder="******" autoComplete="current-password" required={true} onChange={handlePassword1Change} />
-                <p className="p-form-help-text">
-                    Password must have 8 or more characters, must include at least one capital letter, one lowercase letter, and either a number or a symbol.
-                </p>
-                <label htmlFor="p-form__label">Confirm Password</label>
-                <input className="p-form-validation__input" type="password" id="InputPassword" name="password2" placeholder="******" autoComplete="current-password" onChange={handlePassword2Change} />
-                {!passwordIsValid(password1) && password1 != "" && <p className="p-form-validation__message">Password is not valid</p>}
-                {passwordIsValid(password1) && !passwordsMatch && password2 != "" && <p className="p-form-validation__message">Passwords do not match</p>}
-                {errorText &&
-                    <div className="p-notification--negative">
-                        <div className="p-notification__content">
-                            <h5 className="p-notification__title">Error</h5>
-                            <p className="p-notification__message">{errorText.split("error: ")}</p>
-                        </div>
-                    </div>
-                }
-                {!passwordsMatch || !passwordIsValid(password1) ? (
-                    <>
-                        <button className="p-button--positive" type="submit" name="submit" disabled={true}>Submit</button>
-                    </>
-                ) : (
-                    <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ authToken: (auth.user ? auth.user.authToken : ""), username: username, password: password1 }) }}>Submit</button>
-                )}
+                <Input
+                    id="InputUsername"
+                    label="Username"
+                    type="text"
+                    required={true}
+                    onChange={handleUsernameChange}
+                />
+                <PasswordToggle
+                    help="Password must have 8 or more characters, must include at least one capital letter, one lowercase letter, and either a number or a symbol."
+                    id="password1"
+                    label="Password"
+                    onChange={handlePassword1Change}
+                    required={true}
+                    error={password1Error}
+                />
+                <PasswordToggle
+                    id="password2"
+                    label="Password"
+                    onChange={handlePassword2Change}
+                    required={true}
+                    error={password2Error}
+                />
+                <Button
+                    appearance="positive"
+                    disabled={!passwordsMatch || !passwordIsValid(password1)}
+                    onClick={(event) => { event.preventDefault(); mutation.mutate({ authToken: (auth.user ? auth.user.authToken : ""), username: username, password: password1 }) }}
+                >
+                    Submit
+                </Button>
             </div>
-        </form>
+        </Form>
     )
 }
 
@@ -121,60 +105,48 @@ function ChangePasswordForm() {
             setErrorText(e.message)
         }
     })
-    const [showPassword1, setShowPassword1] = useState<boolean>(false)
     const [password1, setPassword1] = useState<string>("")
     const [password2, setPassword2] = useState<string>("")
     const passwordsMatch = password1 === password2
+    const password1Error = password1 && !passwordIsValid(password1) ? "Password is not valid" : ""
+    const password2Error = password2 && !passwordsMatch ? "Passwords do not match" : ""
+
     const [errorText, setErrorText] = useState<string>("")
     const handlePassword1Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword1(event.target.value) }
     const handlePassword2Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword2(event.target.value) }
     return (
-        <form className={"p-form-validation " + ((!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
+        <Form>
             <div className="p-form__group row">
-                <label className="p-form__label">Username</label>
-                <input type="text" id="InputUsername" name="InputUsername" value={asideContext.extraData["user"]["username"]} disabled={true} />
-                <div>
-                    <label className="p-form__label">New Password</label>
-                    <button className="p-button--base u-no-margin--bottom has-icon" style={{ float: "right" }} aria-live="polite" aria-controls="password" onClick={(e) => { e.preventDefault(); setShowPassword1(!showPassword1) }}>
-                        {showPassword1 ? (
-                            <>
-                                <span className="p-form-password-toggle__label">
-                                    Hide
-                                </span>
-                                <i className="p-icon--hide"></i>
-                            </>
-                        ) : (
-                            <>
-                                <span className="p-form-password-toggle__label">
-                                    Show
-                                </span>
-                                <i className="p-icon--show"></i>
-                            </>
-                        )}
-                    </button>
-                </div>
-                <input className="p-form-validation__input" type={showPassword1 ? "text" : "password"} id="password1" name="password" placeholder="******" autoComplete="current-password" required={true} onChange={handlePassword1Change} />
-                <p className="p-form-help-text">
-                    Password must have 8 or more characters, must include at least one capital letter, one lowercase letter, and either a number or a symbol.
-                </p>
-                <label htmlFor="p-form__label">Confirm New Password</label>
-                <input className="p-form-validation__input" type="password" id="InputPassword" name="password2" placeholder="******" autoComplete="current-password" onChange={handlePassword2Change} />
-                {!passwordIsValid(password1) && password1 != "" && <p className="p-form-validation__message">Password is not valid</p>}
-                {passwordIsValid(password1) && !passwordsMatch && password2 != "" && <p className="p-form-validation__message">Passwords do not match</p>}
-                {errorText &&
-                    <div className="p-notification--negative">
-                        <div className="p-notification__content">
-                            <h5 className="p-notification__title">Error</h5>
-                            <p className="p-notification__message">{errorText.split("error: ")}</p>
-                        </div>
-                    </div>
-                }
-                {!passwordsMatch || !passwordIsValid(password1) ? (
-                    <button className="p-button--positive" type="submit" name="submit" disabled={true}>Submit</button>
-                ) : (
-                    <button className="p-button--positive" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ authToken: (auth.user ? auth.user.authToken : ""), id: asideContext.extraData["user"]["id"], password: password1 }) }}>Submit</button>
-                )}
+                <Input
+                    id="InputUsername"
+                    label="Username"
+                    type="text"
+                    value={asideContext.extraData["user"]["username"]}
+                    disabled={true}
+                />
+                <PasswordToggle
+                    help="Password must have 8 or more characters, must include at least one capital letter, one lowercase letter, and either a number or a symbol."
+                    id="password1"
+                    label="Password"
+                    onChange={handlePassword1Change}
+                    required={true}
+                    error={password1Error}
+                />
+                <PasswordToggle
+                    id="password2"
+                    label="Password"
+                    onChange={handlePassword2Change}
+                    required={true}
+                    error={password2Error}
+                />
+                <Button
+                    appearance="positive"
+                    disabled={!passwordsMatch || !passwordIsValid(password1)}
+                    onClick={(event) => { event.preventDefault(); mutation.mutate({ authToken: (auth.user ? auth.user.authToken : ""), id: asideContext.extraData["user"]["id"], password: password1 }) }}
+                >
+                    Submit
+                </Button>
             </div>
-        </form>
+        </Form>
     )
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/users/components.tsx b/ui/src/app/users/components.tsx
index 3b34349b..d03eadbd 100644
--- a/ui/src/app/users/components.tsx
+++ b/ui/src/app/users/components.tsx
@@ -3,6 +3,7 @@ import { useAuth } from "../auth/authContext"
 import { useMutation, useQueryClient } from "react-query"
 import { changePassword } from "../queries"
 import { passwordIsValid } from "../utils"
+import { ConfirmationModal, Modal, Button, Input, PasswordToggle, Form } from "@canonical/react-components";
 
 export type ConfirmationModalData = {
     onMouseDownFunc: () => void
@@ -29,24 +30,15 @@ export const ChangePasswordModalContext = createContext<ChangePasswordModalProps
     setModalData: () => { }
 })
 
-export function ConfirmationModal({ modalData, setModalData }: ConfirmationModalProps) {
+export function UsersConfirmationModal({ modalData, setModalData }: ConfirmationModalProps) {
     const confirmQuery = () => {
         modalData?.onMouseDownFunc()
         setModalData(null)
     }
     return (
-        <div className="p-modal" id="modal">
-            <section className="p-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description">
-                <header className="p-modal__header">
-                    <h2 className="p-modal__title" id="modal-title">Confirm Action</h2>
-                </header>
-                <p>{modalData?.warningText}</p>
-                <footer className="p-modal__footer">
-                    <button className="u-no-margin--bottom" aria-controls="modal" onMouseDown={() => setModalData(null)}>Cancel</button>
-                    <button className="p-button--negative u-no-margin--bottom" onMouseDown={confirmQuery}>Confirm</button>
-                </footer>
-            </section>
-        </div>
+        <ConfirmationModal title="Confirm Action" confirmButtonLabel="Delete" onConfirm={confirmQuery} close={() => setModalData(null)}>
+            <p>{modalData?.warningText}</p>
+        </ConfirmationModal>
     )
 }
 
@@ -63,71 +55,54 @@ export function ChangePasswordModal({ modalData, setModalData }: ChangePasswordM
             setErrorText(e.message)
         }
     })
-    const [showPassword1, setShowPassword1] = useState<boolean>(false)
     const [password1, setPassword1] = useState<string>("")
     const [password2, setPassword2] = useState<string>("")
     const passwordsMatch = password1 === password2
+    const password1Error = password1 && !passwordIsValid(password1) ? "Password is not valid" : ""
+    const password2Error = password2 && !passwordsMatch ? "Passwords do not match" : ""
+
     const [errorText, setErrorText] = useState<string>("")
     const handlePassword1Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword1(event.target.value) }
     const handlePassword2Change = (event: ChangeEvent<HTMLInputElement>) => { setPassword2(event.target.value) }
     return (
-        <div className="p-modal" id="modal">
-            <section className="p-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description">
-                <header className="p-modal__header">
-                    <h2 className="p-modal__title" id="modal-title">Change Password</h2>
-                </header>
-                <form className={"p-form-validation " + ((!passwordIsValid(password1) && password1 != "") || (!passwordsMatch && password2 != "") ? "is-error" : "")}>
-                    <div className="p-form__group row">
-                        <label className="p-form__label">Username</label>
-                        <input type="text" id="InputUsername" name="InputUsername" value={modalData?.username} disabled={true} />
-                        <div>
-                            <label className="p-form__label">New Password</label>
-                            <button className="p-button--base u-no-margin--bottom has-icon" style={{ float: "right" }} aria-live="polite" aria-controls="password" onClick={(e) => { e.preventDefault(); setShowPassword1(!showPassword1) }}>
-                                {showPassword1 ? (
-                                    <>
-                                        <span className="p-form-password-toggle__label">
-                                            Hide
-                                        </span>
-                                        <i className="p-icon--hide"></i>
-                                    </>
-                                ) : (
-                                    <>
-                                        <span className="p-form-password-toggle__label">
-                                            Show
-                                        </span>
-                                        <i className="p-icon--show"></i>
-                                    </>
-                                )}
-                            </button>
-                        </div>
-                        <input className="p-form-validation__input" type={showPassword1 ? "text" : "password"} id="password1" name="password" placeholder="******" autoComplete="current-password" required={true} onChange={handlePassword1Change} />
-                        <p className="p-form-help-text">
-                            Password must have 8 or more characters, must include at least one capital letter, one lowercase letter, and either a number or a symbol.
-                        </p>
-                        <label htmlFor="p-form__label">Confirm New Password</label>
-                        <input className="p-form-validation__input" type="password" id="InputPassword" name="password2" placeholder="******" autoComplete="current-password" onChange={handlePassword2Change} />
-                        {!passwordIsValid(password1) && password1 != "" && <p className="p-form-validation__message">Password is not valid</p>}
-                        {passwordIsValid(password1) && !passwordsMatch && password2 != "" && <p className="p-form-validation__message">Passwords do not match</p>}
-                        {errorText &&
-                            <div className="p-notification--negative">
-                                <div className="p-notification__content">
-                                    <h5 className="p-notification__title">Error</h5>
-                                    <p className="p-notification__message">{errorText.split("error: ")}</p>
-                                </div>
-                            </div>
-                        }
-
-                    </div>
-                </form>
-                <footer className="p-modal__footer">
-                    <button className="u-no-margin--bottom" aria-controls="modal" onMouseDown={() => setModalData(null)}>Cancel</button>
-                    {!passwordsMatch || !passwordIsValid(password1) ? (
-                        <button className="p-button--positive u-no-margin--bottom" type="submit" name="submit" disabled={true}>Submit</button>
-                    ) : (
-                        <button className="p-button--positive u-no-margin--bottom" type="submit" name="submit" onClick={(event) => { event.preventDefault(); mutation.mutate({ authToken: (auth.user ? auth.user.authToken : ""), id: modalData ? modalData.id : "", password: password1 }) }}>Submit</button>
-                    )}
-                </footer>
-            </section>
-        </div>
+        <Modal
+            title="Change Password"
+            buttonRow={<>
+                <Button onClick={() => setModalData(null)}>
+                    Cancel
+                </Button>
+                <Button
+                    appearance="positive"
+                    disabled={!passwordsMatch || !passwordIsValid(password1)}
+                    onClick={(event) => { event.preventDefault(); mutation.mutate({ authToken: (auth.user ? auth.user.authToken : ""), id: modalData ? modalData.id : "", password: password1 }) }}>
+                    Submit
+                </Button>
+            </>}>
+            <Form>
+                <Input
+                    id="InputUsername"
+                    label="Username"
+                    type="text"
+                    required={true}
+                    disabled={true}
+                    value={modalData?.username}
+                />
+                <PasswordToggle
+                    help="Password must have 8 or more characters, must include at least one capital letter, one lowercase letter, and either a number or a symbol."
+                    id="password1"
+                    label="New Password"
+                    required={true}
+                    onChange={handlePassword1Change}
+                    error={password1Error}
+                />
+                <PasswordToggle
+                    id="password2"
+                    label="Confirm New Password"
+                    required={true}
+                    onChange={handlePassword2Change}
+                    error={password2Error}
+                />
+            </Form>
+        </Modal >
     )
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/users/page.tsx b/ui/src/app/users/page.tsx
index 17380c30..2780cb00 100644
--- a/ui/src/app/users/page.tsx
+++ b/ui/src/app/users/page.tsx
@@ -6,37 +6,10 @@ import { UserEntry } from "../types"
 import { useCookies } from "react-cookie"
 import { useRouter } from "next/navigation"
 import { UsersTable } from "./table"
+import Loading from "../loading"
+import Error from "../error"
 
-function Error({ msg }: { msg: string }) {
-    return (
-        <caption>
-            <div className="p-strip">
-                <div className="row">
-                    <div className="u-align--left">
-                        <p className="p-heading--5">An error occured trying to load users</p>
-                        <p>{msg}</p>
-                    </div>
-                </div>
-            </div>
-        </caption>
-    )
-}
-
-function Loading() {
-    return (
-        <caption>
-            <div className="p-strip">
-                <div className="row">
-                    <div className="col-8 col-medium-4 col-small-3">
-                        <p className="p-heading--4 u-no-margin--bottom">Loading...</p>
-                    </div>
-                </div>
-            </div>
-        </caption>
-    )
-}
-
-export default function CertificateRequests() {
+export default function Users() {
     const router = useRouter()
     const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
     if (!cookies.user_token) {
@@ -60,5 +33,5 @@ export default function CertificateRequests() {
         return <Error msg={query.error.message} />
     }
     const users = Array.from(query.data ? query.data : [])
-    return  <UsersTable users={users} />
+    return <UsersTable users={users} />
 }
\ No newline at end of file
diff --git a/ui/src/app/users/row.tsx b/ui/src/app/users/row.tsx
deleted file mode 100644
index 6c268797..00000000
--- a/ui/src/app/users/row.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useState, Dispatch, SetStateAction, useEffect, useRef, useContext } from "react"
-import { UseMutationResult, useMutation, useQueryClient } from "react-query"
-import { RequiredCSRParams, deleteUser } from "../queries"
-import { ConfirmationModalData, ConfirmationModal, ChangePasswordModalData, ChangePasswordModal } from "./components"
-import "./../globals.scss"
-import { useAuth } from "../auth/authContext"
-import { AsideContext } from "../aside"
-
-type rowProps = {
-    id: number,
-    username: string,
-
-    ActionMenuExpanded: number
-    setActionMenuExpanded: Dispatch<SetStateAction<number>>
-}
-
-export default function Row({ id, username, ActionMenuExpanded, setActionMenuExpanded }: rowProps) {
-    const auth = useAuth()
-    const asideContext = useContext(AsideContext)
-    const [confirmationModalData, setConfirmationModalData] = useState<ConfirmationModalData>(null)
-    const [changePasswordModalData, setChangePasswordModalData] = useState<ChangePasswordModalData>(null)
-    const queryClient = useQueryClient()
-    const deleteMutation = useMutation(deleteUser, {
-        onSuccess: () => queryClient.invalidateQueries('users')
-    })
-    const mutationFunc = (mutation: UseMutationResult<any, unknown, RequiredCSRParams, unknown>, params: RequiredCSRParams) => {
-        mutation.mutate(params)
-    }
-    const handleDelete = () => {
-        setConfirmationModalData({
-            onMouseDownFunc: () => mutationFunc(deleteMutation, { id: id.toString(), authToken: auth.user ? auth.user.authToken : "" }),
-            warningText: `Deleting user: "${username}". This action cannot be undone.`
-        })
-    }
-    const handleChangePassword = () => {
-        // asideContext.setExtraData({ "user": { "id": id, "username": username } })
-        // asideContext.setIsOpen(true)
-        setChangePasswordModalData({ "id": id.toString(), "username": username })
-    }
-
-    return (
-        <>
-            <tr>
-                <td className="" width={5} aria-label="id">{id}</td>
-                <td className="" aria-label="username">{username}</td>
-                <td className="has-overflow" data-heading="Actions">
-                    <span className="p-contextual-menu--center u-no-margin--bottom">
-                        <button
-                            className="p-contextual-menu__toggle p-button--base is-small u-no-margin--bottom"
-                            aria-label="action-menu-button"
-                            aria-controls="action-menu"
-                            aria-expanded={ActionMenuExpanded == id ? "true" : "false"}
-                            aria-haspopup="true"
-                            onClick={() => setActionMenuExpanded(id)}
-                            onBlur={() => setActionMenuExpanded(0)}>
-                            <i className="p-icon--menu p-contextual-menu__indicator"></i>
-                        </button>
-                        <span className="p-contextual-menu__dropdown" id="action-menu" aria-hidden={ActionMenuExpanded == id ? "false" : "true"}>
-                            <span className="p-contextual-menu__group">
-                                {id == 1 ?
-                                    <button className="p-contextual-menu__link" onMouseDown={handleDelete} disabled={true}>Delete User</button>
-                                    :
-                                    <button className="p-contextual-menu__link" onMouseDown={handleDelete}>Delete User</button>
-                                }
-                                <button className="p-contextual-menu__link" onMouseDown={handleChangePassword} >Change Password</button>
-                            </span>
-                        </span>
-                    </span>
-                </td>
-                {confirmationModalData != null && <ConfirmationModal modalData={confirmationModalData} setModalData={setConfirmationModalData} />}
-                {changePasswordModalData != null && <ChangePasswordModal modalData={changePasswordModalData} setModalData={setChangePasswordModalData} />}
-            </tr>
-        </>
-    )
-}
\ No newline at end of file
diff --git a/ui/src/app/users/table.tsx b/ui/src/app/users/table.tsx
index e9c81ebd..c010435d 100644
--- a/ui/src/app/users/table.tsx
+++ b/ui/src/app/users/table.tsx
@@ -1,43 +1,101 @@
-import { useContext, useState, Dispatch, SetStateAction } from "react"
+import { useState, useContext } from "react"
 import { AsideContext } from "../aside"
 import { UserEntry } from "../types"
-import Row from "./row"
+import { useMutation, useQueryClient } from "react-query"
+import { Button, ContextualMenu, MainTable, Panel } from "@canonical/react-components";
+import { ConfirmationModalData, UsersConfirmationModal, ChangePasswordModalData, ChangePasswordModal } from "./components"
+import { useAuth } from "../auth/authContext"
+import { deleteUser } from "../queries"
 
 type TableProps = {
     users: UserEntry[]
 }
 
-export function UsersTable({ users: rows }: TableProps) {
+export function UsersTable({ users }: TableProps) {
+    const auth = useAuth()
     const { isOpen: isAsideOpen, setIsOpen: setAsideIsOpen } = useContext(AsideContext)
     const asideContext = useContext(AsideContext)
-    const [actionsMenuExpanded, setActionsMenuExpanded] = useState<number>(0)
+    const [confirmationModalData, setConfirmationModalData] = useState<ConfirmationModalData | null>(null)
+    const [changePasswordModalData, setChangePasswordModalData] = useState<ChangePasswordModalData>(null)
+    const queryClient = useQueryClient()
+    const deleteMutation = useMutation(deleteUser, {
+        onSuccess: () => queryClient.invalidateQueries('users')
+    })
+    const handleDelete = (id: string, username: string) => {
+        setConfirmationModalData({
+            warningText: `Deleting user: "${username}". This action cannot be undone.`,
+            onMouseDownFunc: () => {
+                const authToken = auth.user ? auth.user.authToken : "";
+                deleteMutation.mutate({ id: id, authToken });
+            }
+        });
+    };
+    const handleChangePassword = (id: string, username: string) => {
+        setChangePasswordModalData({ "id": id, "username": username })
+    }
+
     return (
-        <div className="p-panel">
-            <div className="p-panel__header is-sticky">
-                <h4 className="p-panel__title">Users</h4>
-                <div className="p-panel__controls">
-                    {rows.length > 0 && <button className="u-no-margin--bottom p-button--positive" aria-label="add-csr-button" onClick={() => { asideContext.setExtraData(null); setAsideIsOpen(true) }}>Create New User</button>}
-                </div>
-            </div>
-            <div className="p-panel__content">
-                <div className="u-fixed-width">
-                    <table id="csr-table" aria-label="Certificate Requests Table" className="p-table--expanding">
-                        <thead>
-                            <tr>
-                                <th>ID</th>
-                                <th>Username</th>
-                                <th className="has-overflow">Actions</th>
-                            </tr>
-                        </thead>
-                        <tbody>
+        <Panel
+            stickyHeader
+            title="Users"
+            className="u-fixed-width"
+            controls={users.length > 0 &&
+                <Button appearance="positive" onClick={() => { asideContext.setExtraData(null); setAsideIsOpen(true) }}>Create New User</Button>
+            }
+        >
+            <div >
+                <MainTable
+                    headers={[{
+                        content: "ID"
+                    }, {
+                        content: "Username"
+                    }, {
+                        content: "Actions",
+                        className: "u-align--right has-overflow"
+                    }]}
+                    rows={users.map(user => ({
+                        columns: [
+                            {
+                                content: user.id.toString(),
+                            },
                             {
-                                rows.map((row) => (
-                                    <Row key={row.id} id={row.id} username={row.username} ActionMenuExpanded={actionsMenuExpanded} setActionMenuExpanded={setActionsMenuExpanded} />
-                                ))}
-                        </tbody>
-                    </table>
-                </div>
+                                content: user.username,
+                            },
+                            {
+                                content: (
+                                    <ContextualMenu
+                                        links={[{
+                                            children: "Delete User",
+                                            disabled: user.id === 1,
+                                            onClick: () => handleDelete(user.id.toString(), user.username)
+                                        }, {
+                                            children: "Change Password",
+                                            onClick: () => handleChangePassword(user.id.toString(), user.username)
+                                        }]}
+                                        hasToggleIcon
+                                        position="right"
+                                        style={{ height: "40px" }}
+                                    />
+                                ),
+                                className: "u-align--right",
+                                hasOverflow: true
+                            }
+                        ]
+                    }))}
+                />
             </div>
-        </div>
+            {confirmationModalData && (
+                <UsersConfirmationModal
+                    modalData={confirmationModalData}
+                    setModalData={setConfirmationModalData}
+                />
+            )}
+            {changePasswordModalData && (
+                <ChangePasswordModal
+                    modalData={changePasswordModalData}
+                    setModalData={setChangePasswordModalData}
+                />
+            )}
+        </Panel>
     )
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/utils.ts b/ui/src/app/utils.ts
index 9b128ee6..1333c4c7 100644
--- a/ui/src/app/utils.ts
+++ b/ui/src/app/utils.ts
@@ -150,6 +150,15 @@ export const extractCSR = (csrPemString: string) => {
     }
 }
 
+export const csrIsValid = (csrPemString: string) => {
+    try {
+        extractCSR(csrPemString.trim());
+        return true;
+    } catch (error) {
+        return false;
+    }
+}
+
 
 export const extractCert = (certPemString: string) => {
     if (certPemString === "" || certPemString === "rejected") {