diff --git a/packages/hoppscotch-sh-admin/assets/icons/auth/email.svg b/packages/hoppscotch-sh-admin/assets/icons/auth/email.svg
new file mode 100644
index 000000000..ac21b3d07
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/assets/icons/auth/email.svg
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-label="Email"
+  role="img"
+  viewBox="0 0 512 512"
+>
+  <rect width="512" height="512" rx="15%" fill="teal" />
+  <rect width="356" height="256" x="78" y="128" fill="#fff" rx="8%" />
+  <path
+    fill="none"
+    stroke="teal"
+    stroke-width="20"
+    d="M434 128L269 292c-7 8-19 8-26 0L78 128m0 256l129-128m227 128L305 256"
+  />
+</svg>
diff --git a/packages/hoppscotch-sh-admin/assets/icons/auth/github.svg b/packages/hoppscotch-sh-admin/assets/icons/auth/github.svg
new file mode 100644
index 000000000..a4a47b020
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/assets/icons/auth/github.svg
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-label="GitHub"
+  role="img"
+  viewBox="0 0 512 512"
+>
+  <rect width="512" height="512" rx="15%" fill="#181717" />
+  <path
+    fill="#fff"
+    d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-44c-71 16-86-34-86-34-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"
+  />
+</svg>
diff --git a/packages/hoppscotch-sh-admin/assets/icons/auth/google.svg b/packages/hoppscotch-sh-admin/assets/icons/auth/google.svg
new file mode 100644
index 000000000..5cdb447fa
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/assets/icons/auth/google.svg
@@ -0,0 +1,24 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-label="Google"
+  role="img"
+  viewBox="0 0 512 512"
+>
+  <rect width="512" height="512" rx="15%" fill="#fff" />
+  <path
+    fill="#4285f4"
+    d="M386 400c45-42 65-112 53-179H260v74h102c-4 24-18 44-38 57z"
+  />
+  <path
+    fill="#34a853"
+    d="M90 341a192 192 0 0 0 296 59l-62-48c-53 35-141 22-171-60z"
+  />
+  <path
+    fill="#fbbc02"
+    d="M153 292c-8-25-8-48 0-73l-63-49c-23 46-30 111 0 171z"
+  />
+  <path
+    fill="#ea4335"
+    d="M153 219c22-69 116-109 179-50l55-54c-78-75-230-72-297 55z"
+  />
+</svg>
diff --git a/packages/hoppscotch-sh-admin/assets/icons/auth/microsoft.svg b/packages/hoppscotch-sh-admin/assets/icons/auth/microsoft.svg
new file mode 100644
index 000000000..dcc6cd287
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/assets/icons/auth/microsoft.svg
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-label="Microsoft"
+  role="img"
+  viewBox="0 0 512 512"
+>
+  <rect width="512" height="512" rx="15%" fill="#fff" />
+  <path d="M75 75v171h171v-171z" fill="#f25022" />
+  <path d="M266 75v171h171v-171z" fill="#7fba00" />
+  <path d="M75 266v171h171v-171z" fill="#00a4ef" />
+  <path d="M266 266v171h171v-171z" fill="#ffb900" />
+</svg>
diff --git a/packages/hoppscotch-sh-admin/assets/icons/logo.svg b/packages/hoppscotch-sh-admin/assets/icons/logo.svg
new file mode 100644
index 000000000..00fdee045
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/assets/icons/logo.svg
@@ -0,0 +1,59 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" fill="none">
+  <path fill="#10B981" d="M0 0h512v512H0z" />
+  <circle cx="197.76" cy="157.84" r="10" fill="#fff" fill-opacity=".75" />
+  <circle cx="259.76" cy="161.84" r="12" fill="#fff" fill-opacity=".75" />
+  <circle cx="319.76" cy="177.84" r="10" fill="#fff" fill-opacity=".75" />
+  <path
+    d="M344.963 235.676c2.075-12.698-38.872-29.804-90.967-38.094-52.09-8.296-96.404-4.665-98.48 8.033-.257 1.035 0 1.812.263 2.853-1.298-.521-76.714 211.212-76.714 211.212H364.14s-17.621-181.414-20.211-181.414c.515-.772 1.035-1.549 1.035-2.59Z"
+    fill="url(#a)"
+  />
+  <path
+    d="M314.902 227.386c-1.298 8.033-30.839 9.845-66.343 4.402-35.247-5.7-62.982-16.843-61.684-24.618.521-2.59 3.888-4.665 9.331-5.7-18.141.777-30.062 4.145-31.096 9.845-1.555 10.628 34.726 25.139 81.373 32.657 46.647 7.512 85.782 4.665 87.594-5.7 1.041-6.226-9.33-12.961-26.431-19.439 4.923 2.847 7.513 5.957 7.256 8.553Z"
+    fill="#A7F3D0"
+    fill-opacity=".5"
+  />
+  <path
+    d="M333.557 157.413c-3.104-32.137-27.729-59.351-60.9-64.53-33.172-5.186-64.531 12.954-77.749 42.238 21.251 1.298 44.057 3.631 67.904 7.518 25.396 3.888 49.237 9.074 70.745 14.774Z"
+    fill="url(#b)"
+  />
+  <path
+    d="M74.142 158.002c-2.59 15.808 30.319 35.247 81.894 51.055-.257-1.04-.257-1.818-.257-2.853 2.07-12.698 46.127-16.328 98.48-8.032 52.347 8.29 93.037 25.396 90.961 38.094-.257 1.04-.514 1.818-1.035 2.589 53.645.778 90.968-7.512 93.557-23.32 3.625-24.104-74.638-56.498-174.93-72.306-100.555-15.808-185.045-9.331-188.67 14.773Zm115.586-1.298c.778-4.145 4.665-7.255 8.81-6.477 4.145.777 7.256 4.665 6.478 8.81-.52 4.145-4.665 6.998-8.81 6.478-4.145-.778-7.255-4.666-6.478-8.811Zm59.866 4.145c.777-5.7 6.22-9.587 11.92-8.547 5.7.778 9.588 6.215 8.553 11.921-1.041 5.442-6.478 9.33-11.92 8.553-5.706-.778-9.594-6.221-8.553-11.927Zm62.975 15.294c.778-4.145 4.665-7.255 8.81-6.478 4.145.778 7.255 4.666 6.478 8.811-.515 4.145-4.665 7.255-8.81 6.477-4.145-.777-7.256-4.665-6.478-8.81Z"
+    fill="url(#c)"
+  />
+  <defs>
+    <radialGradient
+      id="b"
+      cx="0"
+      cy="0"
+      r="1"
+      gradientUnits="userSpaceOnUse"
+      gradientTransform="matrix(0 32.7063 -69.3245 0 264.232 124.706)"
+    >
+      <stop stop-color="#047857" />
+      <stop offset="1" stop-color="#064E3B" />
+    </radialGradient>
+    <radialGradient
+      id="c"
+      cx="0"
+      cy="0"
+      r="1"
+      gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(255.837 186.754) scale(1389.61)"
+    >
+      <stop stop-color="#047857" />
+      <stop offset=".115" stop-color="#064E3B" />
+    </radialGradient>
+    <linearGradient
+      id="a"
+      x1="224.998"
+      y1="157.606"
+      x2="224.998"
+      y2="403.696"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#86EFAC" stop-opacity=".75" />
+      <stop offset=".635" stop-color="#fff" stop-opacity=".2" />
+      <stop offset="1" stop-color="#fff" stop-opacity="0" />
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/packages/hoppscotch-sh-admin/assets/scss/themes.scss b/packages/hoppscotch-sh-admin/assets/scss/themes.scss
index 7f1a4baaf..b995447a7 100644
--- a/packages/hoppscotch-sh-admin/assets/scss/themes.scss
+++ b/packages/hoppscotch-sh-admin/assets/scss/themes.scss
@@ -1,249 +1,191 @@
 @mixin base-theme {
-  --font-sans: "Inter", sans-serif;
-  --font-mono: "Roboto Mono", monospace;
-  --font-icon: "Material Icons";
+  --font-sans: 'Inter', sans-serif;
+  --font-mono: 'Roboto Mono', monospace;
+  --font-icon: 'Material Icons';
   --font-size-tiny: calc(var(--font-size-body) - 0.062rem);
 }
 
 @mixin dark-theme {
-  --primary-color: theme("colors.neutral.900");
-  --primary-light-color: theme("colors.dark.600");
-  --primary-dark-color: theme("colors.neutral.800");
+  --primary-color: theme('colors.neutral.900');
+  --primary-light-color: theme('colors.dark.600');
+  --primary-dark-color: theme('colors.neutral.800');
   --primary-contrast-color: #161616;
-  --secondary-color: theme("colors.neutral.400");
-  --secondary-light-color: theme("colors.neutral.500");
-  --secondary-dark-color: theme("colors.neutral.100");
-  --divider-color: theme("colors.neutral.800");
-  --divider-light-color: theme("colors.dark.500");
-  --divider-dark-color: theme("colors.dark.300");
-  --error-color: theme("colors.stone.800");
-  --tooltip-color: theme("colors.neutral.100");
-  --popover-color: theme("colors.dark.700");
-  --editor-theme: "merbivore_soft";
+  --secondary-color: theme('colors.neutral.400');
+  --secondary-light-color: theme('colors.neutral.500');
+  --secondary-dark-color: theme('colors.neutral.100');
+  --divider-color: theme('colors.neutral.800');
+  --divider-light-color: theme('colors.dark.500');
+  --divider-dark-color: theme('colors.dark.300');
+  --error-color: theme('colors.stone.800');
+  --tooltip-color: theme('colors.neutral.100');
+  --popover-color: theme('colors.dark.700');
+  --editor-theme: 'merbivore_soft';
 }
 
 @mixin light-theme {
-  --primary-color: theme("colors.white");
-  --primary-light-color: theme("colors.neutral.50");
-  --primary-dark-color: theme("colors.neutral.100");
+  --primary-color: theme('colors.white');
+  --primary-light-color: theme('colors.neutral.50');
+  --primary-dark-color: theme('colors.neutral.100');
   --primary-contrast-color: #fefefe;
-  --secondary-color: theme("colors.neutral.500");
-  --secondary-light-color: theme("colors.neutral.400");
-  --secondary-dark-color: theme("colors.neutral.900");
-  --divider-color: theme("colors.gray.100");
-  --divider-light-color: theme("colors.neutral.100");
-  --divider-dark-color: theme("colors.neutral.300");
-  --error-color: theme("colors.yellow.100");
-  --tooltip-color: theme("colors.neutral.800");
-  --popover-color: theme("colors.white");
-  --editor-theme: "textmate";
+  --secondary-color: theme('colors.neutral.500');
+  --secondary-light-color: theme('colors.neutral.400');
+  --secondary-dark-color: theme('colors.neutral.900');
+  --divider-color: theme('colors.gray.100');
+  --divider-light-color: theme('colors.neutral.100');
+  --divider-dark-color: theme('colors.neutral.300');
+  --error-color: theme('colors.yellow.100');
+  --tooltip-color: theme('colors.neutral.800');
+  --popover-color: theme('colors.white');
+  --editor-theme: 'textmate';
 }
 
 @mixin black-theme {
-  --primary-color: theme("colors.dark.900");
-  --primary-light-color: theme("colors.neutral.900");
-  --primary-dark-color: theme("colors.dark.800");
+  --primary-color: theme('colors.dark.900');
+  --primary-light-color: theme('colors.neutral.900');
+  --primary-dark-color: theme('colors.dark.800');
   --primary-contrast-color: #0e0e0e;
-  --secondary-color: theme("colors.neutral.400");
-  --secondary-light-color: theme("colors.neutral.500");
-  --secondary-dark-color: theme("colors.neutral.100");
-  --divider-color: theme("colors.neutral.800");
-  --divider-light-color: theme("colors.dark.800");
-  --divider-dark-color: theme("colors.dark.300");
-  --error-color: theme("colors.stone.900");
-  --tooltip-color: theme("colors.neutral.100");
-  --popover-color: theme("colors.dark.600");
-  --editor-theme: "twilight";
+  --secondary-color: theme('colors.neutral.400');
+  --secondary-light-color: theme('colors.neutral.500');
+  --secondary-dark-color: theme('colors.neutral.100');
+  --divider-color: theme('colors.neutral.800');
+  --divider-light-color: theme('colors.dark.800');
+  --divider-dark-color: theme('colors.dark.300');
+  --error-color: theme('colors.stone.900');
+  --tooltip-color: theme('colors.neutral.100');
+  --popover-color: theme('colors.dark.600');
+  --editor-theme: 'twilight';
 }
 
 @mixin dark-editor-theme {
-  --editor-type-color: theme("colors.purple.400");
-  --editor-name-color: theme("colors.blue.400");
-  --editor-operator-color: theme("colors.indigo.400");
-  --editor-invalid-color: theme("colors.red.400");
-  --editor-separator-color: theme("colors.gray.400");
-  --editor-meta-color: theme("colors.gray.400");
-  --editor-variable-color: theme("colors.green.400");
-  --editor-link-color: theme("colors.cyan.400");
-  --editor-process-color: theme("colors.fuchsia.400");
-  --editor-constant-color: theme("colors.violet.400");
-  --editor-keyword-color: theme("colors.pink.400");
+  --editor-type-color: theme('colors.purple.400');
+  --editor-name-color: theme('colors.blue.400');
+  --editor-operator-color: theme('colors.indigo.400');
+  --editor-invalid-color: theme('colors.red.400');
+  --editor-separator-color: theme('colors.gray.400');
+  --editor-meta-color: theme('colors.gray.400');
+  --editor-variable-color: theme('colors.green.400');
+  --editor-link-color: theme('colors.cyan.400');
+  --editor-process-color: theme('colors.fuchsia.400');
+  --editor-constant-color: theme('colors.violet.400');
+  --editor-keyword-color: theme('colors.pink.400');
 }
 
 @mixin light-editor-theme {
-  --editor-type-color: theme("colors.purple.600");
-  --editor-name-color: theme("colors.red.600");
-  --editor-operator-color: theme("colors.indigo.600");
-  --editor-invalid-color: theme("colors.red.600");
-  --editor-separator-color: theme("colors.gray.600");
-  --editor-meta-color: theme("colors.gray.600");
-  --editor-variable-color: theme("colors.green.600");
-  --editor-link-color: theme("colors.cyan.600");
-  --editor-process-color: theme("colors.blue.600");
-  --editor-constant-color: theme("colors.fuchsia.600");
-  --editor-keyword-color: theme("colors.pink.600");
+  --editor-type-color: theme('colors.purple.600');
+  --editor-name-color: theme('colors.red.600');
+  --editor-operator-color: theme('colors.indigo.600');
+  --editor-invalid-color: theme('colors.red.600');
+  --editor-separator-color: theme('colors.gray.600');
+  --editor-meta-color: theme('colors.gray.600');
+  --editor-variable-color: theme('colors.green.600');
+  --editor-link-color: theme('colors.cyan.600');
+  --editor-process-color: theme('colors.blue.600');
+  --editor-constant-color: theme('colors.fuchsia.600');
+  --editor-keyword-color: theme('colors.pink.600');
 }
 
 @mixin black-editor-theme {
-  --editor-type-color: theme("colors.purple.400");
-  --editor-name-color: theme("colors.fuchsia.400");
-  --editor-operator-color: theme("colors.indigo.400");
-  --editor-invalid-color: theme("colors.red.400");
-  --editor-separator-color: theme("colors.gray.400");
-  --editor-meta-color: theme("colors.gray.400");
-  --editor-variable-color: theme("colors.green.400");
-  --editor-link-color: theme("colors.cyan.400");
-  --editor-process-color: theme("colors.violet.400");
-  --editor-constant-color: theme("colors.blue.400");
-  --editor-keyword-color: theme("colors.pink.400");
+  --editor-type-color: theme('colors.purple.400');
+  --editor-name-color: theme('colors.fuchsia.400');
+  --editor-operator-color: theme('colors.indigo.400');
+  --editor-invalid-color: theme('colors.red.400');
+  --editor-separator-color: theme('colors.gray.400');
+  --editor-meta-color: theme('colors.gray.400');
+  --editor-variable-color: theme('colors.green.400');
+  --editor-link-color: theme('colors.cyan.400');
+  --editor-process-color: theme('colors.violet.400');
+  --editor-constant-color: theme('colors.blue.400');
+  --editor-keyword-color: theme('colors.pink.400');
 }
 
 @mixin green-theme {
-  --accent-color: theme("colors.green.500");
-  --accent-light-color: theme("colors.green.400");
-  --accent-dark-color: theme("colors.green.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.green.200");
-  --gradient-via-color: theme("colors.green.400");
-  --gradient-to-color: theme("colors.green.600");
+  --accent-color: theme('colors.green.500');
+  --accent-light-color: theme('colors.green.400');
+  --accent-dark-color: theme('colors.green.600');
+  --accent-contrast-color: theme('colors.white');
+  --gradient-from-color: theme('colors.green.200');
+  --gradient-via-color: theme('colors.green.400');
+  --gradient-to-color: theme('colors.green.600');
 }
 
 @mixin teal-theme {
-  --accent-color: theme("colors.teal.500");
-  --accent-light-color: theme("colors.teal.400");
-  --accent-dark-color: theme("colors.teal.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.teal.200");
-  --gradient-via-color: theme("colors.teal.400");
-  --gradient-to-color: theme("colors.teal.600");
+  --accent-color: theme('colors.teal.500');
+  --accent-light-color: theme('colors.teal.400');
+  --accent-dark-color: theme('colors.teal.600');
+  --accent-contrast-color: theme('colors.white');
+  --gradient-from-color: theme('colors.teal.200');
+  --gradient-via-color: theme('colors.teal.400');
+  --gradient-to-color: theme('colors.teal.600');
 }
 
 @mixin blue-theme {
-  --accent-color: theme("colors.blue.500");
-  --accent-light-color: theme("colors.blue.400");
-  --accent-dark-color: theme("colors.blue.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.blue.200");
-  --gradient-via-color: theme("colors.blue.400");
-  --gradient-to-color: theme("colors.blue.600");
+  --accent-color: theme('colors.blue.500');
+  --accent-light-color: theme('colors.blue.400');
+  --accent-dark-color: theme('colors.blue.600');
+  --accent-contrast-color: theme('colors.white');
+  --gradient-from-color: theme('colors.blue.200');
+  --gradient-via-color: theme('colors.blue.400');
+  --gradient-to-color: theme('colors.blue.600');
 }
 
 @mixin indigo-theme {
-  --accent-color: theme("colors.indigo.500");
-  --accent-light-color: theme("colors.indigo.400");
-  --accent-dark-color: theme("colors.indigo.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.indigo.200");
-  --gradient-via-color: theme("colors.indigo.400");
-  --gradient-to-color: theme("colors.indigo.600");
+  --accent-color: theme('colors.indigo.500');
+  --accent-light-color: theme('colors.indigo.400');
+  --accent-dark-color: theme('colors.indigo.600');
+  --accent-contrast-color: theme('colors.white');
+  --gradient-from-color: theme('colors.indigo.200');
+  --gradient-via-color: theme('colors.indigo.400');
+  --gradient-to-color: theme('colors.indigo.600');
 }
 
 @mixin purple-theme {
-  --accent-color: theme("colors.purple.500");
-  --accent-light-color: theme("colors.purple.400");
-  --accent-dark-color: theme("colors.purple.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.purple.200");
-  --gradient-via-color: theme("colors.purple.400");
-  --gradient-to-color: theme("colors.purple.600");
+  --accent-color: theme('colors.purple.500');
+  --accent-light-color: theme('colors.purple.400');
+  --accent-dark-color: theme('colors.purple.600');
+  --accent-contrast-color: theme('colors.white');
+  --gradient-from-color: theme('colors.purple.200');
+  --gradient-via-color: theme('colors.purple.400');
+  --gradient-to-color: theme('colors.purple.600');
 }
 
 @mixin yellow-theme {
-  --accent-color: theme("colors.yellow.500");
-  --accent-light-color: theme("colors.yellow.400");
-  --accent-dark-color: theme("colors.yellow.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.yellow.200");
-  --gradient-via-color: theme("colors.yellow.400");
-  --gradient-to-color: theme("colors.yellow.600");
+  --accent-color: theme('colors.yellow.500');
+  --accent-light-color: theme('colors.yellow.400');
+  --accent-dark-color: theme('colors.yellow.600');
+  --accent-contrast-color: theme('colors.white');
+  --gradient-from-color: theme('colors.yellow.200');
+  --gradient-via-color: theme('colors.yellow.400');
+  --gradient-to-color: theme('colors.yellow.600');
 }
 
 @mixin orange-theme {
-  --accent-color: theme("colors.orange.500");
-  --accent-light-color: theme("colors.orange.400");
-  --accent-dark-color: theme("colors.orange.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.orange.200");
-  --gradient-via-color: theme("colors.orange.400");
-  --gradient-to-color: theme("colors.orange.600");
+  --accent-color: theme('colors.orange.500');
+  --accent-light-color: theme('colors.orange.400');
+  --accent-dark-color: theme('colors.orange.600');
+  --accent-contrast-color: theme('colors.white');
+  --gradient-from-color: theme('colors.orange.200');
+  --gradient-via-color: theme('colors.orange.400');
+  --gradient-to-color: theme('colors.orange.600');
 }
 
 @mixin red-theme {
-  --accent-color: theme("colors.red.500");
-  --accent-light-color: theme("colors.red.400");
-  --accent-dark-color: theme("colors.red.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.red.200");
-  --gradient-via-color: theme("colors.red.400");
-  --gradient-to-color: theme("colors.red.600");
+  --accent-color: theme('colors.red.500');
+  --accent-light-color: theme('colors.red.400');
+  --accent-dark-color: theme('colors.red.600');
+  --accent-contrast-color: theme('colors.white');
+  --gradient-from-color: theme('colors.red.200');
+  --gradient-via-color: theme('colors.red.400');
+  --gradient-to-color: theme('colors.red.600');
 }
 
 @mixin pink-theme {
-  --accent-color: theme("colors.pink.500");
-  --accent-light-color: theme("colors.pink.400");
-  --accent-dark-color: theme("colors.pink.600");
-  --accent-contrast-color: theme("colors.white");
-  --gradient-from-color: theme("colors.pink.200");
-  --gradient-via-color: theme("colors.pink.400");
-  --gradient-to-color: theme("colors.pink.600");
-}
-
-:root {
-  @include base-theme;
-  @include dark-theme;
-  @include green-theme;
-  @include dark-editor-theme;
-}
-
-:root.light {
-  @include light-theme;
-  @include light-editor-theme;
-}
-
-:root.dark {
-  @include dark-theme;
-  @include dark-editor-theme;
-}
-
-:root.black {
-  @include black-theme;
-  @include black-editor-theme;
-}
-
-:root[data-accent="blue"] {
-  @include blue-theme;
-}
-
-:root[data-accent="green"] {
-  @include green-theme;
-}
-
-:root[data-accent="teal"] {
-  @include teal-theme;
-}
-
-:root[data-accent="indigo"] {
-  @include indigo-theme;
-}
-
-:root[data-accent="purple"] {
-  @include purple-theme;
-}
-
-:root[data-accent="orange"] {
-  @include orange-theme;
-}
-
-:root[data-accent="pink"] {
-  @include pink-theme;
-}
-
-:root[data-accent="red"] {
-  @include red-theme;
-}
-
-:root[data-accent="yellow"] {
-  @include yellow-theme;
+  --accent-color: theme('colors.pink.500');
+  --accent-light-color: theme('colors.pink.400');
+  --accent-dark-color: theme('colors.pink.600');
+  --accent-contrast-color: theme('colors.white');
+  --gradient-from-color: theme('colors.pink.200');
+  --gradient-via-color: theme('colors.pink.400');
+  --gradient-to-color: theme('colors.pink.600');
 }
 
 @mixin font-small {
@@ -294,14 +236,73 @@
   --sidebar-primary-sticky-fold: 2.5rem;
 }
 
