diff --git a/astro.config.mjs b/astro.config.mjs
index 670aa965d..43291cbcf 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,5 +1,4 @@
 // https://astro.build/config
-import preact from '@astrojs/preact';
 import sitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
 import compress from 'astro-compress';
@@ -8,6 +7,8 @@ import rehypeExternalLinks from 'rehype-external-links';
 import { fileURLToPath } from 'node:url';
 import { serializeSitemap, shouldIndexPage } from './sitemap.mjs';
 
+import react from '@astrojs/react';
+
 // https://astro.build/config
 export default defineConfig({
   site: 'https://roadmap.sh/',
@@ -31,11 +32,9 @@ export default defineConfig({
               'https://cs.fyi',
               'https://roadmap.sh',
             ];
-
             if (whiteListedStarts.some((start) => href.startsWith(start))) {
               return [];
             }
-
             return 'noopener noreferrer nofollow';
           },
         },
@@ -75,6 +74,6 @@ export default defineConfig({
       CSS: false,
       JavaScript: false,
     }),
-    preact(),
+    react(),
   ],
 });
diff --git a/package.json b/package.json
index 7bc3b6a61..ccd48fe02 100644
--- a/package.json
+++ b/package.json
@@ -21,11 +21,13 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@astrojs/preact": "^2.2.1",
+    "@astrojs/react": "^2.2.2",
     "@astrojs/sitemap": "^1.3.3",
     "@astrojs/tailwind": "^3.1.3",
     "@fingerprintjs/fingerprintjs": "^3.4.1",
-    "@nanostores/preact": "^0.5.0",
+    "@nanostores/react": "^0.7.1",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
     "astro": "^2.6.6",
     "astro-compress": "^2.0.8",
     "jose": "^4.14.4",
@@ -33,7 +35,8 @@
     "nanostores": "^0.9.2",
     "node-html-parser": "^6.1.5",
     "npm-check-updates": "^16.10.12",
-    "preact": "^10.15.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "rehype-external-links": "^2.1.0",
     "roadmap-renderer": "^1.0.6",
     "slugify": "^1.6.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d29641f29..27a0194a3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,9 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
-  '@astrojs/preact':
-    specifier: ^2.2.1
-    version: 2.2.1(preact@10.15.1)
+  '@astrojs/react':
+    specifier: ^2.2.2
+    version: 2.2.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.0.0)(react@18.0.0)
   '@astrojs/sitemap':
     specifier: ^1.3.3
     version: 1.3.3
@@ -17,9 +17,15 @@ dependencies:
   '@fingerprintjs/fingerprintjs':
     specifier: ^3.4.1
     version: 3.4.1
-  '@nanostores/preact':
-    specifier: ^0.5.0
-    version: 0.5.0(nanostores@0.9.2)(preact@10.15.1)
+  '@nanostores/react':
+    specifier: ^0.7.1
+    version: 0.7.1(nanostores@0.9.2)(react@18.0.0)
+  '@types/react':
+    specifier: ^18.0.21
+    version: 18.0.21
+  '@types/react-dom':
+    specifier: ^18.0.6
+    version: 18.0.6
   astro:
     specifier: ^2.6.6
     version: 2.6.6
@@ -41,9 +47,12 @@ dependencies:
   npm-check-updates:
     specifier: ^16.10.12
     version: 16.10.12
-  preact:
-    specifier: ^10.15.1
-    version: 10.15.1
+  react:
+    specifier: ^18.0.0
+    version: 18.0.0
+  react-dom:
+    specifier: ^18.0.0
+    version: 18.0.0(react@18.0.0)
   rehype-external-links:
     specifier: ^2.1.0
     version: 2.1.0
@@ -106,8 +115,8 @@ packages:
       '@jridgewell/trace-mapping': 0.3.19
     dev: false
 
-  /@astrojs/compiler@1.8.1:
-    resolution: {integrity: sha512-C28qplQzgIJ+JU9S+1wNx+ue2KCBUp0TTAd10EWAEkk4RsL3Tzlw0BYvLDDb4KP9jS48lXmR4/1TtZ4aavYJ8Q==}
+  /@astrojs/compiler@1.8.2:
+    resolution: {integrity: sha512-o/ObKgtMzl8SlpIdzaxFnt7SATKPxu4oIP/1NL+HDJRzxfJcAkOTAb/ZKMRyULbz4q+1t2/DAebs2Z1QairkZw==}
 
   /@astrojs/internal-helpers@0.1.2:
     resolution: {integrity: sha512-YXLk1CUDdC9P5bjFZcGjz+cE/ZDceXObDTXn/GCID4r8LjThuexxi+dlJqukmUpkSItzQqgzfWnrPLxSFPejdA==}
@@ -117,14 +126,14 @@ packages:
     resolution: {integrity: sha512-gssRxLGb8XnvKpqSzrDW5jdzdFnXD7eBXVkPCkkt2hv7Qzb+SAzv6hVgMok3jDCxpR1aeB+XNd9Qszj2h29iog==}
     hasBin: true
     dependencies:
-      '@astrojs/compiler': 1.8.1
+      '@astrojs/compiler': 1.8.2
       '@jridgewell/trace-mapping': 0.3.19
       '@vscode/emmet-helper': 2.9.2
       events: 3.3.0
       prettier: 2.8.8
       prettier-plugin-astro: 0.9.1
-      vscode-css-languageservice: 6.2.6
-      vscode-html-languageservice: 5.0.6
+      vscode-css-languageservice: 6.2.7
+      vscode-html-languageservice: 5.0.7
       vscode-languageserver: 8.1.0
       vscode-languageserver-protocol: 3.17.3
       vscode-languageserver-textdocument: 1.0.8
@@ -142,7 +151,7 @@ packages:
       github-slugger: 1.5.0
       import-meta-resolve: 2.2.2
       rehype-raw: 6.1.1
-      rehype-stringify: 9.0.3
+      rehype-stringify: 9.0.4
       remark-gfm: 3.0.1
       remark-parse: 10.0.2
       remark-rehype: 10.1.0
@@ -155,22 +164,6 @@ packages:
       - supports-color
     dev: false
 
-  /@astrojs/preact@2.2.1(preact@10.15.1):
-    resolution: {integrity: sha512-lObgrX/qfK2sEnGDWoyQ8KojFJ54FIKB4TeywWmgj4ZTg0yLnvvOz6ReyPQ8VfR/1MU+vWs22jE4cuZJ/vPnOA==}
-    engines: {node: '>=16.12.0'}
-    peerDependencies:
-      preact: ^10.6.5
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/plugin-transform-react-jsx': 7.22.5(@babel/core@7.22.10)
-      '@preact/signals': 1.2.0(preact@10.15.1)
-      babel-plugin-module-resolver: 5.0.0
-      preact: 10.15.1
-      preact-render-to-string: 5.2.6(preact@10.15.1)
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
   /@astrojs/prism@2.1.2:
     resolution: {integrity: sha512-3antim1gb34689GHRQFJ88JEo93HuZKQBnmxDT5W/nxiNz1p/iRxnCTEhIbJhqMOTRbbo5h2ldm5qSxx+TMFQA==}
     engines: {node: '>=16.12.0'}
@@ -178,11 +171,30 @@ packages:
       prismjs: 1.29.0
     dev: false
 
+  /@astrojs/react@2.2.2(@types/react-dom@18.0.6)(@types/react@18.0.21)(react-dom@18.0.0)(react@18.0.0):
+    resolution: {integrity: sha512-fq0hbujQNi+rCh5TgO9h8drYwK0tn5Ad10nZjTSrw8e8aky/R6oMf9yuJwG5jOrzlCmJ/2r9stltSzA0xn0cHQ==}
+    engines: {node: '>=16.12.0'}
+    peerDependencies:
+      '@types/react': ^17.0.50 || ^18.0.21
+      '@types/react-dom': ^17.0.17 || ^18.0.6
+      react: ^17.0.2 || ^18.0.0
+      react-dom: ^17.0.2 || ^18.0.0
+    dependencies:
+      '@babel/core': 7.22.11
+      '@babel/plugin-transform-react-jsx': 7.22.5(@babel/core@7.22.11)
+      '@types/react': 18.0.21
+      '@types/react-dom': 18.0.6
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@astrojs/sitemap@1.3.3:
     resolution: {integrity: sha512-TPyyb/hKxc+bHPpSoNPhsuI0QOTVzq2tueg2r0CTH1HqigYIAA2LQkCBlQzz85R+LrOZpv4kXYmhxdDcSkJCmA==}
     dependencies:
       sitemap: 7.1.1
-      zod: 3.21.4
+      zod: 3.22.2
     dev: false
 
   /@astrojs/tailwind@3.1.3(astro@2.6.6)(tailwindcss@3.3.2):
@@ -193,9 +205,9 @@ packages:
     dependencies:
       '@proload/core': 0.3.3
       astro: 2.6.6
-      autoprefixer: 10.4.14(postcss@8.4.27)
-      postcss: 8.4.27
-      postcss-load-config: 4.0.1(postcss@8.4.27)
+      autoprefixer: 10.4.15(postcss@8.4.29)
+      postcss: 8.4.29
+      postcss-load-config: 4.0.1(postcss@8.4.29)
       tailwindcss: 3.3.2
     transitivePeerDependencies:
       - ts-node
@@ -223,11 +235,11 @@ packages:
       undici: 5.23.0
     dev: false
 
-  /@babel/code-frame@7.22.10:
-    resolution: {integrity: sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==}
+  /@babel/code-frame@7.22.13:
+    resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/highlight': 7.22.10
+      '@babel/highlight': 7.22.13
       chalk: 2.4.2
     dev: false
 
@@ -236,20 +248,20 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: false
 
