diff --git a/ui/frontend/build_src/package-lock.json b/ui/frontend/build_src/package-lock.json
index 6cb2710c..fe4521eb 100644
--- a/ui/frontend/build_src/package-lock.json
+++ b/ui/frontend/build_src/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@tanstack/react-query": "^4.2.3",
         "@tanstack/react-query-devtools": "^4.2.3",
+        "@vanilla-extract/css": "^1.9.0",
+        "@vanilla-extract/vite-plugin": "^3.5.0",
         "immer": "^9.0.15",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -392,6 +394,17 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
+      "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.18.10",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
@@ -441,6 +454,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
     "node_modules/@esbuild/linux-loong64": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.7.tgz",
@@ -448,7 +466,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -617,6 +634,141 @@
       "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
       "dev": true
     },
+    "node_modules/@vanilla-extract/css": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/css/-/css-1.9.0.tgz",
+      "integrity": "sha512-YERVutWIpttfkEAynBUgdHKMcSPjMAtu5IFfDfEdXmeygilV12S5WUYMzjrqu0F/LZBtqrHG5fa2tiCiFpay+w==",
+      "dependencies": {
+        "@emotion/hash": "^0.8.0",
+        "@vanilla-extract/private": "^1.0.3",
+        "chalk": "^4.1.1",
+        "css-what": "^5.0.1",
+        "cssesc": "^3.0.0",
+        "csstype": "^3.0.7",
+        "deep-object-diff": "^1.1.0",
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "media-query-parser": "^2.0.2",
+        "outdent": "^0.8.0"
+      }
+    },
+    "node_modules/@vanilla-extract/css/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@vanilla-extract/css/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@vanilla-extract/css/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@vanilla-extract/css/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=="
+    },
+    "node_modules/@vanilla-extract/css/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@vanilla-extract/css/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@vanilla-extract/css/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@vanilla-extract/integration": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/integration/-/integration-5.0.1.tgz",
+      "integrity": "sha512-HRV/HvC/lihb9wT3x5s7pf5qLjqxSd9nBePJ10juOuMB5cl2ZClEcts076m9BuRKM3wRK2h7KuwkNsaUtjujxQ==",
+      "dependencies": {
+        "@vanilla-extract/css": "^1.7.2",
+        "esbuild": "^0.11.16",
+        "eval": "0.1.6",
+        "find-up": "^5.0.0",
+        "javascript-stringify": "^2.0.1",
+        "lodash": "^4.17.21",
+        "outdent": "^0.8.0"
+      }
+    },
+    "node_modules/@vanilla-extract/integration/node_modules/esbuild": {
+      "version": "0.11.23",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.11.23.tgz",
+      "integrity": "sha512-iaiZZ9vUF5wJV8ob1tl+5aJTrwDczlvGP0JoMmnpC2B0ppiMCu8n8gmy5ZTGl5bcG081XBVn+U+jP+mPFm5T5Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      }
+    },
+    "node_modules/@vanilla-extract/private": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/private/-/private-1.0.3.tgz",
+      "integrity": "sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ=="
+    },
+    "node_modules/@vanilla-extract/vite-plugin": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/vite-plugin/-/vite-plugin-3.5.0.tgz",
+      "integrity": "sha512-UMK2xUkfBclg8EAsR9V3mKQ44XjiyqpABZUBOJp3Vk8NDYHV8E/Ysn8xUB2WSJJnRLd4gqpHnivqRNRRfKV/gw==",
+      "dependencies": {
+        "@vanilla-extract/integration": "^5.0.0",
+        "outdent": "^0.8.0",
+        "postcss": "^8.3.6",
+        "postcss-load-config": "^3.1.0"
+      },
+      "peerDependencies": {
+        "vite": "^2.2.3"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-2.1.0.tgz",
@@ -732,11 +884,32 @@
         "safe-buffer": "~5.1.1"
       }
     },
+    "node_modules/css-what": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
+      "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
-      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==",
-      "dev": true
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -755,6 +928,19 @@
         }
       }
     },
+    "node_modules/deep-object-diff": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/deep-object-diff/-/deep-object-diff-1.1.7.tgz",
+      "integrity": "sha512-QkgBca0mL08P6HiOjoqvmm6xOAl2W6CT2+34Ljhg0OeFan8cwlcdq8jrLKsBBuUFAZLsN5b6y491KdKEoSo9lg=="
+    },
+    "node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.242",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.242.tgz",
@@ -765,7 +951,6 @@
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.7.tgz",
       "integrity": "sha512-7V8tzllIbAQV1M4QoE52ImKu8hT/NLGlGXkiDsbEU5PS6K8Mn09ZnYoS+dcmHxOS9CRsV4IRAMdT3I67IyUNXw==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -804,7 +989,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -820,7 +1004,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -836,7 +1019,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -852,7 +1034,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -868,7 +1049,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -884,7 +1064,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -900,7 +1079,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -916,7 +1094,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -932,7 +1109,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -948,7 +1124,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -964,7 +1139,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -980,7 +1154,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -996,7 +1169,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1012,7 +1184,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1028,7 +1199,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -1044,7 +1214,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -1060,7 +1229,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -1076,7 +1244,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1092,7 +1259,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1108,7 +1274,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1135,11 +1300,36 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/eval": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/eval/-/eval-0.1.6.tgz",
+      "integrity": "sha512-o0XUw+5OGkXw4pJZzQoXUk+H87DHuC+7ZE//oSrRGtatTmr12oTnLfg6QOq9DyTt0c/p4TwzgmkKrBzWTSizyQ==",
+      "dependencies": {
+        "require-like": ">= 0.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -1152,8 +1342,7 @@
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
@@ -1177,7 +1366,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -1207,7 +1395,6 @@
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
       "integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
-      "dev": true,
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -1215,6 +1402,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/javascript-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
+      "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -1244,6 +1436,33 @@
         "node": ">=6"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
+      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "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=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -1267,6 +1486,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/media-query-parser": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/media-query-parser/-/media-query-parser-2.0.2.tgz",
+      "integrity": "sha512-1N4qp+jE0pL5Xv4uEcwVUhIkwdUO3S/9gML90nqKA7v7FcOS5vUtatfzok9S9U1EJU8dHWlcv95WLnKmmxZI9w==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -1277,7 +1504,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
       "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-      "dev": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -1291,23 +1517,61 @@
       "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
       "dev": true
     },