-:root[data-font-size="small"] {
-  @include font-small;
-}
-
-:root[data-font-size="medium"] {
+:root {
+  @include base-theme;
+  @include dark-theme;
+  @include green-theme;
+  @include dark-editor-theme;
   @include font-medium;
 }
 
-:root[data-font-size="large"] {
+:root.light {
+  @include light-theme;
+  @include light-editor-theme;
+}
+
+:root.dark {
+  @include dark-theme;
+  @include dark-editor-theme;
+}
+
+:root.black {
+  @include black-theme;
+  @include black-editor-theme;
+}
+
+:root[data-accent='blue'] {
+  @include blue-theme;
+}
+
+:root[data-accent='green'] {
+  @include green-theme;
+}
+
+:root[data-accent='teal'] {
+  @include teal-theme;
+}
+
+:root[data-accent='indigo'] {
+  @include indigo-theme;
+}
+
+:root[data-accent='purple'] {
+  @include purple-theme;
+}
+
+:root[data-accent='orange'] {
+  @include orange-theme;
+}
+
+:root[data-accent='pink'] {
+  @include pink-theme;
+}
+
+:root[data-accent='red'] {
+  @include red-theme;
+}
+
+:root[data-accent='yellow'] {
+  @include yellow-theme;
+}
+
+:root[data-font-size='small'] {
+  @include font-small;
+}
+
+:root[data-font-size='medium'] {
+  @include font-medium;
+}
+
+:root[data-font-size='large'] {
   @include font-large;
 }
diff --git a/packages/hoppscotch-sh-admin/package.json b/packages/hoppscotch-sh-admin/package.json
index b551f5804..1edb33271 100644
--- a/packages/hoppscotch-sh-admin/package.json
+++ b/packages/hoppscotch-sh-admin/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
     "dev:vite": "vite",
-    "dev:gql-codegen": "graphql-codegen --require dotenv/config --config gql-codegen.yml --watch dotenv_config_path=\"../../.env\"",
+    "dev:gql-codegen": "graphql-codegen --require dotenv/config --config gql-codegen.yml --watch dotenv_config_path=\".env\"",
     "build": "vue-tsc && vite build",
     "preview": "vite preview"
   },
@@ -18,11 +18,15 @@
     "@types/express": "^4.17.15",
     "@urql/vue": "^1.0.4",
     "@vueuse/core": "^9.10.0",
+    "axios": "^0.21.4",
     "cors": "^2.8.5",
     "date-fns": "^2.29.3",
     "express": "^4.18.2",
     "express-graphql": "^0.12.0",
+    "fp-ts": "^2.13.1",
     "graphql": "^16.6.0",
+    "lodash-es": "^4.17.21",
+    "rxjs": "^7.8.0",
     "ts-node-dev": "^2.0.0",
     "unplugin-icons": "^0.14.9",
     "unplugin-vue-components": "^0.21.0",
@@ -38,14 +42,14 @@
     "@graphql-codegen/typescript-document-nodes": "3.0.0",
     "@graphql-codegen/typescript-operations": "3.0.0",
     "@graphql-codegen/urql-introspection": "2.2.1",
-    "@vitejs/plugin-vue": "^1.6.0",
+    "@vitejs/plugin-vue": "^3.1.0",
     "@vue/compiler-sfc": "^3.2.6",
     "graphql-tag": "^2.12.6",
     "npm-run-all": "^4.1.5",
     "sass": "^1.57.1",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.3",
-    "vite": "^2.5.1",
+    "vite": "^3.1.4",
     "vite-plugin-pages": "^0.26.0",
     "vite-plugin-vue-layouts": "^0.7.0",
     "vite-plugin-windicss": "^1.8.8",
diff --git a/packages/hoppscotch-sh-admin/src/App.vue b/packages/hoppscotch-sh-admin/src/App.vue
index 630f83112..cb647e8d0 100644
--- a/packages/hoppscotch-sh-admin/src/App.vue
+++ b/packages/hoppscotch-sh-admin/src/App.vue
@@ -5,9 +5,10 @@
 </template>
 
 <script setup lang="ts">
+import { useDark, useToggle } from '@vueuse/core';
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
-import { useDark, useToggle } from '@vueuse/core';
+import { HOPP_MODULES } from './modules';
 
 const defaultLayout = 'default';
 
@@ -18,7 +19,10 @@ const layout = computed(
 );
 
 const isDark = useDark();
-const toggleDark = useToggle(isDark);
+useToggle(isDark);
+
+// Run module root component setup code
+HOPP_MODULES.forEach((mod) => mod.onRootSetup?.());
 </script>
 
 <style lang="scss">
diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts
index 8bf86976e..a26536564 100644
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -8,51 +8,31 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AppHeader: typeof import('./components/app/Header.vue')['default']
+    AppLogin: typeof import('./components/app/Login.vue')['default']
+    AppLogout: typeof import('./components/app/Logout.vue')['default']
     AppModal: typeof import('./components/app/Modal.vue')['default']
     AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
     AppToast: typeof import('./components/app/Toast.vue')['default']
-    ButtonPrimary: typeof import('./../../hoppscotch-ui/src/components/button/Primary.vue')['default']
-    ButtonSecondary: typeof import('./../../hoppscotch-ui/src/components/button/Secondary.vue')['default']
     HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
+    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
+    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
     HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
-    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
+    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
     IconLucideBell: typeof import('~icons/lucide/bell')['default']
-    IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
-    IconLucideChevronLeft: typeof import('~icons/lucide/chevron-left')['default']
-    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
+    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
     IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default']
     IconLucideLineChart: typeof import('~icons/lucide/line-chart')['default']
     IconLucideLock: typeof import('~icons/lucide/lock')['default']
     IconLucideMenu: typeof import('~icons/lucide/menu')['default']
-    IconLucideMoreHorizontal: typeof import('~icons/lucide/more-horizontal')['default']
     IconLucideSettings: typeof import('~icons/lucide/settings')['default']
     IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default']
     IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
     IconLucideUserCog: typeof import('~icons/lucide/user-cog')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
+    ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    SmartAnchor: typeof import('./../../hoppscotch-ui/src/components/smart/Anchor.vue')['default']
-    SmartAutoComplete: typeof import('./../../hoppscotch-ui/src/components/smart/AutoComplete.vue')['default']
-    SmartCheckbox: typeof import('./../../hoppscotch-ui/src/components/smart/Checkbox.vue')['default']
-    SmartConfirmModal: typeof import('./../../hoppscotch-ui/src/components/smart/ConfirmModal.vue')['default']
-    SmartExpand: typeof import('./../../hoppscotch-ui/src/components/smart/Expand.vue')['default']
-    SmartFileChip: typeof import('./../../hoppscotch-ui/src/components/smart/FileChip.vue')['default']
-    SmartIntersection: typeof import('./../../hoppscotch-ui/src/components/smart/Intersection.vue')['default']
-    SmartItem: typeof import('./../../hoppscotch-ui/src/components/smart/Item.vue')['default']
-    SmartLink: typeof import('./../../hoppscotch-ui/src/components/smart/Link.vue')['default']
-    SmartModal: typeof import('./../../hoppscotch-ui/src/components/smart/Modal.vue')['default']
-    SmartProgressRing: typeof import('./../../hoppscotch-ui/src/components/smart/ProgressRing.vue')['default']
-    SmartRadio: typeof import('./../../hoppscotch-ui/src/components/smart/Radio.vue')['default']
-    SmartRadioGroup: typeof import('./../../hoppscotch-ui/src/components/smart/RadioGroup.vue')['default']
-    SmartSlideOver: typeof import('./../../hoppscotch-ui/src/components/smart/SlideOver.vue')['default']
-    SmartSpinner: typeof import('./../../hoppscotch-ui/src/components/smart/Spinner.vue')['default']
-    SmartTab: typeof import('./../../hoppscotch-ui/src/components/smart/Tab.vue')['default']
-    SmartTabs: typeof import('./../../hoppscotch-ui/src/components/smart/Tabs.vue')['default']
-    SmartToggle: typeof import('./../../hoppscotch-ui/src/components/smart/Toggle.vue')['default']
-    SmartWindow: typeof import('./../../hoppscotch-ui/src/components/smart/Window.vue')['default']
-    SmartWindows: typeof import('./../../hoppscotch-ui/src/components/smart/Windows.vue')['default']
     TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default']
     UsersDetails: typeof import('./components/users/Details.vue')['default']
   }