-  /@babel/core@7.22.10:
-    resolution: {integrity: sha512-fTmqbbUBAwCcre6zPzNngvsI0aNrPZe77AeqvDxWM9Nm+04RrJ3CAmGHA9f7lJQY6ZMhRztNemy4uslDxTX4Qw==}
+  /@babel/core@7.22.11:
+    resolution: {integrity: sha512-lh7RJrtPdhibbxndr6/xx0w8+CVlY5FJZiaSz908Fpy+G0xkBFTvwLcKJFF4PJxVfGhVWNebikpWGnOoC71juQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@ampproject/remapping': 2.2.1
-      '@babel/code-frame': 7.22.10
+      '@babel/code-frame': 7.22.13
       '@babel/generator': 7.22.10
       '@babel/helper-compilation-targets': 7.22.10
-      '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.10)
-      '@babel/helpers': 7.22.10
-      '@babel/parser': 7.22.10
+      '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.11)
+      '@babel/helpers': 7.22.11
+      '@babel/parser': 7.22.14
       '@babel/template': 7.22.5
-      '@babel/traverse': 7.22.10
-      '@babel/types': 7.22.10
+      '@babel/traverse': 7.22.11
+      '@babel/types': 7.22.11
       convert-source-map: 1.9.0
       debug: 4.3.4
       gensync: 1.0.0-beta.2
@@ -263,7 +275,7 @@ packages:
     resolution: {integrity: sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.22.11
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.19
       jsesc: 2.5.2
@@ -273,7 +285,7 @@ packages:
     resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.22.11
     dev: false
 
   /@babel/helper-compilation-targets@7.22.10:
@@ -297,30 +309,30 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.22.5
-      '@babel/types': 7.22.10
+      '@babel/types': 7.22.11
     dev: false
 
   /@babel/helper-hoist-variables@7.22.5:
     resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.22.11
     dev: false
 
   /@babel/helper-module-imports@7.22.5:
     resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.22.11
     dev: false
 
-  /@babel/helper-module-transforms@7.22.9(@babel/core@7.22.10):
+  /@babel/helper-module-transforms@7.22.9(@babel/core@7.22.11):
     resolution: {integrity: sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.22.11
       '@babel/helper-environment-visitor': 7.22.5
       '@babel/helper-module-imports': 7.22.5
       '@babel/helper-simple-access': 7.22.5
@@ -337,14 +349,14 @@ packages:
     resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.22.11
     dev: false
 
   /@babel/helper-split-export-declaration@7.22.6:
     resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.22.11
     dev: false
 
   /@babel/helper-string-parser@7.22.5:
@@ -362,19 +374,19 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: false
 
-  /@babel/helpers@7.22.10:
-    resolution: {integrity: sha512-a41J4NW8HyZa1I1vAndrraTlPZ/eZoga2ZgS7fEr0tZJGVU4xqdE80CEm0CcNjha5EZ8fTBYLKHF0kqDUuAwQw==}
+  /@babel/helpers@7.22.11:
+    resolution: {integrity: sha512-vyOXC8PBWaGc5h7GMsNx68OH33cypkEDJCHvYVVgVbbxJDROYVtexSk0gK5iCF1xNjRIN2s8ai7hwkWDq5szWg==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.22.5
-      '@babel/traverse': 7.22.10
-      '@babel/types': 7.22.10
+      '@babel/traverse': 7.22.11
+      '@babel/types': 7.22.11
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@babel/highlight@7.22.10:
-    resolution: {integrity: sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==}
+  /@babel/highlight@7.22.13:
+    resolution: {integrity: sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-validator-identifier': 7.22.5
@@ -382,67 +394,67 @@ packages:
       js-tokens: 4.0.0
     dev: false
 
-  /@babel/parser@7.22.10:
-    resolution: {integrity: sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==}
+  /@babel/parser@7.22.14:
+    resolution: {integrity: sha512-1KucTHgOvaw/LzCVrEOAyXkr9rQlp0A1HiHRYnSUE9dmb8PvPW7o5sscg+5169r54n3vGlbx6GevTE/Iw/P3AQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.22.11
     dev: false
 
-  /@babel/plugin-syntax-jsx@7.22.5(@babel/core@7.22.10):
+  /@babel/plugin-syntax-jsx@7.22.5(@babel/core@7.22.11):
     resolution: {integrity: sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.22.11
       '@babel/helper-plugin-utils': 7.22.5
     dev: false
 
-  /@babel/plugin-transform-react-jsx@7.22.5(@babel/core@7.22.10):
+  /@babel/plugin-transform-react-jsx@7.22.5(@babel/core@7.22.11):
     resolution: {integrity: sha512-rog5gZaVbUip5iWDMTYbVM15XQq+RkUKhET/IHR6oizR+JEoN6CAfTTuHcK4vwUyzca30qqHqEpzBOnaRMWYMA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.22.11
       '@babel/helper-annotate-as-pure': 7.22.5
       '@babel/helper-module-imports': 7.22.5
       '@babel/helper-plugin-utils': 7.22.5
-      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.10)
-      '@babel/types': 7.22.10
+      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.11)
+      '@babel/types': 7.22.11
     dev: false
 
   /@babel/template@7.22.5:
     resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.22.10
-      '@babel/parser': 7.22.10
-      '@babel/types': 7.22.10
+      '@babel/code-frame': 7.22.13
+      '@babel/parser': 7.22.14
+      '@babel/types': 7.22.11
     dev: false
 
-  /@babel/traverse@7.22.10:
-    resolution: {integrity: sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==}
+  /@babel/traverse@7.22.11:
+    resolution: {integrity: sha512-mzAenteTfomcB7mfPtyi+4oe5BZ6MXxWcn4CX+h4IRJ+OOGXBrWU6jDQavkQI9Vuc5P+donFabBfFCcmWka9lQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.22.10
+      '@babel/code-frame': 7.22.13
       '@babel/generator': 7.22.10
       '@babel/helper-environment-visitor': 7.22.5
       '@babel/helper-function-name': 7.22.5
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.22.10
-      '@babel/types': 7.22.10
+      '@babel/parser': 7.22.14
+      '@babel/types': 7.22.11
       debug: 4.3.4
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@babel/types@7.22.10:
-    resolution: {integrity: sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==}
+  /@babel/types@7.22.11:
+    resolution: {integrity: sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-string-parser': 7.22.5
@@ -872,7 +884,7 @@ packages:
   /@fingerprintjs/fingerprintjs@3.4.1:
     resolution: {integrity: sha512-i3TqlaIdF+4qDHP6OStMtLXCnvnoo2C156rNPm9/kIglUtnLAF45+sGkZZmVQB+58dDF0mNpaiqvKHNSR8J1Hg==}
     dependencies:
-      tslib: 2.6.1
+      tslib: 2.6.2
     dev: false
 
   /@isaacs/cliui@8.0.2:
@@ -923,15 +935,15 @@ packages:
     resolution: {integrity: sha512-4/RWEeXDO6bocPONheFe6gX/oQdP/bEpv0oL4HqjPP5DCenBSt0mHgahppY49N0CpsaqffdwPq+TlX9CYOq2Dw==}
     dev: false
 
-  /@nanostores/preact@0.5.0(nanostores@0.9.2)(preact@10.15.1):
-    resolution: {integrity: sha512-Zq5DEAY+kIfwJ1NPd43D1mpsbISuiD6N/SuTHrt/8jUoifLwXaReaZMAnvkvbIGOgcB1Hy++A9jZix2taNNYxQ==}
+  /@nanostores/react@0.7.1(nanostores@0.9.2)(react@18.0.0):
+    resolution: {integrity: sha512-EXQg9N4MdI4eJQz/AZLIx3hxQ6BuBmV4Q55bCd5YCSgEOAW7tGTsIZxpRXxvxLXzflNvHTBvfrDNY38TlSVBkQ==}
     engines: {node: ^16.0.0 || ^18.0.0 || >=20.0.0}
     peerDependencies:
       nanostores: ^0.9.0
-      preact: '>=10.0.0'
+      react: '>=18.0.0'
     dependencies:
       nanostores: 0.9.2
-      preact: 10.15.1
+      react: 18.0.0
     dev: false
 
   /@nodelib/fs.scandir@2.1.5:
@@ -1025,7 +1037,7 @@ packages:
       is-glob: 4.0.3
       open: 9.1.0
       picocolors: 1.0.0
-      tslib: 2.6.1
+      tslib: 2.6.2
     dev: false
 
   /@playwright/test@1.35.1:
@@ -1033,7 +1045,7 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
     dependencies:
-      '@types/node': 20.4.9
+      '@types/node': 20.5.7
       playwright-core: 1.35.1
     optionalDependencies:
       fsevents: 2.3.2
@@ -1060,19 +1072,6 @@ packages:
       config-chain: 1.1.13
     dev: false
 
-  /@preact/signals-core@1.4.0:
-    resolution: {integrity: sha512-5iYoZBhELLIhUQceZI7sDTQWPb+xcVSn2qk8T/aNl/VMh+A4AiPX9YRSh4XO7fZ6pncrVxl1Iln82poVqYVbbw==}
-    dev: false
-
-  /@preact/signals@1.2.0(preact@10.15.1):
-    resolution: {integrity: sha512-hrPOJ6L4XI/6iFJ++JitYG7W22E0+oNDkWH9W1gCutcKYCJq5tvhKcnxkLShCuctNZkwUBpu4XeIiVr5wC4NnA==}
-    peerDependencies:
-      preact: 10.x
-    dependencies:
-      '@preact/signals-core': 1.4.0
-      preact: 10.15.1
-    dev: false
-
   /@proload/core@0.3.3:
     resolution: {integrity: sha512-7dAFWsIK84C90AMl24+N/ProHKm4iw0akcnoKjRvbfHifJZBLhaDsDus1QJmhG12lXj4e/uB/8mB/0aduCW+NQ==}
     dependencies:
@@ -1080,23 +1079,34 @@ packages:
       escalade: 3.1.1
     dev: false
 
-  /@sigstore/bundle@1.0.0:
-    resolution: {integrity: sha512-yLvrWDOh6uMOUlFCTJIZEnwOT9Xte7NPXUqVexEKGSF5XtBAuSg5du0kn3dRR0p47a4ah10Y0mNt8+uyeQXrBQ==}
+  /@sigstore/bundle@1.1.0:
+    resolution: {integrity: sha512-PFutXEy0SmQxYI4texPw3dd2KewuNqv7OuK1ZFtY2fM754yhvG2KdgwIhRnoEE2uHdtdGNQ8s0lb94dW9sELog==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
-      '@sigstore/protobuf-specs': 0.2.0
+      '@sigstore/protobuf-specs': 0.2.1
     dev: false
 
-  /@sigstore/protobuf-specs@0.2.0:
-    resolution: {integrity: sha512-8ZhZKAVfXjIspDWwm3D3Kvj0ddbJ0HqDZ/pOs5cx88HpT8mVsotFrg7H1UMnXOuDHz6Zykwxn4mxG3QLuN+RUg==}
+  /@sigstore/protobuf-specs@0.2.1:
+    resolution: {integrity: sha512-XTWVxnWJu+c1oCshMLwnKvz8ZQJJDVOlciMfgpJBQbThVjKTCG8dwyhgLngBD2KN0ap9F/gOV8rFDEx8uh7R2A==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dev: false
 
+  /@sigstore/sign@1.0.0:
+    resolution: {integrity: sha512-INxFVNQteLtcfGmcoldzV6Je0sbbfh9I16DM4yJPw3j5+TFP8X6uIiA18mvpEa9yyeycAKgPmOA3X9hVdVTPUA==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    dependencies:
+      '@sigstore/bundle': 1.1.0
+      '@sigstore/protobuf-specs': 0.2.1
+      make-fetch-happen: 11.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@sigstore/tuf@1.0.3:
     resolution: {integrity: sha512-2bRovzs0nJZFlCN3rXirE4gwxCn97JNjMmwpecqlbgV9WcxX7WRuIrgzx/X7Ib7MYRbyUTpBYE0s2x6AmZXnlg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
-      '@sigstore/protobuf-specs': 0.2.0
+      '@sigstore/protobuf-specs': 0.2.1
       tuf-js: 1.1.7
     transitivePeerDependencies:
       - supports-color
@@ -1152,8 +1162,8 @@ packages:
   /@types/babel__core@7.20.1:
     resolution: {integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==}
     dependencies:
-      '@babel/parser': 7.22.10
-      '@babel/types': 7.22.10
+      '@babel/parser': 7.22.14
+      '@babel/types': 7.22.11
       '@types/babel__generator': 7.6.4
       '@types/babel__template': 7.4.1
       '@types/babel__traverse': 7.20.1
@@ -1162,20 +1172,20 @@ packages:
   /@types/babel__generator@7.6.4:
     resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.22.11
     dev: false
 
   /@types/babel__template@7.4.1:
     resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
     dependencies:
-      '@babel/parser': 7.22.10
-      '@babel/types': 7.22.10
+      '@babel/parser': 7.22.14
+      '@babel/types': 7.22.11
     dev: false
 
   /@types/babel__traverse@7.20.1:
     resolution: {integrity: sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.22.11
     dev: false
 
   /@types/css-tree@2.3.1:
@@ -1197,7 +1207,7 @@ packages:
   /@types/hast@2.3.5:
     resolution: {integrity: sha512-SvQi0L/lNpThgPoleH53cdjB3y9zpLlVjRbqB3rH8hx1jiRSBGAhyjV3H+URFjNVRqt2EdYNrbZE5IsGlNfpRg==}
     dependencies:
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
     dev: false
 
   /@types/html-minifier-terser@7.0.0:
@@ -1219,7 +1229,7 @@ packages:
   /@types/mdast@3.0.12:
     resolution: {integrity: sha512-DT+iNIRNX884cx0/Q1ja7NyUPpZuv0KPyL5rGNxm1WC1OtHstl7n4Jb7nk+xacNShQMbczJjt8uFzznpp6kYBg==}
     dependencies:
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
     dev: false
 
   /@types/ms@0.7.31:
@@ -1229,25 +1239,43 @@ packages:
   /@types/nlcst@1.0.1:
     resolution: {integrity: sha512-aVIyXt6pZiiMOtVByE4Y0gf+BLm1Cxc4ZLSK8VRHn1CgkO+kXbQwN/EBhQmhPdBMjFJCMBKtmNW2zWQuFywz8Q==}
     dependencies:
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
     dev: false
 
   /@types/node@17.0.45:
     resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
     dev: false
 
-  /@types/node@20.4.9:
-    resolution: {integrity: sha512-8e2HYcg7ohnTUbHk8focoklEQYvemQmu9M/f43DZVx43kHn0tE3BY/6gSDxS7k0SprtS0NHvj+L80cGLnoOUcQ==}
-    dev: true
-
   /@types/node@20.5.0:
     resolution: {integrity: sha512-Mgq7eCtoTjT89FqNoTzzXg2XvCi5VMhRV6+I2aYanc6kQCBImeNaAYRs/DyoVqk1YEUJK5gN9VO7HRIdz4Wo3Q==}
     dev: false
 
+  /@types/node@20.5.7:
+    resolution: {integrity: sha512-dP7f3LdZIysZnmvP3ANJYTSwg+wLLl8p7RqniVlV7j+oXSXAbt9h0WIBFmJy5inWZoX9wZN6eXx+YXd9Rh3RBA==}
+    dev: true
+
   /@types/parse5@6.0.3:
     resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
     dev: false
 
+  /@types/prop-types@15.7.5:
+    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+    dev: false
+
+  /@types/react-dom@18.0.6:
+    resolution: {integrity: sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==}
+    dependencies:
+      '@types/react': 18.0.21
+    dev: false
+
+  /@types/react@18.0.21:
+    resolution: {integrity: sha512-7QUCOxvFgnD5Jk8ZKlUAhVcRj7GuJRjnjjiY/IUBWKgOlnvDvTMLD4RTF7NPyVmbRhNrbomZiOepg7M/2Kj1mA==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.3
+      csstype: 3.1.2
+    dev: false
+
   /@types/resolve@1.20.2:
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
     dev: false
@@ -1258,8 +1286,12 @@ packages:
       '@types/node': 17.0.45
     dev: false
 
-  /@types/unist@2.0.7:
-    resolution: {integrity: sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==}
+  /@types/scheduler@0.16.3:
+    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
+    dev: false
+
+  /@types/unist@2.0.8:
+    resolution: {integrity: sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw==}
     dev: false
 
   /@types/yargs-parser@21.0.0:
@@ -1276,8 +1308,8 @@ packages:
       vscode-uri: 2.1.2
     dev: false
 
-  /@vscode/l10n@0.0.14:
-    resolution: {integrity: sha512-/yrv59IEnmh655z1oeDnGcvMYwnEzNzHLgeYcQCkhYX0xBvYWrAuefoiLcPBUkMpJsb46bqQ6Yv4pwTTQ4d3Qg==}
+  /@vscode/l10n@0.0.16:
+    resolution: {integrity: sha512-JT5CvrIYYCrmB+dCana8sUqJEcGB1ZDXNLMQ2+42bW995WmNoenijWMUdZfwmuQUTQcEVVIa2OecZzTYWUW9Cg==}
     dev: false
 
   /abbrev@1.1.1:
@@ -1431,18 +1463,18 @@ packages:
       sharp:
         optional: true
     dependencies:
-      '@astrojs/compiler': 1.8.1
+      '@astrojs/compiler': 1.8.2
       '@astrojs/internal-helpers': 0.1.2
       '@astrojs/language-server': 1.0.8
       '@astrojs/markdown-remark': 2.2.1(astro@2.6.6)
       '@astrojs/telemetry': 2.1.1
       '@astrojs/webapi': 2.2.0
-      '@babel/core': 7.22.10
+      '@babel/core': 7.22.11
       '@babel/generator': 7.22.10
-      '@babel/parser': 7.22.10
-      '@babel/plugin-transform-react-jsx': 7.22.5(@babel/core@7.22.10)
-      '@babel/traverse': 7.22.10
-      '@babel/types': 7.22.10
+      '@babel/parser': 7.22.14
+      '@babel/plugin-transform-react-jsx': 7.22.5(@babel/core@7.22.11)
+      '@babel/traverse': 7.22.11
+      '@babel/types': 7.22.11
       '@types/babel__core': 7.20.1
       '@types/yargs-parser': 21.0.0
       acorn: 8.10.0
@@ -1470,7 +1502,7 @@ packages:
       ora: 6.3.1
       p-limit: 4.0.0
       path-to-regexp: 6.2.1
-      preferred-pm: 3.0.3
+      preferred-pm: 3.1.1
       prompts: 2.4.2
       rehype: 12.0.1
       semver: 7.5.4
@@ -1481,13 +1513,13 @@ packages:
       strip-ansi: 7.1.0
       supports-esm: 1.0.0
       tsconfig-resolver: 3.0.1
-      typescript: 5.1.6
+      typescript: 5.2.2
       unist-util-visit: 4.1.2
       vfile: 5.3.7
       vite: 4.4.9
       vitefu: 0.2.4(vite@4.4.9)
       yargs-parser: 21.1.1
-      zod: 3.21.4
+      zod: 3.22.2
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -1507,19 +1539,19 @@ packages:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: true
 
-  /autoprefixer@10.4.14(postcss@8.4.27):
-    resolution: {integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==}
+  /autoprefixer@10.4.15(postcss@8.4.29):
+    resolution: {integrity: sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
       browserslist: 4.21.10
-      caniuse-lite: 1.0.30001519
-      fraction.js: 4.2.0
+      caniuse-lite: 1.0.30001525
+      fraction.js: 4.3.4
       normalize-range: 0.1.2
       picocolors: 1.0.0
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: false
 
@@ -1535,17 +1567,6 @@ packages:
     resolution: {integrity: sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==}
     dev: false
 
-  /babel-plugin-module-resolver@5.0.0:
-    resolution: {integrity: sha512-g0u+/ChLSJ5+PzYwLwP8Rp8Rcfowz58TJNCe+L/ui4rpzE/mg//JVX0EWBUYoxaextqnwuGHzfGp2hh0PPV25Q==}
-    engines: {node: '>= 16'}
-    dependencies:
-      find-babel-config: 2.0.0
-      glob: 8.1.0
-      pkg-up: 3.1.0
-      reselect: 4.1.8
-      resolve: 1.22.4
-    dev: false
-
   /bail@2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
     dev: false
@@ -1644,8 +1665,8 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001519
-      electron-to-chromium: 1.4.488
+      caniuse-lite: 1.0.30001525
+      electron-to-chromium: 1.4.506
       node-releases: 2.0.13
       update-browserslist-db: 1.0.11(browserslist@4.21.10)
     dev: false
@@ -1688,20 +1709,20 @@ packages:
       streamsearch: 1.1.0
     dev: false
 
-  /cacache@17.1.3:
-    resolution: {integrity: sha512-jAdjGxmPxZh0IipMdR7fK/4sDSrHMLUV0+GvVUsjwyGNKHsh79kW/otg+GkbXwl6Uzvy9wsvHOX4nUoWldeZMg==}
+  /cacache@17.1.4:
+    resolution: {integrity: sha512-/aJwG2l3ZMJ1xNAnqbMpA40of9dj/pIH3QfiuQSqjfPJF747VR0J/bHn+/KdNnHKc6XQcWt/AfRSBft82W1d2A==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
       '@npmcli/fs': 3.1.0
-      fs-minipass: 3.0.2
-      glob: 10.3.3
+      fs-minipass: 3.0.3
+      glob: 10.3.4
       lru-cache: 7.18.3
-      minipass: 5.0.0
+      minipass: 7.0.3
       minipass-collect: 1.0.2
       minipass-flush: 1.0.5
       minipass-pipeline: 1.2.4
       p-map: 4.0.0
-      ssri: 10.0.4
+      ssri: 10.0.5
       tar: 6.1.15
       unique-filename: 3.0.0
     dev: false
@@ -1728,7 +1749,7 @@ packages:
     resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
     dependencies:
       pascal-case: 3.1.2
-      tslib: 2.6.1
+      tslib: 2.6.2
     dev: false
 
   /camelcase-css@2.0.1:
@@ -1745,8 +1766,8 @@ packages:
     engines: {node: '>=14.16'}
     dev: false
 
-  /caniuse-lite@1.0.30001519:
-    resolution: {integrity: sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==}
+  /caniuse-lite@1.0.30001525:
+    resolution: {integrity: sha512-/3z+wB4icFt3r0USMwxujAqRvaD/B7rvGTsKhbhSQErVrJvkZCLhgNLJxU8MevahQVH6hCU9FsHdNUFbiwmE7Q==}
     dev: false
 
   /ccount@2.0.1:
@@ -1799,7 +1820,7 @@ packages:
       normalize-path: 3.0.0
       readdirp: 3.6.0
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
 
   /chownr@1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
@@ -2028,6 +2049,10 @@ packages:
       css-tree: 2.2.1
     dev: false
 
+  /csstype@3.1.2:
+    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
+    dev: false
+
   /csv-parser@3.0.0:
     resolution: {integrity: sha512-s6OYSXAK3IdKqYO33y09jhypG/bSDHPuyCme/IdEHfWpLf/jKcpitVFyOC6UemgGk8v7Q5u2XE0vvwmanxhGlQ==}
     engines: {node: '>= 10'}
@@ -2187,7 +2212,7 @@ packages:
     resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.1
+      tslib: 2.6.2
     dev: false
 
   /dot-prop@6.0.1:
@@ -2206,8 +2231,8 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: false
 
-  /electron-to-chromium@1.4.488:
-    resolution: {integrity: sha512-Dv4sTjiW7t/UWGL+H8ZkgIjtUAVZDgb/PwGWvMsCT7jipzUV/u5skbLXPFKb6iV0tiddVi/bcS2/kUrczeWgIQ==}
+  /electron-to-chromium@1.4.506:
+    resolution: {integrity: sha512-xxGct4GPAKSRlrLBtJxJFYy74W11zX6PO9GyHgl/U+2s3Dp0ZEwAklDfNHXOWcvH7zWMpsmgbR0ggEuaYAVvHA==}
     dev: false
 
   /email-addresses@5.0.0:
@@ -2425,8 +2450,8 @@ packages:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
     dev: false
 
-  /fast-fifo@1.3.0:
-    resolution: {integrity: sha512-IgfweLvEpwyA4WgiQe9Nx6VV2QkML2NkvZnk1oKnIzXgXdWxuhF7zw4DvLTPZJn6PIUneiAXPF24QmoEqHTjyw==}
+  /fast-fifo@1.3.2:
+    resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
     dev: false
 
   /fast-glob@3.3.1:
@@ -2476,14 +2501,6 @@ packages:
     dependencies:
       to-regex-range: 5.0.1
 
-  /find-babel-config@2.0.0:
-    resolution: {integrity: sha512-dOKT7jvF3hGzlW60Gc3ONox/0rRZ/tz7WCil0bqA1In/3I8f1BctpXahRnEKDySZqci7u+dqq93sZST9fOJpFw==}
-    engines: {node: '>=16.0.0'}
-    dependencies:
-      json5: 2.2.3
-      path-exists: 4.0.0
-    dev: false
-
   /find-cache-dir@3.3.2:
     resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
     engines: {node: '>=8'}
@@ -2493,13 +2510,6 @@ packages:
       pkg-dir: 4.2.0
     dev: true
 
-  /find-up@3.0.0:
-    resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
-    engines: {node: '>=6'}
-    dependencies:
-      locate-path: 3.0.0
-    dev: false
-
   /find-up@4.1.0:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
     engines: {node: '>=8'}
@@ -2559,8 +2569,8 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
-  /fraction.js@4.2.0:
-    resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
+  /fraction.js@4.3.4:
+    resolution: {integrity: sha512-pwiTgt0Q7t+GHZA4yaLjObx4vXmmdcS0iSJ19o8d/goUGgItX9UZWKWNnLHehxviD8wU2IWRsnR8cD5+yOJP2Q==}
     dev: false
 
   /fs-constants@1.0.0:
@@ -2583,11 +2593,11 @@ packages:
       minipass: 3.3.6
     dev: false
 
-  /fs-minipass@3.0.2:
-    resolution: {integrity: sha512-2GAfyfoaCDRrM6jaOS3UsBts8yJ55VioXdWcOL7dK9zdAuKT71+WBA4ifnNYqVjYv+4SsPxjK0JT4yIIn4cA/g==}
+  /fs-minipass@3.0.3:
+    resolution: {integrity: sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
-      minipass: 5.0.0
+      minipass: 7.0.3
     dev: false
 
   /fs.realpath@1.0.0:
@@ -2598,6 +2608,14 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
     optional: true
 
   /function-bind@1.1.1:
@@ -2670,15 +2688,15 @@ packages:
     dependencies:
       is-glob: 4.0.3
 
-  /glob@10.3.3:
-    resolution: {integrity: sha512-92vPiMb/iqpmEgsOoIDvTjc50wf9CCCvMzsi6W0JLPeUKE8TWP1a73PgqSrqy7iAZxaSD1YdzU7QZR5LF51MJw==}
+  /glob@10.3.4:
+    resolution: {integrity: sha512-6LFElP3A+i/Q8XQKEvZjkEWEOTgAIALR9AO2rwT8bgPhDd1anmqDJDZ6lLddI4ehxxxR1S5RIqKe1uapMQfYaQ==}
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
     dependencies:
       foreground-child: 3.1.1
-      jackspeak: 2.2.2
+      jackspeak: 2.3.1
       minimatch: 9.0.3
-      minipass: 7.0.2
+      minipass: 7.0.3
       path-scurry: 1.10.1
     dev: false
 
@@ -2702,17 +2720,6 @@ packages:
       once: 1.4.0
       path-is-absolute: 1.0.1
 
-  /glob@8.1.0:
-    resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 5.1.6
-      once: 1.4.0
-    dev: false
-
   /global-dirs@3.0.1:
     resolution: {integrity: sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==}
     engines: {node: '>=10'}
@@ -2817,7 +2824,7 @@ packages:
     resolution: {integrity: sha512-Nz7FfPBuljzsN3tCQ4kCBKqdNhQE2l0Tn+X1ubgKBPRoiDIu1mL08Cfw4k7q71+Duyaw7DXDN+VTAp4Vh3oCOw==}
     dependencies:
       '@types/hast': 2.3.5
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
       hastscript: 7.2.0
       property-information: 6.2.0
       vfile: 5.3.7
@@ -2829,7 +2836,7 @@ packages:
     resolution: {integrity: sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==}
     dependencies:
       '@types/hast': 2.3.5
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
     dev: false
 
   /hast-util-parse-selector@3.1.1:
@@ -2858,7 +2865,7 @@ packages:
     resolution: {integrity: sha512-4tpQTUOr9BMjtYyNlt0P50mH7xj0Ks2xpo8M943Vykljf99HW6EzulIoJP1N3eKOSScEHzyzi9dm7/cn0RfGwA==}
     dependencies:
       '@types/hast': 2.3.5
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
       ccount: 2.0.1
       comma-separated-tokens: 2.0.3
       hast-util-raw: 7.2.3
@@ -3208,8 +3215,8 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: false
 
-  /jackspeak@2.2.2:
-    resolution: {integrity: sha512-mgNtVv4vUuaKA97yxUHoA3+FkuhtxkjdXEWOyB/N76fjy0FjezEt34oy3epBtvCvS+7DyKwqCFWx/oJLV5+kCg==}
+  /jackspeak@2.3.1:
+    resolution: {integrity: sha512-4iSY3Bh1Htv+kLhiiZunUhQ+OYXIn0ze3ulq8JeWrFKmhPAJSySV2+kdtRh2pGcCeF0s6oR8Oc+pYZynJj4t8A==}
     engines: {node: '>=14'}
     dependencies:
       '@isaacs/cliui': 8.0.2
@@ -3217,8 +3224,8 @@ packages:
       '@pkgjs/parseargs': 0.11.0
     dev: false
 
-  /jiti@1.19.1:
-    resolution: {integrity: sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==}
+  /jiti@1.19.3:
+    resolution: {integrity: sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==}
     hasBin: true
 
   /jju@1.4.0:
@@ -3353,14 +3360,6 @@ packages:
       strip-bom: 3.0.0
     dev: false
 
-  /locate-path@3.0.0:
-    resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
-    engines: {node: '>=6'}
-    dependencies:
-      p-locate: 3.0.0
-      path-exists: 3.0.0
-    dev: false
-
   /locate-path@5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
@@ -3402,10 +3401,17 @@ packages:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
     dev: false
 
+  /loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+    dev: false
+
   /lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
     dependencies:
-      tslib: 2.6.1
+      tslib: 2.6.2
     dev: false
 
   /lowercase-keys@3.0.0:
@@ -3413,8 +3419,8 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: false
 
-  /lru-cache@10.0.0:
-    resolution: {integrity: sha512-svTf/fzsKHffP42sujkO/Rjs37BCIsQVRCeNYIm9WN8rgT7ffoUnRtZCqU+6BqcSBdv8gwJeTz8knJpgACeQMw==}
+  /lru-cache@10.0.1:
+    resolution: {integrity: sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==}
     engines: {node: 14 || >=16.14}
     dev: false
 
@@ -3455,20 +3461,20 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
       agentkeepalive: 4.5.0
-      cacache: 17.1.3
+      cacache: 17.1.4
       http-cache-semantics: 4.1.1
       http-proxy-agent: 5.0.0
       https-proxy-agent: 5.0.1
       is-lambda: 1.0.1
       lru-cache: 7.18.3
       minipass: 5.0.0
-      minipass-fetch: 3.0.3
+      minipass-fetch: 3.0.4
       minipass-flush: 1.0.5
       minipass-pipeline: 1.2.4
       negotiator: 0.6.3
       promise-retry: 2.0.1
       socks-proxy-agent: 7.0.0
-      ssri: 10.0.4
+      ssri: 10.0.5
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -3492,7 +3498,7 @@ packages:
     resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==}
     dependencies:
       '@types/mdast': 3.0.12
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
       unist-util-visit: 4.1.2
     dev: false
 
@@ -3509,7 +3515,7 @@ packages:
     resolution: {integrity: sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==}
     dependencies:
       '@types/mdast': 3.0.12
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
       decode-named-character-reference: 1.0.2
       mdast-util-to-string: 3.2.0
       micromark: 3.2.0
@@ -3604,7 +3610,7 @@ packages:
     resolution: {integrity: sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==}
     dependencies:
       '@types/mdast': 3.0.12
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
       longest-streak: 3.1.0
       mdast-util-phrasing: 3.0.1
       mdast-util-to-string: 3.2.0
@@ -3936,13 +3942,6 @@ packages:
     dependencies:
       brace-expansion: 1.1.11
 
-  /minimatch@5.1.6:
-    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
-    engines: {node: '>=10'}
-    dependencies:
-      brace-expansion: 2.0.1
-    dev: false
-
   /minimatch@9.0.3:
     resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -3960,11 +3959,11 @@ packages:
       minipass: 3.3.6
     dev: false
 
-  /minipass-fetch@3.0.3:
-    resolution: {integrity: sha512-n5ITsTkDqYkYJZjcRWzZt9qnZKCT7nKCosJhHoj7S7zD+BP4jVbWs+odsniw5TA3E0sLomhTKOKjF86wf11PuQ==}
+  /minipass-fetch@3.0.4:
+    resolution: {integrity: sha512-jHAqnA728uUpIaFm7NWsCnqKT6UqZz7GcI/bDpPATuwYyKwJwW0remxSCxUlKiEty+eopHGa3oc8WxgQ1FFJqg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
-      minipass: 5.0.0
+      minipass: 7.0.3
       minipass-sized: 1.0.3
       minizlib: 2.1.2
     optionalDependencies:
@@ -4016,8 +4015,8 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
-  /minipass@7.0.2:
-    resolution: {integrity: sha512-eL79dXrE1q9dBbDCLg7xfn/vl7MS4F1gvJAgjJrQli/jbQWdUttuVawphqpffoIYfRdq78LHx6GP4bU/EQ2ATA==}
+  /minipass@7.0.3:
+    resolution: {integrity: sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==}
     engines: {node: '>=16 || 14 >=14.17'}
     dev: false
 
@@ -4088,11 +4087,11 @@ packages:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
     dependencies:
       lower-case: 2.0.2
-      tslib: 2.6.1
+      tslib: 2.6.2
     dev: false
 
-  /node-abi@3.45.0:
-    resolution: {integrity: sha512-iwXuFrMAcFVi/ZoZiqq8BzAdsLw9kxDfTC0HMyjXfSL/6CSDAGD5UmR7azrAgWV1zKYq7dUUMj4owusBWKLsiQ==}
+  /node-abi@3.47.0:
+    resolution: {integrity: sha512-2s6B2CWZM//kPgwnuI0KrYwNjfdByE25zvAaEpq9IH4zcNsarH8Ihu/UuX6XMPEogDAxkuUFeZn60pXNHAqn3A==}
     engines: {node: '>=10'}
     dependencies:
       semver: 7.5.4
@@ -4203,7 +4202,7 @@ packages:
       semver: 7.5.4
       semver-utils: 1.1.4
       source-map-support: 0.5.21
-      spawn-please: 2.0.1
+      spawn-please: 2.0.2
       strip-json-comments: 5.0.1
       untildify: 4.0.0
       update-notifier: 6.0.2
@@ -4212,8 +4211,8 @@ packages:
       - supports-color
     dev: false
 
-  /npm-install-checks@6.1.1:
-    resolution: {integrity: sha512-dH3GmQL4vsPtld59cOn8uY0iOqRmqKvV+DLGwNXV/Q7MDgD2QfOADWd/mFXcIE5LVhYYGjA3baz6W9JneqnuCw==}
+  /npm-install-checks@6.2.0:
+    resolution: {integrity: sha512-744wat5wAAHsxa4590mWO0tJ8PKxR8ORZsH9wGpQc3nWTzozMAgBN/XyqYw7mg3yqLM8dLwEnwSfKMmXAjF69g==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
       semver: 7.5.4
@@ -4245,7 +4244,7 @@ packages:
     resolution: {integrity: sha512-1dKY+86/AIiq1tkKVD3l0WI+Gd3vkknVGAggsFeBkTvbhMQ1OND/LKkYv4JtXPKUJ8bOTCyLiqEg2P6QNdK+Gg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
-      npm-install-checks: 6.1.1
+      npm-install-checks: 6.2.0
       npm-normalize-package-bin: 3.0.1
       npm-package-arg: 10.1.0
       semver: 7.5.4
@@ -4257,7 +4256,7 @@ packages:
     dependencies:
       make-fetch-happen: 11.1.1
       minipass: 5.0.0
-      minipass-fetch: 3.0.3
+      minipass-fetch: 3.0.4
       minipass-json-stream: 1.0.1
       minizlib: 2.1.2
       npm-package-arg: 10.1.0
@@ -4382,13 +4381,6 @@ packages:
       yocto-queue: 1.0.0
     dev: false
 
-  /p-locate@3.0.0:
-    resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
-    engines: {node: '>=6'}
-    dependencies:
-      p-limit: 2.3.0
-    dev: false
-
   /p-locate@4.1.0:
     resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
     engines: {node: '>=8'}
@@ -4432,8 +4424,8 @@ packages:
       '@npmcli/installed-package-contents': 2.0.2
       '@npmcli/promise-spawn': 6.0.2
       '@npmcli/run-script': 6.0.2
-      cacache: 17.1.3
-      fs-minipass: 3.0.2
+      cacache: 17.1.4
+      fs-minipass: 3.0.3
       minipass: 4.2.8
       npm-package-arg: 10.1.0
       npm-packlist: 7.0.4
@@ -4443,8 +4435,8 @@ packages:
       promise-retry: 2.0.1
       read-package-json: 6.0.4
       read-package-json-fast: 3.0.2
-      sigstore: 1.8.0
-      ssri: 10.0.4
+      sigstore: 1.9.0
+      ssri: 10.0.5
       tar: 6.1.15
     transitivePeerDependencies:
       - bluebird
@@ -4455,7 +4447,7 @@ packages:
     resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.6.1
+      tslib: 2.6.2
     dev: false
 
   /parse-github-url@1.0.2:
@@ -4480,12 +4472,7 @@ packages:
     resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.1
-    dev: false
-
-  /path-exists@3.0.0:
-    resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
-    engines: {node: '>=4'}
+      tslib: 2.6.2
     dev: false
 
   /path-exists@4.0.0:
@@ -4513,8 +4500,8 @@ packages:
     resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==}
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
-      lru-cache: 10.0.0
-      minipass: 7.0.2
+      lru-cache: 10.0.1
+      minipass: 7.0.3
     dev: false
 
   /path-to-regexp@6.2.1:
@@ -4564,40 +4551,33 @@ packages:
     dependencies:
       find-up: 4.1.0
 
-  /pkg-up@3.1.0:
-    resolution: {integrity: sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==}
-    engines: {node: '>=8'}
-    dependencies:
-      find-up: 3.0.0
-    dev: false
-
   /playwright-core@1.35.1:
     resolution: {integrity: sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==}
     engines: {node: '>=16'}
     hasBin: true
     dev: true
 
-  /postcss-import@15.1.0(postcss@8.4.27):
+  /postcss-import@15.1.0(postcss@8.4.29):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.4
 
-  /postcss-js@4.0.1(postcss@8.4.27):
+  /postcss-js@4.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.27
+      postcss: 8.4.29
 
-  /postcss-load-config@4.0.1(postcss@8.4.27):
+  /postcss-load-config@4.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
     engines: {node: '>= 14'}
     peerDependencies:
@@ -4610,16 +4590,16 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.1.0
-      postcss: 8.4.27
-      yaml: 2.3.1
+      postcss: 8.4.29
+      yaml: 2.3.2
 
-  /postcss-nested@6.0.1(postcss@8.4.27):
+  /postcss-nested@6.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-selector-parser: 6.0.13
 
   /postcss-selector-parser@6.0.10:
@@ -4640,27 +4620,14 @@ packages:
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  /postcss@8.4.27:
-    resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==}
+  /postcss@8.4.29:
+    resolution: {integrity: sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.6
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
-  /preact-render-to-string@5.2.6(preact@10.15.1):
-    resolution: {integrity: sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==}
-    peerDependencies:
-      preact: '>=10'
-    dependencies:
-      preact: 10.15.1
-      pretty-format: 3.8.0
-    dev: false
-
-  /preact@10.15.1:
-    resolution: {integrity: sha512-qs2ansoQEwzNiV5eAcRT1p1EC/dmEzaATVDJNiB3g2sRDWdA7b7MurXdJjB2+/WQktGWZwxvDrnuRFbWuIr64g==}
-    dev: false
-
   /prebuild-install@7.1.1:
     resolution: {integrity: sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==}
     engines: {node: '>=10'}
@@ -4672,7 +4639,7 @@ packages:
       minimist: 1.2.8
       mkdirp-classic: 0.5.3
       napi-build-utils: 1.0.2
-      node-abi: 3.45.0
+      node-abi: 3.47.0
       pump: 3.0.0
       rc: 1.2.8
       simple-get: 4.0.1
@@ -4680,8 +4647,8 @@ packages:
       tunnel-agent: 0.6.0
     dev: false
 
-  /preferred-pm@3.0.3:
-    resolution: {integrity: sha512-+wZgbxNES/KlJs9q40F/1sfOd/j7f1O9JaHcW5Dsn3aUUOZg3L2bjpVUcKV2jvtElYfoTuQiNeMfQJ4kwUAhCQ==}
+  /preferred-pm@3.1.1:
+    resolution: {integrity: sha512-CsZgOVLKHifdoRu2y66P1s6oLb2WfT5Njkcgi80I/52FWTTVkWG6z0Z13vPkXC4hsT0nMrYXqX30buH8+D2eRQ==}
     engines: {node: '>=10'}
     dependencies:
       find-up: 5.0.0
@@ -4694,7 +4661,7 @@ packages:
     resolution: {integrity: sha512-dPzop0gKZyVGpTDQmfy+e7FKXC9JT3mlpfYA2diOVz+Ui+QR1U4G/s+OesKl2Hib2JJOtAYJs/l+ovgT0ljlFA==}
     engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
     dependencies:
-      '@astrojs/compiler': 1.8.1
+      '@astrojs/compiler': 1.8.2
       prettier: 2.8.8
       sass-formatter: 0.7.7
     dev: true
@@ -4703,7 +4670,7 @@ packages:
     resolution: {integrity: sha512-pYZXSbdq0eElvzoIMArzv1SBn1NUXzopjlcnt6Ql8VW32PjC12NovwBjXJ6rh8qQLi7vF8jNqAbraKW03UPfag==}
     engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
     dependencies:
-      '@astrojs/compiler': 1.8.1
+      '@astrojs/compiler': 1.8.2
       prettier: 2.8.8
       sass-formatter: 0.7.7
       synckit: 0.8.5
@@ -4770,10 +4737,6 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
-  /pretty-format@3.8.0:
-    resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==}
-    dev: false
-
   /prismjs@1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
     engines: {node: '>=6'}
@@ -4877,6 +4840,23 @@ packages:
       strip-json-comments: 2.0.1
     dev: false
 
+  /react-dom@18.0.0(react@18.0.0):
+    resolution: {integrity: sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==}
+    peerDependencies:
+      react: ^18.0.0
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.0.0
+      scheduler: 0.21.0
+    dev: false
+
+  /react@18.0.0:
+    resolution: {integrity: sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
@@ -4894,7 +4874,7 @@ packages:
     resolution: {integrity: sha512-AEtWXYfopBj2z5N5PbkAOeNHRPUg5q+Nen7QLxV8M2zJq1ym6/lCz3fYNTCXe19puu2d06jfHhrP7v/S2PtMMw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
-      glob: 10.3.3
+      glob: 10.3.4
       json-parse-even-better-errors: 3.0.0
       normalize-package-data: 5.0.0
       npm-normalize-package-bin: 3.0.1
@@ -4941,8 +4921,8 @@ packages:
       unist-util-visit: 4.1.2
     dev: false
 
-  /rehype-parse@8.0.4:
-    resolution: {integrity: sha512-MJJKONunHjoTh4kc3dsM1v3C9kGrrxvA3U8PxZlP2SjH8RNUSrb+lF7Y0KVaUDnGH2QZ5vAn7ulkiajM9ifuqg==}
+  /rehype-parse@8.0.5:
+    resolution: {integrity: sha512-Ds3RglaY/+clEX2U2mHflt7NlMA72KspZ0JLUJgBBLpRddBcEw3H8uYZQliQriku22NZpYMfjDdSgHcjxue24A==}
     dependencies:
       '@types/hast': 2.3.5
       hast-util-from-parse5: 7.1.2
@@ -4958,8 +4938,8 @@ packages:
       unified: 10.1.2
     dev: false
 
-  /rehype-stringify@9.0.3:
-    resolution: {integrity: sha512-kWiZ1bgyWlgOxpqD5HnxShKAdXtb2IUljn3hQAhySeak6IOQPPt6DeGnsIh4ixm7yKJWzm8TXFuC/lPfcWHJqw==}
+  /rehype-stringify@9.0.4:
+    resolution: {integrity: sha512-Uk5xu1YKdqobe5XpSskwPvo1XeHUUucWEQSl8hTrXt5selvca1e8K1EZ37E6YoZ4BT8BCqCdVfQW7OfHfthtVQ==}
     dependencies:
       '@types/hast': 2.3.5
       hast-util-to-html: 8.0.4
@@ -4970,8 +4950,8 @@ packages:
     resolution: {integrity: sha512-ey6kAqwLM3X6QnMDILJthGvG1m1ULROS9NT4uG9IDCuv08SFyLlreSuvOa//DgEvbXx62DS6elGVqusWhRUbgw==}
     dependencies:
       '@types/hast': 2.3.5
-      rehype-parse: 8.0.4
-      rehype-stringify: 9.0.3
+      rehype-parse: 8.0.5
+      rehype-stringify: 9.0.4
       unified: 10.1.2
     dev: false
 
@@ -5029,10 +5009,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /reselect@4.1.8:
-    resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==}
-    dev: false
-
   /resolve-alpn@1.2.1:
     resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==}
     dev: false
@@ -5116,19 +5092,19 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
-      glob: 10.3.3
+      glob: 10.3.4
     dev: false
 
   /roadmap-renderer@1.0.6:
     resolution: {integrity: sha512-IQejjIfr9RIvesNwp3SyhEq1DMQ2RdJfJhgsb1AyPuKXsfJgOG8F++Cz1p3SIcY0bnB57Q16Ke2VJLjiUVwI3Q==}
     dev: false
 
-  /rollup@3.27.2:
-    resolution: {integrity: sha512-YGwmHf7h2oUHkVBT248x0yt6vZkYQ3/rvE5iQuVBh3WO8GcJ6BNeOkpoX1yMHIiBm18EMLjBPIoUDkhgnyxGOQ==}
+  /rollup@3.28.1:
+    resolution: {integrity: sha512-R9OMQmIHJm9znrU3m3cpE8uhN0fGdXiawME7aZIpQqvpS/85+Vt1Hq1/yVIcYfOmaQiHjvXkQAoJukvLpau6Yw==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     dev: false
 
   /run-applescript@5.0.0:
@@ -5171,6 +5147,12 @@ packages:
     resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
     dev: false
 
+  /scheduler@0.21.0:
+    resolution: {integrity: sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /section-matter@1.0.0:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
@@ -5255,13 +5237,14 @@ packages:
     engines: {node: '>=14'}
     dev: false
 
-  /sigstore@1.8.0:
-    resolution: {integrity: sha512-ogU8qtQ3VFBawRJ8wjsBEX/vIFeHuGs1fm4jZtjWQwjo8pfAt7T/rh+udlAN4+QUe0IzA8qRSc/YZ7dHP6kh+w==}
+  /sigstore@1.9.0:
+    resolution: {integrity: sha512-0Zjz0oe37d08VeOtBIuB6cRriqXse2e8w+7yIy2XSXjshRKxbc2KkhXjL229jXSxEm7UbcjS76wcJDGQddVI9A==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     hasBin: true
     dependencies:
-      '@sigstore/bundle': 1.0.0
-      '@sigstore/protobuf-specs': 0.2.0
+      '@sigstore/bundle': 1.1.0
+      '@sigstore/protobuf-specs': 0.2.1
+      '@sigstore/sign': 1.0.0
       '@sigstore/tuf': 1.0.3
       make-fetch-happen: 11.1.1
     transitivePeerDependencies:
@@ -5360,8 +5343,8 @@ packages:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
     dev: false
 
-  /spawn-please@2.0.1:
-    resolution: {integrity: sha512-W+cFbZR2q2mMTfjz5ZGvhBAiX+e/zczFCNlbS9mxiSdYswBXwUuBUT+a0urH+xZZa8f/bs0mXHyZsZHR9hKogA==}
+  /spawn-please@2.0.2:
+    resolution: {integrity: sha512-KM8coezO6ISQ89c1BzyWNtcn2V2kAVtwIXd3cN/V5a0xPYc1F/vydrRc01wsKFEQ/p+V1a4sw4z2yMITIXrgGw==}
     engines: {node: '>=14'}
     dependencies:
       cross-spawn: 7.0.3
@@ -5393,11 +5376,11 @@ packages:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
     dev: false
 
-  /ssri@10.0.4:
-    resolution: {integrity: sha512-12+IR2CB2C28MMAw0Ncqwj5QbTcs0nGIhgJzYWzDkb21vWmfNI83KS4f3Ci6GI98WreIfG7o9UXp3C0qbpA8nQ==}
+  /ssri@10.0.5:
+    resolution: {integrity: sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
-      minipass: 5.0.0
+      minipass: 7.0.3
     dev: false
 
   /stdin-discarder@0.1.0:
@@ -5415,7 +5398,7 @@ packages:
   /streamx@2.15.1:
     resolution: {integrity: sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==}
     dependencies:
-      fast-fifo: 1.3.0
+      fast-fifo: 1.3.2
       queue-tick: 1.0.1
     dev: false
 
@@ -5566,7 +5549,7 @@ packages:
     engines: {node: ^14.18.0 || >=16.0.0}
     dependencies:
       '@pkgr/utils': 2.4.2
-      tslib: 2.6.1
+      tslib: 2.6.2
     dev: false
 
   /tailwindcss@3.3.2:
@@ -5582,17 +5565,17 @@ packages:
       fast-glob: 3.3.1
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.19.1
+      jiti: 1.19.3
       lilconfig: 2.1.0
       micromatch: 4.0.5
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.0
-      postcss: 8.4.27
-      postcss-import: 15.1.0(postcss@8.4.27)
-      postcss-js: 4.0.1(postcss@8.4.27)
-      postcss-load-config: 4.0.1(postcss@8.4.27)
-      postcss-nested: 6.0.1(postcss@8.4.27)
+      postcss: 8.4.29
+      postcss-import: 15.1.0(postcss@8.4.29)
+      postcss-js: 4.0.1(postcss@8.4.29)
+      postcss-load-config: 4.0.1(postcss@8.4.29)
+      postcss-nested: 6.0.1(postcss@8.4.29)
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
       resolve: 1.22.4
@@ -5632,7 +5615,7 @@ packages:
     resolution: {integrity: sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==}
     dependencies:
       b4a: 1.6.4
-      fast-fifo: 1.3.0
+      fast-fifo: 1.3.2
       streamx: 2.15.1
     dev: false
 
@@ -5715,8 +5698,8 @@ packages:
       type-fest: 0.13.1
     dev: false
 
-  /tslib@2.6.1:
-    resolution: {integrity: sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==}
+  /tslib@2.6.2:
+    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
     dev: false
 
   /tuf-js@1.1.7:
@@ -5757,8 +5740,8 @@ packages:
       is-typedarray: 1.0.0
     dev: false
 
-  /typescript@5.1.6:
-    resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
+  /typescript@5.2.2:
+    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
     engines: {node: '>=14.17'}
     hasBin: true
     dev: false
@@ -5781,7 +5764,7 @@ packages:
   /unified@10.1.2:
     resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
     dependencies:
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
       bail: 2.0.2
       extend: 3.0.2
       is-buffer: 2.0.5
@@ -5818,45 +5801,45 @@ packages:
   /unist-util-is@5.2.1:
     resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==}
     dependencies:
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
     dev: false
 
   /unist-util-modify-children@3.1.1:
     resolution: {integrity: sha512-yXi4Lm+TG5VG+qvokP6tpnk+r1EPwyYL04JWDxLvgvPV40jANh7nm3udk65OOWquvbMDe+PL9+LmkxDpTv/7BA==}
     dependencies:
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
       array-iterate: 2.0.1
     dev: false
 
   /unist-util-position@4.0.4:
     resolution: {integrity: sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==}
     dependencies:
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
     dev: false
 
   /unist-util-stringify-position@3.0.3:
     resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==}
     dependencies:
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
     dev: false
 
   /unist-util-visit-children@2.0.2:
     resolution: {integrity: sha512-+LWpMFqyUwLGpsQxpumsQ9o9DG2VGLFrpz+rpVXYIEdPy57GSy5HioC0g3bg/8WP9oCLlapQtklOzQ8uLS496Q==}
     dependencies:
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
     dev: false
 
   /unist-util-visit-parents@5.1.3:
     resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
     dependencies:
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
       unist-util-is: 5.2.1
     dev: false
 
   /unist-util-visit@4.1.2:
     resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
     dependencies:
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
       unist-util-is: 5.2.1
       unist-util-visit-parents: 5.1.3
     dev: false
@@ -5933,21 +5916,21 @@ packages:
   /vfile-location@4.1.0:
     resolution: {integrity: sha512-YF23YMyASIIJXpktBa4vIGLJ5Gs88UB/XePgqPmTa7cDA+JeO3yclbpheQYCHjVHBn/yePzrXuygIL+xbvRYHw==}
     dependencies:
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
       vfile: 5.3.7
     dev: false
 
   /vfile-message@3.1.4:
     resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==}
     dependencies:
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
       unist-util-stringify-position: 3.0.3
     dev: false
 
   /vfile@5.3.7:
     resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==}
     dependencies:
-      '@types/unist': 2.0.7
+      '@types/unist': 2.0.8
       is-buffer: 2.0.5
       unist-util-stringify-position: 3.0.3
       vfile-message: 3.1.4
@@ -5982,10 +5965,10 @@ packages:
         optional: true
     dependencies:
       esbuild: 0.18.20
-      postcss: 8.4.27
-      rollup: 3.27.2
+      postcss: 8.4.29
+      rollup: 3.28.1
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     dev: false
 
   /vitefu@0.2.4(vite@4.4.9):
@@ -5999,19 +5982,19 @@ packages:
       vite: 4.4.9
     dev: false
 
-  /vscode-css-languageservice@6.2.6:
-    resolution: {integrity: sha512-SA2WkeOecIpUiEbZnjOsP/fI5CRITZEiQGSHXKiDQDwLApfKcnLhZwMtOBbIifSzESVcQa7b/shX/nbnF4NoCg==}
+  /vscode-css-languageservice@6.2.7:
+    resolution: {integrity: sha512-Jd8wpIg5kJ15CfrieoEPvu3gGFc36sbM3qXCtjVq5zrnLEX5NhHxikMDtf8AgQsYklXiDqiZLKoBnzkJtRbTHQ==}
     dependencies:
-      '@vscode/l10n': 0.0.14
+      '@vscode/l10n': 0.0.16
       vscode-languageserver-textdocument: 1.0.8
       vscode-languageserver-types: 3.17.3
       vscode-uri: 3.0.7
     dev: false
 
-  /vscode-html-languageservice@5.0.6:
-    resolution: {integrity: sha512-gCixNg6fjPO7+kwSMBAVXcwDRHdjz1WOyNfI0n5Wx0J7dfHG8ggb3zD1FI8E2daTZrwS1cooOiSoc1Xxph4qRQ==}
+  /vscode-html-languageservice@5.0.7:
+    resolution: {integrity: sha512-jX+7/kUXrdOaRT8vqYR/jLxrGDib+Far8I7n/A6apuEl88k+mhIHZPwc6ezuLeiCKUCaLG4b0dqFwjVa7QL3/w==}
     dependencies:
-      '@vscode/l10n': 0.0.14
+      '@vscode/l10n': 0.0.16
       vscode-languageserver-textdocument: 1.0.8
       vscode-languageserver-types: 3.17.3
       vscode-uri: 3.0.7
@@ -6155,8 +6138,8 @@ packages:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: false
 
-  /yaml@2.3.1:
-    resolution: {integrity: sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==}
+  /yaml@2.3.2:
+    resolution: {integrity: sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==}
     engines: {node: '>= 14'}
 
   /yargs-parser@21.1.1:
@@ -6174,8 +6157,8 @@ packages:
     engines: {node: '>=12.20'}
     dev: false
 
-  /zod@3.21.4:
-    resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
+  /zod@3.22.2:
+    resolution: {integrity: sha512-wvWkphh5WQsJbVk1tbx1l1Ly4yg+XecD+Mq280uBGt9wa5BKSWf4Mhp6GmrkPixhMxmabYY7RbzlwVP32pbGCg==}
     dev: false
 
   /zwitch@2.0.4:
diff --git a/src/components/Activity/ActivityCounters.tsx b/src/components/Activity/ActivityCounters.tsx
index 4024ae33e..ea05aabbd 100644
--- a/src/components/Activity/ActivityCounters.tsx
+++ b/src/components/Activity/ActivityCounters.tsx
@@ -21,11 +21,11 @@ function ActivityCounter(props: ActivityCounterType) {
   const { text, count } = props;
 
   return (
-    <div class="relative flex flex-1 flex-row-reverse sm:flex-col px-0 sm:px-4 py-2 sm:py-4 text-center sm:pt-10 items-center gap-2 sm:gap-0 justify-end">
-      <h2 class="text-base sm:text-5xl font-bold">
+    <div className="relative flex flex-1 flex-row-reverse sm:flex-col px-0 sm:px-4 py-2 sm:py-4 text-center sm:pt-10 items-center gap-2 sm:gap-0 justify-end">
+      <h2 className="text-base sm:text-5xl font-bold">
         {count}
       </h2>
-      <p class="mt-0 sm:mt-2 text-sm text-gray-400">{text}</p>
+      <p className="mt-0 sm:mt-2 text-sm text-gray-400">{text}</p>
     </div>
   );
 }
@@ -34,8 +34,8 @@ export function ActivityCounters(props: ActivityCountersType) {
   const { done, learning, streak } = props;
 
   return (
-    <div class="mx-0 -mt-5 sm:-mx-10 md:-mt-10">
-      <div class="flex flex-col sm:flex-row gap-0 sm:gap-2 divide-y sm:divide-y-0 divide-x-0 sm:divide-x border-b">
+    <div className="mx-0 -mt-5 sm:-mx-10 md:-mt-10">
+      <div className="flex flex-col sm:flex-row gap-0 sm:gap-2 divide-y sm:divide-y-0 divide-x-0 sm:divide-x border-b">
         <ActivityCounter
           text={'Topics Completed'}
           count={`${done?.total || 0}`}
diff --git a/src/components/Activity/ActivityPage.tsx b/src/components/Activity/ActivityPage.tsx
index 2373248ab..be2a9914c 100644
--- a/src/components/Activity/ActivityPage.tsx
+++ b/src/components/Activity/ActivityPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import { httpGet } from '../../lib/http';
 import { ActivityCounters } from './ActivityCounters';
 import { ResourceProgress } from './ResourceProgress';
@@ -91,16 +91,16 @@ export function ActivityPage() {
         streak={activity?.streak || { count: 0 }}
       />
 
-      <div class="mx-0 px-0 py-5 md:-mx-10 md:px-8 md:py-8">
+      <div className="mx-0 px-0 py-5 md:-mx-10 md:px-8 md:py-8">
         {learningRoadmaps.length === 0 &&
           learningBestPractices.length === 0 && <EmptyActivity />}
 
         {(learningRoadmaps.length > 0 || learningBestPractices.length > 0) && (
           <>
-            <h2 class="mb-3 text-xs uppercase text-gray-400">
+            <h2 className="mb-3 text-xs uppercase text-gray-400">
               Continue Following
             </h2>
-            <div class="flex flex-col gap-3">
+            <div className="flex flex-col gap-3">
               {learningRoadmaps
                 .sort((a, b) => {
                   const updatedAtA = new Date(a.updatedAt);
@@ -110,6 +110,7 @@ export function ActivityPage() {
                 })
                 .map((roadmap) => (
                   <ResourceProgress
+                      key={roadmap.id}
                     doneCount={roadmap.done || 0}
                     learningCount={roadmap.learning || 0}
                     totalCount={roadmap.total || 0}
diff --git a/src/components/Activity/EmptyActivity.tsx b/src/components/Activity/EmptyActivity.tsx
index dc8bbb4da..13e8ff102 100644
--- a/src/components/Activity/EmptyActivity.tsx
+++ b/src/components/Activity/EmptyActivity.tsx
@@ -2,21 +2,21 @@ import RoadmapIcon from '../../icons/roadmap.svg';
 
 export function EmptyActivity() {
   return (
-    <div class="rounded-md">
-      <div class="flex flex-col items-center p-7 text-center">
+    <div className="rounded-md">
+      <div className="flex flex-col items-center p-7 text-center">
         <img
           alt="no roadmaps"
           src={RoadmapIcon}
-          class="mb-2 w-[60px] h-[60px] sm:h-[120px] sm:w-[120px] opacity-10"
+          className="mb-2 w-[60px] h-[60px] sm:h-[120px] sm:w-[120px] opacity-10"
         />
-        <h2 class="text-lg sm:text-xl font-bold">No Progress</h2>
+        <h2 className="text-lg sm:text-xl font-bold">No Progress</h2>
         <p className="my-1 sm:my-2 max-w-[400px] text-gray-500 text-sm sm:text-base">
           Progress will appear here as you start tracking your{' '}
-          <a href="/roadmaps" class="mt-4 text-blue-500 hover:underline">
+          <a href="/roadmaps" className="mt-4 text-blue-500 hover:underline">
             Roadmaps
           </a>{' '}
           or{' '}
-          <a href="/best-practices" class="mt-4 text-blue-500 hover:underline">
+          <a href="/best-practices" className="mt-4 text-blue-500 hover:underline">
             Best Practices
           </a>{' '}
           progress.
diff --git a/src/components/Activity/ResourceProgress.tsx b/src/components/Activity/ResourceProgress.tsx
index 936e58a0b..1f931f5a7 100644
--- a/src/components/Activity/ResourceProgress.tsx
+++ b/src/components/Activity/ResourceProgress.tsx
@@ -1,8 +1,8 @@
-import { useState } from 'preact/hooks';
 import { httpPost } from '../../lib/http';
 import { getRelativeTimeString } from '../../lib/date';
 import { useToast } from '../../hooks/use-toast';
 import { ProgressShareButton } from '../UserProgress/ProgressShareButton';
+import { useState } from 'react';
 
 type ResourceProgressType = {
   resourceType: 'roadmap' | 'best-practice';
diff --git a/src/components/AddTeamRoadmap.tsx b/src/components/AddTeamRoadmap.tsx
index d3492931b..ab8b6379c 100644
--- a/src/components/AddTeamRoadmap.tsx
+++ b/src/components/AddTeamRoadmap.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'preact/hooks';
+import { useRef, useState } from 'react';
 import { useOutsideClick } from '../hooks/use-outside-click';
 import { OptionType, SearchSelector } from './SearchSelector';
 import type { PageType } from './CommandMenu/CommandMenu';
@@ -65,15 +65,15 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
   )?.title;
 
   return (
-    <div class="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
-      <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+    <div className="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+      <div className="relative h-full w-full max-w-md p-4 md:h-auto">
         <div
           ref={popupBodyEl}
-          class="popup-body relative rounded-lg bg-white p-4 shadow"
+          className="popup-body relative rounded-lg bg-white p-4 shadow"
         >
           {isLoading && (
             <>
-              <div class="flex items-center justify-center gap-2 py-8">
+              <div className="flex items-center justify-center gap-2 py-8">
                 <Spinner isDualRing={false} className="h-4 w-4" />
                 <h2 className="font-medium">Loading...</h2>
               </div>
@@ -82,7 +82,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
           {!isLoading && !error && selectedRoadmap && (
             <div className={'text-center'}>
               <CheckIcon additionalClasses="h-10 w-10 mx-auto opacity-20 mb-3 mt-4" />
-              <h3 class="mb-1.5 text-2xl font-medium">
+              <h3 className="mb-1.5 text-2xl font-medium">
                 {selectedRoadmapTitle} Added
               </h3>
               <p className="mb-4 text-sm leading-none text-gray-400">
@@ -95,11 +95,11 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                 to make changes to the roadmap.
               </p>
 
-              <div class="flex items-center gap-2">
+              <div className="flex items-center gap-2">
                 <button
                   onClick={onClose}
                   type="button"
-                  class="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
+                  className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
                 >
                   Done
                 </button>
@@ -110,7 +110,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                     setIsLoading(false);
                   }}
                   type="button"
-                  class="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white"
+                  className="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white"
                 >
                   + Add More
                 </button>
@@ -119,14 +119,14 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
           )}
           {!isLoading && error && (
             <>
-              <h3 class="mb-1.5 text-2xl font-medium">Error</h3>
+              <h3 className="mb-1.5 text-2xl font-medium">Error</h3>
               <p className="mb-3 text-sm leading-none text-red-400">{error}</p>
 
-              <div class="flex items-center gap-2">
+              <div className="flex items-center gap-2">
                 <button
                   onClick={onClose}
                   type="button"
-                  class="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
+                  className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
                 >
                   Cancel
                 </button>
@@ -135,7 +135,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
           )}
           {!isLoading && !error && !selectedRoadmap && (
             <>
-              <h3 class="mb-1.5 text-2xl font-medium">Add Roadmap</h3>
+              <h3 className="mb-1.5 text-2xl font-medium">Add Roadmap</h3>
               <p className="mb-3 text-sm leading-none text-gray-400">
                 Search and add a roadmap
               </p>
@@ -156,11 +156,11 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                 placeholder={'Search for roadmap'}
               />
 
-              <div class="flex items-center gap-2">
+              <div className="flex items-center gap-2">
                 <button
                   onClick={onClose}
                   type="button"
-                  class="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
+                  className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
                 >
                   Cancel
                 </button>
diff --git a/src/components/AuthenticationFlow/EmailLoginForm.tsx b/src/components/AuthenticationFlow/EmailLoginForm.tsx
index 6a626b792..7c9c31503 100644
--- a/src/components/AuthenticationFlow/EmailLoginForm.tsx
+++ b/src/components/AuthenticationFlow/EmailLoginForm.tsx
@@ -1,17 +1,17 @@
 import Cookies from 'js-cookie';
-import type { FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
+import type { FormEvent } from 'react';
+import { useState } from 'react';
 import { httpPost } from '../../lib/http';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 
-const EmailLoginForm: FunctionComponent<{}> = () => {
+const EmailLoginForm = () => {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
   const [error, setError] = useState('');
 
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const handleFormSubmit = async (e: Event) => {
+  const handleFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError('');
@@ -77,7 +77,7 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
         onInput={(e) => setPassword(String((e.target as any).value))}
       />
 
-      <p class="mb-3 mt-2 text-sm text-gray-500">
+      <p className="mb-3 mt-2 text-sm text-gray-500">
         <a
           href="/forgot-password"
           className="text-blue-800 hover:text-blue-600"
diff --git a/src/components/AuthenticationFlow/EmailSignupForm.tsx b/src/components/AuthenticationFlow/EmailSignupForm.tsx
index 5bdc3a637..31bb92163 100644
--- a/src/components/AuthenticationFlow/EmailSignupForm.tsx
+++ b/src/components/AuthenticationFlow/EmailSignupForm.tsx
@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
+import { useState } from 'react';
 import { httpPost } from '../../lib/http';
 
 const EmailSignupForm: FunctionComponent = () => {
diff --git a/src/components/AuthenticationFlow/ForgotPasswordForm.tsx b/src/components/AuthenticationFlow/ForgotPasswordForm.tsx
index 9ed5e4a37..304df6d1f 100644
--- a/src/components/AuthenticationFlow/ForgotPasswordForm.tsx
+++ b/src/components/AuthenticationFlow/ForgotPasswordForm.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks';
+import { useState } from 'react';
 import { httpPost } from '../../lib/http';
 
 export function ForgotPasswordForm() {
@@ -29,7 +29,7 @@ export function ForgotPasswordForm() {
   };
 
   return (
-    <form onSubmit={handleSubmit} class="w-full">
+    <form onSubmit={handleSubmit} className="w-full">
       <input
         type="email"
         name="email"
diff --git a/src/components/AuthenticationFlow/GitHubButton.tsx b/src/components/AuthenticationFlow/GitHubButton.tsx
index aace17c1f..e2318bbd0 100644
--- a/src/components/AuthenticationFlow/GitHubButton.tsx
+++ b/src/components/AuthenticationFlow/GitHubButton.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 
 import GitHubIcon from '../../icons/github.svg';
 import SpinnerIcon from '../../icons/spinner.svg';
@@ -106,14 +106,14 @@ export function GitHubButton(props: GitHubButtonProps) {
   return (
     <>
       <button
-        class="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
+        className="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
         disabled={isLoading}
         onClick={handleClick}
       >
         <img
-          src={icon}
+          src={icon as any}
           alt="GitHub"
-          class={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
+          className={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
         />
         Continue with GitHub
       </button>
diff --git a/src/components/AuthenticationFlow/GoogleButton.tsx b/src/components/AuthenticationFlow/GoogleButton.tsx
index da45176a1..d164875a1 100644
--- a/src/components/AuthenticationFlow/GoogleButton.tsx
+++ b/src/components/AuthenticationFlow/GoogleButton.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import GoogleIcon from '../../icons/google.svg';
 import SpinnerIcon from '../../icons/spinner.svg';
@@ -106,14 +106,14 @@ export function GoogleButton(props: GoogleButtonProps) {
   return (
     <>
       <button
-        class="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
+        className="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
         disabled={isLoading}
         onClick={handleClick}
       >
         <img
-          src={icon}
+          src={icon as any}
           alt="Google"
-          class={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
+          className={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
         />
         Continue with Google
       </button>
diff --git a/src/components/AuthenticationFlow/LinkedInButton.tsx b/src/components/AuthenticationFlow/LinkedInButton.tsx
index 152b6a672..35e70233e 100644
--- a/src/components/AuthenticationFlow/LinkedInButton.tsx
+++ b/src/components/AuthenticationFlow/LinkedInButton.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import LinkedIn from '../../icons/linkedin.svg';
 import SpinnerIcon from '../../icons/spinner.svg';
@@ -106,14 +106,14 @@ export function LinkedInButton(props: LinkedInButtonProps) {
   return (
     <>
       <button
-        class="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
+        className="inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60"
         disabled={isLoading}
         onClick={handleClick}
       >
         <img
-          src={icon}
+          src={icon as any}
           alt="Google"
-          class={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
+          className={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
         />
         Continue with LinkedIn
       </button>
diff --git a/src/components/AuthenticationFlow/ResetPasswordForm.tsx b/src/components/AuthenticationFlow/ResetPasswordForm.tsx
index a4f5699ad..b13aaa0eb 100644
--- a/src/components/AuthenticationFlow/ResetPasswordForm.tsx
+++ b/src/components/AuthenticationFlow/ResetPasswordForm.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import { httpPost } from '../../lib/http';
 import Cookies from 'js-cookie';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
diff --git a/src/components/AuthenticationFlow/TriggerVerifyAccount.tsx b/src/components/AuthenticationFlow/TriggerVerifyAccount.tsx
index e2b926505..f6c115bd1 100644
--- a/src/components/AuthenticationFlow/TriggerVerifyAccount.tsx
+++ b/src/components/AuthenticationFlow/TriggerVerifyAccount.tsx
@@ -1,7 +1,7 @@
 import SpinnerIcon from '../../icons/spinner.svg';
 import ErrorIcon from '../../icons/error.svg';
 
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 import { httpPost } from '../../lib/http';
@@ -60,7 +60,7 @@ export function TriggerVerifyAccount() {
           <img
             alt={'Please wait.'}
             src={SpinnerIcon}
-            class={'mx-auto h-16 w-16 animate-spin'}
+            className={'mx-auto h-16 w-16 animate-spin'}
           />
         )}
         {error && (
@@ -75,7 +75,7 @@ export function TriggerVerifyAccount() {
         </h2>
         <div className="text-sm sm:text-base">
           {isLoading && <p>Please wait while we verify your account..</p>}
-          {error && <p class="text-red-700">{error}</p>}
+          {error && <p className="text-red-700">{error}</p>}
         </div>
       </div>
     </div>
diff --git a/src/components/AuthenticationFlow/VerificationEmailMessage.tsx b/src/components/AuthenticationFlow/VerificationEmailMessage.tsx
index e219d19e4..e77440e00 100644
--- a/src/components/AuthenticationFlow/VerificationEmailMessage.tsx
+++ b/src/components/AuthenticationFlow/VerificationEmailMessage.tsx
@@ -1,5 +1,5 @@
 import VerifyLetterIcon from '../../icons/verify-letter.svg';
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import { httpPost } from '../../lib/http';
 
 export function VerificationEmailMessage() {
@@ -39,13 +39,13 @@ export function VerificationEmailMessage() {
     <div className="mx-auto max-w-md text-center">
       <img
         alt="Verify Email"
-        src={VerifyLetterIcon}
-        class="mx-auto mb-4 h-20 w-40 sm:h-40"
+        src={VerifyLetterIcon as any}
+        className="mx-auto mb-4 h-20 w-40 sm:h-40"
       />
-      <h2 class="my-2 text-center text-xl font-semibold sm:my-5 sm:text-2xl">
+      <h2 className="my-2 text-center text-xl font-semibold sm:my-5 sm:text-2xl">
         Verify your email address
       </h2>
-      <div class="text-sm sm:text-base">
+      <div className="text-sm sm:text-base">
         <p>
           We have sent you an email at{' '}
           <span className="font-bold">{email}</span>. Please click the link to
@@ -53,7 +53,7 @@ export function VerificationEmailMessage() {
           soon!
         </p>
 
-        <hr class="my-4" />
+        <hr className="my-4" />
 
         {!isEmailResent && (
           <>
@@ -72,12 +72,12 @@ export function VerificationEmailMessage() {
               </p>
             )}
 
-            {error && <p class="text-red-700">{error}</p>}
+            {error && <p className="text-red-700">{error}</p>}
           </>
         )}
 
         {isEmailResent && (
-          <p class="text-green-700">Verification email has been sent!</p>
+          <p className="text-green-700">Verification email has been sent!</p>
         )}
       </div>
     </div>
diff --git a/src/components/Befriend.tsx b/src/components/Befriend.tsx
index f963b881c..1a34e4a3b 100644
--- a/src/components/Befriend.tsx
+++ b/src/components/Befriend.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'preact/hooks';
-import { httpDelete, httpGet, httpPatch, httpPost } from '../lib/http';
+import { useEffect, useState } from 'react';
+import { httpDelete, httpGet, httpPost } from '../lib/http';
 import { pageProgressMessage } from '../stores/page';
 import { isLoggedIn } from '../lib/jwt';
 import { showLoginPopup } from '../lib/popup';
@@ -118,7 +118,7 @@ export function Befriend() {
         <ErrorIcon additionalClasses="mx-auto mb-4 mt-24 w-20 opacity-20" />
 
         <h2 className={'mb-1 text-2xl font-bold'}>Error</h2>
-        <p class="mb-4 text-base leading-6 text-gray-600">
+        <p className="mb-4 text-base leading-6 text-gray-600">
           {error || 'There was a problem, please try again.'}
         </p>
 
@@ -149,13 +149,13 @@ export function Befriend() {
       />
 
       <h2 className={'mb-1 text-3xl font-bold'}>{user.name}</h2>
-      <p class="mb-6 text-base leading-6 text-gray-600">
+      <p className="mb-6 text-base leading-6 text-gray-600">
         After you add {user.name} as a friend, you will be able to view each
         other's skills and progress.
       </p>
 
-      <div class="mx-auto w-full duration-500 sm:max-w-md">
-        <div class="flex w-full flex-col items-center gap-2">
+      <div className="mx-auto w-full duration-500 sm:max-w-md">
+        <div className="flex w-full flex-col items-center gap-2">
           {user.status === 'none' && (
             <button
               disabled={isMe}
@@ -169,7 +169,7 @@ export function Befriend() {
                 });
               }}
               type="button"
-              class="w-full flex-grow cursor-pointer rounded-lg bg-black px-3 py-2 text-center text-white disabled:cursor-not-allowed disabled:opacity-40"
+              className="w-full flex-grow cursor-pointer rounded-lg bg-black px-3 py-2 text-center text-white disabled:cursor-not-allowed disabled:opacity-40"
             >
               {isMe ? "You can't add yourself" : 'Add Friend'}
             </button>
@@ -177,7 +177,7 @@ export function Befriend() {
 
           {user.status === 'sent' && (
             <>
-              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
+              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
                 <CheckIcon additionalClasses="mr-2 h-4 w-4" />
                 Request Sent
               </span>
@@ -188,7 +188,7 @@ export function Befriend() {
                     setIsConfirming(true);
                   }}
                   type="button"
-                  class="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
+                  className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
                 >
                   <DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
                   Withdraw Request
@@ -196,7 +196,7 @@ export function Befriend() {
               )}
 
               {isConfirming && (
-                <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                   Are you sure?{' '}
                   <button
                     className="ml-2 text-red-700 underline"
@@ -225,7 +225,7 @@ export function Befriend() {
 
           {user.status === 'accepted' && (
             <>
-              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
+              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
                 <AddedUserIcon additionalClasses="mr-2 h-5 w-5" />
                 You are friends
               </span>
@@ -236,7 +236,7 @@ export function Befriend() {
                     setIsConfirming(true);
                   }}
                   type="button"
-                  class="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
+                  className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
                 >
                   <DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
                   Remove Friend
@@ -244,7 +244,7 @@ export function Befriend() {
               )}
 
               {isConfirming && (
-                <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                   Are you sure?{' '}
                   <button
                     className="ml-2 text-red-700 underline"
@@ -271,12 +271,12 @@ export function Befriend() {
 
           {user.status === 'rejected' && (
             <>
-              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-gray-300 px-3 py-2 text-center text-black">
+              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-gray-300 px-3 py-2 text-center text-black">
                 <DeleteUserIcon additionalClasses="mr-2 h-4 w-4" />
                 Request Rejected
               </span>
 
-              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                 Changed your mind?{' '}
                 <button
                   className="ml-2 text-red-700 underline"
@@ -296,7 +296,7 @@ export function Befriend() {
 
           {user.status === 'got_rejected' && (
             <>
-              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-500 px-3 py-2 text-center text-red-500">
+              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-500 px-3 py-2 text-center text-red-500">
                 <StopIcon additionalClasses="mr-2 h-4 w-4" />
                 Request Rejected
               </span>
@@ -311,7 +311,7 @@ export function Befriend() {
                     pageProgressMessage.set('');
                   });
                 }}
-                class="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border  border-gray-800 bg-gray-800 px-3 py-2 text-center text-white hover:bg-black"
+                className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border  border-gray-800 bg-gray-800 px-3 py-2 text-center text-white hover:bg-black"
               >
                 <CheckIcon additionalClasses="mr-2 h-4 w-4" />
                 Accept Request
@@ -323,7 +323,7 @@ export function Befriend() {
                     setIsConfirming(true);
                   }}
                   type="button"
-                  class="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-white px-3 py-2 text-center text-red-600 hover:bg-red-100"
+                  className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-white px-3 py-2 text-center text-red-600 hover:bg-red-100"
                 >
                   <DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
                   Reject Request
@@ -331,7 +331,7 @@ export function Befriend() {
               )}
 
               {isConfirming && (
-                <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                   Are you sure?{' '}
                   <button
                     className="ml-2 text-red-700 underline"
diff --git a/src/components/CommandMenu/CommandMenu.tsx b/src/components/CommandMenu/CommandMenu.tsx
index f380ad8bf..1fee75b18 100644
--- a/src/components/CommandMenu/CommandMenu.tsx
+++ b/src/components/CommandMenu/CommandMenu.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { useKeydown } from '../../hooks/use-keydown';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import BestPracticesIcon from '../../icons/best-practices.svg';
@@ -158,12 +158,12 @@ export function CommandMenu() {
         <div className="relative rounded-lg bg-white shadow" ref={modalRef}>
           <input
             ref={inputRef}
-            autofocus={true}
+            autoFocus={true}
             type="text"
             value={searchedText}
             className="w-full rounded-t-md border-b p-4 text-sm focus:bg-gray-50 focus:outline-none"
             placeholder="Search roadmaps, guides or pages .."
-            autocomplete="off"
+            autoComplete="off"
             onInput={(e) => {
               const value = (e.target as HTMLInputElement).value.trim();
               setSearchedText(value);
@@ -191,39 +191,43 @@ export function CommandMenu() {
             }}
           />
 
-          <div class="px-2 py-2">
+          <div className="px-2 py-2">
             <div className="flex flex-col">
               {searchResults.length === 0 && (
-                <div class="p-5 text-center text-sm text-gray-400">
+                <div className="p-5 text-center text-sm text-gray-400">
                   No results found
                 </div>
               )}
 
-              {searchResults.map((page, counter) => {
+              {searchResults.map((page: PageType, counter: number) => {
                 const prevPage = searchResults[counter - 1];
                 const groupChanged = prevPage && prevPage.group !== page.group;
 
                 return (
-                  <>
+                  <Fragment key={page.id}>
                     {groupChanged && (
-                      <div class="border-b border-gray-100"></div>
+                      <div className="border-b border-gray-100"></div>
                     )}
                     <a
-                      class={`flex w-full items-center rounded p-2 text-sm ${
+                      className={`flex w-full items-center rounded p-2 text-sm ${
                         counter === activeCounter ? 'bg-gray-100' : ''
                       }`}
                       onMouseOver={() => setActiveCounter(counter)}
                       href={page.url}
                     >
                       {!page.icon && (
-                        <span class="mr-2 text-gray-400">{page.group}</span>
+                        <span className="mr-2 text-gray-400">{page.group}</span>
                       )}
                       {page.icon && (
-                        <img alt={page.title} src={page.icon} class="mr-2 h-4 w-4" />
+                        <img
+                          alt={page.title}
+                          src={page.icon as any}
+                          className="mr-2 h-4 w-4"
+                        />
                       )}
                       {page.title}
                     </a>
-                  </>
+                  </Fragment>
                 );
               })}
             </div>
diff --git a/src/components/CreateTeam/CreateTeamForm.tsx b/src/components/CreateTeam/CreateTeamForm.tsx
index a00b1e152..0f82fed18 100644
--- a/src/components/CreateTeam/CreateTeamForm.tsx
+++ b/src/components/CreateTeam/CreateTeamForm.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import { Stepper } from '../Stepper';
 import { Step0, ValidTeamType } from './Step0';
 import { Step1, ValidTeamSize } from './Step1';
diff --git a/src/components/CreateTeam/RoadmapSelector.tsx b/src/components/CreateTeam/RoadmapSelector.tsx
index 7dc6d630a..19824b712 100644
--- a/src/components/CreateTeam/RoadmapSelector.tsx
+++ b/src/components/CreateTeam/RoadmapSelector.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import { httpGet, httpPut } from '../../lib/http';
 import type { PageType } from '../CommandMenu/CommandMenu';
 import ChevronDownIcon from '../../icons/chevron-down.svg';
diff --git a/src/components/CreateTeam/RoleDropdown.tsx b/src/components/CreateTeam/RoleDropdown.tsx
index 76174ddca..8d93da77c 100644
--- a/src/components/CreateTeam/RoleDropdown.tsx
+++ b/src/components/CreateTeam/RoleDropdown.tsx
@@ -1,5 +1,5 @@
 import { ChevronDownIcon } from '../ReactIcons/ChevronDownIcon';
-import { useRef, useState } from 'preact/hooks';
+import { useRef, useState } from 'react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 
 const allowedRoles = [
diff --git a/src/components/CreateTeam/SelectRoadmapModal.tsx b/src/components/CreateTeam/SelectRoadmapModal.tsx
index cf4a33856..bb8dae1ac 100644
--- a/src/components/CreateTeam/SelectRoadmapModal.tsx
+++ b/src/components/CreateTeam/SelectRoadmapModal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'react';
 import { useKeydown } from '../../hooks/use-keydown';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import type { PageType } from '../CommandMenu/CommandMenu';
@@ -68,11 +68,11 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
   );
 
   return (
-    <div class="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
-      <div class="relative mx-auto h-full w-full max-w-2xl p-4 md:h-auto">
+    <div className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+      <div className="relative mx-auto h-full w-full max-w-2xl p-4 md:h-auto">
         <div
           ref={popupBodyEl}
-          class="popup-body relative mt-4 overflow-hidden rounded-lg bg-white shadow"
+          className="popup-body relative mt-4 overflow-hidden rounded-lg bg-white shadow"
         >
           <button
             type="button"
@@ -80,7 +80,7 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
             onClick={onClose}
           >
             <img alt={'close'} src={CloseIcon} className="h-4 w-4" />
-            <span class="sr-only">Close modal</span>
+            <span className="sr-only">Close modal</span>
           </button>
           <input
             ref={searchInputEl}
diff --git a/src/components/CreateTeam/Step0.tsx b/src/components/CreateTeam/Step0.tsx
index c583de641..92ee43127 100644
--- a/src/components/CreateTeam/Step0.tsx
+++ b/src/components/CreateTeam/Step0.tsx
@@ -2,7 +2,7 @@ import BuildingIcon from '../../icons/building.svg';
 import UsersIcon from '../../icons/users.svg';
 import type { TeamDocument } from './CreateTeamForm';
 import { httpPut } from '../../lib/http';
-import { useState } from 'preact/hooks';
+import { useState } from 'react';
 import { NextButton } from './NextButton';
 
 export const validTeamTypes = [
diff --git a/src/components/CreateTeam/Step1.tsx b/src/components/CreateTeam/Step1.tsx
index 8eaaa53a9..4149696dd 100644
--- a/src/components/CreateTeam/Step1.tsx
+++ b/src/components/CreateTeam/Step1.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'react';
 import { AppError, httpPost, httpPut } from '../../lib/http';
 import type { ValidTeamType } from './Step0';
 import type { TeamDocument } from './CreateTeamForm';
@@ -133,7 +133,7 @@ export function Step1(props: Step1Props) {
           type="text"
           name="name"
           ref={nameRef as any}
-          autofocus={true}
+          autoFocus={true}
           id="name"
           className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
           placeholder="Roadmap Inc."
diff --git a/src/components/CreateTeam/Step3.tsx b/src/components/CreateTeam/Step3.tsx
index 39e1e6b5b..7af2044de 100644
--- a/src/components/CreateTeam/Step3.tsx
+++ b/src/components/CreateTeam/Step3.tsx
@@ -2,7 +2,7 @@ import type { TeamDocument } from './CreateTeamForm';
 import { NextButton } from './NextButton';
 import { TrashIcon } from '../ReactIcons/TrashIcon';
 import { AllowedRoles, RoleDropdown } from './RoleDropdown';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'react';
 import { httpPost } from '../../lib/http';
 
 type Step3Props = {
@@ -75,9 +75,9 @@ export function Step3(props: Step3Props) {
 
   return (
     <form className="mt-4 flex w-full flex-col" onSubmit={onSubmit}>
-      <div class="mb-1 mt-2">
-        <h2 class="mb-1 md:mb-2 text-lg md:text-2xl font-bold">Invite your Team</h2>
-        <p class="text-sm text-gray-700">
+      <div className="mb-1 mt-2">
+        <h2 className="mb-1 md:mb-2 text-lg md:text-2xl font-bold">Invite your Team</h2>
+        <p className="text-sm text-gray-700">
           Use the form below to invite your team members to your team. You can
           also invite them later.
         </p>
@@ -88,7 +88,7 @@ export function Step3(props: Step3Props) {
             <div className="flex flex-col sm:flex-row gap-2" key={user.id}>
               <input
                 ref={userCounter === users.length - 1 ? emailInputRef : null}
-                autofocus={true}
+                autoFocus={true}
                 type="email"
                 name="email"
                 required
diff --git a/src/components/CreateTeam/Step4.tsx b/src/components/CreateTeam/Step4.tsx
index 97e68de04..34eabe32e 100644
--- a/src/components/CreateTeam/Step4.tsx
+++ b/src/components/CreateTeam/Step4.tsx
@@ -8,15 +8,15 @@ type Step4Props = {
 export function Step4({ team }: Step4Props) {
   return (
     <div className="mt-4 flex flex-col rounded-xl border py-12 text-center">
-      <div class="mb-1 flex flex-col items-center">
+      <div className="mb-1 flex flex-col items-center">
         <CheckIcon additionalClasses={'h-14 w-14 mb-4 opacity-100'} />
-        <h2 class="mb-2 text-2xl font-bold">Team Created</h2>
-        <p class="text-sm text-gray-700">
+        <h2 className="mb-2 text-2xl font-bold">Team Created</h2>
+        <p className="text-sm text-gray-700">
           Your team has been created. Happy learning!
         </p>
         <a
           href={`/team/progress?t=${team._id}`}
-          class="mt-4 rounded-md bg-black px-5 py-1.5 text-sm text-white"
+          className="mt-4 rounded-md bg-black px-5 py-1.5 text-sm text-white"
         >
           View Team
         </a>
diff --git a/src/components/CreateTeam/UpdateTeamResourceModal.tsx b/src/components/CreateTeam/UpdateTeamResourceModal.tsx
index 40fdcd0bf..607f3d3a6 100644
--- a/src/components/CreateTeam/UpdateTeamResourceModal.tsx
+++ b/src/components/CreateTeam/UpdateTeamResourceModal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'react';
 import { wireframeJSONToSVG } from 'roadmap-renderer';
 import { Spinner } from '../ReactIcons/Spinner';
 import { httpGet, httpPut } from '../../lib/http';
@@ -8,7 +8,7 @@ import { useOutsideClick } from '../../hooks/use-outside-click';
 import { useKeydown } from '../../hooks/use-keydown';
 import type { TeamResourceConfig } from './RoadmapSelector';
 import { useToast } from '../../hooks/use-toast';
-import { useStore } from '@nanostores/preact';
+import { useStore } from '@nanostores/react';
 import { $currentTeam } from '../../stores/team';
 
 export type ProgressMapProps = {
@@ -148,8 +148,8 @@ export function UpdateTeamResourceModal(props: ProgressMapProps) {
   }, []);
 
   return (
-    <div class="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
-      <div class="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto">
+    <div className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+      <div className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto">
         <div
           id={
             currentTeam?.type === 'company'
@@ -157,7 +157,7 @@ export function UpdateTeamResourceModal(props: ProgressMapProps) {
               : 'original-roadmap'
           }
           ref={popupBodyEl}
-          class="popup-body relative rounded-lg bg-white shadow"
+          className="popup-body relative rounded-lg bg-white shadow"
         >
           <div
             className={
@@ -201,7 +201,7 @@ export function UpdateTeamResourceModal(props: ProgressMapProps) {
           <div id="resource-svg-wrap" ref={containerEl} className="px-4"></div>
 
           {isLoading && (
-            <div class="flex w-full justify-center">
+            <div className="flex w-full justify-center">
               <Spinner
                 isDualRing={false}
                 className="mb-4 mt-2 h-4 w-4 animate-spin fill-blue-600 text-gray-200 sm:h-8 sm:w-8"
diff --git a/src/components/DeleteAccount/DeleteAccountForm.tsx b/src/components/DeleteAccount/DeleteAccountForm.tsx
index 3cf73aa6b..5ada83436 100644
--- a/src/components/DeleteAccount/DeleteAccountForm.tsx
+++ b/src/components/DeleteAccount/DeleteAccountForm.tsx
@@ -1,4 +1,4 @@
-import {useEffect, useState} from 'preact/hooks';
+import {useEffect, useState} from 'react';
 import { httpDelete } from '../../lib/http';
 import { logout } from '../Navigation/navigation';
 
diff --git a/src/components/DeleteAccount/DeleteAccountPopup.astro b/src/components/DeleteAccount/DeleteAccountPopup.astro
index 06279310b..004896cac 100644
--- a/src/components/DeleteAccount/DeleteAccountPopup.astro
+++ b/src/components/DeleteAccount/DeleteAccountPopup.astro
@@ -12,6 +12,6 @@ import { DeleteAccountForm } from './DeleteAccountForm';
 
     <p class="text-black font-medium -mb-2 mt-3 text-base">Please type "delete" to confirm.</p>
 
-    <DeleteAccountForm client:only />
+    <DeleteAccountForm client:only="react" />
   </div>
 </Popup>
diff --git a/src/components/DeleteTeamPopup.tsx b/src/components/DeleteTeamPopup.tsx
index 893dd2ca3..1eb421897 100644
--- a/src/components/DeleteTeamPopup.tsx
+++ b/src/components/DeleteTeamPopup.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'react';
 import { httpDelete } from '../lib/http';
 import type { TeamDocument } from './CreateTeam/CreateTeamForm';
 import { useTeamId } from '../hooks/use-team-id';
@@ -69,18 +69,18 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
 
   return (
     <>
-      <div class="fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
-        <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+      <div className="fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+        <div className="relative h-full w-full max-w-md p-4 md:h-auto">
           <div
             ref={popupBodyEl}
-            class="popup-body relative rounded-lg bg-white p-4 shadow"
+            className="popup-body relative rounded-lg bg-white p-4 shadow"
           >
-            <h2 class="text-2xl font-semibold text-black">Delete Team</h2>
+            <h2 className="text-2xl font-semibold text-black">Delete Team</h2>
             <p className="text-gray-500">
               This will permanently delete your team and all associated data.
             </p>
 
-            <p class="-mb-2 mt-3 text-base font-medium text-black">
+            <p className="-mb-2 mt-3 text-base font-medium text-black">
               Please type "delete" to confirm.
             </p>
             <form onSubmit={handleSubmit}>
diff --git a/src/components/FeaturedItems/FavoriteIcon.tsx b/src/components/FeaturedItems/FavoriteIcon.tsx
index 1e7d72a79..69e134afd 100644
--- a/src/components/FeaturedItems/FavoriteIcon.tsx
+++ b/src/components/FeaturedItems/FavoriteIcon.tsx
@@ -16,8 +16,8 @@ export function FavoriteIcon(props: FavoriteIconProps) {
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M5.93682 0.5H2.06282C1.63546 0.500094 1.22423 0.663195 0.912987 0.956045C0.601741 1.2489 0.413919 1.64944 0.387822 2.076L0.00182198 8.461C-0.012178 8.6905 0.0548218 8.9185 0.191822 9.104L0.242322 9.1665C0.575322 9.5485 1.15132 9.6165 1.56582 9.31L3.99982 7.5115L6.43382 9.31C6.58413 9.42115 6.76305 9.48708 6.94954 9.50006C7.13603 9.51303 7.32235 9.4725 7.4866 9.38323C7.65085 9.29397 7.78621 9.15967 7.87677 8.99613C7.96733 8.83258 8.00932 8.64659 7.99782 8.46L7.61232 2.0765C7.58622 1.64981 7.39835 1.24914 7.08701 0.956192C6.77567 0.663248 6.36431 0.500094 5.93682 0.5ZM5.93682 1.25C6.42732 1.25 6.83382 1.632 6.86382 2.122L7.24932 8.506C7.25216 8.55018 7.24229 8.59425 7.22089 8.63301C7.19949 8.67176 7.16745 8.70359 7.12854 8.72472C7.08964 8.74585 7.0455 8.75542 7.00134 8.75228C6.95718 8.74914 6.91484 8.73343 6.87932 8.707L4.27582 6.783C4.19591 6.72397 4.09917 6.69211 3.99982 6.69211C3.90047 6.69211 3.80373 6.72397 3.72382 6.783L1.11982 8.707C1.0843 8.73343 1.04196 8.74914 0.9978 8.75228C0.953639 8.75542 0.909502 8.74585 0.8706 8.72472C0.831697 8.70359 0.799653 8.67176 0.778252 8.63301C0.756851 8.59425 0.746986 8.55018 0.749822 8.506L1.13632 2.122C1.16632 1.632 1.57232 1.25 2.06282 1.25H5.93682Z"
           fill="currentColor"
         />
@@ -35,8 +35,8 @@ export function FavoriteIcon(props: FavoriteIconProps) {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M5.93682 0.5H2.06282C1.63546 0.500094 1.22423 0.663195 0.912987 0.956045C0.601741 1.2489 0.413919 1.64944 0.387822 2.076L0.00182198 8.461C-0.012178 8.6905 0.0548218 8.9185 0.191822 9.104L0.242322 9.1665C0.575322 9.5485 1.15132 9.6165 1.56582 9.31L3.99982 7.5115L6.43382 9.31C6.58413 9.42115 6.76305 9.48708 6.94954 9.50006C7.13603 9.51303 7.32235 9.4725 7.4866 9.38323C7.65085 9.29397 7.78621 9.15967 7.87677 8.99613C7.96733 8.83258 8.00932 8.64659 7.99782 8.46L7.61232 2.0765C7.58622 1.64981 7.39835 1.24914 7.08701 0.956192C6.77567 0.663248 6.36431 0.500094 5.93682 0.5Z"
         fill="currentColor"
       />
diff --git a/src/components/FeaturedItems/FeaturedItem.astro b/src/components/FeaturedItems/FeaturedItem.astro
index 3389e8556..d42d54581 100644
--- a/src/components/FeaturedItems/FeaturedItem.astro
+++ b/src/components/FeaturedItems/FeaturedItem.astro
@@ -29,7 +29,7 @@ const { isUpcoming = false, isNew = false, text, url } = Astro.props;
   <MarkFavorite
     resourceId={url.split('/').pop()!}
     resourceType={url.includes('best-practices') ? 'best-practice' : 'roadmap'}
-    client:load
+    client:only="react"
   />
 
   {
diff --git a/src/components/FeaturedItems/MarkFavorite.tsx b/src/components/FeaturedItems/MarkFavorite.tsx
index d0b98d74c..44e1cd3cc 100644
--- a/src/components/FeaturedItems/MarkFavorite.tsx
+++ b/src/components/FeaturedItems/MarkFavorite.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
+import type { MouseEvent } from "react";
 import { httpPatch } from '../../lib/http';
 import type { ResourceType } from '../../lib/resource-progress';
 import { isLoggedIn } from '../../lib/jwt';
@@ -20,15 +21,16 @@ export function MarkFavorite({
   favorite,
   className,
 }: MarkFavoriteType) {
+  const isAuthenticated = isLoggedIn();
   const localStorageKey = `${resourceType}-${resourceId}-favorite`;
 
   const toast = useToast();
   const [isLoading, setIsLoading] = useState(false);
   const [isFavorite, setIsFavorite] = useState(
-    favorite ?? localStorage.getItem(localStorageKey) === '1'
+      isAuthenticated ? (favorite ?? localStorage.getItem(localStorageKey) === '1') : false
   );
 
-  async function toggleFavoriteHandler(e: Event) {
+  async function toggleFavoriteHandler(e: MouseEvent<HTMLButtonElement>) {
     e.preventDefault();
     if (!isLoggedIn()) {
       showLoginPopup();
diff --git a/src/components/Feedback/SubmitFeedbackPopup.tsx b/src/components/Feedback/SubmitFeedbackPopup.tsx
index 8cbb1d597..1e03576e6 100644
--- a/src/components/Feedback/SubmitFeedbackPopup.tsx
+++ b/src/components/Feedback/SubmitFeedbackPopup.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { FormEvent, useEffect, useRef, useState } from 'react';
 import { useToast } from '../../hooks/use-toast';
 import { useTeamId } from '../../hooks/use-team-id';
 import { useOutsideClick } from '../../hooks/use-outside-click';
@@ -13,7 +13,6 @@ type SubmitFeedbackPopupProps = {
 export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
   const { onClose } = props;
 
-  const toast = useToast();
   const popupBodyEl = useRef<HTMLDivElement>(null);
   const inputEl = useRef<HTMLTextAreaElement>(null);
 
@@ -35,7 +34,7 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
     inputEl.current?.focus();
   }, []);
 
-  const handleSubmit = async (e: Event) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError('');
@@ -65,25 +64,27 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
   };
 
   return (
-    <div class="fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
-      <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+    <div className="fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+      <div className="relative h-full w-full max-w-md p-4 md:h-auto">
         <div
           ref={popupBodyEl}
-          class="popup-body relative rounded-lg bg-white p-4 shadow"
+          className="popup-body relative rounded-lg bg-white p-4 shadow"
         >
           {!isSuccess && (
             <>
-              <h2 class="text-xl font-semibold mb-1 text-black">
+              <h2 className="mb-1 text-xl font-semibold text-black">
                 Enter your feedback
               </h2>
-              <p className={'text-sm text-gray-500'}>Help us improve your experience.</p>
+              <p className={'text-sm text-gray-500'}>
+                Help us improve your experience.
+              </p>
               <form onSubmit={handleSubmit}>
                 <div className="my-4">
                   <textarea
                     ref={inputEl}
                     name="submit-feedback"
                     id="submit-feedback"
-                    className="mt-2 block min-h-[150px] w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 resize-none"
+                    className="mt-2 block min-h-[150px] w-full resize-none rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400"
                     placeholder="Enter your feedback"
                     required
                     autoFocus
diff --git a/src/components/Friends/EmptyFriends.tsx b/src/components/Friends/EmptyFriends.tsx
index 9b6042755..52d54a633 100644
--- a/src/components/Friends/EmptyFriends.tsx
+++ b/src/components/Friends/EmptyFriends.tsx
@@ -11,19 +11,19 @@ export function EmptyFriends(props: EmptyFriendsProps) {
   const { isCopied, copyText } = useCopyText();
 
   return (
-    <div class="rounded-md">
-      <div class="mx-auto flex flex-col items-center p-7 text-center">
+    <div className="rounded-md">
+      <div className="mx-auto flex flex-col items-center p-7 text-center">
         <img
           alt="no friends"
-          src={UserPlusIcon}
-          class="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]"
+          src={UserPlusIcon as any}
+          className="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]"
         />
-        <h2 class="text-lg font-bold sm:text-xl">Invite your Friends</h2>
+        <h2 className="text-lg font-bold sm:text-xl">Invite your Friends</h2>
         <p className="mb-4 mt-1 max-w-[400px] text-sm leading-relaxed text-gray-500">
           Share the unique link below with your friends to track their skills and progress.
         </p>
 
-        <div class="flex w-full max-w-[352px] items-center justify-center gap-2 rounded-lg border-2 p-1 text-sm">
+        <div className="flex w-full max-w-[352px] items-center justify-center gap-2 rounded-lg border-2 p-1 text-sm">
           <input
             onClick={(e) => {
               e.currentTarget.select();
@@ -31,11 +31,11 @@ export function EmptyFriends(props: EmptyFriendsProps) {
             }}
             type="text"
             value={befriendUrl}
-            class="w-full border-none bg-transparent px-1.5 outline-none"
-            readonly
+            className="w-full border-none bg-transparent px-1.5 outline-none"
+            readOnly
           />
           <button
-            class={`flex items-center justify-center gap-1 rounded-md border-0 p-2 px-4 text-sm text-black ${
+            className={`flex items-center justify-center gap-1 rounded-md border-0 p-2 px-4 text-sm text-black ${
               isCopied
                 ? 'bg-green-300 hover:bg-green-300'
                 : 'bg-gray-200 hover:bg-gray-300'
@@ -44,7 +44,7 @@ export function EmptyFriends(props: EmptyFriendsProps) {
               copyText(befriendUrl);
             }}
           >
-            <img src={CopyIcon} className="h-4 w-4" alt="Invite Friends" />
+            <img src={CopyIcon as any} className="h-4 w-4" alt="Invite Friends" />
             {isCopied ? 'Copied' : 'Copy'}
           </button>
         </div>
diff --git a/src/components/Friends/FriendProgressItem.tsx b/src/components/Friends/FriendProgressItem.tsx
index c821f4e50..fb6cbade5 100644
--- a/src/components/Friends/FriendProgressItem.tsx
+++ b/src/components/Friends/FriendProgressItem.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks';
+import { useState } from 'react';
 import type { ListFriendsResponse } from './FriendsPage';
 import { DeleteUserIcon } from '../ReactIcons/DeleteUserIcon';
 import { pageProgressMessage } from '../../stores/page';
@@ -177,12 +177,12 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
             <div
               className={'flex w-full flex-grow items-center justify-center'}
             >
-              <span class=" flex flex-col items-center text-red-500">
+              <span className=" flex flex-col items-center text-red-500">
                 <DeleteUserIcon additionalClasses="mr-2 h-8 w-8 mb-1" />
                 Request Rejected
               </span>
             </div>
-            <span class="flex cursor-default items-center justify-center border-t py-2 text-center text-sm">
+            <span className="flex cursor-default items-center justify-center border-t py-2 text-center text-sm">
               Changed your mind?{' '}
               <button
                 className="ml-2 font-medium text-red-700 underline underline-offset-2 hover:text-red-500"
@@ -205,12 +205,12 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
             <div
               className={'flex w-full flex-grow items-center justify-center'}
             >
-              <span class=" flex flex-col items-center text-sm text-red-500">
+              <span className=" flex flex-col items-center text-sm text-red-500">
                 <DeleteUserIcon additionalClasses="mr-2 h-8 w-8 mb-1" />
                 Request Rejected
               </span>
             </div>
-            <span class="flex cursor-default items-center justify-center border-t py-2.5 text-center text-sm">
+            <span className="flex cursor-default items-center justify-center border-t py-2.5 text-center text-sm">
               <button
                 className="ml-2 flex items-center font-medium text-red-700 underline underline-offset-2 hover:text-red-500"
                 onClick={() => {
@@ -233,7 +233,7 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
             <div
               className={'flex w-full flex-grow items-center justify-center'}
             >
-              <span class=" flex flex-col items-center text-green-500">
+              <span className=" flex flex-col items-center text-green-500">
                 <AddedUserIcon additionalClasses="mr-2 h-8 w-8 mb-1" />
                 Request Sent
               </span>
diff --git a/src/components/Friends/FriendsPage.tsx b/src/components/Friends/FriendsPage.tsx
index 7e25beb5e..86230003a 100644
--- a/src/components/Friends/FriendsPage.tsx
+++ b/src/components/Friends/FriendsPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import { pageProgressMessage } from '../../stores/page';
 import { useAuth } from '../../hooks/use-auth';
 import { AddUserIcon } from '../ReactIcons/AddUserIcon';
@@ -133,6 +133,7 @@ export function FriendsPage() {
 
             return (
               <button
+                key={grouping.value}
                 className={`relative flex items-center justify-center rounded-md border p-1 px-3 text-sm ${
                   selectedGrouping === grouping.value
                     ? ' border-gray-400 bg-gray-200 '
@@ -154,7 +155,7 @@ export function FriendsPage() {
           onClick={() => {
             setShowInviteFriendPopup(true);
           }}
-          class="flex items-center justify-center gap-1.5 rounded-md border border-gray-400 bg-gray-50 p-1 px-2 text-sm hover:border-gray-500 hover:bg-gray-100"
+          className="flex items-center justify-center gap-1.5 rounded-md border border-gray-400 bg-gray-50 p-1 px-2 text-sm hover:border-gray-500 hover:bg-gray-100"
         >
           <AddUserIcon additionalClasses="w-4 h-4" />
           Invite Friends
diff --git a/src/components/Friends/InviteFriendPopup.tsx b/src/components/Friends/InviteFriendPopup.tsx
index 908b57047..a3f6cc7fe 100644
--- a/src/components/Friends/InviteFriendPopup.tsx
+++ b/src/components/Friends/InviteFriendPopup.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'preact/hooks';
+import { useEffect, useRef } from 'react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import CopyIcon from '../../icons/copy.svg';
 import { useCopyText } from '../../hooks/use-copy-text';
@@ -22,13 +22,13 @@ export function InviteFriendPopup(props: InviteFriendPopupProps) {
   useOutsideClick(popupBodyRef, handleClosePopup);
 
   return (
-    <div class="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
-      <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+    <div className="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+      <div className="relative h-full w-full max-w-md p-4 md:h-auto">
         <div
           ref={popupBodyRef}
-          class="popup-body relative rounded-lg bg-white p-4 shadow"
+          className="popup-body relative rounded-lg bg-white p-4 shadow"
         >
-          <h3 class="mb-1.5 text-xl font-medium sm:text-2xl">Invite URL</h3>
+          <h3 className="mb-1.5 text-xl font-medium sm:text-2xl">Invite URL</h3>
           <p className="mb-3 hidden text-sm leading-none text-gray-400 sm:block">
             Share the link below with your friends to invite them.
           </p>
@@ -44,7 +44,7 @@ export function InviteFriendPopup(props: InviteFriendPopupProps) {
               }}
             />
             <button
-              class={`flex items-center justify-center gap-1 rounded-md border-0 px-3 py-2.5 text-sm text-black ${
+              className={`flex items-center justify-center gap-1 rounded-md border-0 px-3 py-2.5 text-sm text-black ${
                 isCopied
                   ? 'bg-green-300 hover:bg-green-300'
                   : 'bg-gray-200 hover:bg-gray-300'
diff --git a/src/components/Friends/SidebarFriendsCounter.tsx b/src/components/Friends/SidebarFriendsCounter.tsx
index 972844d08..c68597f86 100644
--- a/src/components/Friends/SidebarFriendsCounter.tsx
+++ b/src/components/Friends/SidebarFriendsCounter.tsx
@@ -1,6 +1,6 @@
 import { httpGet } from '../../lib/http';
 import type { TeamListResponse } from '../TeamDropdown/TeamDropdown';
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 
 type GetFriendCountsResponse = {
   sentCount: number;
@@ -31,15 +31,15 @@ export function SidebarFriendsCounter() {
   const pendingCount = friendCounts?.receivedCount || 0;
   if (!pendingCount) {
     return (
-      <span class="relative mr-1 flex items-center">
-        <span class="relative rounded-full bg-gray-200 p-1 text-xs" />
-        <span class="absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs" />
+      <span className="relative mr-1 flex items-center">
+        <span className="relative rounded-full bg-gray-200 p-1 text-xs" />
+        <span className="absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs" />
       </span>
     );
   }
 
   return (
-    <span class="flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs font-medium text-white">
+    <span className="flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs font-medium text-white">
       {pendingCount}
     </span>
   );
diff --git a/src/components/HeroSection/FavoriteRoadmaps.tsx b/src/components/HeroSection/FavoriteRoadmaps.tsx
index 02c3a6d77..097b6973c 100644
--- a/src/components/HeroSection/FavoriteRoadmaps.tsx
+++ b/src/components/HeroSection/FavoriteRoadmaps.tsx
@@ -1,7 +1,8 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import { EmptyProgress } from './EmptyProgress';
 import { httpGet } from '../../lib/http';
 import { ProgressList } from './ProgressList';
+import {isLoggedIn} from "../../lib/jwt";
 
 export type UserProgressResponse = {
   resourceId: string;
@@ -48,6 +49,11 @@ function renderProgress(progressList: UserProgressResponse) {
 }
 
 export function FavoriteRoadmaps() {
+  const isAuthenticated = isLoggedIn();
+  if (!isAuthenticated) {
+    return null;
+  }
+
   const [isPreparing, setIsPreparing] = useState(true);
   const [isLoading, setIsLoading] = useState(true);
   const [progress, setProgress] = useState<UserProgressResponse>([]);
@@ -109,7 +115,7 @@ export function FavoriteRoadmaps() {
 
   return (
     <div
-      class={`flex min-h-[192px] bg-gradient-to-b transition-opacity duration-500 sm:min-h-[280px] opacity-${containerOpacity} ${
+      className={`flex min-h-[192px] bg-gradient-to-b transition-opacity duration-500 sm:min-h-[280px] opacity-${containerOpacity} ${
         hasProgress && `border-t border-t-[#1e293c]`
       }`}
     >
diff --git a/src/components/HeroSection/HeroSection.astro b/src/components/HeroSection/HeroSection.astro
index 3b4edd465..2756d6e6a 100644
--- a/src/components/HeroSection/HeroSection.astro
+++ b/src/components/HeroSection/HeroSection.astro
@@ -24,5 +24,5 @@ import { FavoriteRoadmaps } from './FavoriteRoadmaps';
       their career.
     </p>
   </div>
-  <FavoriteRoadmaps client:authenticated />
+  <FavoriteRoadmaps client:only="react" />
 </div>
diff --git a/src/components/HeroSection/ProgressList.tsx b/src/components/HeroSection/ProgressList.tsx
index 3eec5cd8e..68a53c6ce 100644
--- a/src/components/HeroSection/ProgressList.tsx
+++ b/src/components/HeroSection/ProgressList.tsx
@@ -44,7 +44,7 @@ export function ProgressList(props: ProgressListProps) {
               <span className="relative z-20">{resource.resourceTitle}</span>
 
               <span
-                class="absolute bottom-0 left-0 top-0 z-10 bg-[#172a3a]"
+                className="absolute bottom-0 left-0 top-0 z-10 bg-[#172a3a]"
                 style={{ width: `${percentageDone}%` }}
               ></span>
               <MarkFavorite
diff --git a/src/components/Notification/NotificationPage.tsx b/src/components/Notification/NotificationPage.tsx
index 9e7678127..f98680f27 100644
--- a/src/components/Notification/NotificationPage.tsx
+++ b/src/components/Notification/NotificationPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import { httpGet, httpPatch, httpPost } from '../../lib/http';
 import { pageProgressMessage } from '../../stores/page';
 import type { TeamMemberDocument } from '../TeamMembers/TeamMembersPage';
@@ -62,7 +62,7 @@ export function NotificationPage() {
 
   return (
     <div>
-      <div class="mb-8 hidden md:block">
+      <div className="mb-8 hidden md:block">
         <h2 className="text-3xl font-bold sm:text-4xl">Notification</h2>
         <p className="mt-2 text-gray-400">Manage your notifications</p>
       </div>
diff --git a/src/components/PageProgress.tsx b/src/components/PageProgress.tsx
index 6fe1654e5..d98186971 100644
--- a/src/components/PageProgress.tsx
+++ b/src/components/PageProgress.tsx
@@ -1,7 +1,7 @@
-import { useStore } from '@nanostores/preact';
+import { useStore } from '@nanostores/react';
 import SpinnerIcon from '../icons/spinner.svg';
 import { pageProgressMessage } from '../stores/page';
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 
 export interface Props {
   initialMessage: string;
@@ -29,9 +29,9 @@ export function PageProgress(props: Props) {
     <div>
       {/* Tailwind based spinner for full page */}
       <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-white bg-opacity-75">
-        <div class="flex  items-center justify-center rounded-md border bg-white px-4 py-2 ">
+        <div className="flex  items-center justify-center rounded-md border bg-white px-4 py-2 ">
           <img
-            src={SpinnerIcon}
+            src={SpinnerIcon as any}
             alt="Loading"
             className="h-4 w-4 animate-spin fill-blue-600 text-gray-200 sm:h-4 sm:w-4"
           />
diff --git a/src/components/PageSponsor.tsx b/src/components/PageSponsor.tsx
index afc15418a..8ac7da8dd 100644
--- a/src/components/PageSponsor.tsx
+++ b/src/components/PageSponsor.tsx
@@ -1,8 +1,8 @@
-import { useStore } from '@nanostores/preact';
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import CloseIcon from '../icons/close.svg';
 import { httpGet } from '../lib/http';
 import { sponsorHidden } from '../stores/page';
+import { useStore } from '@nanostores/react';
 
 export type PageSponsorType = {
   company: string;
@@ -77,15 +77,14 @@ export function PageSponsor(props: PageSponsorProps) {
     return null;
   }
 
-  const { url, title, imageUrl, description, company, gaLabel, pageUrl } =
-    sponsor;
+  const { url, title, imageUrl, description, company, gaLabel } = sponsor;
 
   return (
     <a
       href={url}
       target="_blank"
       rel="noopener sponsored nofollow"
-      class="fixed bottom-[15px] right-[15px] z-50 flex max-w-[350px] bg-white shadow-lg outline-0 outline-transparent"
+      className="fixed bottom-[15px] right-[15px] z-50 flex max-w-[350px] bg-white shadow-lg outline-0 outline-transparent"
       onClick={() => {
         window.fireEvent({
           category: 'SponsorClick',
@@ -95,28 +94,26 @@ export function PageSponsor(props: PageSponsorProps) {
       }}
     >
       <span
-        class="absolute right-1.5 top-1.5 text-gray-300 hover:text-gray-800"
+        className="absolute right-1.5 top-1.5 text-gray-300 hover:text-gray-800"
         aria-label="Close"
         onClick={(e) => {
           e.preventDefault();
-          e.stopImmediatePropagation();
-
           sponsorHidden.set(true);
         }}
       >
-        <img alt="Close" class="h-4 w-4" src={CloseIcon} />
+        <img alt="Close" className="h-4 w-4" src={CloseIcon as any} />
       </span>
       <img
         src={imageUrl}
-        class="block h-[150px] w-[104.89px] object-contain lg:h-[169px] lg:w-[118.18px]"
+        className="block h-[150px] w-[104.89px] object-contain lg:h-[169px] lg:w-[118.18px]"
         alt="Sponsor Banner"
       />
-      <span class="flex flex-1 flex-col justify-between text-sm">
-        <span class="p-[10px]">
-          <span class="mb-0.5 block font-semibold">{title}</span>
-          <span class="block text-gray-500">{description}</span>
+      <span className="flex flex-1 flex-col justify-between text-sm">
+        <span className="p-[10px]">
+          <span className="mb-0.5 block font-semibold">{title}</span>
+          <span className="block text-gray-500">{description}</span>
         </span>
-        <span class="sponsor-footer">Partner Content</span>
+        <span className="sponsor-footer">Partner Content</span>
       </span>
     </a>
   );
diff --git a/src/components/ReactIcons/AddUserIcon.tsx b/src/components/ReactIcons/AddUserIcon.tsx
index cd8dab93a..eef326ba0 100644
--- a/src/components/ReactIcons/AddUserIcon.tsx
+++ b/src/components/ReactIcons/AddUserIcon.tsx
@@ -13,9 +13,9 @@ export function AddUserIcon(props: CheckIconProps) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className={`relative ${additionalClasses}`}
     >
       <path d="M14 19a6 6 0 0 0-12 0" />
diff --git a/src/components/ReactIcons/AddedUserIcon.tsx b/src/components/ReactIcons/AddedUserIcon.tsx
index d128d7eed..9f48c8d0d 100644
--- a/src/components/ReactIcons/AddedUserIcon.tsx
+++ b/src/components/ReactIcons/AddedUserIcon.tsx
@@ -14,9 +14,9 @@ export function AddedUserIcon(props: CheckIconProps) {
       fill="none"
       className={`relative ${additionalClasses}`}
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     >
       <path d="M14 19a6 6 0 0 0-12 0" />
       <circle cx="8" cy="9" r="4" />
diff --git a/src/components/ReactIcons/CheckIcon.tsx b/src/components/ReactIcons/CheckIcon.tsx
index 9aabc9a9a..76f1ef651 100644
--- a/src/components/ReactIcons/CheckIcon.tsx
+++ b/src/components/ReactIcons/CheckIcon.tsx
@@ -10,7 +10,7 @@ export function CheckIcon(props: CheckIconProps) {
       className={`relative ${additionalClasses}`}
       stroke="currentColor"
       fill="currentColor"
-      stroke-width="0"
+      strokeWidth="0"
       viewBox="0 0 16 16"
       xmlns="http://www.w3.org/2000/svg"
     >
diff --git a/src/components/ReactIcons/ChevronDownIcon.tsx b/src/components/ReactIcons/ChevronDownIcon.tsx
index bafa30e19..77f2abd4d 100644
--- a/src/components/ReactIcons/ChevronDownIcon.tsx
+++ b/src/components/ReactIcons/ChevronDownIcon.tsx
@@ -12,13 +12,13 @@ export function ChevronDownIcon(props: ChevronDownIconProps) {
       width="24"
       height="24"
       viewBox="0 0 24 24"
-      stroke-width="1.5"
+      strokeWidth="1.5"
       stroke="currentColor"
       className={className}
     >
       <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
         d="M19.5 8.25l-7.5 7.5-7.5-7.5"
       />
     </svg>
diff --git a/src/components/ReactIcons/CloseIcon.tsx b/src/components/ReactIcons/CloseIcon.tsx
index 0aa35759b..49852564b 100644
--- a/src/components/ReactIcons/CloseIcon.tsx
+++ b/src/components/ReactIcons/CloseIcon.tsx
@@ -12,7 +12,7 @@ export function CloseIcon(props: CloseIconProps) {
       width="24"
       height="24"
       viewBox="0 0 24 24"
-      stroke-width="1.5"
+      strokeWidth="1.5"
       stroke="currentColor"
       className={className}
     >
diff --git a/src/components/ReactIcons/DeleteUserIcon.tsx b/src/components/ReactIcons/DeleteUserIcon.tsx
index 9d8a0d721..56976cde3 100644
--- a/src/components/ReactIcons/DeleteUserIcon.tsx
+++ b/src/components/ReactIcons/DeleteUserIcon.tsx
@@ -14,9 +14,9 @@ export function DeleteUserIcon(props: CheckIconProps) {
       fill="none"
       className={`relative ${additionalClasses}`}
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     >
       <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
       <circle cx="9" cy="7" r="4" />
diff --git a/src/components/ReactIcons/ErrorIcon.tsx b/src/components/ReactIcons/ErrorIcon.tsx
index 0de7d21ba..05918bee4 100644
--- a/src/components/ReactIcons/ErrorIcon.tsx
+++ b/src/components/ReactIcons/ErrorIcon.tsx
@@ -18,23 +18,23 @@ export function ErrorIcon(props: ErrorIconProps) {
         d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
         fill="currentColor"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M15 9L9 15"
         stroke="white"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M9 9L15 15"
         stroke="white"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );
diff --git a/src/components/ReactIcons/InfoIcon.tsx b/src/components/ReactIcons/InfoIcon.tsx
index ec01ca019..ce4782289 100644
--- a/src/components/ReactIcons/InfoIcon.tsx
+++ b/src/components/ReactIcons/InfoIcon.tsx
@@ -18,23 +18,23 @@ export function InfoIcon(props: InfoIconProps) {
         d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
         fill="currentColor"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M12 16V12"
         stroke="white"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M12 8H12.01"
         stroke="white"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );
diff --git a/src/components/ReactIcons/MailIcon.tsx b/src/components/ReactIcons/MailIcon.tsx
index ef1c82f56..4708f4318 100644
--- a/src/components/ReactIcons/MailIcon.tsx
+++ b/src/components/ReactIcons/MailIcon.tsx
@@ -11,9 +11,9 @@ export function MailIcon(props: MailIconProps) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className={className}
     >
       <rect width="20" height="16" x="2" y="4" rx="2" />
diff --git a/src/components/ReactIcons/ShareIcon.tsx b/src/components/ReactIcons/ShareIcon.tsx
index 7cd372298..1a75f5316 100644
--- a/src/components/ReactIcons/ShareIcon.tsx
+++ b/src/components/ReactIcons/ShareIcon.tsx
@@ -11,9 +11,9 @@ export function ShareIcon(props: ShareIconProps) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       {...props}
     >
       <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
diff --git a/src/components/ReactIcons/Spinner.tsx b/src/components/ReactIcons/Spinner.tsx
index 6c74e2114..ec3310d25 100644
--- a/src/components/ReactIcons/Spinner.tsx
+++ b/src/components/ReactIcons/Spinner.tsx
@@ -11,7 +11,6 @@ export function Spinner({
   outerFill = '#404040',
   innerFill = '#94a3b8',
 }: SpinnerProps) {
-
   className += className?.includes('w-') ? '' : ' w-3.5 h-3.5';
 
   return (
@@ -23,15 +22,15 @@ export function Spinner({
     >
       {isDualRing && (
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M46.5 93C72.1812 93 93 72.1812 93 46.5C93 20.8188 72.1812 0 46.5 0C20.8188 0 0 20.8188 0 46.5C0 72.1812 20.8188 93 46.5 93ZM46.5 77C63.3447 77 77 63.3447 77 46.5C77 29.6553 63.3447 16 46.5 16C29.6553 16 16 29.6553 16 46.5C16 63.3447 29.6553 77 46.5 77Z"
-          style={`fill: ${outerFill};`}
+          style={{ fill: outerFill }}
         ></path>
       )}
       <path
         d="M84.9746 49.5667C89.3257 49.9135 93.2042 46.6479 92.81 42.3008C92.3588 37.3251 91.1071 32.437 89.0872 27.8298C86.0053 20.7998 81.2311 14.6422 75.1905 9.90623C69.15 5.17027 62.031 2.00329 54.4687 0.687889C49.5126 -0.174203 44.467 -0.223422 39.5274 0.525737C35.2118 1.18024 32.966 5.72596 34.3411 9.86865V9.86865C35.7161 14.0113 40.2118 16.1424 44.5681 15.8677C46.9635 15.7166 49.3773 15.8465 51.7599 16.2609C56.7515 17.1291 61.4505 19.2196 65.4377 22.3456C69.4249 25.4717 72.5762 29.5362 74.6105 34.1764C75.5815 36.3912 76.2835 38.7044 76.7084 41.0666C77.4811 45.3626 80.6234 49.2199 84.9746 49.5667V49.5667Z"
-        style={`fill: ${innerFill};`}
+        style={{ fill: innerFill }}
       ></path>
     </svg>
   );
diff --git a/src/components/ReactIcons/StopIcon.tsx b/src/components/ReactIcons/StopIcon.tsx
index ea268fa8c..484c33d5f 100644
--- a/src/components/ReactIcons/StopIcon.tsx
+++ b/src/components/ReactIcons/StopIcon.tsx
@@ -13,9 +13,9 @@ export function StopIcon(props: CheckIconProps) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className={`relative ${additionalClasses}`}
     >
       <circle cx="12" cy="12" r="10" />
diff --git a/src/components/ReactIcons/TrashIcon.tsx b/src/components/ReactIcons/TrashIcon.tsx
index d1ca98cdf..1edae9490 100644
--- a/src/components/ReactIcons/TrashIcon.tsx
+++ b/src/components/ReactIcons/TrashIcon.tsx
@@ -12,9 +12,9 @@ export function TrashIcon(props: TrashIconProps) {
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       className={className}
     >
       <path d="M3 6h18" />
diff --git a/src/components/ReactIcons/WarningIcon.tsx b/src/components/ReactIcons/WarningIcon.tsx
index 610b1e13b..73cc82456 100644
--- a/src/components/ReactIcons/WarningIcon.tsx
+++ b/src/components/ReactIcons/WarningIcon.tsx
@@ -18,23 +18,23 @@ export function WarningIcon(props: WarningIconProps) {
         d="M21.7304 18.0002L13.7304 4.00022C13.556 3.69243 13.303 3.43641 12.9973 3.25829C12.6917 3.08017 12.3442 2.98633 11.9904 2.98633C11.6366 2.98633 11.2892 3.08017 10.9835 3.25829C10.6778 3.43641 10.4249 3.69243 10.2504 4.00022L2.25042 18.0002C2.0741 18.3056 1.98165 18.6521 1.98243 19.0047C1.98321 19.3573 2.0772 19.7035 2.25486 20.008C2.43253 20.3126 2.68757 20.5648 2.99411 20.7391C3.30066 20.9133 3.64783 21.0034 4.00042 21.0002H20.0004C20.3513 20.9999 20.6959 20.9072 20.9997 20.7315C21.3035 20.5558 21.5556 20.3033 21.7309 19.9993C21.9062 19.6954 21.9985 19.3506 21.9984 18.9997C21.9983 18.6488 21.9059 18.3041 21.7304 18.0002Z"
         fill="currentColor"
         stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M12 9V13"
         stroke="white"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M12 17H12.01"
         stroke="white"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );
diff --git a/src/components/ResourceProgressStats.astro b/src/components/ResourceProgressStats.astro
index 8cfc0682b..267b53f46 100644
--- a/src/components/ResourceProgressStats.astro
+++ b/src/components/ResourceProgressStats.astro
@@ -55,7 +55,7 @@ const { isSecondaryBanner = false, resourceId, resourceType } = Astro.props;
     <ProgressShareButton
       resourceId={resourceId}
       resourceType={resourceType}
-      client:load
+      client:only="react"
     />
     <button
       data-popup='progress-help'
@@ -86,7 +86,7 @@ const { isSecondaryBanner = false, resourceId, resourceType } = Astro.props;
     <ProgressShareButton
       resourceId={resourceId}
       resourceType={resourceType}
-      client:load
+      client:only="react"
     />
   </div>
 </div>
diff --git a/src/components/RespondInviteForm.tsx b/src/components/RespondInviteForm.tsx
index 4bd387bd9..f190beed0 100644
--- a/src/components/RespondInviteForm.tsx
+++ b/src/components/RespondInviteForm.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import { httpGet, httpPatch } from '../lib/http';
 import BuildingIcon from '../icons/building.svg';
 import ErrorIcon from '../icons/error.svg';
@@ -92,7 +92,7 @@ export function RespondInviteForm() {
         />
 
         <h2 className={'mb-1 text-2xl font-bold'}>Error</h2>
-        <p class="mb-4 text-base leading-6 text-gray-600">
+        <p className="mb-4 text-base leading-6 text-gray-600">
           {error || 'There was a problem, please try again.'}
         </p>
 
@@ -117,19 +117,19 @@ export function RespondInviteForm() {
       />
 
       <h2 className={'mb-1 text-2xl font-bold'}>Join Team</h2>
-      <p class="mb-3 text-base leading-6 text-gray-600">
+      <p className="mb-3 text-base leading-6 text-gray-600">
         You have been invited to join the team{' '}
         <strong id="team-name">{invite?.team?.name}</strong>.
       </p>
 
       {!isAuthenticated && (
-        <div class="mx-auto w-full duration-500 sm:max-w-md">
-          <div class="flex w-full items-center gap-2">
+        <div className="mx-auto w-full duration-500 sm:max-w-md">
+          <div className="flex w-full items-center gap-2">
             <button
               onClick={() => showLoginPopup()}
               data-popup="login-popup"
               type="button"
-              class="flex-grow cursor-pointer rounded-lg bg-gray-200 px-3 py-2 text-center"
+              className="flex-grow cursor-pointer rounded-lg bg-gray-200 px-3 py-2 text-center"
             >
               Login to respond
             </button>
diff --git a/src/components/RoadCard/Editor.tsx b/src/components/RoadCard/Editor.tsx
index 756564092..81d5d760e 100644
--- a/src/components/RoadCard/Editor.tsx
+++ b/src/components/RoadCard/Editor.tsx
@@ -34,9 +34,8 @@ export function Editor(props: EditorProps) {
           e.target.select();
           copyText(e.target.value);
         }}
-      >
-        {text}
-      </textarea>
+        value={text}
+      />
     </div>
   );
 }
diff --git a/src/components/RoadCard/RoadCardPage.tsx b/src/components/RoadCard/RoadCardPage.tsx
index 51cef87d4..244bea848 100644
--- a/src/components/RoadCard/RoadCardPage.tsx
+++ b/src/components/RoadCard/RoadCardPage.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks';
+import { useState } from 'react';
 
 import { useCopyText } from '../../hooks/use-copy-text';
 import { useAuth } from '../../hooks/use-auth';
@@ -113,7 +113,7 @@ export function RoadCardPage() {
 
       <div className="flex items-start gap-4 mx-0 sm:-mx-10 px-0 sm:px-10 border-b py-4">
         <StepCounter step={4} />
-        <div class="flex-grow">
+        <div className="flex-grow">
           <StepLabel label="Share your #RoadCard with others" />
           <div className={'rounded-md border bg-gray-50 p-2 text-center'}>
             <a
diff --git a/src/components/RoadCard/RoadmapSelect.tsx b/src/components/RoadCard/RoadmapSelect.tsx
index 45d29e856..6b9e4dc72 100644
--- a/src/components/RoadCard/RoadmapSelect.tsx
+++ b/src/components/RoadCard/RoadmapSelect.tsx
@@ -1,5 +1,5 @@
 import { httpGet } from '../../lib/http';
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import { pageProgressMessage } from '../../stores/page';
 import type { UserProgressResponse } from '../HeroSection/FavoriteRoadmaps';
 import { SelectionButton } from './SelectionButton';
@@ -33,19 +33,24 @@ export function RoadmapSelect(props: RoadmapSelectProps) {
   }, []);
 
   const canSelectMore = selectedRoadmaps.length < 4;
-  const allProgress = progressList?.filter(
-    (progress) => progress.resourceType === 'roadmap'
-  ) || [];
+  const allProgress =
+    progressList?.filter((progress) => progress.resourceType === 'roadmap') ||
+    [];
 
   return (
     <div className="flex flex-wrap gap-1">
-      {allProgress?.length === 0 && <p className={'text-sm text-gray-400 italic'}>No progress tracked so far.</p>}
+      {allProgress?.length === 0 && (
+        <p className={'text-sm italic text-gray-400'}>
+          No progress tracked so far.
+        </p>
+      )}
       {allProgress?.map((progress) => {
         const isSelected = selectedRoadmaps.includes(progress.resourceId);
         const canSelect = isSelected || canSelectMore;
 
         return (
           <SelectionButton
+            key={progress.resourceId}
             text={progress.resourceTitle}
             isDisabled={!canSelect}
             isSelected={isSelected}
diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
index 93b0649b4..d35ef45aa 100644
--- a/src/components/RoadmapHeader.astro
+++ b/src/components/RoadmapHeader.astro
@@ -46,7 +46,7 @@ const isRoadmapReady = !isUpcoming;
           resourceId={roadmapId}
           resourceType='roadmap'
           className='text-gray-500 !opacity-100 hover:text-gray-600 [&>svg]:stroke-[0.4] [&>svg]:stroke-gray-400 hover:[&>svg]:stroke-gray-600 [&>svg]:h-4 [&>svg]:w-4 sm:[&>svg]:h-5 sm:[&>svg]:w-5 ml-1.5 relative focus:outline-0'
-          client:load
+          client:only="react"
         />
       </h1>
       <p class='text-sm text-gray-500 sm:text-lg'>{description}</p>
diff --git a/src/components/SearchSelector.tsx b/src/components/SearchSelector.tsx
index e2087cfd1..0c330aff6 100644
--- a/src/components/SearchSelector.tsx
+++ b/src/components/SearchSelector.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'react';
 
 export type OptionType = {
   value: string;
@@ -118,12 +118,12 @@ export function SearchSelector({
 
       {isActive && (
         <div
-          class="absolute top-full z-50 mt-2 w-full rounded-md bg-gray-100 px-2 py-2"
+          className="absolute top-full z-50 mt-2 w-full rounded-md bg-gray-100 px-2 py-2"
           ref={dropdownRef}
         >
           <div className="flex flex-col">
             {searchResults.length === 0 && (
-              <div class="p-5 text-center text-sm text-gray-400">
+              <div className="p-5 text-center text-sm text-gray-400">
                 No results found
               </div>
             )}
@@ -133,7 +133,7 @@ export function SearchSelector({
                 <>
                   <button
                     type="button"
-                    class={`flex w-full items-center rounded p-2 text-sm ${
+                    className={`flex w-full items-center rounded p-2 text-sm ${
                       counter === activeCounter ? 'bg-gray-200' : ''
                     }`}
                     onMouseOver={() => setActiveCounter(counter)}
diff --git a/src/components/Stepper.tsx b/src/components/Stepper.tsx
index 45846751b..4d3e96ad8 100644
--- a/src/components/Stepper.tsx
+++ b/src/components/Stepper.tsx
@@ -34,7 +34,7 @@ export function Stepper(props: StepperProps) {
                 />
               )}
               {!isComplete && (
-                <span class="mr-2 font-semibold">{stepCounter + 1}</span>
+                <span className="mr-2 font-semibold">{stepCounter + 1}</span>
               )}
               <span className="flex flex-grow">{step.label}</span>
             </li>
diff --git a/src/components/TeamDropdown/TeamDropdown.tsx b/src/components/TeamDropdown/TeamDropdown.tsx
index a5de91266..21e9edc0f 100644
--- a/src/components/TeamDropdown/TeamDropdown.tsx
+++ b/src/components/TeamDropdown/TeamDropdown.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'react';
 import ChevronDown from '../../icons/dropdown.svg';
 import { httpGet } from '../../lib/http';
 import { useAuth } from '../../hooks/use-auth';
@@ -6,7 +6,7 @@ import { useOutsideClick } from '../../hooks/use-outside-click';
 import { Spinner } from '../ReactIcons/Spinner';
 import type { AllowedRoles } from '../CreateTeam/RoleDropdown';
 import { $currentTeam, $teamList } from '../../stores/team';
-import { useStore } from '@nanostores/preact';
+import { useStore } from '@nanostores/react';
 import { useTeamId } from '../../hooks/use-team-id';
 import { useToast } from '../../hooks/use-toast';
 import type { ValidTeamType } from '../CreateTeam/Step0';
@@ -103,10 +103,10 @@ export function TeamDropdown() {
           <span>Choose Team</span>
 
           {shouldShowTeamsIndicator && (
-            <span class="mr-1 inline-flex h-1 w-1 items-center justify-center font-medium text-blue-300">
-              <span class="relative flex items-center">
-                <span class="relative rounded-full bg-gray-200 p-1 text-xs" />
-                <span class="absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs" />
+            <span className="mr-1 inline-flex h-1 w-1 items-center justify-center font-medium text-blue-300">
+              <span className="relative flex items-center">
+                <span className="relative rounded-full bg-gray-200 p-1 text-xs" />
+                <span className="absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs" />
               </span>
             </span>
           )}
@@ -166,7 +166,7 @@ export function TeamDropdown() {
                 }
 
                 return (
-                  <li>
+                  <li key={team?._id}>
                     <a
                       className="flex w-full cursor-pointer items-center gap-2 rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                       href={`${pageLink}`}
@@ -194,7 +194,7 @@ export function TeamDropdown() {
           </div>
         )}
       </div>
-      <hr class="my-4" />
+      <hr className="my-4" />
     </>
   );
 }
diff --git a/src/components/TeamMembers/InviteMemberPopup.tsx b/src/components/TeamMembers/InviteMemberPopup.tsx
index f4110a4ae..964eff3e3 100644
--- a/src/components/TeamMembers/InviteMemberPopup.tsx
+++ b/src/components/TeamMembers/InviteMemberPopup.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { FormEvent, useEffect, useRef, useState } from 'react';
 import { httpPost } from '../../lib/http';
 import { useTeamId } from '../../hooks/use-team-id';
 import { useOutsideClick } from '../../hooks/use-outside-click';
@@ -24,7 +24,7 @@ export function InviteMemberPopup(props: InviteMemberPopupProps) {
     emailRef?.current?.focus();
   }, []);
 
-  const handleSubmit = async (e: Event) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError('');
@@ -55,19 +55,21 @@ export function InviteMemberPopup(props: InviteMemberPopupProps) {
   useOutsideClick(popupBodyRef, handleClosePopup);
 
   return (
-    <div class="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
-      <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+    <div className="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+      <div className="relative h-full w-full max-w-md p-4 md:h-auto">
         <div
           ref={popupBodyRef}
-          class="popup-body relative rounded-lg bg-white p-4 shadow"
+          className="popup-body relative rounded-lg bg-white p-4 shadow"
         >
-          <h3 class="mb-1.5 text-xl sm:text-2xl font-medium">Invite Member</h3>
-          <p className="mb-3 text-sm leading-none text-gray-400 hidden sm:block">
+          <h3 className="mb-1.5 text-xl font-medium sm:text-2xl">
+            Invite Member
+          </h3>
+          <p className="mb-3 hidden text-sm leading-none text-gray-400 sm:block">
             Enter the email and role below to invite a member.
           </p>
 
           <form onSubmit={handleSubmit}>
-            <div className="mt-0 sm:mt-4 my-4 flex flex-col gap-2">
+            <div className="my-4 mt-0 flex flex-col gap-2 sm:mt-4">
               <input
                 ref={emailRef}
                 type="email"
@@ -108,7 +110,7 @@ export function InviteMemberPopup(props: InviteMemberPopupProps) {
               <button
                 type="submit"
                 disabled={isLoading || !email}
-                class="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
+                className="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
               >
                 {isLoading ? 'Please wait ..' : 'Invite'}
               </button>
diff --git a/src/components/TeamMembers/LeaveTeamButton.tsx b/src/components/TeamMembers/LeaveTeamButton.tsx
index bd716892d..13f98f932 100644
--- a/src/components/TeamMembers/LeaveTeamButton.tsx
+++ b/src/components/TeamMembers/LeaveTeamButton.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks';
+import { useState } from 'react';
 import { LeaveTeamPopup } from './LeaveTeamPopup';
 
 type LeaveTeamButtonProps = {
diff --git a/src/components/TeamMembers/LeaveTeamPopup.tsx b/src/components/TeamMembers/LeaveTeamPopup.tsx
index c84452f5a..c1791d7e5 100644
--- a/src/components/TeamMembers/LeaveTeamPopup.tsx
+++ b/src/components/TeamMembers/LeaveTeamPopup.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'react';
 import { httpDelete } from '../../lib/http';
 import { useTeamId } from '../../hooks/use-team-id';
 import { useOutsideClick } from '../../hooks/use-outside-click';
@@ -59,13 +59,13 @@ export function LeaveTeamPopup(props: LeaveTeamPopupProps) {
   useOutsideClick(popupBodyRef, handleClosePopup);
 
   return (
-    <div class="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
-      <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+    <div className="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+      <div className="relative h-full w-full max-w-md p-4 md:h-auto">
         <div
           ref={popupBodyRef}
-          class="popup-body relative rounded-lg bg-white p-4 shadow"
+          className="popup-body relative rounded-lg bg-white p-4 shadow"
         >
-          <h2 class="text-2xl font-semibold text-black">
+          <h2 className="text-2xl font-semibold text-black">
             Leave Team
           </h2>
           <p className="text-gray-500">
diff --git a/src/components/TeamMembers/MemberActionDropdown.tsx b/src/components/TeamMembers/MemberActionDropdown.tsx
index cd8c19546..672f222d6 100644
--- a/src/components/TeamMembers/MemberActionDropdown.tsx
+++ b/src/components/TeamMembers/MemberActionDropdown.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'preact/hooks';
+import { useRef, useState } from 'react';
 import type { TeamMemberDocument } from './TeamMembersPage';
 import MoreIcon from '../../icons/more-vertical.svg';
 import { useOutsideClick } from '../../hooks/use-outside-click';
diff --git a/src/components/TeamMembers/TeamMemberItem.tsx b/src/components/TeamMembers/TeamMemberItem.tsx
index 0670e0e83..95ea2b652 100644
--- a/src/components/TeamMembers/TeamMemberItem.tsx
+++ b/src/components/TeamMembers/TeamMemberItem.tsx
@@ -3,7 +3,7 @@ import { MemberActionDropdown } from './MemberActionDropdown';
 import { MemberRoleBadge } from './RoleBadge';
 import type { TeamMemberItem } from './TeamMembersPage';
 import { $canManageCurrentTeam } from '../../stores/team';
-import { useStore } from '@nanostores/preact';
+import { useStore } from '@nanostores/react';
 
 type TeamMemberProps = {
   member: TeamMemberItem;
@@ -91,7 +91,7 @@ export function TeamMemberItem(props: TeamMemberProps) {
       </div>
 
       <div className="flex shrink-0 items-center text-sm">
-        <span class={'hidden sm:block'}>
+        <span className={'hidden sm:block'}>
           <MemberRoleBadge role={member.role} />
         </span>
         {canManageCurrentTeam && (
diff --git a/src/components/TeamMembers/TeamMembersPage.tsx b/src/components/TeamMembers/TeamMembersPage.tsx
index c736fd4f2..5a3200f2a 100644
--- a/src/components/TeamMembers/TeamMembersPage.tsx
+++ b/src/components/TeamMembers/TeamMembersPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import { httpDelete, httpGet, httpPatch } from '../../lib/http';
 import { useAuth } from '../../hooks/use-auth';
 import { pageProgressMessage } from '../../stores/page';
@@ -9,7 +9,7 @@ import type { AllowedMemberStatus } from '../TeamDropdown/TeamDropdown';
 import { InviteMemberPopup } from './InviteMemberPopup';
 import { getUrlParams } from '../../lib/browser';
 import { UpdateMemberPopup } from './UpdateMemberPopup';
-import { useStore } from '@nanostores/preact';
+import { useStore } from '@nanostores/react';
 import { $canManageCurrentTeam } from '../../stores/team';
 import { useToast } from '../../hooks/use-toast';
 import { TeamMemberItem } from './TeamMemberItem';
diff --git a/src/components/TeamMembers/UpdateMemberPopup.tsx b/src/components/TeamMembers/UpdateMemberPopup.tsx
index 163e7f4af..5c67a58b3 100644
--- a/src/components/TeamMembers/UpdateMemberPopup.tsx
+++ b/src/components/TeamMembers/UpdateMemberPopup.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { httpPost, httpPut } from '../../lib/http';
+import { FormEvent, useRef, useState } from 'react';
+import { httpPut } from '../../lib/http';
 import { useTeamId } from '../../hooks/use-team-id';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import { AllowedRoles, RoleDropdown } from '../CreateTeam/RoleDropdown';
@@ -20,7 +20,7 @@ export function UpdateMemberPopup(props: InviteMemberPopupProps) {
   const [error, setError] = useState('');
   const { teamId } = useTeamId();
 
-  const handleSubmit = async (e: Event) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError('');
@@ -52,19 +52,21 @@ export function UpdateMemberPopup(props: InviteMemberPopupProps) {
   useOutsideClick(popupBodyRef, handleClosePopup);
 
   return (
-    <div class="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
-      <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+    <div className="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+      <div className="relative h-full w-full max-w-md p-4 md:h-auto">
         <div
           ref={popupBodyRef}
-          class="popup-body relative rounded-lg bg-white p-4 shadow"
+          className="popup-body relative rounded-lg bg-white p-4 shadow"
         >
-          <h3 class="mb-1.5 text-xl sm:text-2xl font-medium">Update Role</h3>
-          <p className="mb-3 text-sm leading-none text-gray-400 hidden sm:block">
+          <h3 className="mb-1.5 text-xl font-medium sm:text-2xl">
+            Update Role
+          </h3>
+          <p className="mb-3 hidden text-sm leading-none text-gray-400 sm:block">
             Select the role to update for this member
           </p>
 
           <form onSubmit={handleSubmit}>
-            <div className="mt-0 sm:mt-4 my-4 flex flex-col gap-2">
+            <div className="my-4 mt-0 flex flex-col gap-2 sm:mt-4">
               <span className="mt-2 block w-full rounded-md bg-gray-100 p-2">
                 {member.invitedEmail}
               </span>
@@ -96,7 +98,7 @@ export function UpdateMemberPopup(props: InviteMemberPopupProps) {
               <button
                 type="submit"
                 disabled={isLoading || !selectedRole}
-                class="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
+                className="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
               >
                 {isLoading ? 'Please wait ..' : 'Update Role'}
               </button>
diff --git a/src/components/TeamProgress/GroupRoadmapItem.tsx b/src/components/TeamProgress/GroupRoadmapItem.tsx
index 3e8bcd6b3..27e8b860f 100644
--- a/src/components/TeamProgress/GroupRoadmapItem.tsx
+++ b/src/components/TeamProgress/GroupRoadmapItem.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks';
+import { useState } from 'react';
 import type { GroupByRoadmap, TeamMember } from './TeamProgressPage';
 import { getUrlParams } from '../../lib/browser';
 import ExternalLinkIcon from '../../icons/external-link.svg';
diff --git a/src/components/TeamProgress/MemberProgressItem.tsx b/src/components/TeamProgress/MemberProgressItem.tsx
index 783a8cf90..8182034de 100644
--- a/src/components/TeamProgress/MemberProgressItem.tsx
+++ b/src/components/TeamProgress/MemberProgressItem.tsx
@@ -1,5 +1,5 @@
 import type { TeamMember } from './TeamProgressPage';
-import { useState } from 'preact/hooks';
+import { useState } from 'react';
 
 type MemberProgressItemProps = {
   member: TeamMember;
@@ -29,7 +29,7 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
                 : '/images/default-avatar.png'
             }
             alt={member.name || ''}
-            className="h-8 w-8 rounded-full"
+            className="min-w-[32px] min-h-[32px] h-8 w-8 rounded-full"
           />
           <div className="inline-grid w-full">
             {!isMyProgress && (
diff --git a/src/components/TeamProgress/MemberProgressModal.tsx b/src/components/TeamProgress/MemberProgressModal.tsx
index 0ff503c28..a76b46687 100644
--- a/src/components/TeamProgress/MemberProgressModal.tsx
+++ b/src/components/TeamProgress/MemberProgressModal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'react';
 import { wireframeJSONToSVG } from 'roadmap-renderer';
 import { Spinner } from '../ReactIcons/Spinner';
 import '../FrameRenderer/FrameRenderer.css';
@@ -16,7 +16,7 @@ import CloseIcon from '../../icons/close.svg';
 import { useToast } from '../../hooks/use-toast';
 import { useAuth } from '../../hooks/use-auth';
 import { pageProgressMessage } from '../../stores/page';
-import { useStore } from '@nanostores/preact';
+import { useStore } from '@nanostores/react';
 import { $currentTeam } from '../../stores/team';
 
 export type ProgressMapProps = {
@@ -277,14 +277,14 @@ export function MemberProgressModal(props: ProgressMapProps) {
   const progressPercentage = Math.round((memberDone / memberTotal) * 100);
 
   return (
-    <div class="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+    <div className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
       <div
         id={currentTeam?.type === 'company' ? 'customized-roadmap' : 'original-roadmap'}
-        class="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto"
+        className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto"
       >
         <div
           ref={popupBodyEl}
-          class="popup-body relative rounded-lg bg-white pt-[1px] shadow"
+          className="popup-body relative rounded-lg bg-white pt-[1px] shadow"
         >
           {isCurrentUser && (
             <div className="sticky top-1 mx-1 mb-0 mt-1 rounded-xl bg-gray-900 p-4 text-gray-300">
@@ -344,11 +344,11 @@ export function MemberProgressModal(props: ProgressMapProps) {
               </div>
             )}
             <p
-              class={`-mx-4 mb-3 flex items-center justify-start border-b border-t px-4 py-2 text-sm sm:hidden ${
+              className={`-mx-4 mb-3 flex items-center justify-start border-b border-t px-4 py-2 text-sm sm:hidden ${
                 isLoading ? 'striped-loader' : ''
               }`}
             >
-              <span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+              <span className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
                 <span>{progressPercentage}</span>% Done
               </span>
 
@@ -357,18 +357,18 @@ export function MemberProgressModal(props: ProgressMapProps) {
               </span>
             </p>
             <p
-              class={`-mx-4 mb-3 hidden items-center justify-center border-b border-t py-2 text-sm sm:flex ${
+              className={`-mx-4 mb-3 hidden items-center justify-center border-b border-t py-2 text-sm sm:flex ${
                 isLoading ? 'striped-loader' : ''
               }`}
             >
-              <span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+              <span className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
                 <span>{progressPercentage}</span>% Done
               </span>
 
               <span>
                 <span>{memberDone}</span> completed
               </span>
-              <span class="mx-1.5 text-gray-400">·</span>
+              <span className="mx-1.5 text-gray-400">·</span>
               <span>
                 <span data-progress-learning="">{memberLearning}</span> in
                 progress
@@ -376,7 +376,7 @@ export function MemberProgressModal(props: ProgressMapProps) {
 
               {memberSkipped > 0 && (
                 <>
-                  <span class="mx-1.5 text-gray-400">·</span>
+                  <span className="mx-1.5 text-gray-400">·</span>
                   <span>
                     <span data-progress-skipped="">{memberSkipped}</span>{' '}
                     skipped
@@ -384,7 +384,7 @@ export function MemberProgressModal(props: ProgressMapProps) {
                 </>
               )}
 
-              <span class="mx-1.5 text-gray-400">·</span>
+              <span className="mx-1.5 text-gray-400">·</span>
               <span>
                 <span data-progress-total="">{memberTotal}</span> Total
               </span>
@@ -398,7 +398,7 @@ export function MemberProgressModal(props: ProgressMapProps) {
           ></div>
 
           {isLoading && (
-            <div class="flex w-full justify-center">
+            <div className="flex w-full justify-center">
               <Spinner
                 isDualRing={false}
                 className="mb-4 mt-2 h-4 w-4 animate-spin fill-blue-600 text-gray-200 sm:h-8 sm:w-8"
@@ -414,7 +414,7 @@ export function MemberProgressModal(props: ProgressMapProps) {
             onClick={onClose}
           >
             <img alt={'close'} src={CloseIcon} className="h-4 w-4" />
-            <span class="sr-only">Close modal</span>
+            <span className="sr-only">Close modal</span>
           </button>
         </div>
       </div>
diff --git a/src/components/TeamProgress/TeamProgressPage.tsx b/src/components/TeamProgress/TeamProgressPage.tsx
index 185c41d4f..e60f148ab 100644
--- a/src/components/TeamProgress/TeamProgressPage.tsx
+++ b/src/components/TeamProgress/TeamProgressPage.tsx
@@ -1,10 +1,9 @@
-import { useEffect, useState } from 'preact/hooks';
-import { useTeamId } from '../../hooks/use-team-id';
+import { useEffect, useState } from 'react';
 import { httpGet } from '../../lib/http';
 import { pageProgressMessage } from '../../stores/page';
 import { MemberProgressItem } from './MemberProgressItem';
 import { useToast } from '../../hooks/use-toast';
-import { useStore } from '@nanostores/preact';
+import { useStore } from '@nanostores/react';
 import { $currentTeam } from '../../stores/team';
 import { GroupRoadmapItem } from './GroupRoadmapItem';
 import { getUrlParams, setUrlParams } from '../../lib/browser';
@@ -49,8 +48,7 @@ const groupingTypes = [
 ] as const;
 
 export function TeamProgressPage() {
-  const { teamId } = useTeamId();
-  const { gb: groupBy } = getUrlParams();
+  const { t: teamId, gb: groupBy } = getUrlParams();
 
   const [isLoading, setIsLoading] = useState(true);
   const toast = useToast();
@@ -100,15 +98,6 @@ export function TeamProgressPage() {
     });
   }, [teamId]);
 
-  if (isLoading) {
-    return null;
-  }
-
-  if (!teamId) {
-    window.location.href = '/';
-    return;
-  }
-
   useEffect(() => {
     if (!selectedGrouping) {
       return;
@@ -145,6 +134,15 @@ export function TeamProgressPage() {
     });
   }
 
+  if (!teamId) {
+    window.location.href = '/';
+    return;
+  }
+
+  if (isLoading) {
+    return null;
+  }
+
   return (
     <div>
       {showMemberProgress && (
@@ -170,6 +168,7 @@ export function TeamProgressPage() {
       <div className="flex items-center gap-2">
         {groupingTypes.map((grouping) => (
           <button
+            key={grouping.value}
             className={`rounded-md border p-1 px-2 text-sm ${
               selectedGrouping === grouping.value
                 ? ' border-gray-400 bg-gray-200 '
@@ -205,6 +204,7 @@ export function TeamProgressPage() {
           <div className="grid gap-4 sm:grid-cols-2">
             {teamMembers.map((member) => (
               <MemberProgressItem
+                key={member._id}
                 member={member}
                 isMyProgress={member?.email === user?.email}
                 onShowResourceProgress={(resourceId) => {
diff --git a/src/components/TeamRoadmaps.tsx b/src/components/TeamRoadmaps.tsx
index 7122ada30..8a45d9117 100644
--- a/src/components/TeamRoadmaps.tsx
+++ b/src/components/TeamRoadmaps.tsx
@@ -1,5 +1,5 @@
 import { getUrlParams } from '../lib/browser';
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 import type { TeamDocument } from './CreateTeam/CreateTeamForm';
 import type { TeamResourceConfig } from './CreateTeam/RoadmapSelector';
 import { httpGet, httpPut } from '../lib/http';
@@ -9,7 +9,7 @@ import RoadmapIcon from '../icons/roadmap.svg';
 import PlusIcon from '../icons/plus.svg';
 import type { PageType } from './CommandMenu/CommandMenu';
 import { UpdateTeamResourceModal } from './CreateTeam/UpdateTeamResourceModal';
-import { useStore } from '@nanostores/preact';
+import { useStore } from '@nanostores/react';
 import { $canManageCurrentTeam } from '../stores/team';
 import { useToast } from '../hooks/use-toast';
 import { SelectRoadmapModal } from './CreateTeam/SelectRoadmapModal';
@@ -248,7 +248,7 @@ export function TeamRoadmaps() {
             '...';
 
           return (
-            <div className="flex flex-col items-start rounded-md border border-gray-300">
+            <div key={resourceId} className="flex flex-col items-start rounded-md border border-gray-300">
               <div className={'w-full px-3 py-4'}>
                 <a
                   href={`/${resourceId}?t=${teamId}`}
diff --git a/src/components/TeamSettings/UpdateTeamForm.tsx b/src/components/TeamSettings/UpdateTeamForm.tsx
index 2123856b3..fc059e0ee 100644
--- a/src/components/TeamSettings/UpdateTeamForm.tsx
+++ b/src/components/TeamSettings/UpdateTeamForm.tsx
@@ -1,14 +1,13 @@
-import { useEffect, useState } from 'preact/hooks';
+import { FormEvent, useEffect, useState } from 'react';
 import { httpGet, httpPut } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner';
-import { useAuth } from '../../hooks/use-auth';
 import UploadProfilePicture from '../UpdateProfile/UploadProfilePicture';
 import type { TeamDocument } from '../CreateTeam/CreateTeamForm';
 import { pageProgressMessage } from '../../stores/page';
 import { useTeamId } from '../../hooks/use-team-id';
 import { DeleteTeamPopup } from '../DeleteTeamPopup';
-import { $currentTeam, $isCurrentTeamAdmin } from '../../stores/team';
-import { useStore } from '@nanostores/preact';
+import { $isCurrentTeamAdmin } from '../../stores/team';
+import { useStore } from '@nanostores/react';
 import { useToast } from '../../hooks/use-toast';
 
 export function UpdateTeamForm() {
@@ -44,7 +43,7 @@ export function UpdateTeamForm() {
     setIsDisabled(!isCurrentTeamAdmin);
   }, [isCurrentTeamAdmin]);
 
-  const handleSubmit = async (e: Event) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     if (!name || !teamType) {
@@ -123,7 +122,7 @@ export function UpdateTeamForm() {
       <form onSubmit={handleSubmit}>
         <div className="mt-4 flex w-full flex-col">
           <label
-            for="name"
+            htmlFor="name"
             className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
           >
             Name
@@ -142,7 +141,7 @@ export function UpdateTeamForm() {
         </div>
         <div className="mt-4 flex w-full flex-col">
           <label
-            for="website"
+            htmlFor="website"
             className={`text-sm leading-none text-slate-500 ${
               teamType === 'company' ? 'after:content-["*"]' : ''
             }`}
@@ -164,7 +163,7 @@ export function UpdateTeamForm() {
         {teamType === 'company' && (
           <div className="mt-4 flex w-full flex-col">
             <label
-              for="linkedIn"
+              htmlFor="linkedIn"
               className="text-sm leading-none text-slate-500"
             >
               LinkedIn URL
@@ -182,7 +181,10 @@ export function UpdateTeamForm() {
           </div>
         )}
         <div className="mt-4 flex w-full flex-col">
-          <label for="gitHub" className="text-sm leading-none text-slate-500">
+          <label
+            htmlFor="gitHub"
+            className="text-sm leading-none text-slate-500"
+          >
             GitHub URL
           </label>
           <input
@@ -198,7 +200,7 @@ export function UpdateTeamForm() {
         </div>
         <div className="mt-4 flex w-full flex-col">
           <label
-            for="type"
+            htmlFor="type"
             className='text-sm leading-none text-slate-500  after:text-red-400 after:content-["*"]'
           >
             Type
@@ -208,12 +210,12 @@ export function UpdateTeamForm() {
             id="type"
             className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             disabled={isDisabled}
-            value={teamType}
+            value={teamType || ''}
             onChange={(e) =>
               setTeamType((e.target as HTMLSelectElement).value as any)
             }
           >
-            <option value="" selected>
+            <option value="">
               Select type
             </option>
             <option value="company">Company</option>
@@ -224,7 +226,7 @@ export function UpdateTeamForm() {
         {teamType === 'company' && (
           <div className="mt-4 flex w-full flex-col">
             <label
-              for="team-size"
+              htmlFor="team-size"
               className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
             >
               Team size
@@ -269,7 +271,7 @@ export function UpdateTeamForm() {
 
       {isCurrentTeamAdmin && (
         <>
-          <hr class="my-8" />
+          <hr className="my-8" />
           {isDeleting && (
             <DeleteTeamPopup
               onClose={() => {
@@ -277,15 +279,15 @@ export function UpdateTeamForm() {
               }}
             />
           )}
-          <h2 class="text-xl font-bold sm:text-2xl">Delete Team</h2>
-          <p class="mt-2 text-gray-400">
+          <h2 className="text-xl font-bold sm:text-2xl">Delete Team</h2>
+          <p className="mt-2 text-gray-400">
             Permanently delete this team and all of its resources.
           </p>
 
           <button
             onClick={() => setIsDeleting(true)}
             data-popup="delete-team-popup"
-            class="font-regular mt-4 w-full rounded-lg bg-red-600 py-2 text-base text-white outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1"
+            className="font-regular mt-4 w-full rounded-lg bg-red-600 py-2 text-base text-white outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1"
           >
             Delete Team
           </button>
diff --git a/src/components/TeamSidebar.tsx b/src/components/TeamSidebar.tsx
index 29a61de34..4de43b503 100644
--- a/src/components/TeamSidebar.tsx
+++ b/src/components/TeamSidebar.tsx
@@ -1,4 +1,3 @@
-import type { FunctionalComponent } from 'preact';
 import { TeamDropdown } from './TeamDropdown/TeamDropdown';
 import ChevronDown from '../icons/dropdown.svg';
 import { useTeamId } from '../hooks/use-team-id';
@@ -7,14 +6,18 @@ import SettingsIcon from '../icons/cog.svg';
 import ChatIcon from '../icons/chat.svg';
 import MapIcon from '../icons/map.svg';
 import GroupIcon from '../icons/group.svg';
-import { useState } from 'preact/hooks';
-import { useStore } from '@nanostores/preact';
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import { useStore } from '@nanostores/react';
 import { $currentTeam } from '../stores/team';
 import { SubmitFeedbackPopup } from './Feedback/SubmitFeedbackPopup';
 
-export const TeamSidebar: FunctionalComponent<{
+type TeamSidebarProps = {
   activePageId: string;
-}> = ({ activePageId, children }) => {
+  children: ReactNode;
+};
+
+export function TeamSidebar({ activePageId, children }: TeamSidebarProps) {
   const [menuShown, setMenuShown] = useState(false);
   const currentTeam = useStore($currentTeam);
   const [showFeedbackPopup, setShowFeedbackPopup] = useState(false);
@@ -51,9 +54,9 @@ export const TeamSidebar: FunctionalComponent<{
 
   return (
     <>
-      <div class="relative mb-5 block border-b p-4 shadow-inner md:hidden">
+      <div className="relative mb-5 block border-b p-4 shadow-inner md:hidden">
         <button
-          class="flex h-10 w-full items-center justify-between rounded-md border bg-white px-2 text-center text-sm font-medium text-gray-900"
+          className="flex h-10 w-full items-center justify-between rounded-md border bg-white px-2 text-center text-sm font-medium text-gray-900"
           id="settings-menu"
           aria-haspopup="true"
           aria-expanded="true"
@@ -63,21 +66,21 @@ export const TeamSidebar: FunctionalComponent<{
             sidebarLinks.find((sidebarLink) => sidebarLink.id === activePageId)
               ?.title
           }
-          <img alt="menu" src={ChevronDown} class="h-4 w-4" />
+          <img alt="menu" src={ChevronDown} className="h-4 w-4" />
         </button>
         {menuShown && (
           <ul
             id="settings-menu-dropdown"
-            class="absolute left-0 right-0 z-50 mt-1 space-y-1.5 bg-white p-2 shadow-lg"
+            className="absolute left-0 right-0 z-50 mt-1 space-y-1.5 bg-white p-2 shadow-lg"
           >
             <li>
               <a
                 href="/team"
-                class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
+                className={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
                   activePageId === 'team' ? 'bg-slate-100' : ''
                 }`}
               >
-                <img alt={'teams'} src={GroupIcon} class={`mr-2 h-4 w-4`} />
+                <img alt={'teams'} src={GroupIcon} className={`mr-2 h-4 w-4`} />
                 Personal Account / Teams
               </a>
             </li>
@@ -85,10 +88,10 @@ export const TeamSidebar: FunctionalComponent<{
               const isActive = activePageId === sidebarLink.id;
 
               return (
-                <li>
+                <li key={sidebarLink.id}>
                   <a
                     href={sidebarLink.href}
-                    class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
+                    className={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
                       isActive ? 'bg-slate-100' : ''
                     }`}
                   >
@@ -127,25 +130,25 @@ export const TeamSidebar: FunctionalComponent<{
         />
       )}
 
-      <div class="container flex min-h-screen items-stretch">
-        <aside class="hidden w-44 shrink-0 border-r border-slate-200 py-10 md:block">
+      <div className="container flex min-h-screen items-stretch">
+        <aside className="hidden w-44 shrink-0 border-r border-slate-200 py-10 md:block">
           <TeamDropdown />
           <nav>
-            <ul class="space-y-1">
+            <ul className="space-y-1">
               {sidebarLinks.map((sidebarLink) => {
                 const isActive = activePageId === sidebarLink.id;
 
                 return (
-                  <li>
+                  <li key={sidebarLink.id}>
                     <a
                       href={sidebarLink.href}
-                      class={`font-regular flex w-full items-center border-r-2 px-2 py-1.5 text-sm ${
+                      className={`font-regular flex w-full items-center border-r-2 px-2 py-1.5 text-sm ${
                         isActive
                           ? 'border-r-black bg-gray-100 text-black'
                           : 'border-r-transparent text-gray-500 hover:border-r-gray-300'
                       }`}
                     >
-                      <span class="flex flex-grow items-center justify-between">
+                      <span className="flex flex-grow items-center justify-between">
                         <span className="flex">
                           <img
                             alt="menu icon"
@@ -155,9 +158,9 @@ export const TeamSidebar: FunctionalComponent<{
                           {sidebarLink.title}
                         </span>
                         {sidebarLink.hasWarning && (
-                          <span class="relative mr-1 flex items-center">
-                            <span class="relative rounded-full bg-red-200 p-1 text-xs" />
-                            <span class="absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-red-400 p-1 text-xs" />
+                          <span className="relative mr-1 flex items-center">
+                            <span className="relative rounded-full bg-red-200 p-1 text-xs" />
+                            <span className="absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-red-400 p-1 text-xs" />
                           </span>
                         )}
                       </span>
@@ -171,7 +174,7 @@ export const TeamSidebar: FunctionalComponent<{
               className="mr-3 mt-4 flex items-center justify-center rounded-md border p-2 text-sm text-gray-500 transition-colors hover:border-gray-300 hover:bg-gray-50 hover:text-black"
               onClick={() => setShowFeedbackPopup(true)}
             >
-              <img src={ChatIcon} className="mr-2 h-4 w-4" />
+              <img alt={'feedback'} src={ChatIcon} className="mr-2 h-4 w-4" />
               Send Feedback
             </button>
           </nav>
@@ -180,4 +183,4 @@ export const TeamSidebar: FunctionalComponent<{
       </div>
     </>
   );
-};
+}
diff --git a/src/components/TeamVersions/TeamVersions.tsx b/src/components/TeamVersions/TeamVersions.tsx
index a54896486..86ac26a7f 100644
--- a/src/components/TeamVersions/TeamVersions.tsx
+++ b/src/components/TeamVersions/TeamVersions.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'preact/hooks';
+import { useState, useEffect, useRef } from 'react';
 import type { TeamDocument } from '../CreateTeam/CreateTeamForm';
 import type { TeamResourceConfig } from '../CreateTeam/RoadmapSelector';
 import { httpGet } from '../../lib/http';
@@ -44,7 +44,8 @@ export function TeamVersions(props: TeamVersionsProps) {
   const [selectedTeamVersion, setSelectedTeamVersion] = useState<
     TeamVersionsResponse[0] | null
   >(null);
-  let shouldShowAvatar = true;
+
+  let shouldShowAvatar: boolean;
   const selectedAvatar = selectedTeamVersion
     ? selectedTeamVersion.team.avatar
     : user?.avatar;
@@ -55,10 +56,8 @@ export function TeamVersions(props: TeamVersionsProps) {
   // Show avatar if team has one, or if user has one otherwise use first letter of name
   if (selectedTeamVersion?.team.avatar) {
     shouldShowAvatar = true;
-  } else if (!selectedTeamVersion && user?.avatar) {
-    shouldShowAvatar = true;
   } else {
-    shouldShowAvatar = false;
+    shouldShowAvatar = !!(!selectedTeamVersion && user?.avatar);
   }
 
   useOutsideClick(teamDropdownRef, () => {
@@ -105,10 +104,6 @@ export function TeamVersions(props: TeamVersionsProps) {
     });
   }, []);
 
-  if (isPreparing) {
-    return null;
-  }
-
   useEffect(() => {
     clearResourceProgress();
     if (!selectedTeamVersion) {
@@ -127,6 +122,10 @@ export function TeamVersions(props: TeamVersionsProps) {
     });
   }, [selectedTeamVersion]);
 
+  if (isPreparing) {
+    return null;
+  }
+
   if (!teamVersions.length) {
     return null;
   }
@@ -145,8 +144,8 @@ export function TeamVersions(props: TeamVersionsProps) {
           </span>
           <img
             alt="Dropdown"
-            src={DropdownIcon}
-            class="h-3 w-3 sm:h-4 sm:w-4"
+            src={DropdownIcon as any}
+            className="h-3 w-3 sm:h-4 sm:w-4"
           />
         </div>
         <div className="sm:hidden">
@@ -192,12 +191,13 @@ export function TeamVersions(props: TeamVersionsProps) {
                 <span className="truncate">Personal</span>
               </div>
             </button>
-            {teamVersions.map((team) => {
+            {teamVersions.map((team: TeamVersionsResponse[0]) => {
               const isSelectedTeam =
                 selectedTeamVersion?.team._id === team.team._id;
 
               return (
                 <button
+                  key={team?.team?._id}
                   className={`flex h-8 w-full items-center justify-between px-3 py-1.5 text-xs font-medium hover:bg-gray-100 sm:text-sm ${
                     isSelectedTeam ? 'bg-gray-100' : 'bg-white'
                   }`}
diff --git a/src/components/TeamsList.tsx b/src/components/TeamsList.tsx
index 1b2c9571e..5035d5399 100644
--- a/src/components/TeamsList.tsx
+++ b/src/components/TeamsList.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'react';
 import ChevronDown from '../icons/dropdown.svg';
 import { httpGet } from '../lib/http';
 import { useTeamId } from '../hooks/use-team-id';
@@ -33,7 +33,7 @@ export function TeamsList() {
   }, []);
 
   return (
-    <div className="relative max-w-[500px] mx-auto">
+    <div className="relative mx-auto max-w-[500px]">
       <div className="w-full px-2 py-2">
         <div className={'mb-8 hidden md:block'}>
           <h2 className={'text-3xl font-bold sm:text-4xl'}>Teams</h2>
@@ -41,7 +41,7 @@ export function TeamsList() {
             Here are the teams you are part of
           </p>
         </div>
-        <ul class="mb-3 flex flex-col gap-1">
+        <ul className="mb-3 flex flex-col gap-1">
           <li>
             <a
               className="flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded border p-2 text-sm font-medium hover:border-gray-300 hover:bg-gray-50"
@@ -65,7 +65,7 @@ export function TeamsList() {
             </a>
           </li>
           {teamList.map((team) => (
-            <li>
+            <li key={team._id}>
               <a
                 className="flex w-full cursor-pointer items-center justify-between gap-2 rounded border p-2 text-sm font-medium hover:border-gray-300 hover:bg-gray-50"
                 href={`/team/progress?t=${team._id}`}
@@ -93,7 +93,7 @@ export function TeamsList() {
           className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
           href="/team/new"
         >
-          <span class='mr-2'>+</span>
+          <span className="mr-2">+</span>
           <span>New Team</span>
         </a>
       </div>
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
index ceca924a5..c7835c69c 100644
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@@ -1,6 +1,6 @@
-import { useStore } from '@nanostores/preact';
+import { useStore } from '@nanostores/react';
 import { $toastMessage } from '../stores/toast';
-import { useEffect } from 'preact/hooks';
+import { useEffect } from 'react';
 import { CheckIcon } from './ReactIcons/CheckIcon';
 import { ErrorIcon } from './ReactIcons/ErrorIcon';
 import { WarningIcon } from './ReactIcons/WarningIcon';
diff --git a/src/components/TopicDetail/ContributionForm.tsx b/src/components/TopicDetail/ContributionForm.tsx
index 459969773..e0bf70818 100644
--- a/src/components/TopicDetail/ContributionForm.tsx
+++ b/src/components/TopicDetail/ContributionForm.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'react';
 import { httpPost } from '../../lib/http';
 import { useToast } from '../../hooks/use-toast';
 
@@ -157,7 +157,7 @@ export function ContributionForm(props: ContributionFormProps) {
     <div>
       <div className="mb-2 mt-2 rounded-md border bg-gray-100 p-3">
         <h1 className="mb-2 text-2xl font-bold">Guidelines</h1>
-        <ul class="flex flex-col gap-1 text-sm text-gray-700">
+        <ul className="flex flex-col gap-1 text-sm text-gray-700">
           <li>Content should only be in English.</li>
           <li>Do not add things you have not evaluated personally.</li>
           <li>It should strictly be relevant to the topic.</li>
diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx
index fae17624b..d720c6776 100644
--- a/src/components/TopicDetail/TopicDetail.tsx
+++ b/src/components/TopicDetail/TopicDetail.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'preact/hooks';
+import { useMemo, useRef, useState } from 'react';
 import CloseIcon from '../../icons/close.svg';
 import SpinnerIcon from '../../icons/spinner.svg';
 
@@ -147,7 +147,7 @@ export function TopicDetail() {
         {isLoading && (
           <div className="flex w-full justify-center">
             <img
-              src={SpinnerIcon}
+              src={SpinnerIcon as any}
               alt="Loading"
               className="h-6 w-6 animate-spin fill-blue-600 text-gray-200 sm:h-12 sm:w-12"
             />
@@ -192,7 +192,7 @@ export function TopicDetail() {
                   setIsContributing(false);
                 }}
               >
-                <img alt="Close" class="h-5 w-5" src={CloseIcon} />
+                <img alt="Close" className="h-5 w-5" src={CloseIcon as any} />
               </button>
             </div>
 
@@ -205,7 +205,7 @@ export function TopicDetail() {
 
             {/* Contribution */}
             <div className="mt-8 flex-1 border-t">
-              <p class="mb-2 mt-2 text-sm leading-relaxed text-gray-400">
+              <p className="mb-2 mt-2 text-sm leading-relaxed text-gray-400">
                 Help others learn by submitting links to learn more about this topic{' '}
               </p>
               <button
@@ -229,7 +229,7 @@ export function TopicDetail() {
           </>
         )}
       </div>
-      <div class="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div>
+      <div className="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div>
     </div>
   );
 }
diff --git a/src/components/TopicDetail/TopicProgressButton.tsx b/src/components/TopicDetail/TopicProgressButton.tsx
index 2fab820e4..b31459d37 100644
--- a/src/components/TopicDetail/TopicProgressButton.tsx
+++ b/src/components/TopicDetail/TopicProgressButton.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useKeydown } from '../../hooks/use-keydown';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import DownIcon from '../../icons/down.svg';
@@ -165,7 +165,7 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
   if (isUpdatingProgress) {
     return (
       <button className="inline-flex cursor-default items-center rounded-md border border-gray-300 bg-white p-1 px-2 text-sm text-black">
-        <img alt="Check" class="h-4 w-4 animate-spin" src={SpinnerIcon} />
+        <img alt="Check" className="h-4 w-4 animate-spin" src={SpinnerIcon} />
         <span className="ml-2">Updating Status..</span>
       </button>
     );
@@ -174,9 +174,9 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
   return (
     <div className="relative inline-flex rounded-md border border-gray-300">
       <span className="inline-flex cursor-default items-center  p-1 px-2 text-sm text-black">
-        <span class="flex h-2 w-2">
+        <span className="flex h-2 w-2">
           <span
-            class={`relative inline-flex h-2 w-2 rounded-full ${statusColors[progress]}`}
+            className={`relative inline-flex h-2 w-2 rounded-full ${statusColors[progress]}`}
           ></span>
         </span>
         <span className="ml-2 capitalize">
@@ -189,7 +189,7 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
         onClick={() => setShowChangeStatus(true)}
       >
         <span className="mr-0.5">Update Status</span>
-        <img alt="Check" class="h-4 w-4" src={DownIcon} />
+        <img alt="Check" className="h-4 w-4" src={DownIcon} />
       </button>
 
       {showChangeStatus && (
@@ -199,59 +199,59 @@ export function TopicProgressButton(props: TopicProgressButtonProps) {
         >
           {allowMarkingDone && (
             <button
-              class="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
+              className="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
               onClick={() => handleUpdateResourceProgress('done')}
             >
               <span>
                 <span
-                  class={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['done']}`}
+                  className={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['done']}`}
                 ></span>
                 Done
               </span>
-              <span class="text-xs text-gray-500">D</span>
+              <span className="text-xs text-gray-500">D</span>
             </button>
           )}
           {allowMarkingLearning && (
             <button
-              class="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
+              className="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
               onClick={() => handleUpdateResourceProgress('learning')}
             >
               <span>
                 <span
-                  class={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['learning']}`}
+                  className={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['learning']}`}
                 ></span>
                 In Progress
               </span>
 
-              <span class="text-xs text-gray-500">L</span>
+              <span className="text-xs text-gray-500">L</span>
             </button>
           )}
           {allowMarkingPending && (
             <button
-              class="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
+              className="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
               onClick={() => handleUpdateResourceProgress('pending')}
             >
               <span>
                 <span
-                  class={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['pending']}`}
+                  className={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['pending']}`}
                 ></span>
                 Reset
               </span>
-              <span class="text-xs text-gray-500">R</span>
+              <span className="text-xs text-gray-500">R</span>
             </button>
           )}
           {allowMarkingSkipped && (
             <button
-              class="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
+              className="inline-flex justify-between px-3 py-1.5 text-left text-sm text-gray-800 hover:bg-gray-100"
               onClick={() => handleUpdateResourceProgress('skipped')}
             >
               <span>
                 <span
-                  class={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['skipped']}`}
+                  className={`mr-2 inline-block h-2 w-2 rounded-full ${statusColors['skipped']}`}
                 ></span>
                 Skip
               </span>
-              <span class="text-xs text-gray-500">S</span>
+              <span className="text-xs text-gray-500">S</span>
             </button>
           )}
         </div>
diff --git a/src/components/UpdatePassword/UpdatePasswordForm.tsx b/src/components/UpdatePassword/UpdatePasswordForm.tsx
index 6590233d5..a5f249ef3 100644
--- a/src/components/UpdatePassword/UpdatePasswordForm.tsx
+++ b/src/components/UpdatePassword/UpdatePasswordForm.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { FormEvent, useEffect, useState } from 'react';
 import { httpGet, httpPost } from '../../lib/http';
 import { pageProgressMessage } from '../../stores/page';
 
@@ -13,7 +13,7 @@ export default function UpdatePasswordForm() {
 
   const [isLoading, setIsLoading] = useState(true);
 
-  const handleSubmit = async (e: Event) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError('');
@@ -78,15 +78,17 @@ export default function UpdatePasswordForm() {
 
   return (
     <form onSubmit={handleSubmit}>
-      <div class="hidden md:block mb-8">
+      <div className="mb-8 hidden md:block">
         <h2 className="text-3xl font-bold sm:text-4xl">Password</h2>
-        <p className="mt-2 text-gray-400">Use the form below to update your password.</p>
+        <p className="mt-2 text-gray-400">
+          Use the form below to update your password.
+        </p>
       </div>
       <div className="space-y-4">
         {authProvider === 'email' && (
           <div className="flex w-full flex-col">
             <label
-              for="current-password"
+              htmlFor="current-password"
               className="text-sm leading-none text-slate-500"
             >
               Current Password
@@ -96,6 +98,7 @@ export default function UpdatePasswordForm() {
               type="password"
               name="current-password"
               id="current-password"
+              autoComplete={"current-password"}
               className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-100"
               required
               minLength={6}
@@ -110,7 +113,7 @@ export default function UpdatePasswordForm() {
 
         <div className="flex w-full flex-col">
           <label
-            for="new-password"
+            htmlFor="new-password"
             className="text-sm leading-none text-slate-500"
           >
             New Password
@@ -119,6 +122,7 @@ export default function UpdatePasswordForm() {
             type="password"
             name="new-password"
             id="new-password"
+            autoComplete={"new-password"}
             className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             required
             minLength={6}
@@ -131,7 +135,7 @@ export default function UpdatePasswordForm() {
         </div>
         <div className="flex w-full flex-col">
           <label
-            for="new-password-confirmation"
+            htmlFor="new-password-confirmation"
             className="text-sm leading-none text-slate-500"
           >
             Confirm New Password
@@ -141,6 +145,7 @@ export default function UpdatePasswordForm() {
             name="new-password-confirmation"
             id="new-password-confirmation"
             className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            autoComplete={"new-password"}
             required
             minLength={6}
             placeholder="Confirm New Password"
@@ -152,11 +157,11 @@ export default function UpdatePasswordForm() {
         </div>
 
         {error && (
-          <p class="mt-2 rounded-lg bg-red-100 p-2 text-red-700">{error}</p>
+          <p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">{error}</p>
         )}
 
         {success && (
-          <p class="mt-2 rounded-lg bg-green-100 p-2 text-green-700">
+          <p className="mt-2 rounded-lg bg-green-100 p-2 text-green-700">
             {success}
           </p>
         )}
diff --git a/src/components/UpdateProfile/UpdateProfileForm.tsx b/src/components/UpdateProfile/UpdateProfileForm.tsx
index 2441e7a84..4ad81259a 100644
--- a/src/components/UpdateProfile/UpdateProfileForm.tsx
+++ b/src/components/UpdateProfile/UpdateProfileForm.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { FormEvent, useEffect, useState } from 'react';
 import { httpGet, httpPost } from '../../lib/http';
 import { pageProgressMessage } from '../../stores/page';
 import UploadProfilePicture from './UploadProfilePicture';
@@ -16,7 +16,7 @@ export function UpdateProfileForm() {
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
 
-  const handleSubmit = async (e: Event) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     setError('');
@@ -97,7 +97,7 @@ export function UpdateProfileForm() {
       <form className="mt-4 space-y-4" onSubmit={handleSubmit}>
         <div className="flex w-full flex-col">
           <label
-            for="name"
+            htmlFor="name"
             className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
           >
             Name
@@ -115,7 +115,7 @@ export function UpdateProfileForm() {
         </div>
         <div className="flex w-full flex-col">
           <label
-            for="email"
+            htmlFor="email"
             className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
           >
             Email
@@ -133,7 +133,10 @@ export function UpdateProfileForm() {
         </div>
 
         <div className="flex w-full flex-col">
-          <label for="github" className="text-sm leading-none text-slate-500">
+          <label
+            htmlFor="github"
+            className="text-sm leading-none text-slate-500"
+          >
             Github
           </label>
           <input
@@ -147,7 +150,10 @@ export function UpdateProfileForm() {
           />
         </div>
         <div className="flex w-full flex-col">
-          <label for="twitter" className="text-sm leading-none text-slate-500">
+          <label
+            htmlFor="twitter"
+            className="text-sm leading-none text-slate-500"
+          >
             Twitter
           </label>
           <input
@@ -162,7 +168,10 @@ export function UpdateProfileForm() {
         </div>
 
         <div className="flex w-full flex-col">
-          <label for="linkedin" className="text-sm leading-none text-slate-500">
+          <label
+            htmlFor="linkedin"
+            className="text-sm leading-none text-slate-500"
+          >
             LinkedIn
           </label>
           <input
@@ -177,7 +186,10 @@ export function UpdateProfileForm() {
         </div>
 
         <div className="flex w-full flex-col">
-          <label for="website" className="text-sm leading-none text-slate-500">
+          <label
+            htmlFor="website"
+            className="text-sm leading-none text-slate-500"
+          >
             Website
           </label>
           <input
diff --git a/src/components/UpdateProfile/UploadProfilePicture.tsx b/src/components/UpdateProfile/UploadProfilePicture.tsx
index 18f9441c9..1d2a2abfa 100644
--- a/src/components/UpdateProfile/UploadProfilePicture.tsx
+++ b/src/components/UpdateProfile/UploadProfilePicture.tsx
@@ -1,5 +1,5 @@
 import Cookies from 'js-cookie';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { ChangeEvent, FormEvent, useEffect, useRef, useState } from 'react';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 
 interface PreviewFile extends File {
@@ -60,7 +60,7 @@ export default function UploadProfilePicture(props: UploadProfilePictureProps) {
 
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const onImageChange = async (e: Event) => {
+  const onImageChange = async (e: ChangeEvent<HTMLInputElement>) => {
     setError('');
 
     const file = (e.target as HTMLInputElement).files?.[0];
@@ -81,7 +81,7 @@ export default function UploadProfilePicture(props: UploadProfilePictureProps) {
     );
   };
 
-  const handleSubmit = async (e: Event) => {
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setError('');
     setIsLoading(true);
diff --git a/src/components/UserProgress/ProgressShareButton.tsx b/src/components/UserProgress/ProgressShareButton.tsx
index 7bbc0f5fc..5afd0f5fc 100644
--- a/src/components/UserProgress/ProgressShareButton.tsx
+++ b/src/components/UserProgress/ProgressShareButton.tsx
@@ -3,6 +3,7 @@ import { useCopyText } from '../../hooks/use-copy-text';
 import type { ResourceType } from '../../lib/resource-progress';
 import { CheckIcon } from '../ReactIcons/CheckIcon';
 import { ShareIcon } from '../ReactIcons/ShareIcon';
+import { isLoggedIn } from '../../lib/jwt';
 
 type ProgressShareButtonProps = {
   resourceId: string;
diff --git a/src/components/UserProgress/UserProgressModal.tsx b/src/components/UserProgress/UserProgressModal.tsx
index 1b565ba71..ad618a990 100644
--- a/src/components/UserProgress/UserProgressModal.tsx
+++ b/src/components/UserProgress/UserProgressModal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'react';
 import { wireframeJSONToSVG } from 'roadmap-renderer';
 import '../FrameRenderer/FrameRenderer.css';
 import { useOutsideClick } from '../../hooks/use-outside-click';
@@ -43,12 +43,7 @@ export function UserProgressModal(props: ProgressMapProps) {
 
   const resourceSvgEl = useRef<HTMLDivElement>(null);
   const popupBodyEl = useRef<HTMLDivElement>(null);
-
   const currentUser = useAuth();
-  if (!userId || currentUser?.id === userId) {
-    deleteUrlParam('s');
-    return null;
-  }
 
   const [showModal, setShowModal] = useState(!!userId);
   const [resourceSvg, setResourceSvg] = useState<SVGElement | null>(null);
@@ -114,7 +109,7 @@ export function UserProgressModal(props: ProgressMapProps) {
   });
 
   useEffect(() => {
-    if (!resourceJsonUrl || !resourceId || !resourceType) {
+    if (!resourceJsonUrl || !resourceId || !resourceType || !userId) {
       return;
     }
 
@@ -182,14 +177,19 @@ export function UserProgressModal(props: ProgressMapProps) {
   const userLearning = progress?.learning?.length || 0;
   const userSkipped = progress?.skipped?.length || 0;
 
+  if (!userId || currentUser?.id === userId) {
+    deleteUrlParam('s');
+    return null;
+  }
+
   if (!showModal) {
     return null;
   }
 
   if (isLoading || error) {
     return (
-      <div class="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
-        <div class="relative mx-auto flex h-full w-full items-center justify-center">
+      <div className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+        <div className="relative mx-auto flex h-full w-full items-center justify-center">
           <div className="popup-body relative rounded-lg bg-white p-5 shadow">
             <div className="flex items-center">
               {isLoading && (
@@ -217,12 +217,12 @@ export function UserProgressModal(props: ProgressMapProps) {
   return (
     <div
       id={'user-progress-modal'}
-      class="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"
+      className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"
     >
-      <div class="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto">
+      <div className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto">
         <div
           ref={popupBodyEl}
-          class={`popup-body relative rounded-lg bg-white pt-[1px] shadow`}
+          className={`popup-body relative rounded-lg bg-white pt-[1px] shadow`}
         >
           <div className="p-4">
             <div className="mb-5 mt-0 min-h-[28px] text-left sm:text-center md:mt-4 md:h-[60px]">
@@ -238,9 +238,9 @@ export function UserProgressModal(props: ProgressMapProps) {
               </p>
             </div>
             <p
-              class={`-mx-4 mb-3 flex items-center justify-start border-b border-t px-4 py-2 text-sm sm:hidden`}
+              className={`-mx-4 mb-3 flex items-center justify-start border-b border-t px-4 py-2 text-sm sm:hidden`}
             >
-              <span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+              <span className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
                 <span>{progressPercentage}</span>% Done
               </span>
 
@@ -249,32 +249,32 @@ export function UserProgressModal(props: ProgressMapProps) {
               </span>
             </p>
             <p
-              class={`-mx-4 mb-3 hidden items-center justify-center border-b border-t py-2 text-sm sm:flex ${
+              className={`-mx-4 mb-3 hidden items-center justify-center border-b border-t py-2 text-sm sm:flex ${
                 isLoading ? 'striped-loader' : ''
               }`}
             >
-              <span class="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+              <span className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
                 <span>{progressPercentage}</span>% Done
               </span>
 
               <span>
                 <span>{userDone}</span> completed
               </span>
-              <span class="mx-1.5 text-gray-400">·</span>
+              <span className="mx-1.5 text-gray-400">·</span>
               <span>
                 <span>{userLearning}</span> in progress
               </span>
 
               {userSkipped > 0 && (
                 <>
-                  <span class="mx-1.5 text-gray-400">·</span>
+                  <span className="mx-1.5 text-gray-400">·</span>
                   <span>
                     <span>{userSkipped}</span> skipped
                   </span>
                 </>
               )}
 
-              <span class="mx-1.5 text-gray-400">·</span>
+              <span className="mx-1.5 text-gray-400">·</span>
               <span>
                 <span>{userProgressTotal}</span> Total
               </span>
@@ -292,8 +292,8 @@ export function UserProgressModal(props: ProgressMapProps) {
             className={`absolute right-2.5 top-3 ml-auto inline-flex items-center rounded-lg bg-gray-100 bg-transparent p-1.5 text-sm text-gray-400 hover:text-gray-900 lg:hidden`}
             onClick={onClose}
           >
-            <img alt={'close'} src={CloseIcon} className="h-4 w-4" />
-            <span class="sr-only">Close modal</span>
+            <img alt={'close'} src={CloseIcon as any} className="h-4 w-4" />
+            <span className="sr-only">Close modal</span>
           </button>
         </div>
       </div>
diff --git a/src/hooks/use-copy-text.ts b/src/hooks/use-copy-text.ts
index f56429dbb..99bd6b94c 100644
--- a/src/hooks/use-copy-text.ts
+++ b/src/hooks/use-copy-text.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 
 export function useCopyText() {
   const [isCopied, setIsCopied] = useState(false);
diff --git a/src/hooks/use-keydown.ts b/src/hooks/use-keydown.ts
index 9d82fcc09..c4f18b00c 100644
--- a/src/hooks/use-keydown.ts
+++ b/src/hooks/use-keydown.ts
@@ -1,4 +1,4 @@
-import { useEffect } from 'preact/hooks';
+import { useEffect } from 'react';
 
 export function useKeydown(keyName: string, callback: any, deps: any[] = []) {
   useEffect(() => {
diff --git a/src/hooks/use-load-topic.ts b/src/hooks/use-load-topic.ts
index 3b3747e00..d946e9b52 100644
--- a/src/hooks/use-load-topic.ts
+++ b/src/hooks/use-load-topic.ts
@@ -1,4 +1,4 @@
-import { useEffect } from 'preact/hooks';
+import { useEffect } from 'react';
 import type { ResourceType } from '../lib/resource-progress';
 
 type CallbackType = (data: {
diff --git a/src/hooks/use-outside-click.ts b/src/hooks/use-outside-click.ts
index 02b5d88d2..3ad4aae20 100644
--- a/src/hooks/use-outside-click.ts
+++ b/src/hooks/use-outside-click.ts
@@ -1,4 +1,4 @@
-import { useEffect } from 'preact/hooks';
+import { useEffect } from 'react';
 
 export function useOutsideClick(ref: any, callback: any) {
   useEffect(() => {
diff --git a/src/hooks/use-params.ts b/src/hooks/use-params.ts
index f5714b4f1..9e782fcd0 100644
--- a/src/hooks/use-params.ts
+++ b/src/hooks/use-params.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "react";
 
 export function useParams<T = Record<string, any>>(): T {
   const [params, setParams] = useState<T>({} as T);
diff --git a/src/hooks/use-team-id.ts b/src/hooks/use-team-id.ts
index acdf7cbdf..01a248b63 100644
--- a/src/hooks/use-team-id.ts
+++ b/src/hooks/use-team-id.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 
 export function useTeamId() {
   const [teamId, setTeamId] = useState<string | null>(null);
diff --git a/src/hooks/use-toggle-topic.ts b/src/hooks/use-toggle-topic.ts
index fc4e6b06b..688be9a82 100644
--- a/src/hooks/use-toggle-topic.ts
+++ b/src/hooks/use-toggle-topic.ts
@@ -1,4 +1,4 @@
-import { useEffect } from 'preact/hooks';
+import { useEffect } from 'react';
 import type { ResourceType } from '../lib/resource-progress';
 
 type CallbackType = (data: {
diff --git a/src/icons/accept.svg b/src/icons/accept.svg
index eb94efc4b..0b5c9b66b 100644
--- a/src/icons/accept.svg
+++ b/src/icons/accept.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#000" class="w-6 h-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+  <path stroke-linecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
 </svg>
diff --git a/src/icons/best-practices.svg b/src/icons/best-practices.svg
index f458219bf..ca58494ca 100644
--- a/src/icons/best-practices.svg
+++ b/src/icons/best-practices.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-     stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+     stroke-width="1.5" stroke-linecap="round" strokeLinejoin="round">
     <line x1="10" x2="21" y1="6" y2="6"></line>
     <line x1="10" x2="21" y1="12" y2="12"></line>
     <line x1="10" x2="21" y1="18" y2="18"></line>
diff --git a/src/icons/building.svg b/src/icons/building.svg
index 38e49adc7..2d57e256c 100644
--- a/src/icons/building.svg
+++ b/src/icons/building.svg
@@ -1 +1 @@
-<svg data-v-56bd7dfc="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building-2"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path><path d="M10 6h4"></path><path d="M10 10h4"></path><path d="M10 14h4"></path><path d="M10 18h4"></path></svg>
\ No newline at end of file
+<svg data-v-56bd7dfc="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" strokeLinejoin="round" class="lucide lucide-building-2"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path><path d="M10 6h4"></path><path d="M10 10h4"></path><path d="M10 14h4"></path><path d="M10 18h4"></path></svg>
\ No newline at end of file
diff --git a/src/icons/chat.svg b/src/icons/chat.svg
index 7ae401da7..8baf95b34 100644
--- a/src/icons/chat.svg
+++ b/src/icons/chat.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle"><path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" strokeLinejoin="round" class="lucide lucide-message-circle"><path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z"/></svg>
\ No newline at end of file
diff --git a/src/icons/chevron-down.svg b/src/icons/chevron-down.svg
index ac802d948..2f7875d34 100644
--- a/src/icons/chevron-down.svg
+++ b/src/icons/chevron-down.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+  <path stroke-linecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
 </svg>
diff --git a/src/icons/close-dark.svg b/src/icons/close-dark.svg
index 44ce7aae5..9651a63cc 100644
--- a/src/icons/close-dark.svg
+++ b/src/icons/close-dark.svg
@@ -1,5 +1,5 @@
 <svg aria-hidden="true" class="w-5 h-5" fill="#000" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd"
         d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-        clip-rule="evenodd"></path>
+        clipRule="evenodd"></path>
 </svg>
\ No newline at end of file
diff --git a/src/icons/close.svg b/src/icons/close.svg
index d9c4669e7..cb1669657 100644
--- a/src/icons/close.svg
+++ b/src/icons/close.svg
@@ -1,5 +1,5 @@
 <svg aria-hidden="true" class="w-5 h-5" fill="#c6c7c7" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd"
         d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-        clip-rule="evenodd"></path>
+        clipRule="evenodd"></path>
 </svg>
\ No newline at end of file
diff --git a/src/icons/cog.svg b/src/icons/cog.svg
index f390a3b32..e5ef33a2b 100644
--- a/src/icons/cog.svg
+++ b/src/icons/cog.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
-  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+  <path stroke-linecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+  <path stroke-linecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
 </svg>
diff --git a/src/icons/copy.svg b/src/icons/copy.svg
index 93e4fcd3e..e0da7c996 100644
--- a/src/icons/copy.svg
+++ b/src/icons/copy.svg
@@ -1 +1 @@
-<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg>
+<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" strokeLinejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg>
diff --git a/src/icons/down.svg b/src/icons/down.svg
index b72850429..c440523af 100644
--- a/src/icons/down.svg
+++ b/src/icons/down.svg
@@ -1,4 +1,4 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24"
+<svg clipRule="evenodd" fill-rule="evenodd" strokeLinejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg">
     <path d="m16.843 10.211c.108-.141.157-.3.157-.456 0-.389-.306-.755-.749-.755h-8.501c-.445 0-.75.367-.75.755 0 .157.05.316.159.457 1.203 1.554 3.252 4.199 4.258 5.498.142.184.36.29.592.29.23 0 .449-.107.591-.291 1.002-1.299 3.044-3.945 4.243-5.498z" fill="currentColor" />
 </svg>
\ No newline at end of file
diff --git a/src/icons/dropdown.svg b/src/icons/dropdown.svg
index c830ddfd0..76f6d99c3 100644
--- a/src/icons/dropdown.svg
+++ b/src/icons/dropdown.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+  <path stroke-linecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
 </svg>
diff --git a/src/icons/external-link.svg b/src/icons/external-link.svg
index 9817b31fe..c6d2bef2b 100644
--- a/src/icons/external-link.svg
+++ b/src/icons/external-link.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" x2="21" y1="14" y2="3"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" strokeLinejoin="round" class="lucide lucide-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" x2="21" y1="14" y2="3"/></svg>
\ No newline at end of file
diff --git a/src/icons/group.svg b/src/icons/group.svg
index 672ab9d4c..1ea569d0c 100644
--- a/src/icons/group.svg
+++ b/src/icons/group.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" strokeLinejoin="round" class="lucide lucide-users"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
\ No newline at end of file
diff --git a/src/icons/guide.svg b/src/icons/guide.svg
index 4a7ec8fb0..204045637 100644
--- a/src/icons/guide.svg
+++ b/src/icons/guide.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
+    <path stroke-linecap="round" strokeLinejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
 </svg>
diff --git a/src/icons/home.svg b/src/icons/home.svg
index 4cf85cc7e..f6d3f15ca 100644
--- a/src/icons/home.svg
+++ b/src/icons/home.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+    <path stroke-linecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
 </svg>
diff --git a/src/icons/linkedin.svg b/src/icons/linkedin.svg
index 3f9e223bb..16735c929 100644
--- a/src/icons/linkedin.svg
+++ b/src/icons/linkedin.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0,0,256,256">
-<g transform="translate(-26.66667,-26.66667) scale(1.20833,1.20833)"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.33333,5.33333)"><path d="M42,37c0,2.762 -2.238,5 -5,5h-26c-2.761,0 -5,-2.238 -5,-5v-26c0,-2.762 2.239,-5 5,-5h26c2.762,0 5,2.238 5,5z" fill="#0288d1"></path><path d="M12,19h5v17h-5zM14.485,17h-0.028c-1.492,0 -2.457,-1.112 -2.457,-2.501c0,-1.419 0.995,-2.499 2.514,-2.499c1.521,0 2.458,1.08 2.486,2.499c0,1.388 -0.965,2.501 -2.515,2.501zM36,36h-5v-9.099c0,-2.198 -1.225,-3.698 -3.192,-3.698c-1.501,0 -2.313,1.012 -2.707,1.99c-0.144,0.35 -0.101,1.318 -0.101,1.807v9h-5v-17h5v2.616c0.721,-1.116 1.85,-2.616 4.738,-2.616c3.578,0 6.261,2.25 6.261,7.274l0.001,9.726z" fill="#ffffff"></path></g></g></g>
+<g transform="translate(-26.66667,-26.66667) scale(1.20833,1.20833)"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" strokeLinejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.33333,5.33333)"><path d="M42,37c0,2.762 -2.238,5 -5,5h-26c-2.761,0 -5,-2.238 -5,-5v-26c0,-2.762 2.239,-5 5,-5h26c2.762,0 5,2.238 5,5z" fill="#0288d1"></path><path d="M12,19h5v17h-5zM14.485,17h-0.028c-1.492,0 -2.457,-1.112 -2.457,-2.501c0,-1.419 0.995,-2.499 2.514,-2.499c1.521,0 2.458,1.08 2.486,2.499c0,1.388 -0.965,2.501 -2.515,2.501zM36,36h-5v-9.099c0,-2.198 -1.225,-3.698 -3.192,-3.698c-1.501,0 -2.313,1.012 -2.707,1.99c-0.144,0.35 -0.101,1.318 -0.101,1.807v9h-5v-17h5v2.616c0.721,-1.116 1.85,-2.616 4.738,-2.616c3.578,0 6.261,2.25 6.261,7.274l0.001,9.726z" fill="#ffffff"></path></g></g></g>
 </svg>
\ No newline at end of file
diff --git a/src/icons/map.svg b/src/icons/map.svg
index b297e8a23..e303c68e4 100644
--- a/src/icons/map.svg
+++ b/src/icons/map.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map"><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"/><line x1="9" x2="9" y1="3" y2="18"/><line x1="15" x2="15" y1="6" y2="21"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" strokeLinejoin="round" class="lucide lucide-map"><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"/><line x1="9" x2="9" y1="3" y2="18"/><line x1="15" x2="15" y1="6" y2="21"/></svg>
\ No newline at end of file
diff --git a/src/icons/more-vertical.svg b/src/icons/more-vertical.svg
index 1430f373d..a708fcbf1 100644
--- a/src/icons/more-vertical.svg
+++ b/src/icons/more-vertical.svg
@@ -1 +1 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 16.495c1.242 0 2.25 1.008 2.25 2.25s-1.008 2.25-2.25 2.25-2.25-1.008-2.25-2.25 1.008-2.25 2.25-2.25zm0-6.75c1.242 0 2.25 1.008 2.25 2.25s-1.008 2.25-2.25 2.25-2.25-1.008-2.25-2.25 1.008-2.25 2.25-2.25zm0-6.75c1.242 0 2.25 1.008 2.25 2.25s-1.008 2.25-2.25 2.25-2.25-1.008-2.25-2.25 1.008-2.25 2.25-2.25z"/></svg>
\ No newline at end of file
+<svg clipRule="evenodd" fill-rule="evenodd" strokeLinejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 16.495c1.242 0 2.25 1.008 2.25 2.25s-1.008 2.25-2.25 2.25-2.25-1.008-2.25-2.25 1.008-2.25 2.25-2.25zm0-6.75c1.242 0 2.25 1.008 2.25 2.25s-1.008 2.25-2.25 2.25-2.25-1.008-2.25-2.25 1.008-2.25 2.25-2.25zm0-6.75c1.242 0 2.25 1.008 2.25 2.25s-1.008 2.25-2.25 2.25-2.25-1.008-2.25-2.25 1.008-2.25 2.25-2.25z"/></svg>
\ No newline at end of file
diff --git a/src/icons/notification.svg b/src/icons/notification.svg
index 0853fe813..7ced1a340 100644
--- a/src/icons/notification.svg
+++ b/src/icons/notification.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+  <path stroke-linecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
 </svg>
diff --git a/src/icons/plus.svg b/src/icons/plus.svg
index f1162758a..efa266e7a 100644
--- a/src/icons/plus.svg
+++ b/src/icons/plus.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-plus-2"><path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4"/><polyline points="14 2 14 8 20 8"/><path d="M3 15h6"/><path d="M6 12v6"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" strokeLinejoin="round" class="lucide lucide-file-plus-2"><path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4"/><polyline points="14 2 14 8 20 8"/><path d="M3 15h6"/><path d="M6 12v6"/></svg>
\ No newline at end of file
diff --git a/src/icons/roadmap.svg b/src/icons/roadmap.svg
index 0bb7c2436..e4dd662a1 100644
--- a/src/icons/roadmap.svg
+++ b/src/icons/roadmap.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-milestone"><path d="M18 6H5a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h13l4-3.5L18 6Z"></path><path d="M12 13v8"></path><path d="M12 3v3"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" strokeLinejoin="round" class="lucide lucide-milestone"><path d="M18 6H5a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h13l4-3.5L18 6Z"></path><path d="M12 13v8"></path><path d="M12 3v3"></path></svg>
diff --git a/src/icons/spinner.svg b/src/icons/spinner.svg
index 8fb5d6030..ae6f6f2f2 100644
--- a/src/icons/spinner.svg
+++ b/src/icons/spinner.svg
@@ -1,4 +1,4 @@
 <svg class='h-6 w-6 sm:w-12 sm:h-12 text-gray-200 animate-spin fill-blue-600' viewBox="0 0 93 93" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M46.5 93C72.1812 93 93 72.1812 93 46.5C93 20.8188 72.1812 0 46.5 0C20.8188 0 0 20.8188 0 46.5C0 72.1812 20.8188 93 46.5 93ZM46.5 77C63.3447 77 77 63.3447 77 46.5C77 29.6553 63.3447 16 46.5 16C29.6553 16 16 29.6553 16 46.5C16 63.3447 29.6553 77 46.5 77Z" fill="#e5e7eb"/>
+  <path fill-rule="evenodd" clipRule="evenodd" d="M46.5 93C72.1812 93 93 72.1812 93 46.5C93 20.8188 72.1812 0 46.5 0C20.8188 0 0 20.8188 0 46.5C0 72.1812 20.8188 93 46.5 93ZM46.5 77C63.3447 77 77 63.3447 77 46.5C77 29.6553 63.3447 16 46.5 16C29.6553 16 16 29.6553 16 46.5C16 63.3447 29.6553 77 46.5 77Z" fill="#e5e7eb"/>
   <path d="M84.9746 49.5667C89.3257 49.9135 93.2042 46.6479 92.81 42.3008C92.3588 37.3251 91.1071 32.437 89.0872 27.8298C86.0053 20.7998 81.2311 14.6422 75.1905 9.90623C69.15 5.17027 62.031 2.00329 54.4687 0.687889C49.5126 -0.174203 44.467 -0.223422 39.5274 0.525737C35.2118 1.18024 32.966 5.72596 34.3411 9.86865V9.86865C35.7161 14.0113 40.2118 16.1424 44.5681 15.8677C46.9635 15.7166 49.3773 15.8465 51.7599 16.2609C56.7515 17.1291 61.4505 19.2196 65.4377 22.3456C69.4249 25.4717 72.5762 29.5362 74.6105 34.1764C75.5815 36.3912 76.2835 38.7044 76.7084 41.0666C77.4811 45.3626 80.6234 49.2199 84.9746 49.5667V49.5667Z" fill="#2463eb" />
 </svg>
diff --git a/src/icons/team-progress.svg b/src/icons/team-progress.svg
index fbd02bc2e..9f3858106 100644
--- a/src/icons/team-progress.svg
+++ b/src/icons/team-progress.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-line-chart"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" strokeLinejoin="round" class="lucide lucide-line-chart"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg>
\ No newline at end of file
diff --git a/src/icons/user-plus.svg b/src/icons/user-plus.svg
index e2893d04a..319f935d8 100644
--- a/src/icons/user-plus.svg
+++ b/src/icons/user-plus.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-plus-2"><path d="M14 19a6 6 0 0 0-12 0"/><circle cx="8" cy="9" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" strokeLinejoin="round" class="lucide lucide-user-plus-2"><path d="M14 19a6 6 0 0 0-12 0"/><circle cx="8" cy="9" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
\ No newline at end of file
diff --git a/src/icons/users.svg b/src/icons/users.svg
index 4fd47fca6..e34d4def9 100644
--- a/src/icons/users.svg
+++ b/src/icons/users.svg
@@ -1 +1 @@
-<svg data-v-f24af897="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon customizable"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
\ No newline at end of file
+<svg data-v-f24af897="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" strokeLinejoin="round" class="lucide-icon customizable"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
\ No newline at end of file
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 22ad7fa90..36cfed8dc 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -156,7 +156,7 @@ const gaPageIdentifier = Astro.url.pathname
     <slot name="login-popup">
       <LoginPopup />
     </slot>
-    <Toaster client:only />
+    <Toaster client:only="react" />
     <CommandMenu client:idle />
     <PageProgress initialMessage={initialLoadingMessage} client:idle />
     <PageSponsor
diff --git a/src/lib/best-practice-topic.ts b/src/lib/best-practice-topic.ts
index abae4bc0f..2e0d7cd3d 100644
--- a/src/lib/best-practice-topic.ts
+++ b/src/lib/best-practice-topic.ts
@@ -57,7 +57,7 @@ export async function getAllBestPracticeTopicFiles(): Promise<
       url: topicUrl,
       heading: firstHeading?.text,
       file: fileContent,
-      bestPractice: currentBestPractice.frontmatter,
+      bestPractice: currentBestPractice?.frontmatter,
       bestPracticeId: bestPracticeId,
     };
   }
diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro
index ea7677d27..00832d16e 100644
--- a/src/pages/[roadmapId]/index.astro
+++ b/src/pages/[roadmapId]/index.astro
@@ -121,7 +121,7 @@ if (roadmapFAQs.length) {
     <UserProgressModal
       resourceId={roadmapId}
       resourceType='roadmap'
-      client:only
+      client:only="react"
     />
 
     <FAQs faqs={roadmapFAQs} />
diff --git a/src/pages/account/friends.astro b/src/pages/account/friends.astro
index bfdbd64b9..fefc393bb 100644
--- a/src/pages/account/friends.astro
+++ b/src/pages/account/friends.astro
@@ -10,6 +10,6 @@ import { FriendsPage } from '../../components/Friends/FriendsPage';
   initialLoadingMessage='Loading friends'
 >
   <AccountSidebar activePageId='friends' activePageTitle='Friends'>
-    <FriendsPage client:only />
+    <FriendsPage client:only="react" />
   </AccountSidebar>
 </AccountLayout>
diff --git a/src/pages/account/index.astro b/src/pages/account/index.astro
index 2f5125154..056751212 100644
--- a/src/pages/account/index.astro
+++ b/src/pages/account/index.astro
@@ -6,6 +6,6 @@ import AccountLayout from '../../layouts/AccountLayout.astro';
 
 <AccountLayout title='Update Profile' noIndex={true} initialLoadingMessage={'Loading activity'}>
   <AccountSidebar activePageId='activity' activePageTitle='Activity'>
-    <ActivityPage client:load />
+    <ActivityPage client:only="react" />
   </AccountSidebar>
 </AccountLayout>
diff --git a/src/pages/account/road-card.astro b/src/pages/account/road-card.astro
index 657278254..afa7993c9 100644
--- a/src/pages/account/road-card.astro
+++ b/src/pages/account/road-card.astro
@@ -10,6 +10,6 @@ import { RoadCardPage } from '../../components/RoadCard/RoadCardPage';
   initialLoadingMessage='Preparing card'
 >
   <AccountSidebar activePageId='road-card' activePageTitle='Road Card'>
-    <RoadCardPage client:load />
+    <RoadCardPage client:only="react" />
   </AccountSidebar>
 </AccountLayout>
diff --git a/src/pages/account/settings.astro b/src/pages/account/settings.astro
index 328aceb55..55b4de96b 100644
--- a/src/pages/account/settings.astro
+++ b/src/pages/account/settings.astro
@@ -12,7 +12,7 @@ import DeleteAccount from '../../components/DeleteAccount/DeleteAccount.astro';
   initialLoadingMessage={'Loading settings'}
 >
   <AccountSidebar activePageId='settings' activePageTitle='Settings'>
-    <UpdatePasswordForm client:load />
+    <UpdatePasswordForm client:only="react" />
     <hr class='my-8' />
     <DeleteAccount />
   </AccountSidebar>
diff --git a/src/pages/befriend.astro b/src/pages/befriend.astro
index 4b9818af1..c2a33c25c 100644
--- a/src/pages/befriend.astro
+++ b/src/pages/befriend.astro
@@ -10,5 +10,5 @@ import LoginPopup from "../components/AuthenticationFlow/LoginPopup.astro";
   initialLoadingMessage={'Loading invite'}
 >
   <LoginPopup />
-  <Befriend client:only />
+  <Befriend client:only="react" />
 </AccountLayout>
diff --git a/src/pages/best-practices/[bestPracticeId]/index.astro b/src/pages/best-practices/[bestPracticeId]/index.astro
index bbd9311e4..594db6f31 100644
--- a/src/pages/best-practices/[bestPracticeId]/index.astro
+++ b/src/pages/best-practices/[bestPracticeId]/index.astro
@@ -47,8 +47,6 @@ if (bestPracticeData.schema) {
     })
   );
 }
-
-const contentContributionLink = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/best-practices/${bestPracticeId}/content`;
 ---
 
 <BaseLayout
@@ -109,7 +107,7 @@ const contentContributionLink = `https://github.com/kamranahmedse/developer-road
   <UserProgressModal
     resourceId={bestPracticeId}
     resourceType='best-practice'
-    client:only
+    client:only="react"
   />
 
   {bestPracticeData.isUpcoming && <UpcomingForm />}
diff --git a/src/pages/respond-invite.astro b/src/pages/respond-invite.astro
index 3abff1484..7d7d624f7 100644
--- a/src/pages/respond-invite.astro
+++ b/src/pages/respond-invite.astro
@@ -10,5 +10,5 @@ import LoginPopup from "../components/AuthenticationFlow/LoginPopup.astro";
   initialLoadingMessage={'Loading invite'}
 >
   <LoginPopup />
-  <RespondInviteForm client:only />
+  <RespondInviteForm client:only="react" />
 </AccountLayout>
diff --git a/src/pages/team/index.astro b/src/pages/team/index.astro
index 64b6ca422..18c2b659e 100644
--- a/src/pages/team/index.astro
+++ b/src/pages/team/index.astro
@@ -1,7 +1,6 @@
 ---
 import AccountSidebar from '../../components/AccountSidebar.astro';
 import { TeamsList } from '../../components/TeamsList';
-import { ActivityPage } from '../../components/Activity/ActivityPage';
 import AccountLayout from '../../layouts/AccountLayout.astro';
 ---
 
@@ -11,6 +10,6 @@ import AccountLayout from '../../layouts/AccountLayout.astro';
   initialLoadingMessage={'Loading teams'}
 >
   <AccountSidebar hasDesktopSidebar={false} activePageId='team' activePageTitle='Teams'>
-    <TeamsList client:load />
+    <TeamsList client:only="react" />
   </AccountSidebar>
 </AccountLayout>
diff --git a/src/pages/team/members.astro b/src/pages/team/members.astro
index 34dfc03c5..22695fbce 100644
--- a/src/pages/team/members.astro
+++ b/src/pages/team/members.astro
@@ -10,6 +10,6 @@ import AccountLayout from '../../layouts/AccountLayout.astro';
   initialLoadingMessage='Loading members'
 >
   <TeamSidebar activePageId='members' client:load>
-    <TeamMembersPage client:only />
+    <TeamMembersPage client:only="react" />
   </TeamSidebar>
 </AccountLayout>
diff --git a/src/pages/team/new.astro b/src/pages/team/new.astro
index fa28590cf..d03b8e854 100644
--- a/src/pages/team/new.astro
+++ b/src/pages/team/new.astro
@@ -6,6 +6,6 @@ import { CreateTeamForm } from '../../components/CreateTeam/CreateTeamForm';
 
 <AccountLayout title='Create Team' noIndex={true}>
   <AccountSidebar hasDesktopSidebar={false}  activePageId='create-team' activePageTitle='Create Team'>
-    <CreateTeamForm client:only />
+    <CreateTeamForm client:only="react" />
   </AccountSidebar>
 </AccountLayout>
diff --git a/src/pages/team/progress.astro b/src/pages/team/progress.astro
index 71c1b6699..3648d08ee 100644
--- a/src/pages/team/progress.astro
+++ b/src/pages/team/progress.astro
@@ -6,6 +6,6 @@ import AccountLayout from '../../layouts/AccountLayout.astro';
 
 <AccountLayout title='Team Progress' noIndex={true} initialLoadingMessage='Loading Progress'>
   <TeamSidebar activePageId='progress' client:load>
-    <TeamProgressPage client:only />
+    <TeamProgressPage client:only="react" />
   </TeamSidebar>
 </AccountLayout>
diff --git a/src/pages/team/roadmaps.astro b/src/pages/team/roadmaps.astro
index dbb0b7b87..1f2f8d63b 100644
--- a/src/pages/team/roadmaps.astro
+++ b/src/pages/team/roadmaps.astro
@@ -6,6 +6,6 @@ import AccountLayout from '../../layouts/AccountLayout.astro';
 
 <AccountLayout title='Roadmaps' noIndex={true} initialLoadingMessage='Loading Roadmaps'>
   <TeamSidebar activePageId='roadmaps' client:load>
-    <TeamRoadmaps client:only />
+    <TeamRoadmaps client:only="react" />
   </TeamSidebar>
 </AccountLayout>
diff --git a/tsconfig.json b/tsconfig.json
index 6dbd39320..032ad645d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
-	"extends": "astro/tsconfigs/strict",
-	"compilerOptions": {
-		"jsx": "react-jsx",
-		"jsxImportSource": "preact"
-	}
-}
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}
\ No newline at end of file