+    "node_modules/outdent": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/outdent/-/outdent-0.8.0.tgz",
+      "integrity": "sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A=="
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/postcss": {
       "version": "8.4.16",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
       "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -1327,6 +1591,34 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/prettier": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
@@ -1374,16 +1666,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
     "node_modules/remove-accents": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
       "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
     },
+    "node_modules/require-like": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/require-like/-/require-like-0.1.2.tgz",
+      "integrity": "sha512-oyrU88skkMtDdauHDuKVrgR+zuItqr6/c//FXzvmxRGMexSDc6hNvJInGW3LL46n+8b50RykrvwSUIIQH2LQ5A==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
       "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.9.0",
         "path-parse": "^1.0.7",
@@ -1400,7 +1704,6 @@
       "version": "2.78.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz",
       "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==",
-      "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -1438,7 +1741,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1465,7 +1767,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -1541,7 +1842,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.0.tgz",
       "integrity": "sha512-YBg3dUicDpDWFCGttmvMbVyS9ydjntwEjwXRj2KBFwSB8SxmGcudo1yb8FW5+M/G86aS8x828ujnzUVdsLjs9g==",
-      "dev": true,
       "dependencies": {
         "esbuild": "^0.15.6",
         "postcss": "^8.4.16",
@@ -1578,6 +1878,25 @@
         }
       }
     },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/zustand": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.1.1.tgz",
@@ -1865,6 +2184,14 @@
         "@babel/helper-plugin-utils": "^7.18.6"
       }
     },
+    "@babel/runtime": {
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
+      "integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "@babel/template": {
       "version": "7.18.10",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
@@ -1905,11 +2232,15 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
     "@esbuild/linux-loong64": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.7.tgz",
       "integrity": "sha512-IKznSJOsVUuyt7cDzzSZyqBEcZe+7WlBqTVXiF1OXP/4Nm387ToaXZ0fyLwI1iBlI/bzpxVq411QE2/Bt2XWWw==",
-      "dev": true,
       "optional": true
     },
     "@jridgewell/gen-mapping": {
@@ -2026,6 +2357,111 @@
       "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
       "dev": true
     },
+    "@vanilla-extract/css": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/css/-/css-1.9.0.tgz",
+      "integrity": "sha512-YERVutWIpttfkEAynBUgdHKMcSPjMAtu5IFfDfEdXmeygilV12S5WUYMzjrqu0F/LZBtqrHG5fa2tiCiFpay+w==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@vanilla-extract/private": "^1.0.3",
+        "chalk": "^4.1.1",
+        "css-what": "^5.0.1",
+        "cssesc": "^3.0.0",
+        "csstype": "^3.0.7",
+        "deep-object-diff": "^1.1.0",
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "media-query-parser": "^2.0.2",
+        "outdent": "^0.8.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "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=="
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@vanilla-extract/integration": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/integration/-/integration-5.0.1.tgz",
+      "integrity": "sha512-HRV/HvC/lihb9wT3x5s7pf5qLjqxSd9nBePJ10juOuMB5cl2ZClEcts076m9BuRKM3wRK2h7KuwkNsaUtjujxQ==",
+      "requires": {
+        "@vanilla-extract/css": "^1.7.2",
+        "esbuild": "^0.11.16",
+        "eval": "0.1.6",
+        "find-up": "^5.0.0",
+        "javascript-stringify": "^2.0.1",
+        "lodash": "^4.17.21",
+        "outdent": "^0.8.0"
+      },
+      "dependencies": {
+        "esbuild": {
+          "version": "0.11.23",
+          "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.11.23.tgz",
+          "integrity": "sha512-iaiZZ9vUF5wJV8ob1tl+5aJTrwDczlvGP0JoMmnpC2B0ppiMCu8n8gmy5ZTGl5bcG081XBVn+U+jP+mPFm5T5Q=="
+        }
+      }
+    },
+    "@vanilla-extract/private": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/private/-/private-1.0.3.tgz",
+      "integrity": "sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ=="
+    },
+    "@vanilla-extract/vite-plugin": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/vite-plugin/-/vite-plugin-3.5.0.tgz",
+      "integrity": "sha512-UMK2xUkfBclg8EAsR9V3mKQ44XjiyqpABZUBOJp3Vk8NDYHV8E/Ysn8xUB2WSJJnRLd4gqpHnivqRNRRfKV/gw==",
+      "requires": {
+        "@vanilla-extract/integration": "^5.0.0",
+        "outdent": "^0.8.0",
+        "postcss": "^8.3.6",
+        "postcss-load-config": "^3.1.0"
+      }
+    },
     "@vitejs/plugin-react": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-2.1.0.tgz",
@@ -2103,11 +2539,20 @@
         "safe-buffer": "~5.1.1"
       }
     },
+    "css-what": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
+      "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw=="
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
+    },
     "csstype": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
-      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==",
-      "dev": true
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
     },
     "debug": {
       "version": "4.3.4",
@@ -2118,6 +2563,16 @@
         "ms": "2.1.2"
       }
     },
+    "deep-object-diff": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/deep-object-diff/-/deep-object-diff-1.1.7.tgz",
+      "integrity": "sha512-QkgBca0mL08P6HiOjoqvmm6xOAl2W6CT2+34Ljhg0OeFan8cwlcdq8jrLKsBBuUFAZLsN5b6y491KdKEoSo9lg=="
+    },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+    },
     "electron-to-chromium": {
       "version": "1.4.242",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.242.tgz",
@@ -2128,7 +2583,6 @@
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.7.tgz",
       "integrity": "sha512-7V8tzllIbAQV1M4QoE52ImKu8hT/NLGlGXkiDsbEU5PS6K8Mn09ZnYoS+dcmHxOS9CRsV4IRAMdT3I67IyUNXw==",
-      "dev": true,
       "requires": {
         "@esbuild/linux-loong64": "0.15.7",
         "esbuild-android-64": "0.15.7",
@@ -2157,140 +2611,120 @@
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.15.7.tgz",
       "integrity": "sha512-p7rCvdsldhxQr3YHxptf1Jcd86dlhvc3EQmQJaZzzuAxefO9PvcI0GLOa5nCWem1AJ8iMRu9w0r5TG8pHmbi9w==",
-      "dev": true,
       "optional": true
     },
     "esbuild-android-arm64": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.15.7.tgz",
       "integrity": "sha512-L775l9ynJT7rVqRM5vo+9w5g2ysbOCfsdLV4CWanTZ1k/9Jb3IYlQ06VCI1edhcosTYJRECQFJa3eAvkx72eyQ==",
-      "dev": true,
       "optional": true
     },
     "esbuild-darwin-64": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.7.tgz",
       "integrity": "sha512-KGPt3r1c9ww009t2xLB6Vk0YyNOXh7hbjZ3EecHoVDxgtbUlYstMPDaReimKe6eOEfyY4hBEEeTvKwPsiH5WZg==",
-      "dev": true,
       "optional": true
     },
     "esbuild-darwin-arm64": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.7.tgz",
       "integrity": "sha512-kBIHvtVqbSGajN88lYMnR3aIleH3ABZLLFLxwL2stiuIGAjGlQW741NxVTpUHQXUmPzxi6POqc9npkXa8AcSZQ==",
-      "dev": true,
       "optional": true
     },
     "esbuild-freebsd-64": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.7.tgz",
       "integrity": "sha512-hESZB91qDLV5MEwNxzMxPfbjAhOmtfsr9Wnuci7pY6TtEh4UDuevmGmkUIjX/b+e/k4tcNBMf7SRQ2mdNuK/HQ==",
-      "dev": true,
       "optional": true
     },
     "esbuild-freebsd-arm64": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.7.tgz",
       "integrity": "sha512-dLFR0ChH5t+b3J8w0fVKGvtwSLWCv7GYT2Y2jFGulF1L5HftQLzVGN+6pi1SivuiVSmTh28FwUhi9PwQicXI6Q==",
-      "dev": true,
       "optional": true
     },
     "esbuild-linux-32": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.15.7.tgz",
       "integrity": "sha512-v3gT/LsONGUZcjbt2swrMjwxo32NJzk+7sAgtxhGx1+ZmOFaTRXBAi1PPfgpeo/J//Un2jIKm/I+qqeo4caJvg==",
-      "dev": true,
       "optional": true
     },
     "esbuild-linux-64": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.7.tgz",
       "integrity": "sha512-LxXEfLAKwOVmm1yecpMmWERBshl+Kv5YJ/1KnyAr6HRHFW8cxOEsEfisD3sVl/RvHyW//lhYUVSuy9jGEfIRAQ==",
-      "dev": true,
       "optional": true
     },
     "esbuild-linux-arm": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.15.7.tgz",
       "integrity": "sha512-JKgAHtMR5f75wJTeuNQbyznZZa+pjiUHV7sRZp42UNdyXC6TiUYMW/8z8yIBAr2Fpad8hM1royZKQisqPABPvQ==",
-      "dev": true,
       "optional": true
     },
     "esbuild-linux-arm64": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.7.tgz",
       "integrity": "sha512-P3cfhudpzWDkglutWgXcT2S7Ft7o2e3YDMrP1n0z2dlbUZghUkKCyaWw0zhp4KxEEzt/E7lmrtRu/pGWnwb9vw==",
-      "dev": true,
       "optional": true
     },
     "esbuild-linux-mips64le": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.7.tgz",
       "integrity": "sha512-T7XKuxl0VpeFLCJXub6U+iybiqh0kM/bWOTb4qcPyDDwNVhLUiPcGdG2/0S7F93czUZOKP57YiLV8YQewgLHKw==",
-      "dev": true,
       "optional": true
     },
     "esbuild-linux-ppc64le": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.7.tgz",
       "integrity": "sha512-6mGuC19WpFN7NYbecMIJjeQgvDb5aMuvyk0PDYBJrqAEMkTwg3Z98kEKuCm6THHRnrgsdr7bp4SruSAxEM4eJw==",
-      "dev": true,
       "optional": true
     },
     "esbuild-linux-riscv64": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.7.tgz",
       "integrity": "sha512-uUJsezbswAYo/X7OU/P+PuL/EI9WzxsEQXDekfwpQ23uGiooxqoLFAPmXPcRAt941vjlY9jtITEEikWMBr+F/g==",
-      "dev": true,
       "optional": true
     },
     "esbuild-linux-s390x": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.7.tgz",
       "integrity": "sha512-+tO+xOyTNMc34rXlSxK7aCwJgvQyffqEM5MMdNDEeMU3ss0S6wKvbBOQfgd5jRPblfwJ6b+bKiz0g5nABpY0QQ==",
-      "dev": true,
       "optional": true
     },
     "esbuild-netbsd-64": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.7.tgz",
       "integrity": "sha512-yVc4Wz+Pu3cP5hzm5kIygNPrjar/v5WCSoRmIjCPWfBVJkZNb5brEGKUlf+0Y759D48BCWa0WHrWXaNy0DULTQ==",
-      "dev": true,
       "optional": true
     },
     "esbuild-openbsd-64": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.7.tgz",
       "integrity": "sha512-GsimbwC4FSR4lN3wf8XmTQ+r8/0YSQo21rWDL0XFFhLHKlzEA4SsT1Tl8bPYu00IU6UWSJ+b3fG/8SB69rcuEQ==",
-      "dev": true,
       "optional": true
     },
     "esbuild-sunos-64": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.15.7.tgz",
       "integrity": "sha512-8CDI1aL/ts0mDGbWzjEOGKXnU7p3rDzggHSBtVryQzkSOsjCHRVe0iFYUuhczlxU1R3LN/E7HgUO4NXzGGP/Ag==",
-      "dev": true,
       "optional": true
     },
     "esbuild-windows-32": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.15.7.tgz",
       "integrity": "sha512-cOnKXUEPS8EGCzRSFa1x6NQjGhGsFlVgjhqGEbLTPsA7x4RRYiy2RKoArNUU4iR2vHmzqS5Gr84MEumO/wxYKA==",
-      "dev": true,
       "optional": true
     },
     "esbuild-windows-64": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.7.tgz",
       "integrity": "sha512-7MI08Ec2sTIDv+zH6StNBKO+2hGUYIT42GmFyW6MBBWWtJhTcQLinKS6ldIN1d52MXIbiJ6nXyCJ+LpL4jBm3Q==",
-      "dev": true,
       "optional": true
     },
     "esbuild-windows-arm64": {
       "version": "0.15.7",
       "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.7.tgz",
       "integrity": "sha512-R06nmqBlWjKHddhRJYlqDd3Fabx9LFdKcjoOy08YLimwmsswlFBJV4rXzZCxz/b7ZJXvrZgj8DDv1ewE9+StMw==",
-      "dev": true,
       "optional": true
     },
     "escalade": {
@@ -2305,18 +2739,33 @@
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
       "dev": true
     },
+    "eval": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/eval/-/eval-0.1.6.tgz",
+      "integrity": "sha512-o0XUw+5OGkXw4pJZzQoXUk+H87DHuC+7ZE//oSrRGtatTmr12oTnLfg6QOq9DyTt0c/p4TwzgmkKrBzWTSizyQ==",
+      "requires": {
+        "require-like": ">= 0.1.1"
+      }
+    },
+    "find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "requires": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "optional": true
     },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "gensync": {
       "version": "1.0.0-beta.2",
@@ -2334,7 +2783,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -2354,11 +2802,15 @@
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
       "integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
-      "dev": true,
       "requires": {
         "has": "^1.0.3"
       }
     },
+    "javascript-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
+      "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2376,6 +2828,24 @@
       "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
       "dev": true
     },
+    "lilconfig": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
+      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg=="
+    },
+    "locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "requires": {
+        "p-locate": "^5.0.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -2393,6 +2863,14 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "media-query-parser": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/media-query-parser/-/media-query-parser-2.0.2.tgz",
+      "integrity": "sha512-1N4qp+jE0pL5Xv4uEcwVUhIkwdUO3S/9gML90nqKA7v7FcOS5vUtatfzok9S9U1EJU8dHWlcv95WLnKmmxZI9w==",
+      "requires": {
+        "@babel/runtime": "^7.12.5"
+      }
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -2402,8 +2880,7 @@
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-      "dev": true
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
     },
     "node-releases": {
       "version": "2.0.6",
@@ -2411,29 +2888,61 @@
       "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
       "dev": true
     },
+    "outdent": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/outdent/-/outdent-0.8.0.tgz",
+      "integrity": "sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A=="
+    },
+    "p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "requires": {
+        "yocto-queue": "^0.1.0"
+      }
+    },
+    "p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "requires": {
+        "p-limit": "^3.0.2"
+      }
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+    },
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "postcss": {
       "version": "8.4.16",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
       "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
-      "dev": true,
       "requires": {
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       }
     },
+    "postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "requires": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      }
+    },
     "prettier": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
@@ -2463,16 +2972,25 @@
       "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
       "dev": true
     },
+    "regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
     "remove-accents": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
       "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
     },
+    "require-like": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/require-like/-/require-like-0.1.2.tgz",
+      "integrity": "sha512-oyrU88skkMtDdauHDuKVrgR+zuItqr6/c//FXzvmxRGMexSDc6hNvJInGW3LL46n+8b50RykrvwSUIIQH2LQ5A=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
       "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
-      "dev": true,
       "requires": {
         "is-core-module": "^2.9.0",
         "path-parse": "^1.0.7",
@@ -2483,7 +3001,6 @@
       "version": "2.78.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz",
       "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==",
-      "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
       }
@@ -2511,8 +3028,7 @@
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
     "sourcemap-codec": {
       "version": "1.4.8",
@@ -2532,8 +3048,7 @@
     "supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
     "to-fast-properties": {
       "version": "2.0.0",
@@ -2572,7 +3087,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.0.tgz",
       "integrity": "sha512-YBg3dUicDpDWFCGttmvMbVyS9ydjntwEjwXRj2KBFwSB8SxmGcudo1yb8FW5+M/G86aS8x828ujnzUVdsLjs9g==",
-      "dev": true,
       "requires": {
         "esbuild": "^0.15.6",
         "fsevents": "~2.3.2",
@@ -2581,6 +3095,16 @@
         "rollup": "~2.78.0"
       }
     },
+    "yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
+    },
+    "yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
     "zustand": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.1.1.tgz",
diff --git a/ui/frontend/build_src/package.json b/ui/frontend/build_src/package.json
index bfaf173b..941c3690 100644
--- a/ui/frontend/build_src/package.json
+++ b/ui/frontend/build_src/package.json
@@ -12,6 +12,8 @@
   "dependencies": {
     "@tanstack/react-query": "^4.2.3",
     "@tanstack/react-query-devtools": "^4.2.3",
+    "@vanilla-extract/css": "^1.9.0",
+    "@vanilla-extract/vite-plugin": "^3.5.0",
     "immer": "^9.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -26,5 +28,10 @@
     "prettier": "^2.7.1",
     "typescript": "^4.6.4",
     "vite": "^3.0.7"
+  },
+  "overrides": {
+    "@vanilla-extract/vite-plugin": {
+      "vite": "^3"
+    }
   }
 }
diff --git a/ui/frontend/build_src/src/App.css b/ui/frontend/build_src/src/App.css
deleted file mode 100644
index 4377ca6e..00000000
--- a/ui/frontend/build_src/src/App.css
+++ /dev/null
@@ -1,62 +0,0 @@
-.App {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  pointer-events: auto;
-  display: grid;
-  background-color: rgb(32, 33, 36);
-  grid-template-columns: 360px 1fr;
-  grid-template-rows: 100px 1fr 300px;
-  grid-template-areas:
-    "header header header"
-    "create display display"
-    "footer footer footer";
-}
-
-/* Very basic mobile stacked UI*/
-@media screen and (max-width: 768px) {
-  .App {
-    grid-template-columns: 1fr;
-    grid-template-rows: 100px 1fr 1fr 300px;
-    grid-template-areas:
-      "header"
-      "create"
-      "display"
-      "footer";
-  }
-}
-
-.header-layout {
-  grid-area: header;
-}
-
-.create-layout {
-  grid-area: create;
-}
-
-.display-layout {
-  grid-area: display;
-}
-
-.footer-layout {
-  grid-area: footer;
-}
-
-/* Copypasta from Bootstrap, makes content visually hidden but still accessible for screenreaders */
-.visually-hidden,
-.visually-hidden-focusable:not(:focus):not(:focus-within) {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-}
-
-/* TODO proper utility classes */
-.mb-4 {
-  margin-bottom: 1rem;
-}
diff --git a/ui/frontend/build_src/src/components/creationPanel/modierTag/index.tsx b/ui/frontend/build_src/src/components/atoms/modifierTag/index.tsx
similarity index 100%
rename from ui/frontend/build_src/src/components/creationPanel/modierTag/index.tsx
rename to ui/frontend/build_src/src/components/atoms/modifierTag/index.tsx
diff --git a/ui/frontend/build_src/src/components/creationPanel/advancedSettings/advancedSettings.css b/ui/frontend/build_src/src/components/creationPanel/advancedSettings/advancedSettings.css
deleted file mode 100644
index 90fbac25..00000000
--- a/ui/frontend/build_src/src/components/creationPanel/advancedSettings/advancedSettings.css
+++ /dev/null
@@ -1,3 +0,0 @@
-input[size="4"] {
-  width: 4.5rem;
-}
diff --git a/ui/frontend/build_src/src/components/creationPanel/index.tsx b/ui/frontend/build_src/src/components/creationPanel/index.tsx
deleted file mode 100644
index 28224b8d..00000000
--- a/ui/frontend/build_src/src/components/creationPanel/index.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { ChangeEvent } from "react";
-
-import MakeButton from "./makeButton";
-import AdvancedSettings from "./advancedSettings";
-import ImageModifiers from "./imageModifiers";
-
-import ModifierTag from "./modierTag";
-
-import { useImageCreate } from "../../store/imageCreateStore";
-
-import "./creationPanel.css";
-
-export default function CreationPanel() {
-  const promptText = useImageCreate((state) =>
-    state.getValueForRequestKey("prompt")
-  );
-  const init_image = useImageCreate((state) =>
-    state.getValueForRequestKey("init_image")
-  );
-  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
-  const selectedtags = useImageCreate((state) => state.selectedTags());
-
-  const handlePromptChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    setRequestOption("prompt", event.target.value);
-  };
-
-  const _handleFileSelect = (event: ChangeEvent<HTMLInputElement>) => {
-    //@ts-ignore
-    const file = event.target.files[0];
-
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        if (e.target) {
-          setRequestOption("init_image", e.target.result);
-        }
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const _handleClearImage = () => {
-    setRequestOption("init_image", undefined);
-  };
-
-  return (
-    <div className="create-panel">
-      <div className="basic-create">
-        <div className="prompt">
-          <p>Prompt </p>
-          <textarea value={promptText} onChange={handlePromptChange}></textarea>
-        </div>
-
-        <div id="editor-inputs-init-image" className="row">
-          <label>
-            <b>Initial Image:</b> (optional){" "}
-          </label>
-          <input
-            id="init_image"
-            name="init_image"
-            type="file"
-            onChange={_handleFileSelect}
-          />
-          <br />
-          {init_image && (
-          <div id="init_image_preview" className="image_preview">
-              <img
-                id="init_image_preview"
-                src={init_image}
-                width="100"
-                height="100"
-              />
-
-            <button id="init_image_clear" className="image_clear_btn" onClick={_handleClearImage}>
-              X
-            </button>
-         
-          </div>
-          )}
-        </div>
-
-        <MakeButton></MakeButton>
-        <div className="selected-tags">
-          <p>Active Tags</p>
-          <ul>
-            {selectedtags.map((tag) => (
-              <li key={tag}>
-                <ModifierTag name={tag}></ModifierTag>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-
-      <div className="advanced-create">
-        <AdvancedSettings></AdvancedSettings>
-        <ImageModifiers></ImageModifiers>
-      </div>
-    </div>
-  );
-}
diff --git a/ui/frontend/build_src/src/App.tsx b/ui/frontend/build_src/src/components/layouts/App.tsx
similarity index 54%
rename from ui/frontend/build_src/src/App.tsx
rename to ui/frontend/build_src/src/components/layouts/App.tsx
index 7f9def7a..f13ac47a 100644
--- a/ui/frontend/build_src/src/App.tsx
+++ b/ui/frontend/build_src/src/components/layouts/App.tsx
@@ -1,15 +1,23 @@
 import React, { useEffect, useState } from "react";
-import "./App.css";
+
+import { 
+  AppLayout,
+  HeaderLayout,
+  CreateLayout,
+  DisplayLayout,
+  FooterLayout
+} // @ts-ignore
+from './app.css.ts';
 
 import { useQuery } from "@tanstack/react-query";
-import { getSaveDirectory } from "./api";
-import { useImageCreate } from "./store/imageCreateStore";
+import { getSaveDirectory } from "../../api";
+import { useImageCreate } from "../../store/imageCreateStore";
 
 // Todo - import components here
-import HeaderDisplay from "./components/headerDisplay";
-import CreationPanel from "./components/creationPanel";
-import DisplayPanel from "./components/displayPanel";
-import FooterDisplay from "./components/footerDisplay";
+import HeaderDisplay from "../organisms/headerDisplay";
+import CreationPanel from "../organisms/creationPanel";
+import DisplayPanel from "../organisms/displayPanel";
+import FooterDisplay from "../organisms/footerDisplay";
 
 function App() {
   // Get the original save directory
@@ -22,17 +30,17 @@ function App() {
   }, [setRequestOption, status, data]);
 
   return (
-    <div className="App">
-      <header className="header-layout">
+    <div className={AppLayout}>
+      <header className={HeaderLayout}>
         <HeaderDisplay></HeaderDisplay>
       </header>
-      <nav className="create-layout">
+      <nav className={CreateLayout}>
         <CreationPanel></CreationPanel>
       </nav>
-      <main className="display-layout">
+      <main className={DisplayLayout}>
         <DisplayPanel></DisplayPanel>
       </main>
-      <footer className="footer-layout">
+      <footer className={FooterLayout}>
         <FooterDisplay></FooterDisplay>
       </footer>
     </div>
diff --git a/ui/frontend/build_src/src/components/layouts/app.css.ts b/ui/frontend/build_src/src/components/layouts/app.css.ts
new file mode 100644
index 00000000..e2076867
--- /dev/null
+++ b/ui/frontend/build_src/src/components/layouts/app.css.ts
@@ -0,0 +1,48 @@
+import { style } from '@vanilla-extract/css';
+
+export const AppLayout = style({
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  pointerEvents: 'auto',
+  display: 'grid',
+  backgroundColor: 'rgb(32, 33, 36)',
+  gridTemplateColumns: '400px 1fr',
+  gridTemplateRows: '100px 1fr 50px',
+  gridTemplateAreas: `
+    "header header header"
+    "create display display"
+    "create footer footer"
+  `,
+
+  '@media': {
+    'screen and (max-width: 800px)': {
+      gridTemplateColumns: '1fr',
+      gridTemplateRows: '100px 1fr 1fr 50px',
+      gridTemplateAreas: `
+        "header"
+        "create"
+        "display"
+        "footer"
+      `,
+    },
+  },
+});
+
+export const HeaderLayout = style({
+  gridArea: 'header',
+});
+
+export const CreateLayout = style({ 
+  gridArea: 'create',
+  overflow: 'auto',
+});
+
+export const DisplayLayout = style({
+  gridArea: 'display',
+  overflow: 'auto',
+});
+
+export const FooterLayout = style({
+  gridArea: 'footer',
+});
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/creationPanel/advancedSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
similarity index 99%
rename from ui/frontend/build_src/src/components/creationPanel/advancedSettings/index.tsx
rename to ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
index 5aff1014..9b1aa5a0 100644
--- a/ui/frontend/build_src/src/components/creationPanel/advancedSettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
-import { useImageCreate } from "../../../store/imageCreateStore";
-import "./advancedSettings.css";
+import { useImageCreate } from "../../../../store/imageCreateStore";
+// import "./advancedSettings.css";
 
 // todo: move this someplace more global
 const IMAGE_DIMENSIONS = [
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/activeTags/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/activeTags/index.tsx
new file mode 100644
index 00000000..85c26de5
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/activeTags/index.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+import { useImageCreate } from "../../../../../store/imageCreateStore";
+import ModifierTag from "../../../../atoms/modifierTag";
+
+export default function ActiveTags() {
+  const selectedtags = useImageCreate((state) => state.selectedTags());
+  return (
+    <div className="selected-tags">
+    <p>Active Tags</p>
+    <ul>
+      {selectedtags.map((tag) => (
+        <li key={tag}>
+          <ModifierTag name={tag}></ModifierTag>
+        </li>
+      ))}
+    </ul>
+  </div>
+  );
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/basicCreation.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/basicCreation.css.ts
new file mode 100644
index 00000000..b52c2be2
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/basicCreation.css.ts
@@ -0,0 +1,28 @@
+import { style, globalStyle } from '@vanilla-extract/css';
+
+export const CreationBasicMain = style({
+  position: 'relative',
+  width: '100%',
+});
+
+globalStyle(`${CreationBasicMain} > *`, {
+  marginBottom: '10px'
+});
+
+export const PromptDisplay = style({
+});
+
+globalStyle(`${PromptDisplay} > p`, {
+  fontSize: '1.5em',
+  fontWeight: 'bold',
+  marginBottom: '10px'
+});
+
+globalStyle(`${PromptDisplay} > textarea`, {
+  fontSize: '1.2em',
+  fontWeight: 'bold',
+  fontFamily: 'Arial',
+  width: '100%',
+  resize:'vertical',
+  height: '100px',
+});
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx
new file mode 100644
index 00000000..f8b7b70e
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx
@@ -0,0 +1,43 @@
+
+import React, {ChangeEvent} from "react";
+import { useImageCreate } from "../../../../store/imageCreateStore";
+
+
+
+import {
+  CreationBasicMain,
+  PromptDisplay,
+} // @ts-ignore 
+from "./basicCreation.css.ts";
+
+import SeedImage from "./seedImage";
+import ActiveTags from "./activeTags";
+import MakeButton from "./makeButton";
+
+export default function BasicCreation() {
+
+  const promptText = useImageCreate((state) =>
+    state.getValueForRequestKey("prompt")
+  );
+  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
+  const handlePromptChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setRequestOption("prompt", event.target.value);
+  };
+
+  return (
+    <div className={CreationBasicMain}>
+      
+    <div className={PromptDisplay}>
+      <p>Prompt </p>
+      <textarea value={promptText} onChange={handlePromptChange}></textarea>
+    </div>
+
+    <SeedImage></SeedImage>
+
+    <ActiveTags></ActiveTags>
+
+    <MakeButton></MakeButton>
+  </div>
+  )
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/creationPanel/makeButton/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx
similarity index 85%
rename from ui/frontend/build_src/src/components/creationPanel/makeButton/index.tsx
rename to ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx
index dfab85ef..d74debea 100644
--- a/ui/frontend/build_src/src/components/creationPanel/makeButton/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx
@@ -1,10 +1,16 @@
 import React, { useEffect, useState } from "react";
 
-import { useImageCreate } from "../../../store/imageCreateStore";
-import { useImageQueue } from "../../../store/imageQueueStore";
+import { useImageCreate } from "../../../../../store/imageCreateStore";
+import { useImageQueue } from "../../../../../store/imageQueueStore";
 import { v4 as uuidv4 } from "uuid";
 
-import { useRandomSeed } from "../../../utils";
+import { useRandomSeed } from "../../../../../utils";
+
+import { 
+  MakeButtonStyle 
+} from // @ts-ignore
+"./makeButton.css.ts";
+
 
 export default function MakeButton() {
   const parallelCount = useImageCreate((state) => state.parallelCount);
@@ -68,5 +74,5 @@ export default function MakeButton() {
 
   };
 
-  return <button onClick={makeImages}>Make</button>;
+  return <button className={MakeButtonStyle} onClick={makeImages}>Make</button>;
 }
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts
new file mode 100644
index 00000000..28f04382
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts
@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+
+export const MakeButtonStyle = style({
+  width: '100%',
+  backgroundColor: 'rgb(38, 77, 141)',
+  fontSize: '1.5em',
+  fontWeight: 'bold',
+  color: 'white',
+  padding:'8px',
+  borderRadius: '5px',
+});
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx
new file mode 100644
index 00000000..ec06d432
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx
@@ -0,0 +1,87 @@
+import React , {useRef, ChangeEvent} from "react";
+
+import { 
+  ImageInputDisplay, 
+  InputLabel,
+  ImageInput,
+  ImageInputButton,
+  ImageFixer, 
+  XButton
+} from // @ts-ignore
+"./seedImage.css.ts";
+import { useImageCreate } from "../../../../../store/imageCreateStore";
+
+
+// TODO : figure out why this needs props to be passed in.. fixes a type error
+// when the component is used in the parent component
+export default function SeedImage(_props:any) {
+
+  const imageInputRef = useRef<HTMLInputElement>(null);
+
+  const init_image = useImageCreate((state) =>
+    state.getValueForRequestKey("init_image")
+  );
+  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
+  const _startFileSelect = () => {
+    imageInputRef.current?.click();
+  }
+  const _handleFileSelect = (event: ChangeEvent<HTMLInputElement>) => {
+    //@ts-ignore
+    const file = event.target.files[0];
+
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        if (e.target) {
+          setRequestOption("init_image", e.target.result);
+        }
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+
+  const _handleClearImage = () => {
+    setRequestOption("init_image", undefined);
+  };
+
+  return (
+    <div className={ImageInputDisplay}>
+
+      <div>
+        <label className={InputLabel}>
+          <b>Initial Image:</b> (optional)
+        </label>
+        <input
+          ref={imageInputRef}
+          className={ImageInput}
+          name="init_image"
+          type="file"
+          onChange={_handleFileSelect}
+        />
+          <button className={ImageInputButton} onClick={_startFileSelect}>
+            Select File
+          </button>
+      </div>
+
+      <div className={ImageFixer}>
+        {init_image && (
+          <>
+            <img
+              src={init_image}
+              width="100"
+              height="100"
+            />
+
+          <button className={XButton} onClick={_handleClearImage}>
+            X
+          </button>
+        </>
+        )}
+      </div>
+
+
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts
new file mode 100644
index 00000000..d9b30b1f
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts
@@ -0,0 +1,48 @@
+import { style } from '@vanilla-extract/css';
+
+export const ImageInputDisplay = style({
+  display: 'flex',
+  // justifyContent:'space-around',
+});
+
+export const InputLabel = style({
+  marginBottom: '5px',
+  display:'block'
+
+});
+
+export const ImageInput = style({
+  display:'none',
+});
+
+export const ImageInputButton = style({
+  backgroundColor: 'rgb(38, 77, 141)',
+  fontSize: '1.2em',
+  fontWeight: 'bold',
+  color: 'white',
+  padding:'8px',
+  borderRadius: '5px',
+});
+
+// this is needed to fix an issue with the image input text
+// when that is a drag an drop we can remove this
+export const ImageFixer = style({
+  marginLeft: '20px',
+});
+
+export const XButton = style({
+  position: 'absolute',
+  transform: 'translateX(-50%) translateY(-35%)',
+  background: 'black',
+  color: 'white',
+  border: '2pt solid #ccc',
+  padding: '0',
+  cursor: 'pointer',
+  outline: 'inherit',
+  borderRadius: '8pt',
+  width: '16pt',
+  height: '16pt',
+  fontFamily: 'Verdana',
+  fontSize: '8pt',
+});
+
diff --git a/ui/frontend/build_src/src/components/creationPanel/creationPanel.css b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css
similarity index 100%
rename from ui/frontend/build_src/src/components/creationPanel/creationPanel.css
rename to ui/frontend/build_src/src/components/organisms/creationPanel/creationPanel.css
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts
new file mode 100644
index 00000000..c61f5f1c
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts
@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const CreationPaneMain = style({
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  padding:'0 10px', 
+});
diff --git a/ui/frontend/build_src/src/components/creationPanel/imageModifiers/imageModifiers.css b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css
similarity index 100%
rename from ui/frontend/build_src/src/components/creationPanel/imageModifiers/imageModifiers.css
rename to ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css
diff --git a/ui/frontend/build_src/src/components/creationPanel/imageModifiers/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx
similarity index 92%
rename from ui/frontend/build_src/src/components/creationPanel/imageModifiers/index.tsx
rename to ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx
index 39a8b0f2..46a1f1bc 100644
--- a/ui/frontend/build_src/src/components/creationPanel/imageModifiers/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 
 import { useQuery } from "@tanstack/react-query";
-import { loadModifications } from "../../../api";
+import { loadModifications } from "../../../../api";
 
-import { useImageCreate } from "../../../store/imageCreateStore";
+import { useImageCreate } from "../../../../store/imageCreateStore";
 
-import ModifierTag from "../modierTag";
+import ModifierTag from "../../../atoms/modifierTag";
 
 type ModifierListProps = {
   tags: string[];
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx
new file mode 100644
index 00000000..604a140b
--- /dev/null
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/index.tsx
@@ -0,0 +1,27 @@
+import React, { ChangeEvent } from "react";
+
+import MakeButton from "./basicCreation/makeButton";
+import AdvancedSettings from "./advancedSettings";
+import ImageModifiers from "./imageModifiers";
+
+import "./creationPanel.css";
+
+// @ts-ignore
+import { CreationPaneMain } from "./creationpane.css.ts";
+
+import BasicCreation from "./basicCreation";
+
+export default function CreationPanel() {
+  
+  return (
+    <div className={CreationPaneMain}>
+
+      <BasicCreation></BasicCreation>
+
+      <div className="advanced-create">
+        <AdvancedSettings></AdvancedSettings>
+        <ImageModifiers></ImageModifiers>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/displayPanel/audioDing/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/audioDing/index.tsx
similarity index 86%
rename from ui/frontend/build_src/src/components/displayPanel/audioDing/index.tsx
rename to ui/frontend/build_src/src/components/organisms/displayPanel/audioDing/index.tsx
index 5be0f13d..13e69dff 100644
--- a/ui/frontend/build_src/src/components/displayPanel/audioDing/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/displayPanel/audioDing/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { API_URL } from "../../../api";
+import { API_URL } from "../../../../api";
 
 const url = `${API_URL}/ding.mp3`;
 
diff --git a/ui/frontend/build_src/src/components/displayPanel/completedImages/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx
similarity index 100%
rename from ui/frontend/build_src/src/components/displayPanel/completedImages/index.tsx
rename to ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx
diff --git a/ui/frontend/build_src/src/components/displayPanel/displayPanel.css b/ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css
similarity index 100%
rename from ui/frontend/build_src/src/components/displayPanel/displayPanel.css
rename to ui/frontend/build_src/src/components/organisms/displayPanel/displayPanel.css
diff --git a/ui/frontend/build_src/src/components/displayPanel/generatedImage/generatedImage.css b/ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/generatedImage.css
similarity index 100%
rename from ui/frontend/build_src/src/components/displayPanel/generatedImage/generatedImage.css
rename to ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/generatedImage.css
diff --git a/ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/index.tsx
similarity index 96%
rename from ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx
rename to ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/index.tsx
index 8bc555e6..cbca2736 100644
--- a/ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/displayPanel/generatedImage/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 
-import { ImageRequest, useImageCreate } from "../../../store/imageCreateStore";
+import { ImageRequest, useImageCreate } from "../../../../store/imageCreateStore";
 
 import "./generatedImage.css";
 
diff --git a/ui/frontend/build_src/src/components/displayPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
similarity index 94%
rename from ui/frontend/build_src/src/components/displayPanel/index.tsx
rename to ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
index 1f439c23..c0c033ff 100644
--- a/ui/frontend/build_src/src/components/displayPanel/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState, useRef } from "react";
-import { useImageQueue } from "../../store/imageQueueStore";
+import { useImageQueue } from "../../../store/imageQueueStore";
 
-import { ImageRequest, useImageCreate } from "../../store/imageCreateStore";
+import { ImageRequest, useImageCreate } from "../../../store/imageCreateStore";
 
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 
-import { doMakeImage, MakeImageKey } from "../../api";
+import { doMakeImage, MakeImageKey } from "../../../api";
 
 import AudioDing from "./audioDing";
 
diff --git a/ui/frontend/build_src/src/components/footerDisplay/footerDisplay.css b/ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css
similarity index 100%
rename from ui/frontend/build_src/src/components/footerDisplay/footerDisplay.css
rename to ui/frontend/build_src/src/components/organisms/footerDisplay/footerDisplay.css
diff --git a/ui/frontend/build_src/src/components/footerDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx
similarity index 100%
rename from ui/frontend/build_src/src/components/footerDisplay/index.tsx
rename to ui/frontend/build_src/src/components/organisms/footerDisplay/index.tsx
diff --git a/ui/frontend/build_src/src/components/headerDisplay/headerDisplay.css b/ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css
similarity index 100%
rename from ui/frontend/build_src/src/components/headerDisplay/headerDisplay.css
rename to ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css
diff --git a/ui/frontend/build_src/src/components/headerDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx
similarity index 100%
rename from ui/frontend/build_src/src/components/headerDisplay/index.tsx
rename to ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx
diff --git a/ui/frontend/build_src/src/components/headerDisplay/statusDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/index.tsx
similarity index 95%
rename from ui/frontend/build_src/src/components/headerDisplay/statusDisplay/index.tsx
rename to ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/index.tsx
index 1d0c61e3..67e01e08 100644
--- a/ui/frontend/build_src/src/components/headerDisplay/statusDisplay/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 
-import { healthPing, HEALTH_PING_INTERVAL } from "../../../api";
+import { healthPing, HEALTH_PING_INTERVAL } from "../../../../api";
 
 const startingMessage = "Stable Diffusion is starting...";
 const successMessage = "Stable Diffusion is ready to use!";
diff --git a/ui/frontend/build_src/src/components/headerDisplay/statusDisplay/statusDisplay.css b/ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css
similarity index 100%
rename from ui/frontend/build_src/src/components/headerDisplay/statusDisplay/statusDisplay.css
rename to ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/statusDisplay.css
diff --git a/ui/frontend/build_src/src/index.css b/ui/frontend/build_src/src/index.css
deleted file mode 100644
index 1f6b445d..00000000
--- a/ui/frontend/build_src/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-#root {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/ui/frontend/build_src/src/main.tsx b/ui/frontend/build_src/src/main.tsx
index 5a0ba893..59e64a17 100644
--- a/ui/frontend/build_src/src/main.tsx
+++ b/ui/frontend/build_src/src/main.tsx
@@ -6,8 +6,9 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import { enableMapSet } from "immer";
-import App from "./App";
-import "./index.css";
+import App from "./components/layouts/App";
+
+import './styles.css.ts';
 
 const queryClient = new QueryClient({
   defaultOptions: {
diff --git a/ui/frontend/build_src/src/styles.css.ts b/ui/frontend/build_src/src/styles.css.ts
new file mode 100644
index 00000000..e33ea76a
--- /dev/null
+++ b/ui/frontend/build_src/src/styles.css.ts
@@ -0,0 +1,32 @@
+
+import { globalStyle } from '@vanilla-extract/css';
+
+globalStyle('body', {
+  margin: 0,
+  minWidth: '320px',
+  minHeight: '100vh',
+});
+
+globalStyle('#root', {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100vw',
+  height: '100vh',
+  overflow: 'hidden',
+});
+
+
+globalStyle(`*`, {
+  boxSizing: 'border-box',
+});
+
+globalStyle(`p`, {
+  margin: 0,
+});
+
+globalStyle(`textarea`, {
+  margin: 0,
+  padding: 0,
+  border: 'none',
+});
\ No newline at end of file
diff --git a/ui/frontend/build_src/vite.config.ts b/ui/frontend/build_src/vite.config.ts
index 6a735829..3625a80f 100644
--- a/ui/frontend/build_src/vite.config.ts
+++ b/ui/frontend/build_src/vite.config.ts
@@ -1,12 +1,20 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    vanillaExtractPlugin({
+      // configuration
+    })
+  ],
   server: {
     port: 9001,
   },
+ 
   build: {
     // make sure everythign is in the same directory
     outDir: "../dist",
@@ -18,6 +26,7 @@ export default defineConfig({
         chunkFileNames: `[name].js`,
         assetFileNames: `[name].[ext]`,
       },
+      
     },
   },
 });