diff --git a/packages/hoppscotch-sh-admin/src/components/app/Header.vue b/packages/hoppscotch-sh-admin/src/components/app/Header.vue
index 0d8c61f12..247a28001 100644
--- a/packages/hoppscotch-sh-admin/src/components/app/Header.vue
+++ b/packages/hoppscotch-sh-admin/src/components/app/Header.vue
@@ -26,15 +26,25 @@
         <icon-lucide-bell class="text-gray-300 w-6" />
       </button>
 
-      <div class="relative">
+      <div v-if="currentUser" class="relative">
         <button
           @click="dropdownOpen = !dropdownOpen"
           class="relative z-10 block w-8 h-8 overflow-hidden rounded-full shadow focus:outline-none"
         >
-          <img
-            class="object-cover w-full h-full"
-            src="https://media.licdn.com/dms/image/C5603AQHMCx72bNN1MA/profile-displayphoto-shrink_800_800/0/1630736416611?e=2147483647&v=beta&t=McWCdK_7t_NLeU4ze3JPB8xvwg5w50Okuj2JDBekqjw"
-            alt="Your avatar"
+          <ProfilePicture
+            v-if="currentUser.photoURL"
+            v-tippy="{
+              theme: 'tooltip',
+            }"
+            :url="currentUser.photoURL"
+            :alt="currentUser.displayName ?? 'No Name'"
+            :title="currentUser.displayName ?? currentUser.email ?? 'No Name'"
+          />
+          <ProfilePicture
+            v-else
+            v-tippy="{ theme: 'tooltip' }"
+            :title="currentUser.displayName ?? currentUser.email ?? 'No Name'"
+            :initial="currentUser.displayName ?? currentUser.email"
           />
         </button>
 
@@ -56,21 +66,13 @@
             v-show="dropdownOpen"
             class="absolute right-0 z-20 w-48 py-2 mt-2 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-xl"
           >
-            <a
-              href="#"
-              class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-emerald-700 hover:text-white"
-              >Profile</a
-            >
-            <a
-              href="#"
-              class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-emerald-700 hover:text-white"
-              >Settings</a
-            >
-            <router-link
-              to="/"
-              class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-emerald-700 hover:text-white"
-              >Log out</router-link
-            >
+            <HoppSmartItem to="/profile" :icon="IconUser" :label="'Profile'" />
+            <HoppSmartItem
+              to="/settings"
+              :icon="IconSettings"
+              :label="'Settings'"
+            />
+            <AppLogout ref="logout" />
           </div>
         </transition>
       </div>
@@ -79,11 +81,20 @@
 </template>
 
 <script setup lang="ts">
+import IconSettings from '~icons/lucide/settings';
+import IconUser from '~icons/lucide/user';
 import { ref } from 'vue';
-import { useSidebar } from '../../composables/useSidebar';
+import { useReadonlyStream } from '~/composables/stream';
+import { useSidebar } from '~/composables/useSidebar';
+import { auth } from '~/helpers/auth';
 
 const { isOpen, isExpanded } = useSidebar();
 
+const currentUser = useReadonlyStream(
+  auth.getProbableUserStream(),
+  auth.getProbableUser()
+);
+
 const expandSidebar = () => {
   isExpanded.value = !isExpanded.value;
 };
diff --git a/packages/hoppscotch-sh-admin/src/components/app/Login.vue b/packages/hoppscotch-sh-admin/src/components/app/Login.vue
new file mode 100644
index 000000000..d23119791
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/components/app/Login.vue
@@ -0,0 +1,236 @@
+<template>
+  <div v-if="nonAdminUser" class="text-center">
+    Logged in as non admin user. Please
+    <span @click="logout()" class="text-red-500 cursor-pointer underline"
+      >sign out</span
+    >
+    and login with an admin account.
+  </div>
+  <div v-else>
+    <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
+      <HoppSmartItem
+        :loading="signingInWithGitHub"
+        :icon="IconGithub"
+        :label="`Continue with GitHub`"
+        @click="signInWithGithub"
+      />
+      <HoppSmartItem
+        :loading="signingInWithGoogle"
+        :icon="IconGoogle"
+        :label="`Continue with Google`"
+        @click="signInWithGoogle"
+      />
+      <HoppSmartItem
+        :loading="signingInWithMicrosoft"
+        :icon="IconMicrosoft"
+        :label="`Continue with Microsoft`"
+        @click="signInWithMicrosoft"
+      />
+      <HoppSmartItem
+        :icon="IconEmail"
+        :label="`Continue with Email`"
+        @click="mode = 'email'"
+      />
+    </div>
+    <form
+      v-if="mode === 'email'"
+      class="flex flex-col space-y-2"
+      @submit.prevent="signInWithEmail"
+    >
+      <div class="flex flex-col">
+        <input
+          id="email"
+          v-model="form.email"
+          class="input floating-input"
+          placeholder=" "
+          type="email"
+          name="email"
+          autocomplete="off"
+          required
+          spellcheck="false"
+          v-focus
+          autofocus
+        />
+        <label for="email"> Email </label>
+      </div>
+      <HoppButtonPrimary
+        :loading="signingInWithEmail"
+        type="submit"
+        :label="`Send magic link`"
+      />
+    </form>
+    <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
+      <div class="flex flex-col items-center justify-center max-w-md">
+        <icon-lucide-inbox class="w-6 h-6 text-accent" />
+        <h3 class="my-2 text-lg text-center">
+          We sent a magic link to {{ form.email }}
+        </h3>
+        <p class="text-center">
+          We sent a magic link to {{ form.email }}. Click on the link to sign
+          in.
+        </p>
+      </div>
+    </div>
+    <section class="text-center mt-10">
+      <div v-if="mode === 'sign-in'" class="text-secondaryLight text-tiny">
+        By signing in, you are agreeing to our
+        <HoppSmartAnchor
+          class="link"
+          to="https://docs.hoppscotch.io/terms"
+          blank
+          label="Terms of Service"
+        />
+        and
+        <HoppSmartAnchor
+          class="link"
+          to="https://docs.hoppscotch.io/privacy"
+          blank
+          label="Privacy Policy"
+        />
+      </div>
+      <div v-if="mode === 'email'">
+        <HoppButtonSecondary
+          :label="'All sign in option'"
+          :icon="IconArrowLeft"
+          class="!p-0"
+          @click="mode = 'sign-in'"
+        />
+      </div>
+      <div
+        v-if="mode === 'email-sent'"
+        class="flex justify-between flex-1 text-secondaryLight"
+      >
+        <HoppSmartAnchor
+          class="link"
+          :label="'Re enter email'"
+          :icon="IconArrowLeft"
+          @click="mode = 'email'"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import IconGithub from '~icons/auth/github';
+import IconGoogle from '~icons/auth/google';
+import IconEmail from '~icons/auth/email';
+import IconMicrosoft from '~icons/auth/microsoft';
+import IconArrowLeft from '~icons/lucide/arrow-left';
+import { setLocalConfig } from '~/helpers/localpersistence';
+import { useStreamSubscriber } from '~/composables/stream';
+import { useToast } from '~/composables/toast';
+import { auth } from '~/helpers/auth';
+
+const { subscribeToStream } = useStreamSubscriber();
+
+const toast = useToast();
+
+// DATA
+
+const form = ref({
+  email: '',
+});
+const signingInWithGoogle = ref(false);
+const signingInWithGitHub = ref(false);
+const signingInWithMicrosoft = ref(false);
+const signingInWithEmail = ref(false);
+const mode = ref('sign-in');
+
+const nonAdminUser = ref(false);
+
+onMounted(() => {
+  const currentUser$ = auth.getCurrentUserStream();
+
+  subscribeToStream(currentUser$, (user) => {
+    if (user && !user.isAdmin) {
+      nonAdminUser.value = true;
+      toast.error(`You are logged in. But you're not an admin`);
+    }
+  });
+});
+
+async function signInWithGoogle() {
+  signingInWithGoogle.value = true;
+
+  try {
+    await auth.signInUserWithGoogle();
+  } catch (e) {
+    console.error(e);
+    /*
+    A auth/account-exists-with-different-credential Firebase error wont happen between Google and any other providers
+    Seems Google account overwrites accounts of other providers https://github.com/firebase/firebase-android-sdk/issues/25
+    */
+    toast.error(`Failed to sign in with Google`);
+  }
+
+  signingInWithGoogle.value = false;
+}
+async function signInWithGithub() {
+  signingInWithGitHub.value = true;
+
+  try {
+    await auth.signInUserWithGithub();
+  } catch (e) {
+    console.error(e);
+    /*
+    A auth/account-exists-with-different-credential Firebase error wont happen between Google and any other providers
+    Seems Google account overwrites accounts of other providers https://github.com/firebase/firebase-android-sdk/issues/25
+    */
+    toast.error(`Failed to sign in with GitHub`);
+  }
+
+  signingInWithGitHub.value = false;
+}
+
+async function signInWithMicrosoft() {
+  signingInWithMicrosoft.value = true;
+
+  try {
+    await auth.signInUserWithMicrosoft();
+  } catch (e) {
+    console.error(e);
+    /*
+    A auth/account-exists-with-different-credential Firebase error wont happen between MS with Google or Github
+    If a Github account exists and user then logs in with MS email we get a "Something went wrong toast" and console errors and MS replaces GH as only provider.
+    The error messages are as follows:
+        FirebaseError: Firebase: Error (auth/popup-closed-by-user).
+        @firebase/auth: Auth (9.6.11): INTERNAL ASSERTION FAILED: Pending promise was never set
+    They may be related to https://github.com/firebase/firebaseui-web/issues/947
+    */
+    toast.error(`Something went wrong`);
+  }
+
+  signingInWithMicrosoft.value = false;
+}
+async function signInWithEmail() {
+  signingInWithEmail.value = true;
+
+  await auth
+    .signInWithEmail(form.value.email)
+    .then(() => {
+      mode.value = 'email-sent';
+      setLocalConfig('emailForSignIn', form.value.email);
+    })
+    .catch((e: any) => {
+      console.error(e);
+      toast.error(e.message);
+      signingInWithEmail.value = false;
+    })
+    .finally(() => {
+      signingInWithEmail.value = false;
+    });
+}
+
+const logout = async () => {
+  try {
+    await auth.signOutUser();
+    window.location.reload();
+    toast.success(`Logged out`);
+  } catch (e) {
+    console.error(e);
+    toast.error(`Something went wrong`);
+  }
+};
+</script>
diff --git a/packages/hoppscotch-sh-admin/src/components/app/Logout.vue b/packages/hoppscotch-sh-admin/src/components/app/Logout.vue
new file mode 100644
index 000000000..8032824c8
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/components/app/Logout.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="flex" @click="openLogoutModal()">
+    <HoppSmartItem
+      :icon="IconLogOut"
+      :label="'Logout'"
+      :outline="outline"
+      :shortcut="shortcut"
+      @click="openLogoutModal()"
+    />
+    <HoppSmartConfirmModal
+      :show="confirmLogout"
+      :title="`Confirm Logout`"
+      @hide-modal="confirmLogout = false"
+      @resolve="logout"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import IconLogOut from '~icons/lucide/log-out';
+import { useToast } from '~/composables/toast';
+import { useRouter } from 'vue-router';
+import { auth } from '~/helpers/auth';
+
+const router = useRouter();
+
+defineProps({
+  outline: {
+    type: Boolean,
+    default: false,
+  },
+  shortcut: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits<{
+  (e: 'confirm-logout'): void;
+}>();
+
+const confirmLogout = ref(false);
+
+const toast = useToast();
+
+const logout = async () => {
+  try {
+    await auth.signOutUser();
+    router.push(`/`);
+    toast.success(`Logged out`);
+  } catch (e) {
+    console.error(e);
+    toast.error(`Something went wrong`);
+  }
+};
+
+const openLogoutModal = () => {
+  emit('confirm-logout');
+  confirmLogout.value = true;
+};
+</script>
diff --git a/packages/hoppscotch-sh-admin/src/components/profile/Picture.vue b/packages/hoppscotch-sh-admin/src/components/profile/Picture.vue
new file mode 100644
index 000000000..13797a880
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/components/profile/Picture.vue
@@ -0,0 +1,87 @@
+<template>
+  <div
+    tabindex="0"
+    class="relative flex items-center justify-center cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
+    :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
+  >
+    <img
+      v-if="url"
+      class="absolute object-cover object-center transition bg-primaryDark"
+      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
+      :src="url"
+      :alt="alt"
+      loading="lazy"
+    />
+    <div
+      v-else
+      class="absolute flex items-center justify-center object-cover object-center transition bg-primaryDark text-accentContrast"
+      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
+      :style="`background-color: ${initial ? toHex(initial) : '#480000'}`"
+    >
+      <template v-if="initial && initial.charAt(0).toUpperCase()">
+        {{ initial.charAt(0).toUpperCase() }}
+      </template>
+
+      <icon-lucide-user v-else></icon-lucide-user>
+    </div>
+    <span
+      v-if="indicator"
+      class="border-primary border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
+      :class="[`rounded-${rounded}`, indicatorStyles]"
+    ></span>
+    <!-- w-5 h-5 rounded-lg -->
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+  props: {
+    url: {
+      type: String,
+      default: '',
+    },
+    alt: {
+      type: String,
+      default: 'Profile picture',
+    },
+    indicator: {
+      type: Boolean,
+      default: false,
+    },
+    indicatorStyles: {
+      type: String,
+      default: 'bg-green-500',
+    },
+    rounded: {
+      type: String,
+      default: 'full',
+    },
+    size: {
+      type: String,
+      default: '5',
+    },
+    initial: {
+      type: String as PropType<string | undefined | null>,
+      default: '',
+    },
+  },
+  methods: {
+    toHex(initial: string) {
+      let hash = 0;
+      if (initial.length === 0) return hash;
+      for (let i = 0; i < initial.length; i++) {
+        hash = initial.charCodeAt(i) + ((hash << 5) - hash);
+        hash = hash & hash;
+      }
+      let color = '#';
+      for (let i = 0; i < 3; i++) {
+        const value = (hash >> (i * 8)) & 255;
+        color += `00${value.toString(16)}`.slice(-2);
+      }
+      return color;
+    },
+  },
+});
+</script>
diff --git a/packages/hoppscotch-sh-admin/src/composables/auth.ts b/packages/hoppscotch-sh-admin/src/composables/auth.ts
new file mode 100644
index 000000000..4bbf12874
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/composables/auth.ts
@@ -0,0 +1,62 @@
+import { platform } from '~/platform';
+import { AuthEvent, HoppUser } from '~/platform/auth';
+import { Subscription } from 'rxjs';
+import { onBeforeUnmount, onMounted, watch, WatchStopHandle } from 'vue';
+import { useReadonlyStream } from './stream';
+
+/**
+ * A Vue composable function that is called when the auth status
+ * is being updated to being logged in (fired multiple times),
+ * this is also called on component mount if the login
+ * was already resolved before mount.
+ */
+export function onLoggedIn(exec: (user: HoppUser) => void) {
+  const currentUser = useReadonlyStream(
+    platform.auth.getCurrentUserStream(),
+    platform.auth.getCurrentUser()
+  );
+
+  let watchStop: WatchStopHandle | null = null;
+
+  onMounted(() => {
+    if (currentUser.value) exec(currentUser.value);
+
+    watchStop = watch(currentUser, (newVal, prev) => {
+      if (prev === null && newVal !== null) {
+        exec(newVal);
+      }
+    });
+  });
+
+  onBeforeUnmount(() => {
+    watchStop?.();
+  });
+}
+
+/**
+ * A Vue composable function that calls its param function
+ * when a new event (login, logout etc.) happens in
+ * the auth system.
+ *
+ * NOTE: Unlike `onLoggedIn` for which the callback will be called once on mount with the current state,
+ * here the callback will only be called on authentication event occurances.
+ * You might want to check the auth state from an `onMounted` hook or something
+ * if you want to access the initial state
+ *
+ * @param func A function which accepts an event
+ */
+export function onAuthEvent(func: (ev: AuthEvent) => void) {
+  const authEvents$ = platform.auth.getAuthEventsStream();
+
+  let sub: Subscription | null = null;
+
+  onMounted(() => {
+    sub = authEvents$.subscribe((ev) => {
+      func(ev);
+    });
+  });
+
+  onBeforeUnmount(() => {
+    sub?.unsubscribe();
+  });
+}
diff --git a/packages/hoppscotch-sh-admin/src/composables/stream.ts b/packages/hoppscotch-sh-admin/src/composables/stream.ts
new file mode 100644
index 000000000..b4437f7ec
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/composables/stream.ts
@@ -0,0 +1,174 @@
+import { clone, cloneDeep } from 'lodash-es';
+import { Observable, Subscription } from 'rxjs';
+import { customRef, onBeforeUnmount, readonly, Ref } from 'vue';
+
+type CloneMode = 'noclone' | 'shallow' | 'deep';
+
+/**
+ * Returns a readonly (no writes) ref for an RxJS Observable
+ * @param stream$ The RxJS Observable to listen to
+ * @param initialValue The initial value to apply until the stream emits a value
+ * @param cloneMode Determines whether or not and how deep to clone the emitted value.
+ *                  Useful for issues in reactivity due to reference sharing. Defaults to shallow clone
+ * @returns A readonly ref which has the latest value from the stream
+ */
+export function useReadonlyStream<T>(
+  stream$: Observable<T>,
+  initialValue: T,
+  cloneMode: CloneMode = 'shallow'
+): Ref<T> {
+  let sub: Subscription | null = null;
+
+  onBeforeUnmount(() => {
+    if (sub) {
+      sub.unsubscribe();
+    }
+  });
+
+  const r = customRef((track, trigger) => {
+    let val = initialValue;
+
+    sub = stream$.subscribe((value) => {
+      if (cloneMode === 'noclone') {
+        val = value;
+      } else if (cloneMode === 'shallow') {
+        val = clone(value);
+      } else if (cloneMode === 'deep') {
+        val = cloneDeep(value);
+      }
+
+      trigger();
+    });
+
+    return {
+      get() {
+        track();
+        return val;
+      },
+      set() {
+        trigger(); // <- Not exactly needed here
+        throw new Error('Cannot write to a ref from useReadonlyStream');
+      },
+    };
+  });
+
+  // Casting to still maintain the proper type signature for ease of use
+  return readonly(r) as Ref<T>;
+}
+
+export function useStream<T>(
+  stream$: Observable<T>,
+  initialValue: T,
+  setter: (val: T) => void
+) {
+  let sub: Subscription | null = null;
+
+  onBeforeUnmount(() => {
+    if (sub) {
+      sub.unsubscribe();
+    }
+  });
+
+  return customRef((track, trigger) => {
+    let value = initialValue;
+
+    sub = stream$.subscribe((val) => {
+      value = val;
+      trigger();
+    });
+
+    return {
+      get() {
+        track();
+        return value;
+      },
+      set(value: T) {
+        trigger();
+        setter(value);
+      },
+    };
+  });
+}
+
+/** A static (doesn't cleanup on itself and does
+ *  not require component instace) version of useStream
+ */
+export function useStreamStatic<T>(
+  stream$: Observable<T>,
+  initialValue: T,
+  setter: (val: T) => void
+): [Ref<T>, () => void] {
+  let sub: Subscription | null = null;
+
+  const stopper = () => {
+    if (sub) {
+      sub.unsubscribe();
+    }
+  };
+
+  return [
+    customRef((track, trigger) => {
+      let value = initialValue;
+
+      sub = stream$.subscribe((val) => {
+        value = val;
+        trigger();
+      });
+
+      return {
+        get() {
+          track();
+          return value;
+        },
+        set(value: T) {
+          trigger();
+          setter(value);
+        },
+      };
+    }),
+    stopper,
+  ];
+}
+
+export type StreamSubscriberFunc = <T>(
+  stream: Observable<T>,
+  next?: ((value: T) => void) | undefined,
+  error?: ((e: any) => void) | undefined,
+  complete?: (() => void) | undefined
+) => void;
+
+/**
+ * A composable that provides the ability to run streams
+ * and subscribe to them and respect the component lifecycle.
+ */
+export function useStreamSubscriber(): {
+  subscribeToStream: StreamSubscriberFunc;
+} {
+  const subs: Subscription[] = [];
+
+  const runAndSubscribe = <T>(
+    stream: Observable<T>,
+    next?: (value: T) => void,
+    error?: (e: any) => void,
+    complete?: () => void
+  ) => {
+    const sub = stream.subscribe({
+      next,
+      error,
+      complete: () => {
+        if (complete) complete();
+        subs.splice(subs.indexOf(sub), 1);
+      },
+    });
+
+    subs.push(sub);
+  };
+
+  onBeforeUnmount(() => {
+    subs.forEach((sub) => sub.unsubscribe());
+  });
+
+  return {
+    subscribeToStream: runAndSubscribe,
+  };
+}
diff --git a/packages/hoppscotch-sh-admin/src/helpers/auth.ts b/packages/hoppscotch-sh-admin/src/helpers/auth.ts
new file mode 100644
index 000000000..a245d4579
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/helpers/auth.ts
@@ -0,0 +1,385 @@
+import axios from 'axios';
+import { BehaviorSubject, Subject } from 'rxjs';
+import {
+  getLocalConfig,
+  removeLocalConfig,
+  setLocalConfig,
+} from './localpersistence';
+import { Ref, ref, watch } from 'vue';
+
+/**
+ * A common (and required) set of fields that describe a user.
+ */
+export type HoppUser = {
+  /** A unique ID identifying the user */
+  uid: string;
+
+  /** The name to be displayed as the user's */
+  displayName: string | null;
+
+  /** The user's email address */
+  email: string | null;
+
+  /** URL to the profile picture of the user */
+  photoURL: string | null;
+
+  // Regarding `provider` and `accessToken`:
+  // The current implementation and use case for these 2 fields are super weird due to legacy.
+  // Currrently these fields are only basically populated for Github Auth as we need the access token issued
+  // by it to implement Gist submission. I would really love refactor to make this thing more sane.
+
+  /** Name of the provider authenticating (NOTE: See notes on `platform/auth.ts`) */
+  provider?: string;
+  /** Access Token for the auth of the user against the given `provider`. */
+  accessToken?: string;
+  emailVerified: boolean;
+
+  isAdmin: boolean;
+};
+
+export type AuthEvent =
+  | { event: 'probable_login'; user: HoppUser } // We have previous login state, but the app is waiting for authentication
+  | { event: 'login'; user: HoppUser } // We are authenticated
+  | { event: 'logout' } // No authentication and we have no previous state
+  | { event: 'token_refresh' }; // We have previous login state, but the app is waiting for authentication
+
+export type GithubSignInResult =
+  | { type: 'success'; user: HoppUser } // The authentication was a success
+  | { type: 'account-exists-with-different-cred'; link: () => Promise<void> } // We authenticated correctly, but the provider didn't match, so we give the user the opportunity to link to continue completing auth
+  | { type: 'error'; err: unknown }; // Auth failed completely and we don't know why
+
+export const authEvents$ = new Subject<
+  AuthEvent | { event: 'token_refresh' }
+>();
+const currentUser$ = new BehaviorSubject<HoppUser | null>(null);
+export const probableUser$ = new BehaviorSubject<HoppUser | null>(null);
+
+async function logout() {
+  await axios.get(`${import.meta.env.VITE_BACKEND_API_URL}/auth/logout`, {
+    withCredentials: true,
+  });
+}
+
+async function signInUserWithGithubFB() {
+  window.location.href = `${import.meta.env.VITE_BACKEND_API_URL}/auth/github`;
+}
+
+async function signInUserWithGoogleFB() {
+  window.location.href = `${import.meta.env.VITE_BACKEND_API_URL}/auth/google`;
+}
+
+async function signInUserWithMicrosoftFB() {
+  window.location.href = `${
+    import.meta.env.VITE_BACKEND_API_URL
+  }/auth/microsoft`;
+}
+
+async function getInitialUserDetails() {
+  const res = await axios.post<{
+    data?: {
+      me?: {
+        uid: string;
+        displayName: string;
+        email: string;
+        photoURL: string;
+        isAdmin: boolean;
+        createdOn: string;
+        // emailVerified: boolean
+      };
+    };
+    errors?: Array<{
+      message: string;
+    }>;
+  }>(
+    `${import.meta.env.VITE_BACKEND_GQL_URL}`,
+    {
+      query: `query Me {
+      me {
+        uid
+        displayName
+        email
+        photoURL
+        isAdmin
+        createdOn
+      }
+    }`,
+    },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      withCredentials: true,
+    }
+  );
+
+  return res.data;
+}
+
+const isGettingInitialUser: Ref<null | boolean> = ref(null);
+
+function setUser(user: HoppUser | null) {
+  currentUser$.next(user);
+  probableUser$.next(user);
+
+  setLocalConfig('login_state', JSON.stringify(user));
+}
+
+async function setInitialUser() {
+  isGettingInitialUser.value = true;
+  const res = await getInitialUserDetails();
+
+  const error = res.errors && res.errors[0];
+
+  // no cookies sent. so the user is not logged in
+  if (error && error.message === 'auth/cookies_not_found') {
+    setUser(null);
+    isGettingInitialUser.value = false;
+    return;
+  }
+
+  // cookies sent, but it is expired, we need to refresh the token
+  if (error && error.message === 'Unauthorized') {
+    const isRefreshSuccess = await refreshToken();
+
+    if (isRefreshSuccess) {
+      setInitialUser();
+    } else {
+      setUser(null);
+      isGettingInitialUser.value = false;
+    }
+
+    return;
+  }
+
+  // no errors, we have a valid user
+  if (res.data && res.data.me) {
+    const hoppBackendUser = res.data.me;
+
+    const hoppUser: HoppUser = {
+      uid: hoppBackendUser.uid,
+      displayName: hoppBackendUser.displayName,
+      email: hoppBackendUser.email,
+      photoURL: hoppBackendUser.photoURL,
+      // all our signin methods currently guarantees the email is verified
+      emailVerified: true,
+      isAdmin: hoppBackendUser.isAdmin,
+    };
+
+    if (!hoppUser.isAdmin) {
+      const isAdmin = await elevateUser();
+      hoppUser.isAdmin = isAdmin;
+    }
+
+    setUser(hoppUser);
+
+    isGettingInitialUser.value = false;
+
+    authEvents$.next({
+      event: 'login',
+      user: hoppUser,
+    });
+
+    return;
+  }
+}
+
+async function refreshToken() {
+  const res = await axios.get(
+    `${import.meta.env.VITE_BACKEND_API_URL}/auth/refresh`,
+    {
+      withCredentials: true,
+    }
+  );
+
+  const isSuccessful = res.status === 200;
+
+  if (isSuccessful) {
+    authEvents$.next({
+      event: 'token_refresh',
+    });
+  }
+
+  return isSuccessful;
+}
+
+async function elevateUser() {
+  const res = await axios.get(
+    `${import.meta.env.VITE_BACKEND_API_URL}/auth/verify/admin`,
+    {
+      withCredentials: true,
+    }
+  );
+
+  return !!res.data?.isAdmin;
+}
+
+async function sendMagicLink(email: string) {
+  const res = await axios.post(
+    `${import.meta.env.VITE_BACKEND_API_URL}/auth/signin`,
+    {
+      email,
+    },
+    {
+      withCredentials: true,
+    }
+  );
+
+  if (res.data && res.data.deviceIdentifier) {
+    setLocalConfig('deviceIdentifier', res.data.deviceIdentifier);
+  } else {
+    throw new Error('test: does not get device identifier');
+  }
+
+  return res.data;
+}
+
+export const auth = {
+  getCurrentUserStream: () => currentUser$,
+  getAuthEventsStream: () => authEvents$,
+  getProbableUserStream: () => probableUser$,
+
+  getCurrentUser: () => currentUser$.value,
+  getProbableUser: () => probableUser$.value,
+
+  getBackendHeaders() {
+    return {};
+  },
+  getGQLClientOptions() {
+    return {
+      fetchOptions: {
+        credentials: 'include',
+      },
+    };
+  },
+
+  /**
+   * it is not possible for us to know if the current cookie is expired because we cannot access http-only cookies from js
+   * hence just returning if the currentUser$ has a value associated with it
+   */
+  willBackendHaveAuthError() {
+    return !currentUser$.value;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onBackendGQLClientShouldReconnect(func: () => void) {
+    authEvents$.subscribe((event) => {
+      if (
+        event.event == 'login' ||
+        event.event == 'logout' ||
+        event.event == 'token_refresh'
+      ) {
+        func();
+      }
+    });
+  },
+
+  /**
+   * we cannot access our auth cookies from javascript, so leaving this as null
+   */
+  getDevOptsBackendIDToken() {
+    return null;
+  },
+  async performAuthInit() {
+    const probableUser = JSON.parse(getLocalConfig('login_state') ?? 'null');
+    probableUser$.next(probableUser);
+    await setInitialUser();
+  },
+
+  waitProbableLoginToConfirm() {
+    return new Promise<void>((resolve, reject) => {
+      if (this.getCurrentUser()) {
+        resolve();
+      }
+
+      if (!probableUser$.value) reject(new Error('no_probable_user'));
+
+      const unwatch = watch(isGettingInitialUser, (val) => {
+        if (val === true || val === false) {
+          resolve();
+          unwatch();
+        }
+      });
+    });
+  },
+
+  async signInWithEmail(email: string) {
+    await sendMagicLink(email);
+  },
+
+  isSignInWithEmailLink(url: string) {
+    const urlObject = new URL(url);
+    const searchParams = new URLSearchParams(urlObject.search);
+
+    return !!searchParams.get('token');
+  },
+
+  async verifyEmailAddress() {
+    return;
+  },
+  async signInUserWithGoogle() {
+    await signInUserWithGoogleFB();
+  },
+  async signInUserWithGithub() {
+    await signInUserWithGithubFB();
+    return undefined;
+  },
+  async signInUserWithMicrosoft() {
+    await signInUserWithMicrosoftFB();
+  },
+  async signInWithEmailLink(email: string, url: string) {
+    const urlObject = new URL(url);
+    const searchParams = new URLSearchParams(urlObject.search);
+
+    const token = searchParams.get('token');
+    const deviceIdentifier = getLocalConfig('deviceIdentifier');
+
+    await axios.post(
+      `${import.meta.env.VITE_BACKEND_API_URL}/auth/verify`,
+      {
+        token: token,
+        deviceIdentifier,
+      },
+      {
+        withCredentials: true,
+      }
+    );
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async setEmailAddress(_email: string) {
+    return;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async setDisplayName(name: string) {
+    return;
+  },
+
+  async signOutUser() {
+    // if (!currentUser$.value) throw new Error("No user has logged in")
+
+    await logout();
+
+    probableUser$.next(null);
+    currentUser$.next(null);
+    removeLocalConfig('login_state');
+
+    authEvents$.next({
+      event: 'logout',
+    });
+  },
+
+  async processMagicLink() {
+    if (this.isSignInWithEmailLink(window.location.href)) {
+      const deviceIdentifier = getLocalConfig('deviceIdentifier');
+
+      if (!deviceIdentifier) {
+        throw new Error(
+          'Device Identifier not found, you can only signin from the browser you generated the magic link'
+        );
+      }
+
+      await this.signInWithEmailLink(deviceIdentifier, window.location.href);
+
+      removeLocalConfig('deviceIdentifier');
+      window.location.href = '/';
+    }
+  },
+};
diff --git a/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/Me.graphql b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/Me.graphql
new file mode 100644
index 000000000..0ebb2f444
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/Me.graphql
@@ -0,0 +1,9 @@
+query Me {
+  me {
+    uid
+    displayName
+    photoURL
+    isAdmin
+    createdOn
+  }
+}
diff --git a/packages/hoppscotch-sh-admin/src/helpers/localpersistence.ts b/packages/hoppscotch-sh-admin/src/helpers/localpersistence.ts
new file mode 100644
index 000000000..52407a23a
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/helpers/localpersistence.ts
@@ -0,0 +1,27 @@
+/**
+ * Gets a value in LocalStorage.
+ *
+ * NOTE: Use LocalStorage to only store non-reactive simple data
+ * For more complex data, use stores and connect it to localpersistence
+ */
+export function getLocalConfig(name: string) {
+  return window.localStorage.getItem(name);
+}
+
+/**
+ * Sets a value in LocalStorage.
+ *
+ * NOTE: Use LocalStorage to only store non-reactive simple data
+ * For more complex data, use stores and connect it to localpersistence
+ */
+export function setLocalConfig(key: string, value: string) {
+  window.localStorage.setItem(key, value);
+}
+
+/**
+ * Clear config value in LocalStorage.
+ * @param key Key to be cleared
+ */
+export function removeLocalConfig(key: string) {
+  window.localStorage.removeItem(key);
+}
diff --git a/packages/hoppscotch-sh-admin/src/main.ts b/packages/hoppscotch-sh-admin/src/main.ts
index 514d424cb..84e51e900 100644
--- a/packages/hoppscotch-sh-admin/src/main.ts
+++ b/packages/hoppscotch-sh-admin/src/main.ts
@@ -1,33 +1,16 @@
 import { createApp } from 'vue';
 import urql, { createClient } from '@urql/vue';
 import App from './App.vue';
-import Toasted from '@hoppscotch/vue-toasted';
-import type { ToastOptions } from '@hoppscotch/vue-toasted';
 
 // STYLES
 import 'virtual:windi.css';
-import '@hoppscotch/vue-toasted/style.css';
 import '@hoppscotch/ui/style.css';
 import '../assets/scss/themes.scss';
 import '../assets/scss/styles.scss';
 // END STYLES
 
-import {
-  createRouter,
-  createWebHashHistory,
-  createWebHistory,
-} from 'vue-router';
-
-import { setupLayouts } from 'virtual:generated-layouts';
-import generatedRoutes from 'virtual:generated-pages';
-
-import { plugin as HoppUIPlugin, HoppUIPluginOptions } from '@hoppscotch/ui';
-
-const options: HoppUIPluginOptions = {
-  /* Define options here */
-};
-
-const routes = setupLayouts(generatedRoutes);
+import { HOPP_MODULES } from './modules';
+import { auth } from './helpers/auth';
 
 const app = createApp(App).use(
   urql,
@@ -41,21 +24,10 @@ const app = createApp(App).use(
   })
 );
 
-// We are using a fork of Vue Toasted (github.com/clayzar/vue-toasted) which is a bit of
-// an untrusted fork, we will either want to make our own fork or move to a more stable one
-// The original Vue Toasted doesn't support Vue 3 and the OP has been irresponsive.
-app.use(Toasted, <ToastOptions>{
-  position: 'bottom-center',
-  duration: 3000,
-  keepOnHover: true,
-});
+// Initialize auth
+await auth.performAuthInit();
 
-app.use(HoppUIPlugin, options);
-app.use(
-  createRouter({
-    history: createWebHistory(),
-    routes,
-  })
-);
+// Initialize modules
+HOPP_MODULES.forEach((mod) => mod.onVueAppInit?.(app));
 
 app.mount('#app');
diff --git a/packages/hoppscotch-sh-admin/src/modules/admin.ts b/packages/hoppscotch-sh-admin/src/modules/admin.ts
new file mode 100644
index 000000000..5e4df5911
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/modules/admin.ts
@@ -0,0 +1,19 @@
+import { auth } from '~/helpers/auth';
+import { HoppModule } from '.';
+
+const isAdmin = () => {
+  const user = auth.getCurrentUser();
+  return user ? user.isAdmin : false;
+};
+
+export default <HoppModule>{
+  onBeforeRouteChange(to, from, next) {
+    if (to.name !== 'index' && !isAdmin()) {
+      next({ name: 'index' });
+    } else if (to.name === 'index' && isAdmin()) {
+      next({ name: 'dashboard' });
+    } else {
+      next();
+    }
+  },
+};
diff --git a/packages/hoppscotch-sh-admin/src/modules/index.ts b/packages/hoppscotch-sh-admin/src/modules/index.ts
new file mode 100644
index 000000000..f5abdc985
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/modules/index.ts
@@ -0,0 +1,57 @@
+import { App } from 'vue';
+import { pipe } from 'fp-ts/function';
+import * as A from 'fp-ts/Array';
+import {
+  NavigationGuardNext,
+  RouteLocationNormalized,
+  Router,
+} from 'vue-router';
+
+export type HoppModule = {
+  /**
+   * Define this function to get access to Vue App instance and augment
+   * it (installing components, directives and plugins). Also useful for
+   * early generic initializations. This function should be called first
+   */
+  onVueAppInit?: (app: App) => void;
+
+  /**
+   * Called when the router is done initializing.
+   * Used if a module requires access to the router instance
+   */
+  onRouterInit?: (app: App, router: Router) => void;
+
+  /**
+   * Called when the root component (App.vue) is running setup.
+   * This function is generally called last in the lifecycle.
+   * This function executes with a component setup context, so you can
+   * run composables within this and it should just be scoped to the
+   * root component
+   */
+  onRootSetup?: () => void;
+
+  /**
+   * Called by the router to tell all the modules before a route navigation
+   * is made.
+   */
+  onBeforeRouteChange?: (
+    to: RouteLocationNormalized,
+    from: RouteLocationNormalized,
+    next: NavigationGuardNext,
+    router: Router
+  ) => void;
+
+  /**
+   * Called by the router to tell all the modules that a route navigation has completed
+   */
+  onAfterRouteChange?: (to: RouteLocationNormalized, router: Router) => void;
+};
+
+/**
+ * All the modules Hoppscotch loads into the app
+ */
+export const HOPP_MODULES = pipe(
+  import.meta.glob('@modules/*.ts', { eager: true }),
+  Object.values,
+  A.map(({ default: defaultVal }) => defaultVal as HoppModule)
+);
diff --git a/packages/hoppscotch-sh-admin/src/modules/router.ts b/packages/hoppscotch-sh-admin/src/modules/router.ts
new file mode 100644
index 000000000..317f30000
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/modules/router.ts
@@ -0,0 +1,72 @@
+import { HoppModule, HOPP_MODULES } from '.';
+import {
+  createRouter,
+  createWebHistory,
+  RouteLocationNormalized,
+} from 'vue-router';
+import { setupLayouts } from 'virtual:generated-layouts';
+import generatedRoutes from 'virtual:generated-pages';
+import { readonly, ref } from 'vue';
+
+const routes = setupLayouts(generatedRoutes);
+
+/**
+ * A reactive value signifying whether we are currently navigating
+ * into the first route the application is routing into.
+ * Useful, if you want to do stuff for the initial page load (for example splash screens!)
+ */
+const _isLoadingInitialRoute = ref(false);
+
+/**
+ * Says whether a given route looks like an initial route which
+ * is loaded as the first route.
+ *
+ * NOTE: This function assumes Vue Router represents that initial route
+ * in the way we expect (fullPath == "/" and name == undefined). If this
+ * function breaks later on, most probs vue-router updated its semantics
+ * and we have to correct this function.
+ */
+function isInitialRoute(route: RouteLocationNormalized) {
+  return route.fullPath === '/' && route.name === undefined;
+}
+
+/**
+ * A reactive value signifying whether we are currently navigating
+ * into the first route the application is routing into.
+ * Useful, if you want to do stuff for the initial page load (for example splash screens!)
+ *
+ * NOTE: This reactive value is READONLY
+ */
+export const isLoadingInitialRoute = readonly(_isLoadingInitialRoute);
+
+export default <HoppModule>{
+  onVueAppInit(app) {
+    const router = createRouter({
+      history: createWebHistory(),
+      routes,
+    });
+
+    router.beforeEach((to, from, next) => {
+      _isLoadingInitialRoute.value = isInitialRoute(from);
+
+      HOPP_MODULES.forEach((mod) => {
+        mod.onBeforeRouteChange?.(to, from, next, router);
+      });
+    });
+
+    // Instead of this a better architecture is for the router
+    // module to expose a stream of router events that can be independently
+    // subbed to
+    router.afterEach((to) => {
+      _isLoadingInitialRoute.value = false;
+
+      HOPP_MODULES.forEach((mod) => {
+        mod.onAfterRouteChange?.(to, router);
+      });
+    });
+
+    app.use(router);
+
+    HOPP_MODULES.forEach((mod) => mod.onRouterInit?.(app, router));
+  },
+};
diff --git a/packages/hoppscotch-sh-admin/src/modules/toast.ts b/packages/hoppscotch-sh-admin/src/modules/toast.ts
new file mode 100644
index 000000000..37086616b
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/modules/toast.ts
@@ -0,0 +1,19 @@
+import Toasted from '@hoppscotch/vue-toasted';
+import type { ToastOptions } from '@hoppscotch/vue-toasted';
+import { HoppModule } from '.';
+
+import '@hoppscotch/vue-toasted/style.css';
+
+// We are using a fork of Vue Toasted (github.com/clayzar/vue-toasted) which is a bit of
+// an untrusted fork, we will either want to make our own fork or move to a more stable one
+// The original Vue Toasted doesn't support Vue 3 and the OP has been irresponsive.
+
+export default <HoppModule>{
+  onVueAppInit(app) {
+    app.use(Toasted, <ToastOptions>{
+      position: 'bottom-center',
+      duration: 3000,
+      keepOnHover: true,
+    });
+  },
+};
diff --git a/packages/hoppscotch-sh-admin/src/modules/ui.ts b/packages/hoppscotch-sh-admin/src/modules/ui.ts
new file mode 100644
index 000000000..0c23cb615
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/modules/ui.ts
@@ -0,0 +1,13 @@
+import { HoppModule } from '.';
+import { plugin as HoppUI, HoppUIPluginOptions } from '@hoppscotch/ui';
+
+const HoppUIOptions: HoppUIPluginOptions = {};
+
+export default <HoppModule>{
+  onVueAppInit(app) {
+    // disable eslint for this line. it's a hack because there's some unknown type error
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    app.use(HoppUI, HoppUIOptions);
+  },
+};
diff --git a/packages/hoppscotch-sh-admin/src/modules/v-focus.ts b/packages/hoppscotch-sh-admin/src/modules/v-focus.ts
new file mode 100644
index 000000000..190a61d67
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/modules/v-focus.ts
@@ -0,0 +1,15 @@
+import { nextTick } from "vue"
+import { HoppModule } from "."
+
+/*
+  Declares a `v-focus` directive that can be used for components
+  to acquire focus instantly once mounted
+*/
+
+export default <HoppModule>{
+  onVueAppInit(app) {
+    app.directive("focus", {
+      mounted: (el) => nextTick(() => el.focus()),
+    })
+  },
+}
diff --git a/packages/hoppscotch-sh-admin/src/pages/index.vue b/packages/hoppscotch-sh-admin/src/pages/index.vue
index 153bc8855..dac5d38fa 100644
--- a/packages/hoppscotch-sh-admin/src/pages/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/index.vue
@@ -1,113 +1,25 @@
 <template>
   <div
-    class="flex items-center justify-center h-screen px-6 bg-gray-200 dark:bg-gradient-to-r dark:from-zinc-700 dark:to-gray-900"
+    class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gradient-to-r dark:from-zinc-700 dark:to-gray-900 p-6"
   >
-    <div
-      class="w-full max-w-lg p-8 bg-white dark:bg-gradient-to-r dark:from-zinc-800 dark:to-gray-900 rounded-lg shadow-md"
-    >
-      <div class="flex items-center justify-center mt-6">
-        <div class="flex items-center">
-          <img src="/public/cover.jpg" alt="" class="h-12" />
-
-          <span
-            class="mx-2 text-2xl font-semibold text-gray-600 dark:text-gray-300"
-            >Hoppscotch</span
-          >
-        </div>
+    <div>
+      <div class="flex flex-col items-center justify-center mb-10">
+        <HoppButtonSecondary
+          class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark uppercase"
+          :label="'Hoppscotch'"
+          to="/"
+        />
+        <span> Dashboard </span>
+      </div>
+      <div
+        class="bg-primary xs:w-xs sm:w-sm md:w-lg p-10 rounded-md border border-secondaryLight"
+      >
+        <AppLogin />
       </div>
-
-      <form class="mt-4" @submit.prevent="login">
-        <label class="block">
-          <span class="text-sm text-gray-400">Email</span>
-          <input
-            type="email"
-            class="block w-full p-2 mt-1 bg-gray-700 border-gray-700 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-            v-model="email"
-          />
-        </label>
-
-        <label class="block mt-3">
-          <span class="text-sm text-gray-400">Password</span>
-          <input
-            type="password"
-            class="block w-full p-2 mt-1 bg-gray-700 border-gray-700 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-            v-model="password"
-          />
-        </label>
-
-        <div class="flex items-center justify-between mt-4">
-          <div>
-            <label class="inline-flex items-center">
-              <input
-                type="checkbox"
-                class="text-indigo-600 border-gray-200 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-              />
-              <span class="mx-2 text-sm text-gray-400">Remember me</span>
-            </label>
-          </div>
-
-          <div>
-            <a
-              class="block text-sm text-emerald-700 fontme hover:underline"
-              href="#"
-              >Forgot your password?</a
-            >
-          </div>
-        </div>
-
-        <div class="mt-6">
-          <button
-            type="submit"
-            class="w-full px-4 py-2 text-sm text-center text-white bg-emerald-600 rounded-md focus:outline-none hover:bg-emerald-500"
-          >
-            Sign in
-          </button>
-        </div>
-
-        <div class="mt-6">
-          <button
-            type="submit"
-            class="w-full px-4 py-2 text-sm text-center text-white border border-gray-500 rounded-md focus:outline-none hover:bg-gray-700"
-          >
-            Sign in with Google
-          </button>
-        </div>
-
-        <div class="mt-6">
-          <button
-            type="submit"
-            class="w-full px-4 py-2 text-sm text-center text-white border border-gray-500 rounded-md focus:outline-none hover:bg-gray-700"
-          >
-            Sign in with Microsoft
-          </button>
-        </div>
-
-        <div class="mt-6">
-          <button
-            type="submit"
-            class="w-full px-4 py-2 text-sm text-center text-white border border-gray-500 rounded-md focus:outline-none hover:bg-gray-700"
-          >
-            Sign in with Github
-          </button>
-        </div>
-      </form>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-const email = ref('joel@gmail.com');
-const password = ref('@#!@#asdf1231!_!@#');
-
-function login() {
-  router.push('/dashboard');
-}
-</script>
-
 <route lang="yaml">
 meta:
   layout: empty
diff --git a/packages/hoppscotch-sh-admin/tsconfig.json b/packages/hoppscotch-sh-admin/tsconfig.json
index 20d96d963..c30a31a15 100644
--- a/packages/hoppscotch-sh-admin/tsconfig.json
+++ b/packages/hoppscotch-sh-admin/tsconfig.json
@@ -1,91 +1,43 @@
-// {
-//   "compilerOptions": {
-//     "target": "ESNext",
-//     "useDefineForClassFields": true,
-//     "module": "ESNext",
-//     "moduleResolution": "Node",
-//     "strict": true,
-//     "jsx": "preserve",
-//     "resolveJsonModule": true,
-//     "isolatedModules": true,
-//     "esModuleInterop": true,
-//     "lib": ["ESNext", "DOM"],
-//     "skipLibCheck": true,
-//     "noEmit": true
-//   },
-//   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-//   "references": [{ "path": "./tsconfig.node.json" }]
-// }
-
 {
   "compilerOptions": {
-    /* Visit https://aka.ms/tsconfig.json to read more about this file */
-
-    /* Basic Options */
-    // "incremental": true,                         /* Enable incremental compilation */
-    "target": "es5",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
-    "module": "commonjs",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
-    // "lib": [],                                   /* Specify library files to be included in the compilation. */
-    // "allowJs": true,                             /* Allow javascript files to be compiled. */
-    // "checkJs": true,                             /* Report errors in .js files. */
-    // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
-    // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
-    // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    // "sourceMap": true,                           /* Generates corresponding '.map' file. */
-    // "outFile": "./",                             /* Concatenate and emit output to single file. */
-    // "outDir": "./",                              /* Redirect output structure to the directory. */
-    // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-    // "composite": true,                           /* Enable project compilation */
-    // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
-    // "removeComments": true,                      /* Do not emit comments to output. */
-    // "noEmit": true,                              /* Do not emit outputs. */
-    // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
-    // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-
-    /* Strict Type-Checking Options */
-    "strict": true,                                 /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,                    /* Enable strict null checks. */
-    // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
-    // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
-    // "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
-    // "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
-    // "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */
-
-    /* Additional Checks */
-    // "noUnusedLocals": true,                      /* Report errors on unused locals. */
-    // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
-    // "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
-    // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
-    // "noImplicitOverride": true,                  /* Ensure overriding members in derived classes are marked with an 'override' modifier. */
-    // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
-
-    /* Module Resolution Options */
-    // "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
-    // "typeRoots": [],                             /* List of folders to include type definitions from. */
-    // "types": [],                                 /* Type declaration files to be included in compilation. */
-    // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
-    // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
-
-    /* Source Map Options */
-    // "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-    // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
-    // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-
-    /* Experimental Options */
-    "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
-    // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
-
-    /* Advanced Options */
-    "skipLibCheck": true,                           /* Skip type checking of declaration files. */
-    "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noUnusedLocals": true,
+    "paths": {
+      "~/*": ["./src/*"],
+      "@composables/*": ["./src/composables/*"],
+      "@components/*": ["./src/components/*"],
+      "@helpers/*": ["./src/helpers/*"],
+      "@modules/*": ["./src/modules/*"],
+      "@workers/*": ["./src/workers/*"],
+      "@functional/*": ["./src/helpers/functional/*"]
+    },
+    "types": [
+      "vite/client",
+      "unplugin-icons/types/vue",
+      "vite-plugin-pages/client",
+      "vite-plugin-vue-layouts/client"
+    ]
+  },
+  "include": [
+    "meta.ts",
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "vueCompilerOptions": {
+    "jsxTemplates": true,
+    "experimentalRfc436": true
   }
 }
diff --git a/packages/hoppscotch-sh-admin/vite.config.ts b/packages/hoppscotch-sh-admin/vite.config.ts
index 461b2cdba..4144aee91 100644
--- a/packages/hoppscotch-sh-admin/vite.config.ts
+++ b/packages/hoppscotch-sh-admin/vite.config.ts
@@ -11,10 +11,15 @@ import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  envDir: path.resolve(__dirname, "../../"),
   server: {
     port: 3000,
   },
+  resolve: {
+    alias: {
+      '~': path.resolve(__dirname, '../hoppscotch-sh-admin/src'),
+      '@modules': path.resolve(__dirname, '../hoppscotch-sh-admin/src/modules'),
+    },
+  },
   plugins: [
     vue(),
     Pages({
@@ -30,22 +35,25 @@ export default defineConfig({
     }),
     Components({
       dts: './src/components.d.ts',
-      dirs: ['./src/components', '../hoppscotch-ui/src/components'],
+      dirs: ['./src/components'],
       directoryAsNamespace: true,
       resolvers: [
         IconResolver({
           prefix: 'icon',
-          customCollections: ['hopp', 'auth', 'brands'],
+          customCollections: ['auth'],
         }),
         (compName: string) => {
-          if (compName.startsWith("Hopp"))
-            return { name: compName, from: "@hoppscotch/ui" }
-          else return undefined
+          if (compName.startsWith('Hopp'))
+            return { name: compName, from: '@hoppscotch/ui' };
+          else return undefined;
         },
       ],
     }),
     Icons({
       compiler: 'vue3',
+      customCollections: {
+        auth: FileSystemIconLoader('../hoppscotch-sh-admin/assets/icons/auth'),
+      },
     }),
   ],
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2c814f1d7..aa87bc638 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -667,23 +667,27 @@ importers:
       '@types/cors': ^2.8.13
       '@types/express': ^4.17.15
       '@urql/vue': ^1.0.4
-      '@vitejs/plugin-vue': ^1.6.0
+      '@vitejs/plugin-vue': ^3.1.0
       '@vue/compiler-sfc': ^3.2.6
       '@vueuse/core': ^9.10.0
+      axios: ^0.21.4
       cors: ^2.8.5
       date-fns: ^2.29.3
       express: ^4.18.2
       express-graphql: ^0.12.0
+      fp-ts: ^2.13.1
       graphql: ^16.6.0
       graphql-tag: ^2.12.6
+      lodash-es: ^4.17.21
       npm-run-all: ^4.1.5
+      rxjs: ^7.8.0
       sass: ^1.57.1
       ts-node: ^10.9.1
       ts-node-dev: ^2.0.0
       typescript: ^4.9.3
       unplugin-icons: ^0.14.9
       unplugin-vue-components: ^0.21.0
-      vite: ^2.5.1
+      vite: ^3.1.4
       vite-plugin-pages: ^0.26.0
       vite-plugin-vue-layouts: ^0.7.0
       vite-plugin-windicss: ^1.8.8
@@ -699,14 +703,18 @@ importers:
       '@types/express': 4.17.16
       '@urql/vue': 1.0.4_graphql@16.6.0+vue@3.2.45
       '@vueuse/core': 9.12.0_vue@3.2.45
+      axios: 0.21.4
       cors: 2.8.5
       date-fns: 2.29.3
       express: 4.18.2
       express-graphql: 0.12.0_graphql@16.6.0
+      fp-ts: 2.13.1
       graphql: 16.6.0
+      lodash-es: 4.17.21
+      rxjs: 7.8.0
       ts-node-dev: 2.0.0_typescript@4.9.3
-      unplugin-icons: 0.14.9_4xrupm67ziznosrlzffuj26hkq
-      unplugin-vue-components: 0.21.0_vite@2.9.15+vue@3.2.45
+      unplugin-icons: 0.14.9_ucej6auec2vidlux2n3htzvxf4
+      unplugin-vue-components: 0.21.0_vite@3.2.4+vue@3.2.45
       vue: 3.2.45
       vue-router: 4.1.0_vue@3.2.45
     devDependencies:
@@ -718,17 +726,17 @@ importers:
       '@graphql-codegen/typescript-document-nodes': 3.0.0_graphql@16.6.0
       '@graphql-codegen/typescript-operations': 3.0.0_graphql@16.6.0
       '@graphql-codegen/urql-introspection': 2.2.1_graphql@16.6.0
-      '@vitejs/plugin-vue': 1.10.2_vite@2.9.15
+      '@vitejs/plugin-vue': 3.2.0_vite@3.2.4+vue@3.2.45
       '@vue/compiler-sfc': 3.2.45
       graphql-tag: 2.12.6_graphql@16.6.0
       npm-run-all: 4.1.5
       sass: 1.58.0
       ts-node: 10.9.1_typescript@4.9.3
       typescript: 4.9.3
-      vite: 2.9.15_sass@1.58.0
-      vite-plugin-pages: 0.26.0_4xrupm67ziznosrlzffuj26hkq
-      vite-plugin-vue-layouts: 0.7.0_xxumm4g4rkhkfqiqbziyjd5llu
-      vite-plugin-windicss: 1.8.8_vite@2.9.15
+      vite: 3.2.4_sass@1.58.0
+      vite-plugin-pages: 0.26.0_ucej6auec2vidlux2n3htzvxf4
+      vite-plugin-vue-layouts: 0.7.0_x3isqn4gd6tlkzc66bnhwnhwbi
+      vite-plugin-windicss: 1.8.8_vite@3.2.4
       vue-tsc: 0.3.0_typescript@4.9.3
       windicss: 3.5.6
 
@@ -3130,7 +3138,7 @@ packages:
       '@firebase/app-compat': 0.1.28
       '@firebase/component': 0.5.16
       '@firebase/util': 1.6.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - '@firebase/app'
     dev: false
@@ -3149,7 +3157,7 @@ packages:
       '@firebase/installations': 0.5.11_@firebase+app@0.7.27
       '@firebase/logger': 0.3.3
       '@firebase/util': 1.6.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     dev: false
 
   /@firebase/app-check-compat/0.2.10_ikt45rtbctnl5l4y6p3bca5464:
@@ -3163,7 +3171,7 @@ packages:
       '@firebase/component': 0.5.16
       '@firebase/logger': 0.3.3
       '@firebase/util': 1.6.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - '@firebase/app'
     dev: false
@@ -3185,7 +3193,7 @@ packages:
       '@firebase/component': 0.5.16
       '@firebase/logger': 0.3.3
       '@firebase/util': 1.6.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     dev: false
 
   /@firebase/app-compat/0.1.28:
@@ -3195,7 +3203,7 @@ packages:
       '@firebase/component': 0.5.16
       '@firebase/logger': 0.3.3
       '@firebase/util': 1.6.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     dev: false
 
   /@firebase/app-types/0.7.0:
@@ -3209,7 +3217,7 @@ packages:
       '@firebase/logger': 0.3.3
       '@firebase/util': 1.6.2
       idb: 7.0.1
-      tslib: 2.4.0
+      tslib: 2.5.0
     dev: false
 
   /@firebase/auth-compat/0.2.17_2whj6v3knk7rswcmdbn5bdkgna:
@@ -3224,7 +3232,7 @@ packages:
       '@firebase/util': 1.6.2
       node-fetch: 2.6.7
       selenium-webdriver: 4.1.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - '@firebase/app'
       - '@firebase/app-types'
@@ -3264,7 +3272,7 @@ packages:
       '@firebase/util': 1.6.2
       node-fetch: 2.6.7
       selenium-webdriver: 4.1.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - bufferutil
       - encoding
@@ -3275,7 +3283,7 @@ packages:
     resolution: {integrity: sha512-/pkl77mN9PT7dTSzNu1CrvIvd+z1CdePnEl+VITaeSBs9Ko7ZVvSIlzQLbSwqksXX3bAHpxej0Mg6mVKQiRVSw==}
     dependencies:
       '@firebase/util': 1.6.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     dev: false
 
   /@firebase/database-compat/0.2.2_@firebase+app-types@0.7.0:
@@ -3286,7 +3294,7 @@ packages:
       '@firebase/database-types': 0.9.10
       '@firebase/logger': 0.3.3
       '@firebase/util': 1.6.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - '@firebase/app-types'
     dev: false
@@ -3306,7 +3314,7 @@ packages:
       '@firebase/logger': 0.3.3
       '@firebase/util': 1.6.2
       faye-websocket: 0.11.4
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - '@firebase/app-types'
     dev: false
@@ -3321,7 +3329,7 @@ packages:
       '@firebase/firestore': 3.4.11_@firebase+app@0.7.27
       '@firebase/firestore-types': 2.5.0_ee7bhenjigpuz3jknhp5542foa
       '@firebase/util': 1.6.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - '@firebase/app'
       - '@firebase/app-types'
@@ -3352,7 +3360,7 @@ packages:
       '@grpc/grpc-js': 1.6.7
       '@grpc/proto-loader': 0.6.13
       node-fetch: 2.6.7
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - encoding
     dev: false
@@ -3367,7 +3375,7 @@ packages:
       '@firebase/functions': 0.8.3_m3w7qpgfrijausz7l34kldvbjq
       '@firebase/functions-types': 0.5.0
       '@firebase/util': 1.6.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - '@firebase/app'
       - '@firebase/app-types'
@@ -3390,7 +3398,7 @@ packages:
       '@firebase/messaging-interop-types': 0.1.0
       '@firebase/util': 1.6.2
       node-fetch: 2.6.7
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - '@firebase/app-types'
       - encoding
@@ -3405,13 +3413,13 @@ packages:
       '@firebase/component': 0.5.16
       '@firebase/util': 1.6.2
       idb: 7.0.1
-      tslib: 2.4.0
+      tslib: 2.5.0
     dev: false
 
   /@firebase/logger/0.3.3:
     resolution: {integrity: sha512-POTJl07jOKTOevLXrTvJD/VZ0M6PnJXflbAh5J9VGkmtXPXNG6MdZ9fmRgqYhXKTaDId6AQenQ262uwgpdtO0Q==}
     dependencies:
-      tslib: 2.4.0
+      tslib: 2.5.0
     dev: false
 
   /@firebase/messaging-compat/0.1.15_ikt45rtbctnl5l4y6p3bca5464:
@@ -3423,7 +3431,7 @@ packages:
       '@firebase/component': 0.5.16
       '@firebase/messaging': 0.9.15_@firebase+app@0.7.27
       '@firebase/util': 1.6.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - '@firebase/app'
     dev: false
@@ -3443,7 +3451,7 @@ packages:
       '@firebase/messaging-interop-types': 0.1.0
       '@firebase/util': 1.6.2
       idb: 7.0.1
-      tslib: 2.4.0
+      tslib: 2.5.0
     dev: false
 
   /@firebase/performance-compat/0.1.11_ikt45rtbctnl5l4y6p3bca5464:
@@ -3457,7 +3465,7 @@ packages:
       '@firebase/performance': 0.5.11_@firebase+app@0.7.27
       '@firebase/performance-types': 0.1.0
       '@firebase/util': 1.6.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - '@firebase/app'
     dev: false
@@ -3476,7 +3484,7 @@ packages:
       '@firebase/installations': 0.5.11_@firebase+app@0.7.27
       '@firebase/logger': 0.3.3
       '@firebase/util': 1.6.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     dev: false
 
   /@firebase/polyfill/0.3.36:
@@ -3498,7 +3506,7 @@ packages:
       '@firebase/remote-config': 0.3.10_@firebase+app@0.7.27
       '@firebase/remote-config-types': 0.2.0
       '@firebase/util': 1.6.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - '@firebase/app'
     dev: false
@@ -3517,7 +3525,7 @@ packages:
       '@firebase/installations': 0.5.11_@firebase+app@0.7.27
       '@firebase/logger': 0.3.3
       '@firebase/util': 1.6.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     dev: false
 
   /@firebase/storage-compat/0.1.16_2whj6v3knk7rswcmdbn5bdkgna:
@@ -3530,7 +3538,7 @@ packages:
       '@firebase/storage': 0.9.8_@firebase+app@0.7.27
       '@firebase/storage-types': 0.6.0_ee7bhenjigpuz3jknhp5542foa
       '@firebase/util': 1.6.2
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - '@firebase/app'
       - '@firebase/app-types'
@@ -3556,7 +3564,7 @@ packages:
       '@firebase/component': 0.5.16
       '@firebase/util': 1.6.2
       node-fetch: 2.6.7
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - encoding
     dev: false
@@ -3564,7 +3572,7 @@ packages:
   /@firebase/util/1.6.2:
     resolution: {integrity: sha512-VYDqEf/+mS7n0nPj6qJDJYFtKIEfOaTtQeNDsd3x+xp8HWvrbygWOexzeGicLP1dvEzrKr3eQGcJmmmYN3TIsA==}
     dependencies:
-      tslib: 2.4.0
+      tslib: 2.5.0
     dev: false
 
   /@firebase/webchannel-wrapper/0.6.2:
@@ -3830,7 +3838,7 @@ packages:
       graphql: 15.8.0
       import-from: 4.0.0
       lodash: 4.17.21
-      tslib: 2.4.0
+      tslib: 2.4.1
     dev: true
 
   /@graphql-codegen/plugin-helpers/2.5.0_graphql@16.6.0:
@@ -3844,7 +3852,7 @@ packages:
       graphql: 16.6.0
       import-from: 4.0.0
       lodash: 4.17.21
-      tslib: 2.4.0
+      tslib: 2.4.1
     dev: true
 
   /@graphql-codegen/plugin-helpers/2.7.2_graphql@16.6.0:
@@ -3897,7 +3905,7 @@ packages:
       '@graphql-codegen/plugin-helpers': 2.5.0_graphql@15.8.0
       '@graphql-tools/utils': 8.8.0_graphql@15.8.0
       graphql: 15.8.0
-      tslib: 2.4.0
+      tslib: 2.4.1
     dev: true
 
   /@graphql-codegen/schema-ast/3.0.1_graphql@16.6.0:
@@ -4145,7 +4153,7 @@ packages:
       graphql: 15.8.0
       graphql-tag: 2.12.6_graphql@15.8.0
       parse-filepath: 1.0.2
-      tslib: 2.4.0
+      tslib: 2.4.1
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -4166,7 +4174,7 @@ packages:
       graphql: 16.6.0
       graphql-tag: 2.12.6_graphql@16.6.0
       parse-filepath: 1.0.2
-      tslib: 2.4.0
+      tslib: 2.4.1
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -4223,7 +4231,7 @@ packages:
       cross-undici-fetch: 0.4.11
       graphql: 15.8.0
       sync-fetch: 0.4.1
-      tslib: 2.4.1
+      tslib: 2.5.0
     transitivePeerDependencies:
       - encoding
     dev: true
@@ -4251,7 +4259,7 @@ packages:
       '@graphql-tools/utils': 8.8.0_graphql@15.8.0
       dataloader: 2.1.0
       graphql: 15.8.0
-      tslib: 2.4.1
+      tslib: 2.5.0
       value-or-promise: 1.0.11
 
   /@graphql-tools/batch-execute/8.5.18_graphql@16.6.0:
@@ -4275,7 +4283,7 @@ packages:
       '@graphql-tools/utils': 8.8.0_graphql@15.8.0
       globby: 11.1.0
       graphql: 15.8.0
-      tslib: 2.4.1
+      tslib: 2.5.0
       unixify: 1.0.0
     transitivePeerDependencies:
       - supports-color
@@ -4410,7 +4418,7 @@ packages:
       graphql: 15.8.0
       is-glob: 4.0.3
       micromatch: 4.0.5
-      tslib: 2.4.1
+      tslib: 2.5.0
       unixify: 1.0.0
     transitivePeerDependencies:
       - supports-color
@@ -4443,7 +4451,7 @@ packages:
       cross-undici-fetch: 0.4.11
       graphql: 15.8.0
       sync-fetch: 0.4.1
-      tslib: 2.4.1
+      tslib: 2.5.0
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -4476,7 +4484,7 @@ packages:
       '@graphql-tools/utils': 8.8.0_graphql@15.8.0
       globby: 11.1.0
       graphql: 15.8.0
-      tslib: 2.4.1
+      tslib: 2.5.0
       unixify: 1.0.0
 
   /@graphql-tools/graphql-file-loader/7.5.16_graphql@16.6.0:
@@ -4502,7 +4510,7 @@ packages:
       '@babel/types': 7.18.7
       '@graphql-tools/utils': 8.8.0_graphql@15.8.0
       graphql: 15.8.0
-      tslib: 2.4.1
+      tslib: 2.5.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -4532,7 +4540,7 @@ packages:
       '@graphql-tools/utils': 8.8.0_graphql@15.8.0
       graphql: 15.8.0
       resolve-from: 5.0.0
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /@graphql-tools/import/6.7.17_graphql@16.6.0:
     resolution: {integrity: sha512-bn9SgrECXq3WIasgNP7ful/uON51wBajPXtxdY+z/ce7jLWaFE6lzwTDB/GAgiZ+jo7nb0ravlxteSAz2qZmuA==}
@@ -4553,7 +4561,7 @@ packages:
       '@graphql-tools/utils': 8.8.0_graphql@15.8.0
       globby: 11.1.0
       graphql: 15.8.0
-      tslib: 2.4.1
+      tslib: 2.5.0
       unixify: 1.0.0
 
   /@graphql-tools/json-file-loader/7.4.17_graphql@16.6.0:
@@ -4577,7 +4585,7 @@ packages:
       '@graphql-tools/utils': 8.8.0_graphql@15.8.0
       graphql: 15.8.0
       p-limit: 3.1.0
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /@graphql-tools/load/7.8.12_graphql@16.6.0:
     resolution: {integrity: sha512-JwxgNS2c6i6oIdKttcbXns/lpKiyN7c6/MkkrJ9x2QE9rXk5HOhSJxRvPmOueCuAin1542xUrcDRGBXJ7thSig==}
@@ -4598,7 +4606,7 @@ packages:
     dependencies:
       '@graphql-tools/utils': 8.8.0_graphql@15.8.0
       graphql: 15.8.0
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /@graphql-tools/merge/8.3.11_graphql@15.8.0:
     resolution: {integrity: sha512-IpZh8r8e8FycXaUv04xe5HQH9siD1tkS8MvaO8Wb2FaPXv15XSYP+Wsb2MUStpIqGfQxa6xY/+eEuxv+VqwXyg==}
@@ -4607,7 +4615,7 @@ packages:
     dependencies:
       '@graphql-tools/utils': 9.1.0_graphql@15.8.0
       graphql: 15.8.0
-      tslib: 2.4.1
+      tslib: 2.5.0
     dev: false
 
   /@graphql-tools/merge/8.3.12_graphql@15.8.0:
@@ -4617,7 +4625,7 @@ packages:
     dependencies:
       '@graphql-tools/utils': 9.1.1_graphql@15.8.0
       graphql: 15.8.0
-      tslib: 2.4.1
+      tslib: 2.5.0
     dev: false
 
   /@graphql-tools/merge/8.3.18_graphql@16.6.0:
@@ -4639,7 +4647,7 @@ packages:
       '@graphql-tools/utils': 9.1.1_graphql@15.8.0
       fast-json-stable-stringify: 2.1.0
       graphql: 15.8.0
-      tslib: 2.4.1
+      tslib: 2.5.0
     dev: false
 
   /@graphql-tools/optimize/1.3.0_graphql@15.8.0:
@@ -4648,7 +4656,7 @@ packages:
       graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
     dependencies:
       graphql: 15.8.0
-      tslib: 2.4.0
+      tslib: 2.5.0
     dev: true
 
   /@graphql-tools/optimize/1.3.0_graphql@16.6.0:
@@ -4657,7 +4665,7 @@ packages:
       graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
     dependencies:
       graphql: 16.6.0
-      tslib: 2.4.0
+      tslib: 2.5.0
     dev: true
 
   /@graphql-tools/prisma-loader/7.2.2_graphql@15.8.0:
@@ -4684,7 +4692,7 @@ packages:
       lodash: 4.17.21
       replaceall: 0.1.6
       scuid: 1.1.0
-      tslib: 2.4.1
+      tslib: 2.5.0
       yaml-ast-parser: 0.0.43
     transitivePeerDependencies:
       - '@types/node'
@@ -4735,7 +4743,7 @@ packages:
       '@ardatan/relay-compiler': 12.0.0_graphql@15.8.0
       '@graphql-tools/utils': 8.8.0_graphql@15.8.0
       graphql: 15.8.0
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -4749,7 +4757,7 @@ packages:
       '@ardatan/relay-compiler': 12.0.0_graphql@16.6.0
       '@graphql-tools/utils': 8.8.0_graphql@16.6.0
       graphql: 16.6.0
-      tslib: 2.4.0
+      tslib: 2.5.0
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -4763,7 +4771,7 @@ packages:
       '@graphql-tools/merge': 8.3.0_graphql@15.8.0
       '@graphql-tools/utils': 8.8.0_graphql@15.8.0
       graphql: 15.8.0
-      tslib: 2.4.1
+      tslib: 2.5.0
       value-or-promise: 1.0.11
 
   /@graphql-tools/schema/9.0.10_graphql@15.8.0:
@@ -4774,7 +4782,7 @@ packages:
       '@graphql-tools/merge': 8.3.12_graphql@15.8.0
       '@graphql-tools/utils': 9.1.1_graphql@15.8.0
       graphql: 15.8.0
-      tslib: 2.4.1
+      tslib: 2.5.0
       value-or-promise: 1.0.11
     dev: false
 
@@ -4798,7 +4806,7 @@ packages:
       '@graphql-tools/merge': 8.3.11_graphql@15.8.0
       '@graphql-tools/utils': 9.1.0_graphql@15.8.0
       graphql: 15.8.0
-      tslib: 2.4.1
+      tslib: 2.5.0
       value-or-promise: 1.0.11
     dev: false
 
@@ -4820,7 +4828,7 @@ packages:
       isomorphic-ws: 5.0.0_ws@8.12.1
       meros: 1.2.0
       sync-fetch: 0.4.1
-      tslib: 2.4.1
+      tslib: 2.5.0
       value-or-promise: 1.0.11
       ws: 8.12.1
     transitivePeerDependencies:
@@ -4861,7 +4869,7 @@ packages:
       graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
     dependencies:
       graphql: 15.8.0
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /@graphql-tools/utils/8.8.0_graphql@16.6.0:
     resolution: {integrity: sha512-KJrtx05uSM/cPYFdTnGAS1doL5bftJLAiFCDMZ8Vkifztz3BFn3gpFiy/o4wDtM8s39G46mxmt2Km/RmeltfGw==}
@@ -4869,7 +4877,7 @@ packages:
       graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
     dependencies:
       graphql: 16.6.0
-      tslib: 2.4.1
+      tslib: 2.5.0
     dev: true
 
   /@graphql-tools/utils/9.1.0_graphql@15.8.0:
@@ -4878,7 +4886,7 @@ packages:
       graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
     dependencies:
       graphql: 15.8.0
-      tslib: 2.4.1
+      tslib: 2.5.0
     dev: false
 
   /@graphql-tools/utils/9.1.1_graphql@15.8.0:
@@ -4918,7 +4926,7 @@ packages:
       '@graphql-tools/schema': 8.5.0_graphql@15.8.0
       '@graphql-tools/utils': 8.8.0_graphql@15.8.0
       graphql: 15.8.0
-      tslib: 2.4.1
+      tslib: 2.5.0
       value-or-promise: 1.0.11
 
   /@graphql-tools/wrap/9.3.7_graphql@16.6.0:
@@ -5268,7 +5276,7 @@ packages:
       debug: 4.3.4
       fast-glob: 3.2.11
       source-map: 0.6.1
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -6792,7 +6800,7 @@ packages:
     resolution: {integrity: sha512-KqQnQbdYE54D7oa/UmYVMZKq7CO4l8DEENzOKc4aBRwxCXSlJXGz83flFx5L7AWrOQnmuN3kVsRdt+GZPPjiVQ==}
     deprecated: This is a stub types definition for axios (https://github.com/mzabriskie/axios). axios provides its own type definitions, so you don't need @types/axios installed!
     dependencies:
-      axios: 0.21.4
+      axios: 0.25.0
     transitivePeerDependencies:
       - debug
     dev: true
@@ -7977,16 +7985,7 @@ packages:
       magic-string: 0.26.7
       regenerator-runtime: 0.13.10
       systemjs: 6.13.0
-      vite: 3.2.4_sass@1.53.0
-
-  /@vitejs/plugin-vue/1.10.2_vite@2.9.15:
-    resolution: {integrity: sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      vite: ^2.5.10
-    dependencies:
-      vite: 2.9.15_sass@1.58.0
-    dev: true
+      vite: 3.2.4
 
   /@vitejs/plugin-vue/3.1.0_vite@3.1.4+vue@3.2.37:
     resolution: {integrity: sha512-fmxtHPjSOEIRg6vHYDaem+97iwCUg/uSIaTzp98lhELt2ISOQuDo2hbkBdXod0g15IhfPMQmAxh4heUks2zvDA==}
@@ -8006,7 +8005,7 @@ packages:
       vite: ^3.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
       vue: 3.2.45
     dev: true
 
@@ -8826,7 +8825,7 @@ packages:
     hasBin: true
 
   /after/0.8.2:
-    resolution: {integrity: sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA==}
+    resolution: {integrity: sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=}
     dev: false
 
   /agent-base/6.0.2:
@@ -9221,7 +9220,6 @@ packages:
       follow-redirects: 1.15.1
     transitivePeerDependencies:
       - debug
-    dev: false
 
   /babel-jest/27.5.1_@babel+core@7.18.6:
     resolution: {integrity: sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==}
@@ -9433,7 +9431,7 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
   /base64-arraybuffer/0.1.4:
-    resolution: {integrity: sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg==}
+    resolution: {integrity: sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=}
     engines: {node: '>= 0.6.0'}
     dev: false
 
@@ -9657,7 +9655,7 @@ packages:
     resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
     dependencies:
       pascal-case: 3.1.2
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /camelcase-keys/6.2.2:
     resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
@@ -9686,7 +9684,7 @@ packages:
     resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==}
     dependencies:
       no-case: 3.0.4
-      tslib: 2.4.1
+      tslib: 2.5.0
       upper-case-first: 2.0.2
 
   /chalk/1.1.3:
@@ -9767,7 +9765,7 @@ packages:
       path-case: 3.0.4
       sentence-case: 3.0.4
       snake-case: 3.0.4
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /char-regex/1.0.2:
     resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
@@ -9989,14 +9987,14 @@ packages:
     dev: true
 
   /component-bind/1.0.0:
-    resolution: {integrity: sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw==}
+    resolution: {integrity: sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=}
     dev: false
 
   /component-emitter/1.3.0:
     resolution: {integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==}
 
   /component-inherit/0.0.3:
-    resolution: {integrity: sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA==}
+    resolution: {integrity: sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=}
     dev: false
 
   /concat-map/0.0.1:
@@ -10033,7 +10031,7 @@ packages:
     resolution: {integrity: sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==}
     dependencies:
       no-case: 3.0.4
-      tslib: 2.4.1
+      tslib: 2.5.0
       upper-case: 2.0.2
 
   /constantinople/4.0.1:
@@ -10633,7 +10631,7 @@ packages:
     resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
     dependencies:
       no-case: 3.0.4
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /dot-prop/5.3.0:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
@@ -13060,7 +13058,7 @@ packages:
     dev: false
 
   /has-cors/1.1.0:
-    resolution: {integrity: sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA==}
+    resolution: {integrity: sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=}
     dev: false
 
   /has-flag/3.0.0:
@@ -13108,7 +13106,7 @@ packages:
     resolution: {integrity: sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==}
     dependencies:
       capital-case: 1.0.4
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /helpertypes/0.0.18:
     resolution: {integrity: sha512-XRhfbSEmR+poXUC5/8AbmYNJb2riOT6qPzjGJZr0S9YedHiaY+/tzPYzWMUclYMEdCYo/1l8PDYrQFCj02v97w==}
@@ -13406,7 +13404,7 @@ packages:
     engines: {node: '>=8'}
 
   /indexof/0.0.1:
-    resolution: {integrity: sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==}
+    resolution: {integrity: sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=}
     dev: false
 
   /inflight/1.0.6:
@@ -13459,7 +13457,7 @@ packages:
       mute-stream: 0.0.8
       ora: 5.4.1
       run-async: 2.4.1
-      rxjs: 7.6.0
+      rxjs: 7.8.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
       through: 2.3.8
@@ -13639,7 +13637,7 @@ packages:
   /is-lower-case/2.0.2:
     resolution: {integrity: sha512-bVcMJy4X5Og6VZfdOZstSexlEy20Sr0k/p/b2IlQJlfdKAQuMpiv5w2Ccxb8sKdRUNAG1PnHVHjFSdRDVS6NlQ==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.5.0
     dev: true
 
   /is-map/2.0.2:
@@ -13774,7 +13772,7 @@ packages:
   /is-upper-case/2.0.2:
     resolution: {integrity: sha512-44pxmxAvnnAOwBg4tHPnkfvgjPwbc5QIsSstNU+YcJ1ovxVzCWpSGosPJOZh/a1tdl81fbgnLc9LLv+x2ywbPQ==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.5.0
     dev: true
 
   /is-weakmap/2.0.1:
@@ -15291,7 +15289,7 @@ packages:
       log-update: 4.0.0
       p-map: 4.0.0
       rfdc: 1.3.0
-      rxjs: 7.6.0
+      rxjs: 7.8.0
       through: 2.3.8
       wrap-ansi: 7.0.0
 
@@ -15460,13 +15458,13 @@ packages:
   /lower-case-first/2.0.2:
     resolution: {integrity: sha512-EVm/rR94FJTZi3zefZ82fLWab+GX14LJN4HrWBcuo6Evmsl9hEfnqxgcHCKb9q+mNf6EVdsjx/qucYFIIB84pg==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.5.0
     dev: true
 
   /lower-case/2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /lru-cache/6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
@@ -15889,7 +15887,7 @@ packages:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
     dependencies:
       lower-case: 2.0.2
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /node-abort-controller/3.0.1:
     resolution: {integrity: sha512-/ujIVxthRs+7q6hsdjHMaj8hRG9NuWmwrz+JdRwZ14jdFoKSkm+vDsCbF9PLpnSqjaWQJuTmVtcWHNLr+vrOFw==}
@@ -16203,7 +16201,7 @@ packages:
     resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /parent-module/1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
@@ -16277,7 +16275,7 @@ packages:
     resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
     dependencies:
       no-case: 3.0.4
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /passport-github2/0.1.12:
     resolution: {integrity: sha512-3nPUCc7ttF/3HSP/k9sAXjz3SkGv5Nki84I05kSQPo01Jqq1NzJACgMblCK0fGcv9pKCG/KXU3AJRDGLqHLoIw==}
@@ -16348,7 +16346,7 @@ packages:
     resolution: {integrity: sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==}
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /path-exists/4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
@@ -17322,6 +17320,11 @@ packages:
     dependencies:
       tslib: 2.4.1
 
+  /rxjs/7.8.0:
+    resolution: {integrity: sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==}
+    dependencies:
+      tslib: 2.5.0
+
   /sade/1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -17355,6 +17358,7 @@ packages:
       chokidar: 3.5.3
       immutable: 4.1.0
       source-map-js: 1.0.2
+    dev: true
 
   /sax/1.2.4:
     resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
@@ -17463,7 +17467,7 @@ packages:
     resolution: {integrity: sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==}
     dependencies:
       no-case: 3.0.4
-      tslib: 2.4.1
+      tslib: 2.5.0
       upper-case-first: 2.0.2
 
   /serialize-javascript/4.0.0:
@@ -17609,7 +17613,7 @@ packages:
     resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /socket.io-client/2.5.0:
     resolution: {integrity: sha512-lOO9clmdgssDykiOmVQQitwBAF3I6mYcQAo7hQ7AM6Ny5X7fp8hIJ3HcQs3Rjz4SoggoxA1OgrQyY8EgTbcPYw==}
@@ -17778,7 +17782,7 @@ packages:
   /sponge-case/1.0.1:
     resolution: {integrity: sha512-dblb9Et4DAtiZ5YSUZHLl4XhH4uK80GhAZrVXdN4O2P4gQ40Wa5UIOPUHlA/nFd2PLblBZWUioLMMAVrgpoYcA==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.5.0
     dev: true
 
   /sprintf-js/1.0.3:
@@ -18080,7 +18084,7 @@ packages:
   /swap-case/2.0.2:
     resolution: {integrity: sha512-kc6S2YS/2yXbtkSMunBtKdah4VFETZ8Oh6ONSmSd9bRxhqTrtARUCBUiWXH3xVPpvR7tz2CSnkuXVE42EcGnMw==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.5.0
     dev: true
 
   /symbol-observable/1.2.0:
@@ -18264,7 +18268,7 @@ packages:
   /title-case/3.0.3:
     resolution: {integrity: sha512-e1zGYRvbffpcHIrnuqT0Dh+gEJtDaxDSoG4JAIpq4oDFyooziLBIiYQv0GBT4FUAnUop5uZ1hiIAj7oAF6sOCA==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.5.0
     dev: true
 
   /tmp/0.0.33:
@@ -18286,7 +18290,7 @@ packages:
     dev: true
 
   /to-array/0.1.4:
-    resolution: {integrity: sha512-LhVdShQD/4Mk4zXNroIQZJC+Ap3zgLcDuwEdcmLv9CCO73NWockQDwyUnW/m8VX/EElfL6FcYx7EeutN4HJA6A==}
+    resolution: {integrity: sha1-F+bBH3PdTz10zaek/zI46a2b+JA=}
     dev: false
 
   /to-fast-properties/2.0.0:
@@ -18950,7 +18954,7 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
-  /unplugin-icons/0.14.9_4xrupm67ziznosrlzffuj26hkq:
+  /unplugin-icons/0.14.9_ucej6auec2vidlux2n3htzvxf4:
     resolution: {integrity: sha512-vPyVfNREH88dP6gszdaoGkAEFPpiScXj1A8eWN905jQgT53A3tsiPEiqJjCHOUVcsUaREt2JSudzumFOsCA78A==}
     peerDependencies:
       '@svgr/core': '>=5.5.0'
@@ -18974,7 +18978,7 @@ packages:
       debug: 4.3.4
       kolorist: 1.5.1
       local-pkg: 0.4.2
-      unplugin: 0.9.5_vite@2.9.15
+      unplugin: 0.9.5_vite@3.2.4
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -19077,35 +19081,6 @@ packages:
       - supports-color
     dev: true
 
-  /unplugin-vue-components/0.21.0_vite@2.9.15+vue@3.2.45:
-    resolution: {integrity: sha512-U7uOMNmRJ2eAv9CNjP8QRvxs6nAe3FVQUEIUphC1FGguBp3BWSLgGAcSHaX2nQy0gFoDY2mLF2M52W/t/eDaKg==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@babel/parser': ^7.15.8
-      vue: 2 || 3
-    peerDependenciesMeta:
-      '@babel/parser':
-        optional: true
-    dependencies:
-      '@antfu/utils': 0.5.2
-      '@rollup/pluginutils': 4.2.1
-      chokidar: 3.5.3
-      debug: 4.3.4
-      fast-glob: 3.2.11
-      local-pkg: 0.4.2
-      magic-string: 0.26.7
-      minimatch: 5.1.0
-      resolve: 1.22.1
-      unplugin: 0.7.1_vite@2.9.15
-      vue: 3.2.45
-    transitivePeerDependencies:
-      - esbuild
-      - rollup
-      - supports-color
-      - vite
-      - webpack
-    dev: false
-
   /unplugin-vue-components/0.21.0_vite@3.1.4+vue@3.2.37:
     resolution: {integrity: sha512-U7uOMNmRJ2eAv9CNjP8QRvxs6nAe3FVQUEIUphC1FGguBp3BWSLgGAcSHaX2nQy0gFoDY2mLF2M52W/t/eDaKg==}
     engines: {node: '>=14'}
@@ -19162,31 +19137,6 @@ packages:
       - supports-color
       - vite
       - webpack
-    dev: true
-
-  /unplugin/0.7.1_vite@2.9.15:
-    resolution: {integrity: sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==}
-    peerDependencies:
-      esbuild: '>=0.13'
-      rollup: ^2.50.0
-      vite: ^2.3.0 || ^3.0.0-0
-      webpack: 4 || 5
-    peerDependenciesMeta:
-      esbuild:
-        optional: true
-      rollup:
-        optional: true
-      vite:
-        optional: true
-      webpack:
-        optional: true
-    dependencies:
-      acorn: 8.8.0
-      chokidar: 3.5.3
-      vite: 2.9.15_sass@1.58.0
-      webpack-sources: 3.2.3
-      webpack-virtual-modules: 0.4.4
-    dev: false
 
   /unplugin/0.7.1_vite@3.1.4:
     resolution: {integrity: sha512-Z6hNDXDNh9aimMkPU1mEjtk+2ova8gh0y7rJeJdGH1vWZOHwF2lLQiQ/R97rv9ymmzEQXsR2fyMet72T8jy6ew==}
@@ -19231,34 +19181,9 @@ packages:
     dependencies:
       acorn: 8.8.0
       chokidar: 3.5.3
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.4.4
-    dev: true
-
-  /unplugin/0.9.5_vite@2.9.15:
-    resolution: {integrity: sha512-luraheyfxwtvkvHpsOvMNv7IjLdORTWKZp0gWYNHGLi2ImON3iIZOj464qEyyEwLA/EMt12fC415HW9zRpOfTg==}
-    peerDependencies:
-      esbuild: '>=0.13'
-      rollup: ^2.50.0
-      vite: ^2.3.0 || ^3.0.0-0
-      webpack: 4 || 5
-    peerDependenciesMeta:
-      esbuild:
-        optional: true
-      rollup:
-        optional: true
-      vite:
-        optional: true
-      webpack:
-        optional: true
-    dependencies:
-      acorn: 8.8.0
-      chokidar: 3.5.3
-      vite: 2.9.15_sass@1.58.0
-      webpack-sources: 3.2.3
-      webpack-virtual-modules: 0.4.4
-    dev: false
 
   /unplugin/0.9.5_vite@3.1.4:
     resolution: {integrity: sha512-luraheyfxwtvkvHpsOvMNv7IjLdORTWKZp0gWYNHGLi2ImON3iIZOj464qEyyEwLA/EMt12fC415HW9zRpOfTg==}
@@ -19306,7 +19231,6 @@ packages:
       vite: 3.2.4
       webpack-sources: 3.2.3
       webpack-virtual-modules: 0.4.4
-    dev: true
 
   /unplugin/1.1.0:
     resolution: {integrity: sha512-I8obQ8Rs/hnkxokRV6g8JKOQFgYNnTd9DL58vcSt5IJ9AkK8wbrtsnzD5hi4BJlvcY536JzfEXj9L6h7j559/A==}
@@ -19341,12 +19265,12 @@ packages:
   /upper-case-first/2.0.2:
     resolution: {integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /upper-case/2.0.2:
     resolution: {integrity: sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /uri-js/4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
@@ -19609,7 +19533,7 @@ packages:
       vite: ^2.0.0 || ^3.0.0
     dependencies:
       fast-glob: 3.2.11
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
     dev: true
 
   /vite-plugin-html-config/1.0.10_vite@3.1.4:
@@ -19627,7 +19551,7 @@ packages:
     peerDependencies:
       vite: '>=2.0.0'
     dependencies:
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
     dev: true
 
   /vite-plugin-inspect/0.7.4_vite@3.1.4:
@@ -19659,7 +19583,7 @@ packages:
       kolorist: 1.5.1
       sirv: 2.0.2
       ufo: 0.8.5
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -19668,30 +19592,6 @@ packages:
     resolution: {integrity: sha512-8GlmNSeObvDVUdmgutfWnGBZGsn3Zb8IXCjRODFB0tOhQqAQPZRwXrFha6ZLjvF4DgVJI3sW2FfiXa1wFxJvmg==}
     dev: true
 
-  /vite-plugin-pages/0.26.0_4xrupm67ziznosrlzffuj26hkq:
-    resolution: {integrity: sha512-yJZvwHEt7puYIf19S89IvkDsWPjWleSied4H8hmdW6i8buCA93z1UAU1ipW1d8fNKrC4FzXsUHHbPm6+kl1p9w==}
-    peerDependencies:
-      '@vue/compiler-sfc': ^2.7.0 || ^3.0.0
-      vite: ^2.0.0 || ^3.0.0-0
-    peerDependenciesMeta:
-      '@vue/compiler-sfc':
-        optional: true
-    dependencies:
-      '@types/debug': 4.1.7
-      '@vue/compiler-sfc': 3.2.45
-      debug: 4.3.4
-      deep-equal: 2.0.5
-      extract-comments: 1.1.0
-      fast-glob: 3.2.11
-      json5: 2.2.1
-      local-pkg: 0.4.2
-      picocolors: 1.0.0
-      vite: 2.9.15_sass@1.58.0
-      yaml: 2.1.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /vite-plugin-pages/0.26.0_ucej6auec2vidlux2n3htzvxf4:
     resolution: {integrity: sha512-yJZvwHEt7puYIf19S89IvkDsWPjWleSied4H8hmdW6i8buCA93z1UAU1ipW1d8fNKrC4FzXsUHHbPm6+kl1p9w==}
     peerDependencies:
@@ -19710,7 +19610,7 @@ packages:
       json5: 2.2.1
       local-pkg: 0.4.2
       picocolors: 1.0.0
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4_sass@1.58.0
       yaml: 2.1.1
     transitivePeerDependencies:
       - supports-color
@@ -19873,44 +19773,13 @@ packages:
       '@vue/compiler-sfc': 3.2.45
       debug: 4.3.4
       fast-glob: 3.2.11
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4_sass@1.58.0
       vue: 3.2.45
       vue-router: 4.1.0_vue@3.2.45
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite-plugin-vue-layouts/0.7.0_xxumm4g4rkhkfqiqbziyjd5llu:
-    resolution: {integrity: sha512-k5XDmRNFo4M/GmUjhbRXj2WmJiFcGoVI8l/uZ72RHyRDQr4wE/6Zq/KFq0lqXomWQxTSzakQRUswzNwtvZLE8A==}
-    peerDependencies:
-      vite: ^2.5.0 || ^3.0.0-0
-      vue: ^2.6.12 || ^3.2.4
-      vue-router: ^3.5.1 || ^ 4.0.11
-    dependencies:
-      '@vue/compiler-sfc': 3.2.45
-      debug: 4.3.4
-      fast-glob: 3.2.11
-      vite: 2.9.15_sass@1.58.0
-      vue: 3.2.45
-      vue-router: 4.1.0_vue@3.2.45
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /vite-plugin-windicss/1.8.8_vite@2.9.15:
-    resolution: {integrity: sha512-iyu+ZX0NmhNEUaLPv7xtC+EFRBpWMmw0nhd9a9upayfuNG/thwslKiQKmRB7U/dG0k/2oWLvPDvN/B9i7oRgSA==}
-    peerDependencies:
-      vite: ^2.0.1 || ^3.0.0
-    dependencies:
-      '@windicss/plugin-utils': 1.8.8
-      debug: 4.3.4
-      kolorist: 1.5.1
-      vite: 2.9.15_sass@1.58.0
-      windicss: 3.5.6
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /vite-plugin-windicss/1.8.8_vite@3.1.4:
     resolution: {integrity: sha512-iyu+ZX0NmhNEUaLPv7xtC+EFRBpWMmw0nhd9a9upayfuNG/thwslKiQKmRB7U/dG0k/2oWLvPDvN/B9i7oRgSA==}
     peerDependencies:
@@ -19933,36 +19802,12 @@ packages:
       '@windicss/plugin-utils': 1.8.8
       debug: 4.3.4
       kolorist: 1.5.1
-      vite: 3.2.4_sass@1.53.0
+      vite: 3.2.4
       windicss: 3.5.6
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite/2.9.15_sass@1.58.0:
-    resolution: {integrity: sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==}
-    engines: {node: '>=12.2.0'}
-    hasBin: true
-    peerDependencies:
-      less: '*'
-      sass: '*'
-      stylus: '*'
-    peerDependenciesMeta:
-      less:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-    dependencies:
-      esbuild: 0.14.48
-      postcss: 8.4.21
-      resolve: 1.22.1
-      rollup: 2.75.7
-      sass: 1.58.0
-    optionalDependencies:
-      fsevents: 2.3.2
-
   /vite/3.1.4_sass@1.53.0:
     resolution: {integrity: sha512-JoQI08aBjY9lycL7jcEq4p9o1xUjq5aRvdH4KWaXtkSx7e7RpAh9D3IjzDWRD4Fg44LS3oDAIOG/Kq1L+82psA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -20021,7 +19866,6 @@ packages:
       rollup: 2.79.1
     optionalDependencies:
       fsevents: 2.3.2
-    dev: true
 
   /vite/3.2.4_sass@1.53.0:
     resolution: {integrity: sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==}
@@ -20056,6 +19900,40 @@ packages:
     optionalDependencies:
       fsevents: 2.3.2
 
+  /vite/3.2.4_sass@1.58.0:
+    resolution: {integrity: sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.15.15
+      postcss: 8.4.19
+      resolve: 1.22.1
+      rollup: 2.79.1
+      sass: 1.58.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /void-elements/3.1.0:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
@@ -21176,7 +21054,7 @@ packages:
     dev: false
 
   /yeast/0.1.2:
-    resolution: {integrity: sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg==}
+    resolution: {integrity: sha1-AI4G2AlDIMNy28L47XagymyKxBk=}
     dev: false
 
   /yn/3.1.1: