diff --git a/package.json b/package.json
index 52a4438..9c8e1a4 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
 		"@playwright/test": "^1.37.0",
 		"@sveltejs/adapter-auto": "^1.0.3",
 		"@sveltejs/adapter-vercel": "^1.0.6",
-		"@sveltejs/kit": "^1.22.6",
+		"@sveltejs/kit": "^1.24.1",
 		"@types/cookie": "^0.5.1",
 		"@types/node": "^18.17.5",
 		"@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -37,27 +37,27 @@
 		"eslint-plugin-svelte": "^2.32.4",
 		"just-clone": "^6.2.0",
 		"just-debounce-it": "^3.2.0",
-		"postcss": "^8.4.27",
+		"postcss": "^8.4.29",
 		"postcss-import": "^15.1.0",
 		"postcss-load-config": "^4.0.1",
 		"postcss-preset-env": "^8.5.1",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
-		"prisma": "^5.1.1",
+		"prisma": "^5.2.0",
 		"sass": "^1.65.1",
 		"svelte": "^4.2.0",
 		"svelte-check": "^3.5.0",
 		"svelte-preprocess": "^5.0.4",
 		"svelte-sequential-preprocessor": "^2.0.1",
 		"sveltekit-flash-message": "^2.2.0",
-		"sveltekit-superforms": "^1.6.0",
+		"sveltekit-superforms": "^1.6.1",
 		"tailwindcss": "^3.3.3",
 		"ts-node": "^10.9.1",
 		"tslib": "^2.6.1",
 		"typescript": "^5.1.6",
 		"vite": "^4.4.9",
 		"vitest": "^0.25.3",
-		"zod": "^3.21.4"
+		"zod": "^3.22.2"
 	},
 	"type": "module",
 	"engines": {
@@ -67,12 +67,12 @@
 	"dependencies": {
 		"@axiomhq/axiom-node": "^0.12.0",
 		"@fontsource/fira-mono": "^4.5.10",
-		"@iconify-icons/line-md": "^1.2.23",
+		"@iconify-icons/line-md": "^1.2.26",
 		"@iconify-icons/mdi": "^1.2.47",
 		"@lucia-auth/adapter-mysql": "^2.0.0",
 		"@lucia-auth/adapter-prisma": "^3.0.1",
 		"@lukeed/uuid": "^2.0.1",
-		"@melt-ui/svelte": "^0.37.5",
+		"@melt-ui/svelte": "^0.37.6",
 		"@prisma/client": "5.1.1",
 		"@types/feather-icons": "^4.29.1",
 		"bits-ui": "^0.0.27",
@@ -80,12 +80,13 @@
 		"clsx": "^1.2.1",
 		"cookie": "^0.5.0",
 		"feather-icons": "^4.29.1",
+		"formsnap": "^0.0.9",
 		"iconify-icon": "^1.0.8",
 		"just-kebab-case": "^4.2.0",
 		"loader": "^2.1.1",
-		"lucia": "^2.4.0",
+		"lucia": "^2.4.2",
 		"lucide-svelte": "^0.256.1",
-		"open-props": "^1.5.11",
+		"open-props": "^1.5.13",
 		"radix-svelte": "^0.9.0",
 		"svelte-french-toast": "^1.2.0",
 		"svelte-lazy": "^1.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 224d944..dd88e33 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,32 +12,32 @@ dependencies:
     specifier: ^4.5.10
     version: 4.5.10
   '@iconify-icons/line-md':
-    specifier: ^1.2.23
-    version: 1.2.23
+    specifier: ^1.2.26
+    version: 1.2.26
   '@iconify-icons/mdi':
     specifier: ^1.2.47
     version: 1.2.47
   '@lucia-auth/adapter-mysql':
     specifier: ^2.0.0
-    version: 2.0.0(lucia@2.4.0)
+    version: 2.0.0(lucia@2.4.2)
   '@lucia-auth/adapter-prisma':
     specifier: ^3.0.1
-    version: 3.0.1(@prisma/client@5.1.1)(lucia@2.4.0)
+    version: 3.0.1(@prisma/client@5.1.1)(lucia@2.4.2)
   '@lukeed/uuid':
     specifier: ^2.0.1
     version: 2.0.1
   '@melt-ui/svelte':
-    specifier: ^0.37.5
-    version: 0.37.5(svelte@4.2.0)
+    specifier: ^0.37.6
+    version: 0.37.6(svelte@4.2.0)
   '@prisma/client':
     specifier: 5.1.1
-    version: 5.1.1(prisma@5.1.1)
+    version: 5.1.1(prisma@5.2.0)
   '@types/feather-icons':
     specifier: ^4.29.1
     version: 4.29.1
   bits-ui:
     specifier: ^0.0.27
-    version: 0.0.27(@sveltejs/kit@1.22.6)(svelte@4.2.0)
+    version: 0.0.27(@sveltejs/kit@1.24.1)(svelte@4.2.0)
   class-variance-authority:
     specifier: ^0.6.1
     version: 0.6.1
@@ -50,6 +50,9 @@ dependencies:
   feather-icons:
     specifier: ^4.29.1
     version: 4.29.1
+  formsnap:
+    specifier: ^0.0.9
+    version: 0.0.9(svelte@4.2.0)(sveltekit-superforms@1.6.1)(zod@3.22.2)
   iconify-icon:
     specifier: ^1.0.8
     version: 1.0.8
@@ -60,14 +63,14 @@ dependencies:
     specifier: ^2.1.1
     version: 2.1.1
   lucia:
-    specifier: ^2.4.0
-    version: 2.4.0
+    specifier: ^2.4.2
+    version: 2.4.2
   lucide-svelte:
     specifier: ^0.256.1
     version: 0.256.1(svelte@4.2.0)
   open-props:
-    specifier: ^1.5.11
-    version: 1.5.11
+    specifier: ^1.5.13
+    version: 1.5.13
   radix-svelte:
     specifier: ^0.9.0
     version: 0.9.0(svelte@4.2.0)
@@ -94,24 +97,24 @@ dependencies:
     version: 1.0.6(tailwindcss@3.3.3)
   zod-to-json-schema:
     specifier: ^3.21.4
-    version: 3.21.4(zod@3.21.4)
+    version: 3.21.4(zod@3.22.2)
 
 devDependencies:
   '@melt-ui/pp':
     specifier: ^0.1.2
-    version: 0.1.2(@melt-ui/svelte@0.37.5)(svelte@4.2.0)
+    version: 0.1.2(@melt-ui/svelte@0.37.6)(svelte@4.2.0)
   '@playwright/test':
     specifier: ^1.37.0
     version: 1.37.0
   '@sveltejs/adapter-auto':
     specifier: ^1.0.3
-    version: 1.0.3(@sveltejs/kit@1.22.6)
+    version: 1.0.3(@sveltejs/kit@1.24.1)
   '@sveltejs/adapter-vercel':
     specifier: ^1.0.6
-    version: 1.0.6(@sveltejs/kit@1.22.6)
+    version: 1.0.6(@sveltejs/kit@1.24.1)
   '@sveltejs/kit':
-    specifier: ^1.22.6
-    version: 1.22.6(svelte@4.2.0)(vite@4.4.9)
+    specifier: ^1.24.1
+    version: 1.24.1(svelte@4.2.0)(vite@4.4.9)
   '@types/cookie':
     specifier: ^0.5.1
     version: 0.5.1
@@ -126,7 +129,7 @@ devDependencies:
     version: 5.62.0(eslint@8.47.0)(typescript@5.1.6)
   autoprefixer:
     specifier: ^10.4.15
-    version: 10.4.15(postcss@8.4.27)
+    version: 10.4.15(postcss@8.4.29)
   eslint:
     specifier: ^8.47.0
     version: 8.47.0
@@ -143,17 +146,17 @@ devDependencies:
     specifier: ^3.2.0
     version: 3.2.0
   postcss:
-    specifier: ^8.4.27
-    version: 8.4.27
+    specifier: ^8.4.29
+    version: 8.4.29
   postcss-import:
     specifier: ^15.1.0
-    version: 15.1.0(postcss@8.4.27)
+    version: 15.1.0(postcss@8.4.29)
   postcss-load-config:
     specifier: ^4.0.1
-    version: 4.0.1(postcss@8.4.27)(ts-node@10.9.1)
+    version: 4.0.1(postcss@8.4.29)(ts-node@10.9.1)
   postcss-preset-env:
     specifier: ^8.5.1
-    version: 8.5.1(postcss@8.4.27)
+    version: 8.5.1(postcss@8.4.29)
   prettier:
     specifier: ^2.8.8
     version: 2.8.8
@@ -161,8 +164,8 @@ devDependencies:
     specifier: ^2.10.1
     version: 2.10.1(prettier@2.8.8)(svelte@4.2.0)
   prisma:
-    specifier: ^5.1.1
-    version: 5.1.1
+    specifier: ^5.2.0
+    version: 5.2.0
   sass:
     specifier: ^1.65.1
     version: 1.65.1
@@ -171,19 +174,19 @@ devDependencies:
     version: 4.2.0
   svelte-check:
     specifier: ^3.5.0
-    version: 3.5.0(postcss-load-config@4.0.1)(postcss@8.4.27)(sass@1.65.1)(svelte@4.2.0)
+    version: 3.5.0(postcss-load-config@4.0.1)(postcss@8.4.29)(sass@1.65.1)(svelte@4.2.0)
   svelte-preprocess:
     specifier: ^5.0.4
-    version: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.27)(sass@1.65.1)(svelte@4.2.0)(typescript@5.1.6)
+    version: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.29)(sass@1.65.1)(svelte@4.2.0)(typescript@5.1.6)
   svelte-sequential-preprocessor:
     specifier: ^2.0.1
     version: 2.0.1
   sveltekit-flash-message:
     specifier: ^2.2.0
-    version: 2.2.0(@sveltejs/kit@1.22.6)(svelte@4.2.0)
+    version: 2.2.0(@sveltejs/kit@1.24.1)(svelte@4.2.0)
   sveltekit-superforms:
-    specifier: ^1.6.0
-    version: 1.6.0(@sveltejs/kit@1.22.6)(svelte@4.2.0)(zod@3.21.4)
+    specifier: ^1.6.1
+    version: 1.6.1(@sveltejs/kit@1.24.1)(svelte@4.2.0)(zod@3.22.2)
   tailwindcss:
     specifier: ^3.3.3
     version: 3.3.3(ts-node@10.9.1)
@@ -203,8 +206,8 @@ devDependencies:
     specifier: ^0.25.3
     version: 0.25.8(sass@1.65.1)
   zod:
-    specifier: ^3.21.4
-    version: 3.21.4
+    specifier: ^3.22.2
+    version: 3.22.2
 
 packages:
 
@@ -364,18 +367,18 @@ packages:
       '@csstools/css-tokenizer': 2.1.1
     dev: true
 
-  /@csstools/postcss-cascade-layers@3.0.1(postcss@8.4.27):
+  /@csstools/postcss-cascade-layers@3.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-dD8W98dOYNOH/yX4V4HXOhfCOnvVAg8TtsL+qCGNoKXuq5z2C/d026wGWgySgC8cajXXo/wNezS31Glj5GcqrA==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
       '@csstools/selector-specificity': 2.2.0(postcss-selector-parser@6.0.13)
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /@csstools/postcss-color-function@2.2.3(postcss@8.4.27):
+  /@csstools/postcss-color-function@2.2.3(postcss@8.4.29):
     resolution: {integrity: sha512-b1ptNkr1UWP96EEHqKBWWaV5m/0hgYGctgA/RVZhONeP1L3T/8hwoqDm9bB23yVCfOgE9U93KI9j06+pEkJTvw==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
@@ -384,11 +387,11 @@ packages:
       '@csstools/css-color-parser': 1.2.0(@csstools/css-parser-algorithms@2.1.1)(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-parser-algorithms': 2.1.1(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-tokenizer': 2.1.1
-      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.27)
-      postcss: 8.4.27
+      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.29)
+      postcss: 8.4.29
     dev: true
 
-  /@csstools/postcss-color-mix-function@1.0.3(postcss@8.4.27):
+  /@csstools/postcss-color-mix-function@1.0.3(postcss@8.4.29):
     resolution: {integrity: sha512-QGXjGugTluqFZWzVf+S3wCiRiI0ukXlYqCi7OnpDotP/zaVTyl/aqZujLFzTOXy24BoWnu89frGMc79ohY5eog==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
@@ -397,21 +400,21 @@ packages:
       '@csstools/css-color-parser': 1.2.0(@csstools/css-parser-algorithms@2.1.1)(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-parser-algorithms': 2.1.1(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-tokenizer': 2.1.1
-      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.27)
-      postcss: 8.4.27
+      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.29)
+      postcss: 8.4.29
     dev: true
 
-  /@csstools/postcss-font-format-keywords@2.0.2(postcss@8.4.27):
+  /@csstools/postcss-font-format-keywords@2.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-iKYZlIs6JsNT7NKyRjyIyezTCHLh4L4BBB3F5Nx7Dc4Z/QmBgX+YJFuUSar8IM6KclGiAUFGomXFdYxAwJydlA==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-gradients-interpolation-method@3.0.6(postcss@8.4.27):
+  /@csstools/postcss-gradients-interpolation-method@3.0.6(postcss@8.4.29):
     resolution: {integrity: sha512-rBOBTat/YMmB0G8VHwKqDEx+RZ4KCU9j42K8LwS0IpZnyThalZZF7BCSsZ6TFlZhcRZKlZy3LLFI2pLqjNVGGA==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
@@ -420,11 +423,11 @@ packages:
       '@csstools/css-color-parser': 1.2.0(@csstools/css-parser-algorithms@2.1.1)(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-parser-algorithms': 2.1.1(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-tokenizer': 2.1.1
-      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.27)
-      postcss: 8.4.27
+      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.29)
+      postcss: 8.4.29
     dev: true
 
-  /@csstools/postcss-hwb-function@2.2.2(postcss@8.4.27):
+  /@csstools/postcss-hwb-function@2.2.2(postcss@8.4.29):
     resolution: {integrity: sha512-W5Y5oaJ382HSlbdGfPf60d7dAK6Hqf10+Be1yZbd/TNNrQ/3dDdV1c07YwOXPQ3PZ6dvFMhxbIbn8EC3ki3nEg==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
@@ -433,61 +436,61 @@ packages:
       '@csstools/css-color-parser': 1.2.0(@csstools/css-parser-algorithms@2.1.1)(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-parser-algorithms': 2.1.1(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-tokenizer': 2.1.1
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /@csstools/postcss-ic-unit@2.0.4(postcss@8.4.27):
+  /@csstools/postcss-ic-unit@2.0.4(postcss@8.4.29):
     resolution: {integrity: sha512-9W2ZbV7whWnr1Gt4qYgxMWzbevZMOvclUczT5vk4yR6vS53W/njiiUhtm/jh/BKYwQ1W3PECZjgAd2dH4ebJig==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.27)
-      postcss: 8.4.27
+      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.29)
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-is-pseudo-class@3.2.1(postcss@8.4.27):
+  /@csstools/postcss-is-pseudo-class@3.2.1(postcss@8.4.29):
     resolution: {integrity: sha512-AtANdV34kJl04Al62is3eQRk/BfOfyAvEmRJvbt+nx5REqImLC+2XhuE6skgkcPli1l8ONS67wS+l1sBzySc3Q==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
       '@csstools/selector-specificity': 2.2.0(postcss-selector-parser@6.0.13)
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /@csstools/postcss-logical-float-and-clear@1.0.1(postcss@8.4.27):
+  /@csstools/postcss-logical-float-and-clear@1.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-eO9z2sMLddvlfFEW5Fxbjyd03zaO7cJafDurK4rCqyRt9P7aaWwha0LcSzoROlcZrw1NBV2JAp2vMKfPMQO1xw==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /@csstools/postcss-logical-resize@1.0.1(postcss@8.4.27):
+  /@csstools/postcss-logical-resize@1.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-x1ge74eCSvpBkDDWppl+7FuD2dL68WP+wwP2qvdUcKY17vJksz+XoE1ZRV38uJgS6FNUwC0AxrPW5gy3MxsDHQ==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-logical-viewport-units@1.0.3(postcss@8.4.27):
+  /@csstools/postcss-logical-viewport-units@1.0.3(postcss@8.4.29):
     resolution: {integrity: sha512-6zqcyRg9HSqIHIPMYdt6THWhRmE5/tyHKJQLysn2TeDf/ftq7Em9qwMTx98t2C/7UxIsYS8lOiHHxAVjWn2WUg==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
       '@csstools/css-tokenizer': 2.1.1
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /@csstools/postcss-media-minmax@1.0.4(postcss@8.4.27):
+  /@csstools/postcss-media-minmax@1.0.4(postcss@8.4.29):
     resolution: {integrity: sha512-olnKTQk9+RMzpIpkjv55d44L4Ni02j8ZJoedJezQC5M03a56npcM1hx0apaTRG4Fz1wfPCQ0DBjQ8zsiJFelmA==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
@@ -497,10 +500,10 @@ packages:
       '@csstools/css-parser-algorithms': 2.2.0(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-tokenizer': 2.1.1
       '@csstools/media-query-list-parser': 2.1.1(@csstools/css-parser-algorithms@2.2.0)(@csstools/css-tokenizer@2.1.1)
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /@csstools/postcss-media-queries-aspect-ratio-number-values@1.0.4(postcss@8.4.27):
+  /@csstools/postcss-media-queries-aspect-ratio-number-values@1.0.4(postcss@8.4.29):
     resolution: {integrity: sha512-IwyTbyR8E2y3kh6Fhrs251KjKBJeUPV5GlnUKnpU70PRFEN2DolWbf2V4+o/B9+Oj77P/DullLTulWEQ8uFtAA==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
@@ -509,30 +512,30 @@ packages:
       '@csstools/css-parser-algorithms': 2.2.0(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-tokenizer': 2.1.1
       '@csstools/media-query-list-parser': 2.1.1(@csstools/css-parser-algorithms@2.2.0)(@csstools/css-tokenizer@2.1.1)
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /@csstools/postcss-nested-calc@2.0.2(postcss@8.4.27):
+  /@csstools/postcss-nested-calc@2.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-jbwrP8rN4e7LNaRcpx3xpMUjhtt34I9OV+zgbcsYAAk6k1+3kODXJBf95/JMYWhu9g1oif7r06QVUgfWsKxCFw==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-normalize-display-values@2.0.1(postcss@8.4.27):
+  /@csstools/postcss-normalize-display-values@2.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-TQT5g3JQ5gPXC239YuRK8jFceXF9d25ZvBkyjzBGGoW5st5sPXFVQS8OjYb9IJ/K3CdfK4528y483cgS2DJR/w==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-oklab-function@2.2.3(postcss@8.4.27):
+  /@csstools/postcss-oklab-function@2.2.3(postcss@8.4.29):
     resolution: {integrity: sha512-AgJ2rWMnLCDcbSMTHSqBYn66DNLBym6JpBpCaqmwZ9huGdljjDRuH3DzOYzkgQ7Pm2K92IYIq54IvFHloUOdvA==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
@@ -541,21 +544,21 @@ packages:
       '@csstools/css-color-parser': 1.2.0(@csstools/css-parser-algorithms@2.1.1)(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-parser-algorithms': 2.1.1(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-tokenizer': 2.1.1
-      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.27)
-      postcss: 8.4.27
+      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.29)
+      postcss: 8.4.29
     dev: true
 
-  /@csstools/postcss-progressive-custom-properties@2.3.0(postcss@8.4.27):
+  /@csstools/postcss-progressive-custom-properties@2.3.0(postcss@8.4.29):
     resolution: {integrity: sha512-Zd8ojyMlsL919TBExQ1I0CTpBDdyCpH/yOdqatZpuC3sd22K4SwC7+Yez3Q/vmXMWSAl+shjNeFZ7JMyxMjK+Q==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-relative-color-syntax@1.0.2(postcss@8.4.27):
+  /@csstools/postcss-relative-color-syntax@1.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-juCoVInkgH2TZPfOhyx6tIal7jW37L/0Tt+Vcl1LoxqQA9sxcg3JWYZ98pl1BonDnki6s/M7nXzFQHWsWMeHgw==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
@@ -564,21 +567,21 @@ packages:
       '@csstools/css-color-parser': 1.2.1(@csstools/css-parser-algorithms@2.2.0)(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-parser-algorithms': 2.2.0(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-tokenizer': 2.1.1
-      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.27)
-      postcss: 8.4.27
+      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.29)
+      postcss: 8.4.29
     dev: true
 
-  /@csstools/postcss-scope-pseudo-class@2.0.2(postcss@8.4.27):
+  /@csstools/postcss-scope-pseudo-class@2.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-6Pvo4uexUCXt+Hz5iUtemQAcIuCYnL+ePs1khFR6/xPgC92aQLJ0zGHonWoewiBE+I++4gXK3pr+R1rlOFHe5w==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /@csstools/postcss-stepped-value-functions@2.1.1(postcss@8.4.27):
+  /@csstools/postcss-stepped-value-functions@2.1.1(postcss@8.4.29):
     resolution: {integrity: sha512-YCvdF0GCZK35nhLgs7ippcxDlRVe5QsSht3+EghqTjnYnyl3BbWIN6fYQ1dKWYTJ+7Bgi41TgqQFfJDcp9Xy/w==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
@@ -587,21 +590,21 @@ packages:
       '@csstools/css-calc': 1.1.1(@csstools/css-parser-algorithms@2.1.1)(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-parser-algorithms': 2.1.1(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-tokenizer': 2.1.1
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /@csstools/postcss-text-decoration-shorthand@2.2.4(postcss@8.4.27):
+  /@csstools/postcss-text-decoration-shorthand@2.2.4(postcss@8.4.29):
     resolution: {integrity: sha512-zPN56sQkS/7YTCVZhOBVCWf7AiNge8fXDl7JVaHLz2RyT4pnyK2gFjckWRLpO0A2xkm1lCgZ0bepYZTwAVd/5A==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
       '@csstools/color-helpers': 2.1.0
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /@csstools/postcss-trigonometric-functions@2.1.1(postcss@8.4.27):
+  /@csstools/postcss-trigonometric-functions@2.1.1(postcss@8.4.29):
     resolution: {integrity: sha512-XcXmHEFfHXhvYz40FtDlA4Fp4NQln2bWTsCwthd2c+MCnYArUYU3YaMqzR5CrKP3pMoGYTBnp5fMqf1HxItNyw==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
@@ -610,16 +613,16 @@ packages:
       '@csstools/css-calc': 1.1.1(@csstools/css-parser-algorithms@2.1.1)(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-parser-algorithms': 2.1.1(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-tokenizer': 2.1.1
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /@csstools/postcss-unset-value@2.0.1(postcss@8.4.27):
+  /@csstools/postcss-unset-value@2.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-oJ9Xl29/yU8U7/pnMJRqAZd4YXNCfGEdcP4ywREuqm/xMqcgDNDppYRoCGDt40aaZQIEKBS79LytUDN/DHf0Ew==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
   /@csstools/selector-specificity@2.2.0(postcss-selector-parser@6.0.13):
@@ -1085,8 +1088,8 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
-  /@iconify-icons/line-md@1.2.23:
-    resolution: {integrity: sha512-iyoNK/K2U3bQWh309iI43MXmE/nt7v2Se9UUElKFZvfSerYtqgCzJwMSkwMrr7LFhxFfqqQx65Z04g1vkM68Rw==}
+  /@iconify-icons/line-md@1.2.26:
+    resolution: {integrity: sha512-E7cZrSyszUc+h1DMH1kfmcy/bt/2ONN6rgmYoDHl1gknO/7Ms/i42c69fTlnQwvXcAyRQKJO6i9I0b8klkq27g==}
     dependencies:
       '@iconify/types': 2.0.0
     dev: false
@@ -1142,7 +1145,7 @@ packages:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  /@lucia-auth/adapter-mysql@2.0.0(lucia@2.4.0):
+  /@lucia-auth/adapter-mysql@2.0.0(lucia@2.4.2):
     resolution: {integrity: sha512-8a4JZ3VjDyRu/mAop2hEt/jOJO2HXwWIAid6a4wGiR8wgnlyOws9brRc+/wxQHSOlWUlrWemrfDvXLs5mMtkeQ==}
     peerDependencies:
       '@planetscale/database': ^1.0.0
@@ -1154,17 +1157,17 @@ packages:
       mysql2:
         optional: true
     dependencies:
-      lucia: 2.4.0
+      lucia: 2.4.2
     dev: false
 
-  /@lucia-auth/adapter-prisma@3.0.1(@prisma/client@5.1.1)(lucia@2.4.0):
+  /@lucia-auth/adapter-prisma@3.0.1(@prisma/client@5.1.1)(lucia@2.4.2):
     resolution: {integrity: sha512-JZNl+721M5ApjtNiH+WUYstiC8cffcI/Y9IzKsa0uUhQMIHl2ObCrgO0R3fgHnjWHBjhQoK36g/r/iSJIDppBA==}
     peerDependencies:
       '@prisma/client': ^4.2.0 || ^5.0.0
       lucia: ^2.0.0
     dependencies:
-      '@prisma/client': 5.1.1(prisma@5.1.1)
-      lucia: 2.4.0
+      '@prisma/client': 5.1.1(prisma@5.2.0)
+      lucia: 2.4.2
     dev: false
 
   /@lukeed/csprng@1.1.0:
@@ -1196,14 +1199,14 @@ packages:
       - encoding
       - supports-color
 
-  /@melt-ui/pp@0.1.2(@melt-ui/svelte@0.37.5)(svelte@4.2.0):
+  /@melt-ui/pp@0.1.2(@melt-ui/svelte@0.37.6)(svelte@4.2.0):
     resolution: {integrity: sha512-GZeqp7UWLNZUC2dJpREnZrWMR88vy27WO7C3cIBz4KW3/CFD19FjNkd3VbSRfcRryrMkdnEs9nu2VUa8/0u58w==}
     engines: {pnpm: '>=8.6.3'}
     peerDependencies:
       '@melt-ui/svelte': '>= 0.29.0'
       svelte: ^3.55.0 || ^4.0.0
     dependencies:
-      '@melt-ui/svelte': 0.37.5(svelte@4.2.0)
+      '@melt-ui/svelte': 0.37.6(svelte@4.2.0)
       svelte: 4.2.0
     dev: true
 
@@ -1219,8 +1222,8 @@ packages:
       svelte: 4.2.0
     dev: false
 
-  /@melt-ui/svelte@0.37.5(svelte@4.2.0):
-    resolution: {integrity: sha512-bQ368VNw8tTT7DrD9/6KMU6O/NRBoZlh4pUv4tQVVlgBq5G9ZnKJ/5nJ28EE2ONd8jwykTTIHBVBpEtEVF8Hlw==}
+  /@melt-ui/svelte@0.37.6(svelte@4.2.0):
+    resolution: {integrity: sha512-rh3d1FN9JLOCZkrc9x3sOPjWy4wIUMlFhouy+u1sBAcVSYyVKOx7g8vV4O75PQRmgpWEWbQV9yCOa3jj3Gur3A==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
@@ -1262,7 +1265,7 @@ packages:
   /@polka/url@1.0.0-next.21:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
 
-  /@prisma/client@5.1.1(prisma@5.1.1):
+  /@prisma/client@5.1.1(prisma@5.2.0):
     resolution: {integrity: sha512-fxcCeK5pMQGcgCqCrWsi+I2rpIbk0rAhdrN+ke7f34tIrgPwA68ensrpin+9+fZvuV2OtzHmuipwduSY6HswdA==}
     engines: {node: '>=16.13'}
     requiresBuild: true
@@ -1273,15 +1276,15 @@ packages:
         optional: true
     dependencies:
       '@prisma/engines-version': 5.1.1-1.6a3747c37ff169c90047725a05a6ef02e32ac97e
-      prisma: 5.1.1
+      prisma: 5.2.0
     dev: false
 
   /@prisma/engines-version@5.1.1-1.6a3747c37ff169c90047725a05a6ef02e32ac97e:
     resolution: {integrity: sha512-owZqbY/wucbr65bXJ/ljrHPgQU5xXTSkmcE/JcbqE1kusuAXV/TLN3/exmz21SZ5rJ7WDkyk70J2G/n68iogbQ==}
     dev: false
 
-  /@prisma/engines@5.1.1:
-    resolution: {integrity: sha512-NV/4nVNWFZSJCCIA3HIFJbbDKO/NARc9ej0tX5S9k2EVbkrFJC4Xt9b0u4rNZWL4V+F5LAjvta8vzEUw0rw+HA==}
+  /@prisma/engines@5.2.0:
+    resolution: {integrity: sha512-dT7FOLUCdZmq+AunLqB1Iz+ZH/IIS1Fz2THmKZQ6aFONrQD/BQ5ecJ7g2wGS2OgyUFf4OaLam6/bxmgdOBDqig==}
     requiresBuild: true
 
   /@rollup/pluginutils@4.2.1:
@@ -1291,21 +1294,21 @@ packages:
       estree-walker: 2.0.2
       picomatch: 2.3.1
 
-  /@sveltejs/adapter-auto@1.0.3(@sveltejs/kit@1.22.6):
+  /@sveltejs/adapter-auto@1.0.3(@sveltejs/kit@1.24.1):
     resolution: {integrity: sha512-hc7O12YQqvZ1CD4fo1gMJuPzBZvuoG5kwxb2RRoz4fVoB8B2vuPO2cY751Ln0G6T/HMrAf8kCqw6Pg+wbxcstw==}
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
     dependencies:
-      '@sveltejs/kit': 1.22.6(svelte@4.2.0)(vite@4.4.9)
+      '@sveltejs/kit': 1.24.1(svelte@4.2.0)(vite@4.4.9)
       import-meta-resolve: 2.2.0
     dev: true
 
-  /@sveltejs/adapter-vercel@1.0.6(@sveltejs/kit@1.22.6):
+  /@sveltejs/adapter-vercel@1.0.6(@sveltejs/kit@1.24.1):
     resolution: {integrity: sha512-fo6aaEygPd/6B5Jms4Ff7R4jbADnppuLvKOWBNTGe5MGB7ZRUkl+gxHWMQx2av2knyEZkA6V8y5M6R3ML5yN4g==}
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
     dependencies:
-      '@sveltejs/kit': 1.22.6(svelte@4.2.0)(vite@4.4.9)
+      '@sveltejs/kit': 1.24.1(svelte@4.2.0)(vite@4.4.9)
       '@vercel/nft': 0.22.6
       esbuild: 0.16.8
     transitivePeerDependencies:
@@ -1313,12 +1316,12 @@ packages:
       - supports-color
     dev: true
 
-  /@sveltejs/adapter-vercel@3.0.3(@sveltejs/kit@1.22.6):
+  /@sveltejs/adapter-vercel@3.0.3(@sveltejs/kit@1.24.1):
     resolution: {integrity: sha512-0FQMjR6klW4627ewdclSr0lUe/DqiiyOaRTfgb5cXgNbVMsZMOA2fQ77TYQnJdvMfSEWe6y8uznV48XqKh9+vA==}
     peerDependencies:
       '@sveltejs/kit': ^1.5.0
     dependencies:
-      '@sveltejs/kit': 1.22.6(svelte@4.2.0)(vite@4.4.9)
+      '@sveltejs/kit': 1.24.1(svelte@4.2.0)(vite@4.4.9)
       '@vercel/nft': 0.23.1
       esbuild: 0.18.11
     transitivePeerDependencies:
@@ -1326,8 +1329,8 @@ packages:
       - supports-color
     dev: false
 
-  /@sveltejs/kit@1.22.6(svelte@4.2.0)(vite@4.4.9):
-    resolution: {integrity: sha512-SDKxI/QpsReCwIn5czjT53fKlPBybbmMk67d317gUqfeORroBAFN1Z6s/x0E1JYi+04i7kKllS+Sz9wVfmUkAQ==}
+  /@sveltejs/kit@1.24.1(svelte@4.2.0)(vite@4.4.9):
+    resolution: {integrity: sha512-u2FO0q62Se9UZ0g9kXaWYi+54vTK70BKaPScOcx6jLMRou4CUZgDTNKnRhsbJgPMgaLkOH0j3o/fKlZ6jBfgSg==}
     engines: {node: ^16.14 || >=18}
     hasBin: true
     requiresBuild: true
@@ -1347,6 +1350,7 @@ packages:
       set-cookie-parser: 2.6.0
       sirv: 2.0.2
       svelte: 4.2.0
+      tiny-glob: 0.2.9
       undici: 5.23.0
       vite: 4.4.9(@types/node@18.17.5)(sass@1.65.1)
     transitivePeerDependencies:
@@ -1732,7 +1736,7 @@ packages:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: false
 
-  /autoprefixer@10.4.15(postcss@8.4.27):
+  /autoprefixer@10.4.15(postcss@8.4.29):
     resolution: {integrity: sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
@@ -1744,7 +1748,7 @@ packages:
       fraction.js: 4.2.0
       normalize-range: 0.1.2
       picocolors: 1.0.0
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
@@ -1786,13 +1790,13 @@ packages:
     dependencies:
       file-uri-to-path: 1.0.0
 
-  /bits-ui@0.0.27(@sveltejs/kit@1.22.6)(svelte@4.2.0):
+  /bits-ui@0.0.27(@sveltejs/kit@1.24.1)(svelte@4.2.0):
     resolution: {integrity: sha512-T/8BjEVvAOlp+1ofg4JRiwjv5m/320KUrWk5ONrjzmZVZ5d+uIlGwHmdVysbVtygHxf+FWi8CCKSPYrbxmQUYA==}
     peerDependencies:
       svelte: ^4.0.0
     dependencies:
       '@melt-ui/svelte': 0.37.2(svelte@4.2.0)
-      '@sveltejs/adapter-vercel': 3.0.3(@sveltejs/kit@1.22.6)
+      '@sveltejs/adapter-vercel': 3.0.3(@sveltejs/kit@1.24.1)
       nanoid: 4.0.2
       shiki: 0.14.3
       svelte: 4.2.0
@@ -1902,7 +1906,7 @@ packages:
       normalize-path: 3.0.0
       readdirp: 3.6.0
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
 
   /chownr@2.0.0:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
@@ -1985,35 +1989,35 @@ packages:
       which: 2.0.2
     dev: true
 
-  /css-blank-pseudo@5.0.2(postcss@8.4.27):
+  /css-blank-pseudo@5.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-aCU4AZ7uEcVSUzagTlA9pHciz7aWPKA/YzrEkpdSopJ2pvhIxiQ5sYeMz1/KByxlIo4XBdvMNJAVKMg/GRnhfw==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /css-has-pseudo@5.0.2(postcss@8.4.27):
+  /css-has-pseudo@5.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-q+U+4QdwwB7T9VEW/LyO6CFrLAeLqOykC5mDqJXc7aKZAhDbq7BvGT13VGJe+IwBfdN2o3Xdw2kJ5IxwV1Sc9Q==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
       '@csstools/selector-specificity': 2.2.0(postcss-selector-parser@6.0.13)
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
     dev: true
 
-  /css-prefers-color-scheme@8.0.2(postcss@8.4.27):
+  /css-prefers-color-scheme@8.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-OvFghizHJ45x7nsJJUSYLyQNTzsCU8yWjxAc/nhPQg1pbs18LMoET8N3kOweFDPy0JV0OSXN2iqRFhPBHYOeMA==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
   /css-tree@2.3.1:
@@ -2211,9 +2215,9 @@ packages:
       eslint: 8.47.0
       esutils: 2.0.3
       known-css-properties: 0.28.0
-      postcss: 8.4.27
-      postcss-load-config: 3.1.4(postcss@8.4.27)(ts-node@10.9.1)
-      postcss-safe-parser: 6.0.0(postcss@8.4.27)
+      postcss: 8.4.29
+      postcss-load-config: 3.1.4(postcss@8.4.29)(ts-node@10.9.1)
+      postcss-safe-parser: 6.0.0(postcss@8.4.29)
       postcss-selector-parser: 6.0.13
       semver: 7.5.3
       svelte: 4.2.0
@@ -2448,6 +2452,18 @@ packages:
       mime-types: 2.1.35
     dev: false
 
+  /formsnap@0.0.9(svelte@4.2.0)(sveltekit-superforms@1.6.1)(zod@3.22.2):
+    resolution: {integrity: sha512-PJ/UU0+nfdyywc73sN016tF0+aPVhy37M43MY9jbtjrDuhFcibQ4EoCG3b8NtyBMSTWf785SuzAo8jdADiQVcg==}
+    peerDependencies:
+      svelte: ^4.0.0
+      sveltekit-superforms: ^1.6.1
+      zod: ^3.22.2
+    dependencies:
+      svelte: 4.2.0
+      sveltekit-superforms: 1.6.1(@sveltejs/kit@1.24.1)(svelte@4.2.0)(zod@3.22.2)
+      zod: 3.22.2
+    dev: false
+
   /fraction.js@4.2.0:
     resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
     dev: true
@@ -2466,6 +2482,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:
@@ -2528,6 +2552,9 @@ packages:
       type-fest: 0.20.2
     dev: true
 
+  /globalyzer@0.1.0:
+    resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
+
   /globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -2540,6 +2567,9 @@ packages:
       slash: 3.0.0
     dev: true
 
+  /globrex@0.1.2:
+    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+
   /graceful-fs@4.2.10:
     resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
 
@@ -2771,8 +2801,8 @@ packages:
     dependencies:
       yallist: 4.0.0
 
-  /lucia@2.4.0:
-    resolution: {integrity: sha512-v2pyFQVF734+EU3m9GeeJQorFR7zLt7JoOJ1UD5ttR5Z+w4IkOyExiXyFe+zssKpony66u94wcxyws3lZSpzzg==}
+  /lucia@2.4.2:
+    resolution: {integrity: sha512-JJMAxrsjNXS5WUNe/u9+ahIXM+RNHTL2+RRtzUo1lZgUQL7oFsOgckikdjUPmGaEKrmQfUznxg20L/Ghba3Fjg==}
     dev: false
 
   /lucide-svelte@0.256.1(svelte@4.2.0):
@@ -2973,8 +3003,8 @@ packages:
     dependencies:
       wrappy: 1.0.2
 
-  /open-props@1.5.11:
-    resolution: {integrity: sha512-wwfcnYPVKmTruKcZL7vx3o7/PA2qfL6W2/MZCyebUhzLWHSDd/K5iFRqwrSh/RbNfITYCfNdUTbexHDJpFq+2A==}
+  /open-props@1.5.13:
+    resolution: {integrity: sha512-j8qiCQgdiYWxpBq+l92A7tiNjnGzpExP32VIN+YEoyQyOx5/DMjj4qQebGczadEJdky2Z82wpx1r+u+KgqM6iQ==}
     dev: false
 
   /optionator@0.9.3:
@@ -3064,58 +3094,58 @@ packages:
     hasBin: true
     dev: true
 
-  /postcss-attribute-case-insensitive@6.0.2(postcss@8.4.27):
+  /postcss-attribute-case-insensitive@6.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-IRuCwwAAQbgaLhxQdQcIIK0dCVXg3XDUnzgKD8iwdiYdwU4rMWRWyl/W9/0nA4ihVpq5pyALiHB2veBJ0292pw==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /postcss-clamp@4.1.0(postcss@8.4.27):
+  /postcss-clamp@4.1.0(postcss@8.4.29):
     resolution: {integrity: sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==}
     engines: {node: '>=7.6.0'}
     peerDependencies:
       postcss: ^8.4.6
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-color-functional-notation@5.1.0(postcss@8.4.27):
+  /postcss-color-functional-notation@5.1.0(postcss@8.4.29):
     resolution: {integrity: sha512-w2R4py6zrVE1U7FwNaAc76tNQlG9GLkrBbcFw+VhUjyDDiV28vfZG+l4LyPmpoQpeSJVtu8VgNjE8Jv5SpC7dQ==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.27)
-      postcss: 8.4.27
+      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.29)
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-color-hex-alpha@9.0.2(postcss@8.4.27):
+  /postcss-color-hex-alpha@9.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-SfPjgr//VQ/DOCf80STIAsdAs7sbIbxATvVmd+Ec7JvR8onz9pjawhq3BJM3Pie40EE3TyB0P6hft16D33Nlyg==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-color-rebeccapurple@8.0.2(postcss@8.4.27):
+  /postcss-color-rebeccapurple@8.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-xWf/JmAxVoB5bltHpXk+uGRoGFwu4WDAR7210el+iyvTdqiKpDhtcT8N3edXMoVJY0WHFMrKMUieql/wRNiXkw==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-custom-media@9.1.5(postcss@8.4.27):
+  /postcss-custom-media@9.1.5(postcss@8.4.29):
     resolution: {integrity: sha512-GStyWMz7Qbo/Gtw1xVspzVSX8eipgNg4lpsO3CAeY4/A1mzok+RV6MCv3fg62trWijh/lYEj6vps4o8JcBBpDA==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
@@ -3125,10 +3155,10 @@ packages:
       '@csstools/css-parser-algorithms': 2.2.0(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-tokenizer': 2.1.1
       '@csstools/media-query-list-parser': 2.1.1(@csstools/css-parser-algorithms@2.2.0)(@csstools/css-tokenizer@2.1.1)
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /postcss-custom-properties@13.2.0(postcss@8.4.27):
+  /postcss-custom-properties@13.2.0(postcss@8.4.29):
     resolution: {integrity: sha512-UYiPqbqmVayyv56y0mtGhvUKZClflwE9cTTmPaqEX8fOVjVwsotqKGYtJXSLxrJLwf9tt7ka+Luyh1ZAOhGHWA==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
@@ -3137,11 +3167,11 @@ packages:
       '@csstools/cascade-layer-name-parser': 1.0.2(@csstools/css-parser-algorithms@2.1.1)(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-parser-algorithms': 2.1.1(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-tokenizer': 2.1.1
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-custom-selectors@7.1.3(postcss@8.4.27):
+  /postcss-custom-selectors@7.1.3(postcss@8.4.29):
     resolution: {integrity: sha512-GTVscax6O/8s7agFF0HsOoIyjrnAbLjgCUle8tn+0oDGJuVx7p56U7ClSRoC49poxFuMfu2B4Q8GnxSCOeuFKw==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
@@ -3150,107 +3180,107 @@ packages:
       '@csstools/cascade-layer-name-parser': 1.0.2(@csstools/css-parser-algorithms@2.1.1)(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-parser-algorithms': 2.1.1(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-tokenizer': 2.1.1
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /postcss-dir-pseudo-class@7.0.2(postcss@8.4.27):
+  /postcss-dir-pseudo-class@7.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-cMnslilYxBf9k3qejnovrUONZx1rXeUZJw06fgIUBzABJe3D2LiLL5WAER7Imt3nrkaIgG05XZBztueLEf5P8w==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /postcss-double-position-gradients@4.0.4(postcss@8.4.27):
+  /postcss-double-position-gradients@4.0.4(postcss@8.4.29):
     resolution: {integrity: sha512-nUAbUXURemLXIrl4Xoia2tiu5z/n8sY+BVDZApoeT9BlpByyrp02P/lFCRrRvZ/zrGRE+MOGLhk8o7VcMCtPtQ==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.27)
-      postcss: 8.4.27
+      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.29)
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-focus-visible@8.0.2(postcss@8.4.27):
+  /postcss-focus-visible@8.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-f/Vd+EC/GaKElknU59esVcRYr/Y3t1ZAQyL4u2xSOgkDy4bMCmG7VP5cGvj3+BTLNE9ETfEuz2nnt4qkZwTTeA==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /postcss-focus-within@7.0.2(postcss@8.4.27):
+  /postcss-focus-within@7.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-AHAJ89UQBcqBvFgQJE9XasGuwMNkKsGj4D/f9Uk60jFmEBHpAL14DrnSk3Rj+SwZTr/WUG+mh+Rvf8fid/346w==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /postcss-font-variant@5.0.0(postcss@8.4.27):
+  /postcss-font-variant@5.0.0(postcss@8.4.29):
     resolution: {integrity: sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /postcss-gap-properties@4.0.1(postcss@8.4.27):
+  /postcss-gap-properties@4.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-V5OuQGw4lBumPlwHWk/PRfMKjaq/LTGR4WDTemIMCaMevArVfCCA9wBJiL1VjDAd+rzuCIlkRoRvDsSiAaZ4Fg==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /postcss-image-set-function@5.0.2(postcss@8.4.27):
+  /postcss-image-set-function@5.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-Sszjwo0ubETX0Fi5MvpYzsONwrsjeabjMoc5YqHvURFItXgIu3HdCjcVuVKGMPGzKRhgaknmdM5uVWInWPJmeg==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     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.1
 
-  /postcss-initial@4.0.1(postcss@8.4.27):
+  /postcss-initial@4.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /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-lab-function@5.2.3(postcss@8.4.27):
+  /postcss-lab-function@5.2.3(postcss@8.4.29):
     resolution: {integrity: sha512-fi32AYKzji5/rvgxo5zXHFvAYBw0u0OzELbeCNjEZVLUir18Oj+9RmNphtM8QdLUaUnrfx8zy8vVYLmFLkdmrQ==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
@@ -3259,11 +3289,11 @@ packages:
       '@csstools/css-color-parser': 1.2.0(@csstools/css-parser-algorithms@2.1.1)(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-parser-algorithms': 2.1.1(@csstools/css-tokenizer@2.1.1)
       '@csstools/css-tokenizer': 2.1.1
-      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.27)
-      postcss: 8.4.27
+      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.29)
+      postcss: 8.4.29
     dev: true
 
-  /postcss-load-config@3.1.4(postcss@8.4.27)(ts-node@10.9.1):
+  /postcss-load-config@3.1.4(postcss@8.4.29)(ts-node@10.9.1):
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
     peerDependencies:
@@ -3276,12 +3306,12 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.1.0
-      postcss: 8.4.27
+      postcss: 8.4.29
       ts-node: 10.9.1(@types/node@18.17.5)(typescript@5.1.6)
       yaml: 1.10.2
     dev: true
 
-  /postcss-load-config@4.0.1(postcss@8.4.27)(ts-node@10.9.1):
+  /postcss-load-config@4.0.1(postcss@8.4.29)(ts-node@10.9.1):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
     engines: {node: '>= 14'}
     peerDependencies:
@@ -3294,185 +3324,185 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.0.6
-      postcss: 8.4.27
+      postcss: 8.4.29
       ts-node: 10.9.1(@types/node@18.17.5)(typescript@5.1.6)
       yaml: 2.1.3
 
-  /postcss-logical@6.2.0(postcss@8.4.27):
+  /postcss-logical@6.2.0(postcss@8.4.29):
     resolution: {integrity: sha512-aqlfKGaY0nnbgI9jwUikp4gJKBqcH5noU/EdnIVceghaaDPYhZuyJVxlvWNy55tlTG5tunRKCTAX9yljLiFgmw==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /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-nesting@11.3.0(postcss@8.4.27):
+  /postcss-nesting@11.3.0(postcss@8.4.29):
     resolution: {integrity: sha512-JlS10AQm/RzyrUGgl5irVkAlZYTJ99mNueUl+Qab+TcHhVedLiylWVkKBhRale+rS9yWIJK48JVzQlq3LcSdeA==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
       '@csstools/selector-specificity': 2.2.0(postcss-selector-parser@6.0.13)
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /postcss-opacity-percentage@2.0.0(postcss@8.4.27):
+  /postcss-opacity-percentage@2.0.0(postcss@8.4.29):
     resolution: {integrity: sha512-lyDrCOtntq5Y1JZpBFzIWm2wG9kbEdujpNt4NLannF+J9c8CgFIzPa80YQfdza+Y+yFfzbYj/rfoOsYsooUWTQ==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.2
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /postcss-overflow-shorthand@4.0.1(postcss@8.4.27):
+  /postcss-overflow-shorthand@4.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-HQZ0qi/9iSYHW4w3ogNqVNr2J49DHJAl7r8O2p0Meip38jsdnRPgiDW7r/LlLrrMBMe3KHkvNtAV2UmRVxzLIg==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-page-break@3.0.4(postcss@8.4.27):
+  /postcss-page-break@3.0.4(postcss@8.4.29):
     resolution: {integrity: sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==}
     peerDependencies:
       postcss: ^8
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /postcss-place@8.0.1(postcss@8.4.27):
+  /postcss-place@8.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-Ow2LedN8sL4pq8ubukO77phSVt4QyCm35ZGCYXKvRFayAwcpgB0sjNJglDoTuRdUL32q/ZC1VkPBo0AOEr4Uiw==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-preset-env@8.5.1(postcss@8.4.27):
+  /postcss-preset-env@8.5.1(postcss@8.4.29):
     resolution: {integrity: sha512-qhWnJJjP6ArLUINWJ38t6Aftxnv9NW6cXK0NuwcLCcRilbuw72dSFLkCVUJeCfHGgJiKzX+pnhkGiki0PEynWg==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/postcss-cascade-layers': 3.0.1(postcss@8.4.27)
-      '@csstools/postcss-color-function': 2.2.3(postcss@8.4.27)
-      '@csstools/postcss-color-mix-function': 1.0.3(postcss@8.4.27)
-      '@csstools/postcss-font-format-keywords': 2.0.2(postcss@8.4.27)
-      '@csstools/postcss-gradients-interpolation-method': 3.0.6(postcss@8.4.27)
-      '@csstools/postcss-hwb-function': 2.2.2(postcss@8.4.27)
-      '@csstools/postcss-ic-unit': 2.0.4(postcss@8.4.27)
-      '@csstools/postcss-is-pseudo-class': 3.2.1(postcss@8.4.27)
-      '@csstools/postcss-logical-float-and-clear': 1.0.1(postcss@8.4.27)
-      '@csstools/postcss-logical-resize': 1.0.1(postcss@8.4.27)
-      '@csstools/postcss-logical-viewport-units': 1.0.3(postcss@8.4.27)
-      '@csstools/postcss-media-minmax': 1.0.4(postcss@8.4.27)
-      '@csstools/postcss-media-queries-aspect-ratio-number-values': 1.0.4(postcss@8.4.27)
-      '@csstools/postcss-nested-calc': 2.0.2(postcss@8.4.27)
-      '@csstools/postcss-normalize-display-values': 2.0.1(postcss@8.4.27)
-      '@csstools/postcss-oklab-function': 2.2.3(postcss@8.4.27)
-      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.27)
-      '@csstools/postcss-relative-color-syntax': 1.0.2(postcss@8.4.27)
-      '@csstools/postcss-scope-pseudo-class': 2.0.2(postcss@8.4.27)
-      '@csstools/postcss-stepped-value-functions': 2.1.1(postcss@8.4.27)
-      '@csstools/postcss-text-decoration-shorthand': 2.2.4(postcss@8.4.27)
-      '@csstools/postcss-trigonometric-functions': 2.1.1(postcss@8.4.27)
-      '@csstools/postcss-unset-value': 2.0.1(postcss@8.4.27)
-      autoprefixer: 10.4.15(postcss@8.4.27)
+      '@csstools/postcss-cascade-layers': 3.0.1(postcss@8.4.29)
+      '@csstools/postcss-color-function': 2.2.3(postcss@8.4.29)
+      '@csstools/postcss-color-mix-function': 1.0.3(postcss@8.4.29)
+      '@csstools/postcss-font-format-keywords': 2.0.2(postcss@8.4.29)
+      '@csstools/postcss-gradients-interpolation-method': 3.0.6(postcss@8.4.29)
+      '@csstools/postcss-hwb-function': 2.2.2(postcss@8.4.29)
+      '@csstools/postcss-ic-unit': 2.0.4(postcss@8.4.29)
+      '@csstools/postcss-is-pseudo-class': 3.2.1(postcss@8.4.29)
+      '@csstools/postcss-logical-float-and-clear': 1.0.1(postcss@8.4.29)
+      '@csstools/postcss-logical-resize': 1.0.1(postcss@8.4.29)
+      '@csstools/postcss-logical-viewport-units': 1.0.3(postcss@8.4.29)
+      '@csstools/postcss-media-minmax': 1.0.4(postcss@8.4.29)
+      '@csstools/postcss-media-queries-aspect-ratio-number-values': 1.0.4(postcss@8.4.29)
+      '@csstools/postcss-nested-calc': 2.0.2(postcss@8.4.29)
+      '@csstools/postcss-normalize-display-values': 2.0.1(postcss@8.4.29)
+      '@csstools/postcss-oklab-function': 2.2.3(postcss@8.4.29)
+      '@csstools/postcss-progressive-custom-properties': 2.3.0(postcss@8.4.29)
+      '@csstools/postcss-relative-color-syntax': 1.0.2(postcss@8.4.29)
+      '@csstools/postcss-scope-pseudo-class': 2.0.2(postcss@8.4.29)
+      '@csstools/postcss-stepped-value-functions': 2.1.1(postcss@8.4.29)
+      '@csstools/postcss-text-decoration-shorthand': 2.2.4(postcss@8.4.29)
+      '@csstools/postcss-trigonometric-functions': 2.1.1(postcss@8.4.29)
+      '@csstools/postcss-unset-value': 2.0.1(postcss@8.4.29)
+      autoprefixer: 10.4.15(postcss@8.4.29)
       browserslist: 4.21.9
-      css-blank-pseudo: 5.0.2(postcss@8.4.27)
-      css-has-pseudo: 5.0.2(postcss@8.4.27)
-      css-prefers-color-scheme: 8.0.2(postcss@8.4.27)
+      css-blank-pseudo: 5.0.2(postcss@8.4.29)
+      css-has-pseudo: 5.0.2(postcss@8.4.29)
+      css-prefers-color-scheme: 8.0.2(postcss@8.4.29)
       cssdb: 7.6.0
-      postcss: 8.4.27
-      postcss-attribute-case-insensitive: 6.0.2(postcss@8.4.27)
-      postcss-clamp: 4.1.0(postcss@8.4.27)
-      postcss-color-functional-notation: 5.1.0(postcss@8.4.27)
-      postcss-color-hex-alpha: 9.0.2(postcss@8.4.27)
-      postcss-color-rebeccapurple: 8.0.2(postcss@8.4.27)
-      postcss-custom-media: 9.1.5(postcss@8.4.27)
-      postcss-custom-properties: 13.2.0(postcss@8.4.27)
-      postcss-custom-selectors: 7.1.3(postcss@8.4.27)
-      postcss-dir-pseudo-class: 7.0.2(postcss@8.4.27)
-      postcss-double-position-gradients: 4.0.4(postcss@8.4.27)
-      postcss-focus-visible: 8.0.2(postcss@8.4.27)
-      postcss-focus-within: 7.0.2(postcss@8.4.27)
-      postcss-font-variant: 5.0.0(postcss@8.4.27)
-      postcss-gap-properties: 4.0.1(postcss@8.4.27)
-      postcss-image-set-function: 5.0.2(postcss@8.4.27)
-      postcss-initial: 4.0.1(postcss@8.4.27)
-      postcss-lab-function: 5.2.3(postcss@8.4.27)
-      postcss-logical: 6.2.0(postcss@8.4.27)
-      postcss-nesting: 11.3.0(postcss@8.4.27)
-      postcss-opacity-percentage: 2.0.0(postcss@8.4.27)
-      postcss-overflow-shorthand: 4.0.1(postcss@8.4.27)
-      postcss-page-break: 3.0.4(postcss@8.4.27)
-      postcss-place: 8.0.1(postcss@8.4.27)
-      postcss-pseudo-class-any-link: 8.0.2(postcss@8.4.27)
-      postcss-replace-overflow-wrap: 4.0.0(postcss@8.4.27)
-      postcss-selector-not: 7.0.1(postcss@8.4.27)
+      postcss: 8.4.29
+      postcss-attribute-case-insensitive: 6.0.2(postcss@8.4.29)
+      postcss-clamp: 4.1.0(postcss@8.4.29)
+      postcss-color-functional-notation: 5.1.0(postcss@8.4.29)
+      postcss-color-hex-alpha: 9.0.2(postcss@8.4.29)
+      postcss-color-rebeccapurple: 8.0.2(postcss@8.4.29)
+      postcss-custom-media: 9.1.5(postcss@8.4.29)
+      postcss-custom-properties: 13.2.0(postcss@8.4.29)
+      postcss-custom-selectors: 7.1.3(postcss@8.4.29)
+      postcss-dir-pseudo-class: 7.0.2(postcss@8.4.29)
+      postcss-double-position-gradients: 4.0.4(postcss@8.4.29)
+      postcss-focus-visible: 8.0.2(postcss@8.4.29)
+      postcss-focus-within: 7.0.2(postcss@8.4.29)
+      postcss-font-variant: 5.0.0(postcss@8.4.29)
+      postcss-gap-properties: 4.0.1(postcss@8.4.29)
+      postcss-image-set-function: 5.0.2(postcss@8.4.29)
+      postcss-initial: 4.0.1(postcss@8.4.29)
+      postcss-lab-function: 5.2.3(postcss@8.4.29)
+      postcss-logical: 6.2.0(postcss@8.4.29)
+      postcss-nesting: 11.3.0(postcss@8.4.29)
+      postcss-opacity-percentage: 2.0.0(postcss@8.4.29)
+      postcss-overflow-shorthand: 4.0.1(postcss@8.4.29)
+      postcss-page-break: 3.0.4(postcss@8.4.29)
+      postcss-place: 8.0.1(postcss@8.4.29)
+      postcss-pseudo-class-any-link: 8.0.2(postcss@8.4.29)
+      postcss-replace-overflow-wrap: 4.0.0(postcss@8.4.29)
+      postcss-selector-not: 7.0.1(postcss@8.4.29)
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-pseudo-class-any-link@8.0.2(postcss@8.4.27):
+  /postcss-pseudo-class-any-link@8.0.2(postcss@8.4.29):
     resolution: {integrity: sha512-FYTIuRE07jZ2CW8POvctRgArQJ43yxhr5vLmImdKUvjFCkR09kh8pIdlCwdx/jbFm7MiW4QP58L4oOUv3grQYA==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /postcss-replace-overflow-wrap@4.0.0(postcss@8.4.27):
+  /postcss-replace-overflow-wrap@4.0.0(postcss@8.4.29):
     resolution: {integrity: sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==}
     peerDependencies:
       postcss: ^8.0.3
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /postcss-safe-parser@6.0.0(postcss@8.4.27):
+  /postcss-safe-parser@6.0.0(postcss@8.4.29):
     resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.3.3
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /postcss-scss@4.0.6(postcss@8.4.27):
+  /postcss-scss@4.0.6(postcss@8.4.29):
     resolution: {integrity: sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.4.19
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /postcss-selector-not@7.0.1(postcss@8.4.27):
+  /postcss-selector-not@7.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-1zT5C27b/zeJhchN7fP0kBr16Cc61mu7Si9uWWLoA3Px/D9tIJPKchJCkUH3tPO5D0pCFmGeApAv8XpXBQJ8SQ==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-selector-parser: 6.0.13
     dev: true
 
@@ -3486,8 +3516,8 @@ 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
@@ -3519,13 +3549,13 @@ packages:
     resolution: {integrity: sha512-db91Bf3pRGKDPz1lAqLFSJXeW13mulUJxhycysFpfXV5MIK7RgWWK2E5aPAa71s8TCzQUXxF5JOV42/iOs6QkA==}
     dev: false
 
-  /prisma@5.1.1:
-    resolution: {integrity: sha512-WJFG/U7sMmcc6TjJTTifTfpI6Wjoh55xl4AzopVwAdyK68L9/ogNo8QQ2cxuUjJf/Wa82z/uhyh3wMzvRIBphg==}
+  /prisma@5.2.0:
+    resolution: {integrity: sha512-FfFlpjVCkZwrqxDnP4smlNYSH1so+CbfjgdpioFzGGqlQAEm6VHAYSzV7jJgC3ebtY9dNOhDMS2+4/1DDSM7bQ==}
     engines: {node: '>=16.13'}
     hasBin: true
     requiresBuild: true
     dependencies:
-      '@prisma/engines': 5.1.1
+      '@prisma/engines': 5.2.0
 
   /prismjs@1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
@@ -3625,7 +3655,7 @@ packages:
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
 
   /run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@@ -3818,7 +3848,7 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  /svelte-check@3.5.0(postcss-load-config@4.0.1)(postcss@8.4.27)(sass@1.65.1)(svelte@4.2.0):
+  /svelte-check@3.5.0(postcss-load-config@4.0.1)(postcss@8.4.29)(sass@1.65.1)(svelte@4.2.0):
     resolution: {integrity: sha512-KHujbn4k17xKYLmtCwv0sKKM7uiHTYcQvXnvrCcNU6a7hcszh99zFTIoiu/Sp/ewAw5aJmillJ1Cs8gKLmcX4A==}
     hasBin: true
     peerDependencies:
@@ -3831,7 +3861,7 @@ packages:
       picocolors: 1.0.0
       sade: 1.8.1
       svelte: 4.2.0
-      svelte-preprocess: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.27)(sass@1.65.1)(svelte@4.2.0)(typescript@5.1.6)
+      svelte-preprocess: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.29)(sass@1.65.1)(svelte@4.2.0)(typescript@5.1.6)
       typescript: 5.1.6
     transitivePeerDependencies:
       - '@babel/core'
@@ -3857,8 +3887,8 @@ packages:
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      postcss: 8.4.27
-      postcss-scss: 4.0.6(postcss@8.4.27)
+      postcss: 8.4.29
+      postcss-scss: 4.0.6(postcss@8.4.29)
       svelte: 4.2.0
     dev: true
 
@@ -3902,7 +3932,7 @@ packages:
       svelte: 4.2.0
     dev: false
 
-  /svelte-preprocess@5.0.4(postcss-load-config@4.0.1)(postcss@8.4.27)(sass@1.65.1)(svelte@4.2.0)(typescript@5.1.6):
+  /svelte-preprocess@5.0.4(postcss-load-config@4.0.1)(postcss@8.4.29)(sass@1.65.1)(svelte@4.2.0)(typescript@5.1.6):
     resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
     engines: {node: '>= 14.10.0'}
     requiresBuild: true
@@ -3943,8 +3973,8 @@ packages:
       '@types/pug': 2.0.6
       detect-indent: 6.1.0
       magic-string: 0.27.0
-      postcss: 8.4.27
-      postcss-load-config: 4.0.1(postcss@8.4.27)(ts-node@10.9.1)
+      postcss: 8.4.29
+      postcss-load-config: 4.0.1(postcss@8.4.29)(ts-node@10.9.1)
       sass: 1.65.1
       sorcery: 0.11.0
       strip-indent: 3.0.0
@@ -3986,27 +4016,26 @@ packages:
       magic-string: 0.30.0
       periscopic: 3.1.0
 
-  /sveltekit-flash-message@2.2.0(@sveltejs/kit@1.22.6)(svelte@4.2.0):
+  /sveltekit-flash-message@2.2.0(@sveltejs/kit@1.24.1)(svelte@4.2.0):
     resolution: {integrity: sha512-22hYvD4kQUWJevbiJQkRNIWtEexKyKYhN4zyn8YhfU6J2hRY1uFdTTfH0JIWwPkJ/QarBgLwzP79GO5t/LLZUw==}
     peerDependencies:
       '@sveltejs/kit': 1.x
       svelte: 3.x || 4.x
     dependencies:
-      '@sveltejs/kit': 1.22.6(svelte@4.2.0)(vite@4.4.9)
+      '@sveltejs/kit': 1.24.1(svelte@4.2.0)(vite@4.4.9)
       svelte: 4.2.0
     dev: true
 
-  /sveltekit-superforms@1.6.0(@sveltejs/kit@1.22.6)(svelte@4.2.0)(zod@3.21.4):
-    resolution: {integrity: sha512-Ob3vbgPuVMFuebD8R7qWHDyMVmHvbU6HYqa/ozuV9HbETkkkX7XhyDz/yMxW4q8T2kRiO50CASskiB3l6yKiqA==}
+  /sveltekit-superforms@1.6.1(@sveltejs/kit@1.24.1)(svelte@4.2.0)(zod@3.22.2):
+    resolution: {integrity: sha512-85whZdnytMFStDY1PI3ycr5BoTb57XjkEJqZ2Mt8HT06y/CKlQBws5Cx/AxPxA3WHhGfC26yfXqLYqEQz1oGfw==}
     peerDependencies:
       '@sveltejs/kit': 1.x
       svelte: 3.x || 4.x
       zod: 3.x
     dependencies:
-      '@sveltejs/kit': 1.22.6(svelte@4.2.0)(vite@4.4.9)
+      '@sveltejs/kit': 1.24.1(svelte@4.2.0)(vite@4.4.9)
       svelte: 4.2.0
-      zod: 3.21.4
-    dev: true
+      zod: 3.22.2
 
   /tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
@@ -4052,11 +4081,11 @@ packages:
       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)(ts-node@10.9.1)
-      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)(ts-node@10.9.1)
+      postcss-nested: 6.0.1(postcss@8.4.29)
       postcss-selector-parser: 6.0.13
       resolve: 1.22.2
       sucrase: 3.32.0
@@ -4089,6 +4118,12 @@ packages:
     dependencies:
       any-promise: 1.3.0
 
+  /tiny-glob@0.2.9:
+    resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
+    dependencies:
+      globalyzer: 0.1.0
+      globrex: 0.1.2
+
   /tinybench@2.3.1:
     resolution: {integrity: sha512-hGYWYBMPr7p4g5IarQE7XhlyWveh1EKhy4wUBS1LrHXCKYgvz+4/jCqgmJqZxxldesn05vccrtME2RLLZNW7iA==}
     dev: true
@@ -4276,11 +4311,11 @@ packages:
     dependencies:
       '@types/node': 18.17.5
       esbuild: 0.18.11
-      postcss: 8.4.27
+      postcss: 8.4.29
       rollup: 3.27.2
       sass: 1.65.1
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
 
   /vitefu@0.2.4(vite@4.4.9):
     resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
@@ -4401,13 +4436,13 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /zod-to-json-schema@3.21.4(zod@3.21.4):
+  /zod-to-json-schema@3.21.4(zod@3.22.2):
     resolution: {integrity: sha512-fjUZh4nQ1s6HMccgIeE0VP4QG/YRGPmyjO9sAh890aQKPEk3nqbfUXhMFaC+Dr5KvYBm8BCyvfpZf2jY9aGSsw==}
     peerDependencies:
       zod: ^3.21.4
     dependencies:
-      zod: 3.21.4
+      zod: 3.22.2
     dev: false
 
-  /zod@3.21.4:
-    resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
+  /zod@3.22.2:
+    resolution: {integrity: sha512-wvWkphh5WQsJbVk1tbx1l1Ly4yg+XecD+Mq280uBGt9wa5BKSWf4Mhp6GmrkPixhMxmabYY7RbzlwVP32pbGCg==}
diff --git a/postcss.config.cjs b/postcss.config.cjs
index b1c1206..4a6c594 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,4 +1,5 @@
 const tailwindcss = require("tailwindcss");
+const tailwindNesting = require('tailwindcss/nesting');
 const autoprefixer = require('autoprefixer');
 const postcssPresetEnv = require('postcss-preset-env');
 const atImport = require('postcss-import');
@@ -6,7 +7,7 @@ const atImport = require('postcss-import');
 const config = {
 	plugins: [
 		atImport(),
-		// 'tailwindcss/nesting'(),
+		tailwindNesting(),
 		tailwindcss(),
 		postcssPresetEnv({
 			stage: 2,
@@ -16,8 +17,6 @@ const config = {
 				'media-query-ranges': true
 			}
 		}),
-
-
 	] //Some plugins, like tailwindcss/nesting, need to run before Tailwind, tailwindcss(), //But others, like autoprefixer, need to run after, autoprefixer]
 };
 
diff --git a/src/app.postcss b/src/app.postcss
index 4cfe069..7c93cee 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -5,46 +5,46 @@
 @layer base {
 	:root {
 		--background: 0 0% 100%;
-		--foreground: 224 71.4% 4.1%;
+		--foreground: 20 14.3% 4.1%;
 		--card: 0 0% 100%;
-		--card-foreground: 224 71.4% 4.1%;
+		--card-foreground: 20 14.3% 4.1%;
 		--popover: 0 0% 100%;
-		--popover-foreground: 224 71.4% 4.1%;
-		--primary: 262.1 83.3% 57.8%;
-		--primary-foreground: 210 20% 98%;
-		--secondary: 220 14.3% 95.9%;
-		--secondary-foreground: 220.9 39.3% 11%;
-		--muted: 220 14.3% 95.9%;
-		--muted-foreground: 220 8.9% 46.1%;
-		--accent: 220 14.3% 95.9%;
-		--accent-foreground: 220.9 39.3% 11%;
+		--popover-foreground: 20 14.3% 4.1%;
+		--primary: 47.9 95.8% 53.1%;
+		--primary-foreground: 26 83.3% 14.1%;
+		--secondary: 60 4.8% 95.9%;
+		--secondary-foreground: 24 9.8% 10%;
+		--muted: 60 4.8% 95.9%;
+		--muted-foreground: 25 5.3% 44.7%;
+		--accent: 60 4.8% 95.9%;
+		--accent-foreground: 24 9.8% 10%;
 		--destructive: 0 84.2% 60.2%;
-		--destructive-foreground: 210 20% 98%;
-		--border: 220 13% 91%;
-		--input: 220 13% 91%;
-		--ring: 262.1 83.3% 57.8%;
+		--destructive-foreground: 60 9.1% 97.8%;
+		--border: 20 5.9% 90%;
+		--input: 20 5.9% 90%;
+		--ring: 20 14.3% 4.1%;
 		--radius: 0.5rem;
 	}
 	.dark {
-		--background: 224 71.4% 4.1%;
-		--foreground: 210 20% 98%;
-		--card: 224 71.4% 4.1%;
-		--card-foreground: 210 20% 98%;
-		--popover: 224 71.4% 4.1%;
-		--popover-foreground: 210 20% 98%;
-		--primary: 263.4 70% 50.4%;
-		--primary-foreground: 210 20% 98%;
-		--secondary: 215 27.9% 16.9%;
-		--secondary-foreground: 210 20% 98%;
-		--muted: 215 27.9% 16.9%;
-		--muted-foreground: 217.9 10.6% 64.9%;
-		--accent: 215 27.9% 16.9%;
-		--accent-foreground: 210 20% 98%;
+		--background: 20 14.3% 4.1%;
+		--foreground: 60 9.1% 97.8%;
+		--card: 20 14.3% 4.1%;
+		--card-foreground: 60 9.1% 97.8%;
+		--popover: 20 14.3% 4.1%;
+		--popover-foreground: 60 9.1% 97.8%;
+		--primary: 47.9 95.8% 53.1%;
+		--primary-foreground: 26 83.3% 14.1%;
+		--secondary: 12 6.5% 15.1%;
+		--secondary-foreground: 60 9.1% 97.8%;
+		--muted: 12 6.5% 15.1%;
+		--muted-foreground: 24 5.4% 63.9%;
+		--accent: 12 6.5% 15.1%;
+		--accent-foreground: 60 9.1% 97.8%;
 		--destructive: 0 62.8% 30.6%;
-		--destructive-foreground: 210 20% 98%;
-		--border: 215 27.9% 16.9%;
-		--input: 215 27.9% 16.9%;
-		--ring: 263.4 70% 50.4%;
+		--destructive-foreground: 60 9.1% 97.8%;
+		--border: 12 6.5% 15.1%;
+		--input: 12 6.5% 15.1%;
+		--ring: 35.5 91.7% 32.9%;
 	}
 }
 
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index c612357..aad9f13 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -42,8 +42,8 @@ export const authentication: Handle = async function ({ event, resolve }) {
 			console.log('user', session?.user);
 			event.locals.user = session?.user;
 			// if (event.route.id?.startsWith('/(protected)')) {
-			// if (!user) throw redirect(302, '/auth/sign-in');
-			// if (!user.verified) throw redirect(302, '/auth/verify/email');
+			// if (!user) throw redirect(302, '/sign-in');
+			// if (!user.verified) throw redirect(302, '/verify/email');
 			// }
 		} catch (error) {
 			console.error('Error validating user', error);
diff --git a/src/lib/components/header/bored-game.png b/src/lib/assets/bored-game.png
similarity index 100%
rename from src/lib/components/header/bored-game.png
rename to src/lib/assets/bored-game.png
diff --git a/src/lib/components/AddToList.svelte b/src/lib/components/AddToList.svelte
index c13568a..7756276 100644
--- a/src/lib/components/AddToList.svelte
+++ b/src/lib/components/AddToList.svelte
@@ -3,7 +3,7 @@
 	import { fly } from "svelte/transition";
 	import { createSelect, melt } from "@melt-ui/svelte";
 	import { Check, ChevronDown, MinusCircle, PlusCircle } from "lucide-svelte";
-	import Button from "./ui/button/Button.svelte";
+	import { Button } from '$components/ui/button';
 	import type { Collection, Wishlist } from "@prisma/client";
 
 	export let game_id: string;
diff --git a/src/lib/components/WishlistButton.svelte b/src/lib/components/WishlistButton.svelte
index 7e22205..0a8728d 100644
--- a/src/lib/components/WishlistButton.svelte
+++ b/src/lib/components/WishlistButton.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Button from "./ui/button/Button.svelte";
+	import { Button } from '$components/ui/button';
 </script>
 
 <Button type="submit">Add to wishlist</Button>
diff --git a/src/lib/components/header/index.svelte b/src/lib/components/header/index.svelte
index c940182..38a1e88 100644
--- a/src/lib/components/header/index.svelte
+++ b/src/lib/components/header/index.svelte
@@ -1,27 +1,21 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import { LogOut } from 'lucide-svelte';
-	import { Button } from '$components/ui/button';
-	import { Separator } from "$components/ui/separator";
-	import logo from './bored-game.png';
-	import { Avatar, AvatarFallback } from '$components/ui/avatar';
-	import {
-	Sheet,
-	SheetClose,
-	SheetContent,
-	SheetFooter,
-	SheetHeader,
-	SheetTitle,
-	SheetTrigger
-} from "$components/ui/sheet";
+	import { Button } from '$lib/components/ui/button';
+	import { Toggle } from "$lib/components/ui/toggle";
+	import * as Avatar from "$lib/components/ui/avatar";
+	import * as Sheet from "$lib/components/ui/sheet";
+	import Logo from '$components/logo.svelte';
 
 	export let user: any;
+
+	let avatar = user?.username.slice(0, 1).toUpperCase() || '?';
 </script>
 
 <header>
 	<div class="corner">
 		<a href="/" title="Home">
-			<img src={logo} alt="Bored Game Home" />
+			<Logo />
 		</a>
 	</div>
 	<!-- <TextSearch /> -->
@@ -29,39 +23,42 @@
 		{#if user}
 			<a href="/collection" title="Go to your collection" data-sveltekit-preload-data>Collection</a>
 			<a href="/wishlist" title="Go to your wishlist" data-sveltekit-preload-data>Wishlist</a>
-			<Sheet>
-				<SheetTrigger>
-					<Avatar class="h-16 w-16 bg-neutral-100">
-						<AvatarFallback class="text-3xl font-medium text-magnum-700">
-							{user?.username.slice(0, 1).toUpperCase() || '?'}
-						</AvatarFallback>
-					</Avatar>
-				</SheetTrigger>
-				<SheetContent position="right" size="lg">
-					<SheetHeader>
-						<SheetTitle>Menu</SheetTitle>
-					</SheetHeader>
+			<Sheet.Root>
+				<Sheet.Trigger>
+					<Avatar.Root asChild>
+						<Avatar.Fallback class="text-3xl font-medium text-magnum-700 h-16 w-16 bg-neutral-100">
+							{avatar}
+						</Avatar.Fallback>
+					</Avatar.Root>
+				</Sheet.Trigger>
+				<Sheet.Content side="right">
+					<Sheet.Header>
+						<Sheet.Title>Menu</Sheet.Title>
+						<Toggle aria-label="toggle bold">
+
+						</Toggle>
+					</Sheet.Header>
 					<div class="menu">
-						<div class="item">
-							<SheetClose>
-								<Button variant="link" href="/profile">View Profile</Button>
-							</SheetClose>
-						</div>
-						<div class="item">
-							<SheetClose>
-								<Button variant="link" href="/collection">Your Collection</Button>
-							</SheetClose>
-						</div>
-						<div class="item">
-							<SheetClose>
-								<Button variant="link" href="/wishlist">Your Wishlist</Button>
-							</SheetClose>
-						</div>
+						<Sheet.Close asChild let:builder>
+							<div class="item">
+								<Button builders={[builder]} variant="link" class="text-secondary-foreground" href="/profile">View Profile</Button>
+							</div>
+						</Sheet.Close>
+						<Sheet.Close asChild let:builder>
+							<div class="item">
+								<Button builders={[builder]} variant="link" class="text-secondary-foreground" href="/collection">Your Collection</Button>
+							</div>
+						</Sheet.Close>
+						<Sheet.Close asChild let:builder>
+							<div class="item">
+								<Button builders={[builder]} variant="link" class="text-secondary-foreground" href="/wishlist">Your Wishlist</Button>
+							</div>
+						</Sheet.Close>
 						<div class="separator" />
 						<div class="item">
 							<form
 								use:enhance
-								action="/auth/signout"
+								action="/logout"
 								method="POST"
 							>
 								<Button type="submit">
@@ -71,33 +68,22 @@
 							</form>
 						</div>
 					</div>
-					<SheetFooter>
-						<SheetClose>
-							<Button type="button">Close</Button>
-						</SheetClose>
-					</SheetFooter>
-				</SheetContent>
-			</Sheet>
-			<!-- <form
-				use:enhance
-				action="/auth/signout"
-				method="POST"
-			>
-				<Button type="submit">
-					<LogOut class="mr-2 h-4 w-4"/>
-					Sign out
-				</Button>
-			</form> -->
+					<Sheet.Footer>
+						<Sheet.Close asChild let:builder>
+							<Button builders={[builder]} type="button">Close</Button>
+						</Sheet.Close>
+					</Sheet.Footer>
+				</Sheet.Content>
+			</Sheet.Root>
 		{/if}
 		{#if !user}
-			<a href="/auth/signin">
-				<span class="flex-auto">Sign In</span></a
+			<a href="/login">
+				<span class="flex-auto">Login</span></a
 			>
-			<a href="/auth/signup">
+			<a href="/sign-up">
 				<span class="flex-auto">Sign Up</span></a
 			>
 		{/if}
-		<!-- <Profile /> -->
 	</nav>
 </header>
 
@@ -119,12 +105,13 @@
 	}
 
 	.item {
-		margin-bottom: 0.2rem;
+		/* margin: 0.2rem 0; */
 	}
 
 	.corner {
 		width: 3em;
 		height: 3em;
+		margin-left: 1rem;
 	}
 
 	.corner a {
diff --git a/src/lib/components/logo.svelte b/src/lib/components/logo.svelte
new file mode 100644
index 0000000..810da19
--- /dev/null
+++ b/src/lib/components/logo.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import logo from '$lib/assets/bored-game.png';
+</script>
+
+<img src={logo} alt="Bored Game Home" />
\ No newline at end of file
diff --git a/src/lib/components/search/random/index.svelte b/src/lib/components/search/random/index.svelte
index a90c75a..7086ac6 100644
--- a/src/lib/components/search/random/index.svelte
+++ b/src/lib/components/search/random/index.svelte
@@ -6,7 +6,7 @@
 	import { ToastType } from '$lib/types';
   import { superForm } from 'sveltekit-superforms/client';
 	import { toast } from '../../toast/toast';
-	import Button from '$components/ui/button/Button.svelte';
+	import { Button } from '$components/ui/button';
 
 	export let data: SuperValidated<SearchSchema>;
 	const { enhance } = superForm(data, {
diff --git a/src/lib/components/signin.svelte b/src/lib/components/signin.svelte
index 4ac41d8..9f214a0 100644
--- a/src/lib/components/signin.svelte
+++ b/src/lib/components/signin.svelte
@@ -19,7 +19,7 @@
 	];
 </script>
 
-<form method="POST" action="/auth/sign-in" use:enhance>
+<form method="POST" action="/sign-in" use:enhance>
 	<!--<SuperDebug data={$form} />-->
 	{#if $errors._errors}
 		<aside class="alert variant-filled-error mt-6">
@@ -77,6 +77,6 @@
 		>
 	</div>
 	<div class="flex flex-row justify-center items-center mt-10">
-		<a href="/auth/password/reset" class="font-semibold">{i("forgotPassword")}</a>
+		<a href="/password/reset" class="font-semibold">{i("forgotPassword")}</a>
 	</div>
 </form>
diff --git a/src/lib/components/signup.svelte b/src/lib/components/signup.svelte
index 4b99527..efd6473 100644
--- a/src/lib/components/signup.svelte
+++ b/src/lib/components/signup.svelte
@@ -19,7 +19,7 @@
 	// $: termsValue = $form.terms as Writable<boolean>;
 </script>
 
-<form method="POST" action="/auth/signup" use:enhance>
+<form method="POST" action="/sign-up" use:enhance>
 	<h1>Signup user</h1>
 	<label class="label">
 		<span class="sr-only">First Name</span>
@@ -105,7 +105,7 @@
 			<small>{$errors.password}</small>
 		{/if}
 	</label>
-	
+
 	<button type="submit">Signup</button>
 
 	<a class="back" href="/"> or Cancel </a>
diff --git a/src/lib/components/ui/alert/Alert.svelte b/src/lib/components/ui/alert/Alert.svelte
deleted file mode 100644
index dd90277..0000000
--- a/src/lib/components/ui/alert/Alert.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-	import type { VariantProps } from "class-variance-authority";
-	import { cva } from "class-variance-authority";
-	import { cn } from "$lib/utils";
-
-	const alertVariants = cva(
-		"relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
-		{
-			variants: {
-				variant: {
-					default: "bg-background text-foreground",
-					destructive:
-						"text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive"
-				}
-			},
-			defaultVariants: {
-				variant: "default"
-			}
-		}
-	);
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
-	export let variant: VariantProps<typeof alertVariants>["variant"] =
-		"default";
-</script>
-
-<div class={cn(alertVariants({ variant }), className)} {...$$restProps}>
-	<slot />
-</div>
diff --git a/src/lib/components/ui/alert/AlertTitle.svelte b/src/lib/components/ui/alert/AlertTitle.svelte
deleted file mode 100644
index 3a40aaf..0000000
--- a/src/lib/components/ui/alert/AlertTitle.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-	import { cn } from "$lib/utils";
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
-	export let level: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" = "h5";
-</script>
-
-<svelte:element
-	this={level}
-	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
-	{...$$restProps}
->
-	<slot />
-</svelte:element>
diff --git a/src/lib/components/ui/alert/AlertDescription.svelte b/src/lib/components/ui/alert/alert-description.svelte
similarity index 55%
rename from src/lib/components/ui/alert/AlertDescription.svelte
rename to src/lib/components/ui/alert/alert-description.svelte
index 32b04d8..42a9133 100644
--- a/src/lib/components/ui/alert/AlertDescription.svelte
+++ b/src/lib/components/ui/alert/alert-description.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
 	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
 
-	let className: string | undefined | null = undefined;
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 
diff --git a/src/lib/components/ui/alert/alert-title.svelte b/src/lib/components/ui/alert/alert-title.svelte
new file mode 100644
index 0000000..72d0138
--- /dev/null
+++ b/src/lib/components/ui/alert/alert-title.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from ".";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		level?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let level: $$Props["level"] = "h5";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={level}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/src/lib/components/ui/alert/alert.svelte b/src/lib/components/ui/alert/alert.svelte
new file mode 100644
index 0000000..ef6b407
--- /dev/null
+++ b/src/lib/components/ui/alert/alert.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { alertVariants, type Variant } from ".";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		variant?: Variant;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export { className as class };
+</script>
+
+<div
+	class={cn(alertVariants({ variant }), className)}
+	{...$$restProps}
+	role="alert"
+>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/alert/index.ts b/src/lib/components/ui/alert/index.ts
index 94f305b..cde7987 100644
--- a/src/lib/components/ui/alert/index.ts
+++ b/src/lib/components/ui/alert/index.ts
@@ -1,3 +1,33 @@
-export { default as Alert } from "./Alert.svelte";
-export { default as AlertDescription } from "./AlertDescription.svelte";
-export { default as AlertTitle } from "./AlertTitle.svelte";
+import { tv, type VariantProps } from "tailwind-variants";
+
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+
+export const alertVariants = tv({
+	base: "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
+
+	variants: {
+		variant: {
+			default: "bg-background text-foreground",
+			destructive:
+				"text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive"
+		}
+	},
+	defaultVariants: {
+		variant: "default"
+	}
+});
+
+export type Variant = VariantProps<typeof alertVariants>["variant"];
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle
+};
diff --git a/src/lib/components/ui/button/Button.svelte b/src/lib/components/ui/button/Button.svelte
deleted file mode 100644
index c65c0eb..0000000
--- a/src/lib/components/ui/button/Button.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts">
-	import type { VariantProps } from "class-variance-authority";
-	import type {
-		HTMLAnchorAttributes,
-		HTMLButtonAttributes
-	} from "svelte/elements";
-	import { cn } from "$lib/utils";
-	import { buttonVariants } from ".";
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
-	export let href: HTMLAnchorAttributes["href"] = undefined;
-	export let type: HTMLButtonAttributes["type"] = undefined;
-	export let variant: VariantProps<typeof buttonVariants>["variant"] =
-		"default";
-	export let size: VariantProps<typeof buttonVariants>["size"] = "default";
-
-	type Props = {
-		class?: string | null;
-		variant?: VariantProps<typeof buttonVariants>["variant"];
-		size?: VariantProps<typeof buttonVariants>["size"];
-	};
-
-	interface AnchorElement extends Props, HTMLAnchorAttributes {
-		href?: HTMLAnchorAttributes["href"];
-		type?: never;
-	}
-
-	interface ButtonElement extends Props, HTMLButtonAttributes {
-		type?: HTMLButtonAttributes["type"];
-		href?: never;
-	}
-
-	type $$Props = AnchorElement | ButtonElement;
-</script>
-
-<svelte:element
-	this={href ? "a" : "button"}
-	type={href ? undefined : type}
-	{href}
-	class={cn(buttonVariants({ variant, size, className }))}
-	{...$$restProps}
-	on:click
-	on:change
-	on:keydown
-	on:keyup
-	on:mouseenter
-	on:mouseleave
->
-	<slot />
-</svelte:element>
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
new file mode 100644
index 0000000..ee4f0df
--- /dev/null
+++ b/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { buttonVariants, type Size, type Variant } from ".";
+
+	type $$Props = ButtonPrimitive.Props & {
+		variant?: Variant;
+		size?: Size;
+	};
+	type $$Events = ButtonPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
index 32393a4..3fc0805 100644
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@@ -1,32 +1,35 @@
-import { cva } from "class-variance-authority";
+import Root from './button.svelte';
+import { tv, type VariantProps } from 'tailwind-variants';
 
-export { default as Button } from "./Button.svelte";
-
-export const buttonVariants = cva(
-	"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
-	{
-		variants: {
-			variant: {
-				default:
-					"bg-primary text-primary-foreground hover:bg-primary/90",
-				destructive:
-					"bg-destructive text-destructive-foreground hover:bg-destructive/90",
-				outline:
-					"border border-input hover:bg-accent hover:text-accent-foreground",
-				secondary:
-					"bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
-				link: "underline-offset-4 hover:underline text-primary"
-			},
-			size: {
-				default: "h-10 py-2 px-4",
-				sm: "h-9 px-3 rounded-md",
-				lg: "h-11 px-8 rounded-md"
-			}
+export const buttonVariants = tv({
+	base: 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+	variants: {
+		variant: {
+			default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+			destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+			outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+			secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+			ghost: 'hover:bg-accent hover:text-accent-foreground',
+			link: 'text-primary underline-offset-4 hover:underline'
 		},
-		defaultVariants: {
-			variant: "default",
-			size: "default"
+		size: {
+			default: 'h-10 px-4 py-2',
+			sm: 'h-9 rounded-md px-3',
+			lg: 'h-11 rounded-md px-8',
+			icon: 'h-10 w-10'
 		}
+	},
+	defaultVariants: {
+		variant: 'default',
+		size: 'default'
 	}
-);
+});
+
+export type Variant = VariantProps<typeof buttonVariants>['variant'];
+export type Size = VariantProps<typeof buttonVariants>['size'];
+
+export {
+	Root,
+	//
+	Root as Button
+};
diff --git a/src/lib/components/ui/checkbox/checkbox.svelte b/src/lib/components/ui/checkbox/checkbox.svelte
new file mode 100644
index 0000000..3258320
--- /dev/null
+++ b/src/lib/components/ui/checkbox/checkbox.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import { Check, Minus } from "lucide-svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = CheckboxPrimitive.Props;
+	type $$Events = CheckboxPrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = false;
+	export { className as class };
+</script>
+
+<CheckboxPrimitive.Root
+	bind:checked
+	class={cn(
+		"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+		className
+	)}
+	{...$$restProps}
+	on:click
+>
+	<CheckboxPrimitive.Indicator
+		class={cn("flex items-center justify-center text-current h-4 w-4")}
+		let:isChecked
+		let:isIndeterminate
+	>
+		{#if isChecked}
+			<Check class="h-4 w-4" />
+		{:else if isIndeterminate}
+			<Minus class="h-4 w-4" />
+		{/if}
+	</CheckboxPrimitive.Indicator>
+</CheckboxPrimitive.Root>
diff --git a/src/lib/components/ui/checkbox/index.ts b/src/lib/components/ui/checkbox/index.ts
new file mode 100644
index 0000000..5fba5a4
--- /dev/null
+++ b/src/lib/components/ui/checkbox/index.ts
@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+	Root,
+	//
+	Root as Checkbox
+};
diff --git a/src/lib/components/ui/collapsible/collapsible-content.svelte b/src/lib/components/ui/collapsible/collapsible-content.svelte
new file mode 100644
index 0000000..5b6b3e5
--- /dev/null
+++ b/src/lib/components/ui/collapsible/collapsible-content.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+	import { slide } from "svelte/transition";
+
+	type $$Props = CollapsiblePrimitive.ContentProps;
+
+	export let transition: $$Props["transition"] = slide;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150
+	};
+</script>
+
+<CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}>
+	<slot />
+</CollapsiblePrimitive.Content>
diff --git a/src/lib/components/ui/collapsible/index.ts b/src/lib/components/ui/collapsible/index.ts
index 320bc14..04c3c2a 100644
--- a/src/lib/components/ui/collapsible/index.ts
+++ b/src/lib/components/ui/collapsible/index.ts
@@ -1,7 +1,15 @@
-import { Collapsible as CollapsiblePrimitive } from "radix-svelte";
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+import Content from "./collapsible-content.svelte";
 
-export const Collapsible = CollapsiblePrimitive.Root;
+const Root = CollapsiblePrimitive.Root;
+const Trigger = CollapsiblePrimitive.Trigger;
 
-export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
-
-export const CollapsibleContent = CollapsiblePrimitive.Content;
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger
+};
diff --git a/src/lib/components/ui/form/form-button.svelte b/src/lib/components/ui/form/form-button.svelte
new file mode 100644
index 0000000..024f9dc
--- /dev/null
+++ b/src/lib/components/ui/form/form-button.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import * as Button from "$lib/components/ui/button";
+	type $$Props = Button.Props;
+	type $$Events = Button.Events;
+</script>
+
+<Button.Root type="submit" {...$$restProps} on:click on:keydown>
+	<slot />
+</Button.Root>
diff --git a/src/lib/components/ui/form/form-checkbox.svelte b/src/lib/components/ui/form/form-checkbox.svelte
new file mode 100644
index 0000000..16311a0
--- /dev/null
+++ b/src/lib/components/ui/form/form-checkbox.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { getFormField } from "formsnap";
+	import type { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import { Checkbox } from "$lib/components/ui/checkbox";
+	type $$Props = CheckboxPrimitive.Props;
+	type $$Events = CheckboxPrimitive.Events;
+
+	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
+
+	const { name, setValue, attrStore, value } = getFormField();
+	const { name: nameAttr, value: valueAttr, ...rest } = $attrStore;
+</script>
+
+<Checkbox
+	{...rest}
+	checked={typeof $value === "boolean" ? $value : false}
+	onCheckedChange={(v) => {
+		onCheckedChange?.(v);
+		setValue(v);
+	}}
+	{...$$restProps}
+	on:click
+	on:keydown
+/>
+<input hidden {name} value={$value} />
diff --git a/src/lib/components/ui/form/form-description.svelte b/src/lib/components/ui/form/form-description.svelte
new file mode 100644
index 0000000..248c503
--- /dev/null
+++ b/src/lib/components/ui/form/form-description.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Form as FormPrimitive } from "formsnap";
+	import { cn } from "@/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<FormPrimitive.Description
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</FormPrimitive.Description>
diff --git a/src/lib/components/ui/form/form-input.svelte b/src/lib/components/ui/form/form-input.svelte
new file mode 100644
index 0000000..224f44a
--- /dev/null
+++ b/src/lib/components/ui/form/form-input.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { getFormField } from "formsnap";
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { Input, type InputEvents } from "$lib/components/ui/input";
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	const { attrStore, value } = getFormField();
+</script>
+
+<Input
+	{...$attrStore}
+	bind:value={$value}
+	{...$$restProps}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+/>
diff --git a/src/lib/components/ui/form/form-item.svelte b/src/lib/components/ui/form/form-item.svelte
new file mode 100644
index 0000000..fb520ac
--- /dev/null
+++ b/src/lib/components/ui/form/form-item.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { cn } from "@/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("space-y-2", className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/lib/components/ui/form/form-label.svelte b/src/lib/components/ui/form/form-label.svelte
new file mode 100644
index 0000000..623fdec
--- /dev/null
+++ b/src/lib/components/ui/form/form-label.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Label as LabelPrimitive } from "bits-ui";
+	import { getFormField } from "formsnap";
+	import { cn } from "@/utils";
+	import { Label } from "$lib/components/ui/label";
+
+	type $$Props = LabelPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+
+	const { errors, ids } = getFormField();
+</script>
+
+<Label
+	for={ids.input}
+	class={cn($errors && "text-destructive", className)}
+	{...$$restProps}
+>
+	<slot />
+</Label>
diff --git a/src/lib/components/ui/form/form-native-select.svelte b/src/lib/components/ui/form/form-native-select.svelte
new file mode 100644
index 0000000..67c63fd
--- /dev/null
+++ b/src/lib/components/ui/form/form-native-select.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Form as FormPrimitive } from "formsnap";
+	import { buttonVariants } from "$lib/components/ui/button";
+	import { cn } from "@/utils";
+	import { ChevronDown } from "lucide-svelte";
+	import type { HTMLSelectAttributes } from "svelte/elements";
+
+	type $$Props = HTMLSelectAttributes;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<FormPrimitive.Select
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"appearance-none bg-transparent font-normal",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</FormPrimitive.Select>
+<ChevronDown class="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
diff --git a/src/lib/components/ui/form/form-radio-group.svelte b/src/lib/components/ui/form/form-radio-group.svelte
new file mode 100644
index 0000000..91f6b80
--- /dev/null
+++ b/src/lib/components/ui/form/form-radio-group.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { getFormField } from "formsnap";
+	import type { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import * as RadioGroup from "$lib/components/ui/radio-group";
+
+	type $$Props = RadioGroupPrimitive.Props;
+	const { attrStore, setValue, name, value } = getFormField();
+
+	export let onValueChange: $$Props["onValueChange"] = undefined;
+</script>
+
+<RadioGroup.Root
+	{...$attrStore}
+	onValueChange={(v) => {
+		onValueChange?.(v);
+		setValue(v);
+	}}
+	{...$$restProps}
+>
+	<slot />
+	<input hidden {name} value={$value} />
+</RadioGroup.Root>
diff --git a/src/lib/components/ui/form/form-select-trigger.svelte b/src/lib/components/ui/form/form-select-trigger.svelte
new file mode 100644
index 0000000..5950967
--- /dev/null
+++ b/src/lib/components/ui/form/form-select-trigger.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import * as Select from "$lib/components/ui/select";
+	import type { Select as SelectPrimitive } from "bits-ui";
+	import { getFormField } from "formsnap";
+
+	type $$Props = SelectPrimitive.TriggerProps & {
+		placeholder?: string;
+	};
+	type $$Events = SelectPrimitive.TriggerEvents;
+	const { attrStore } = getFormField();
+	export let placeholder = "";
+</script>
+
+<Select.Trigger {...$$restProps} {...$attrStore} on:click on:keydown>
+	<Select.Value {placeholder} />
+	<slot />
+</Select.Trigger>
diff --git a/src/lib/components/ui/form/form-select.svelte b/src/lib/components/ui/form/form-select.svelte
new file mode 100644
index 0000000..6100084
--- /dev/null
+++ b/src/lib/components/ui/form/form-select.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import * as Select from "$lib/components/ui/select";
+	import { getFormField } from "formsnap";
+	import type { Select as SelectPrimitive } from "bits-ui";
+
+	type $$Props = SelectPrimitive.Props;
+	const { setValue, name, value } = getFormField();
+	export let onSelectedChange: $$Props["onSelectedChange"];
+</script>
+
+<Select.Root
+	onSelectedChange={(v) => {
+		onSelectedChange?.(v);
+		setValue(v ? v.value : undefined);
+	}}
+	{...$$restProps}
+>
+	<slot />
+	<input hidden {name} value={$value} />
+</Select.Root>
diff --git a/src/lib/components/ui/form/form-switch.svelte b/src/lib/components/ui/form/form-switch.svelte
new file mode 100644
index 0000000..8b909dc
--- /dev/null
+++ b/src/lib/components/ui/form/form-switch.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { getFormField } from "formsnap";
+	import type { Switch as SwitchPrimitive } from "bits-ui";
+	import { Switch } from "$lib/components/ui/switch";
+	type $$Props = SwitchPrimitive.Props;
+	type $$Events = SwitchPrimitive.Events;
+
+	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
+
+	const { name, setValue, attrStore, value } = getFormField();
+</script>
+
+<Switch
+	{...$attrStore}
+	checked={typeof $value === "boolean" ? $value : false}
+	onCheckedChange={(v) => {
+		onCheckedChange?.(v);
+		setValue(v);
+	}}
+	{...$$restProps}
+	on:click
+	on:keydown
+/>
+<input hidden {name} value={$value} />
diff --git a/src/lib/components/ui/form/form-textarea.svelte b/src/lib/components/ui/form/form-textarea.svelte
new file mode 100644
index 0000000..149d88f
--- /dev/null
+++ b/src/lib/components/ui/form/form-textarea.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { getFormField } from "formsnap";
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+	import type { TextareaGetFormField } from ".";
+	import {
+		Textarea,
+		type TextareaEvents
+	} from "$lib/components/ui/textarea";
+
+	type $$Props = HTMLTextareaAttributes;
+	type $$Events = TextareaEvents;
+
+	const { attrStore, value } = getFormField() as TextareaGetFormField;
+</script>
+
+<Textarea
+	{...$attrStore}
+	bind:value={$value}
+	{...$$restProps}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+/>
diff --git a/src/lib/components/ui/form/form-validation.svelte b/src/lib/components/ui/form/form-validation.svelte
new file mode 100644
index 0000000..bca5fd4
--- /dev/null
+++ b/src/lib/components/ui/form/form-validation.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Form as FormPrimitive } from "formsnap";
+	import { cn } from "@/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLParagraphElement>;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<FormPrimitive.Validation
+	class={cn("text-sm font-medium text-destructive", className)}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/form/index.ts b/src/lib/components/ui/form/index.ts
new file mode 100644
index 0000000..3c35410
--- /dev/null
+++ b/src/lib/components/ui/form/index.ts
@@ -0,0 +1,82 @@
+import { Form as FormPrimitive, getFormField } from "formsnap";
+import * as RadioGroupComp from "$lib/components/ui/radio-group";
+import * as SelectComp from "$lib/components/ui/select";
+import type { Writable } from "svelte/store";
+import Item from "./form-item.svelte";
+import Input from "./form-input.svelte";
+import Textarea from "./form-textarea.svelte";
+import Description from "./form-description.svelte";
+import Label from "./form-label.svelte";
+import Validation from "./form-validation.svelte";
+import Checkbox from "./form-checkbox.svelte";
+import Switch from "./form-switch.svelte";
+import NativeSelect from "./form-native-select.svelte";
+import RadioGroup from "./form-radio-group.svelte";
+import Select from "./form-select.svelte";
+import SelectTrigger from "./form-select-trigger.svelte";
+import Button from "./form-button.svelte";
+
+const Root = FormPrimitive.Root;
+const Field = FormPrimitive.Field;
+const RadioItem = RadioGroupComp.Item;
+const NativeRadio = FormPrimitive.Radio;
+const SelectContent = SelectComp.Content;
+const SelectLabel = SelectComp.Label;
+const SelectGroup = SelectComp.Group;
+const SelectItem = SelectComp.Item;
+const SelectSeparator = SelectComp.Separator;
+
+export type TextareaGetFormField = Omit<
+	ReturnType<typeof getFormField>,
+	"value"
+> & {
+	value: Writable<string>;
+};
+
+export {
+	Root,
+	Field,
+	Item,
+	Input,
+	Label,
+	Button,
+	Switch,
+	Select,
+	Checkbox,
+	Textarea,
+	Validation,
+	RadioGroup,
+	RadioItem,
+	Description,
+	SelectContent,
+	SelectLabel,
+	SelectGroup,
+	SelectItem,
+	SelectSeparator,
+	SelectTrigger,
+	NativeSelect,
+	NativeRadio,
+	//
+	Root as Form,
+	Field as FormField,
+	Item as FormItem,
+	Input as FormInput,
+	Textarea as FormTextarea,
+	Description as FormDescription,
+	Label as FormLabel,
+	Validation as FormValidation,
+	NativeSelect as FormNativeSelect,
+	NativeRadio as FormNativeRadio,
+	Checkbox as FormCheckbox,
+	Switch as FormSwitch,
+	RadioGroup as FormRadioGroup,
+	RadioItem as FormRadioItem,
+	Select as FormSelect,
+	SelectContent as FormSelectContent,
+	SelectLabel as FormSelectLabel,
+	SelectGroup as FormSelectGroup,
+	SelectItem as FormSelectItem,
+	SelectSeparator as FormSelectSeparator,
+	SelectTrigger as FormSelectTrigger,
+	Button as FormButton
+};
diff --git a/src/lib/components/ui/input/index.ts b/src/lib/components/ui/input/index.ts
index 06f880b..914dce5 100644
--- a/src/lib/components/ui/input/index.ts
+++ b/src/lib/components/ui/input/index.ts
@@ -1 +1,25 @@
-export { default as Input } from "./Input.svelte";
+import Root from "./input.svelte";
+
+type FormInputEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+	blur: FormInputEvent<FocusEvent>;
+	change: FormInputEvent<Event>;
+	click: FormInputEvent<MouseEvent>;
+	focus: FormInputEvent<FocusEvent>;
+	keydown: FormInputEvent<KeyboardEvent>;
+	keypress: FormInputEvent<KeyboardEvent>;
+	keyup: FormInputEvent<KeyboardEvent>;
+	mouseover: FormInputEvent<MouseEvent>;
+	mouseenter: FormInputEvent<MouseEvent>;
+	mouseleave: FormInputEvent<MouseEvent>;
+	paste: FormInputEvent<ClipboardEvent>;
+	input: FormInputEvent<InputEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Input
+};
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
new file mode 100644
index 0000000..b5cef44
--- /dev/null
+++ b/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+	import type { InputEvents } from ".";
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+</script>
+
+<input
+	class={cn(
+		"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/select/index.ts b/src/lib/components/ui/select/index.ts
new file mode 100644
index 0000000..b3bc630
--- /dev/null
+++ b/src/lib/components/ui/select/index.ts
@@ -0,0 +1,33 @@
+import { Select as SelectPrimitive } from "bits-ui";
+
+import Root from "./select.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+
+const Group = SelectPrimitive.Group;
+const Input = SelectPrimitive.Input;
+const Value = SelectPrimitive.Value;
+export {
+	Root,
+	Group,
+	Input,
+	Label,
+	Item,
+	Value,
+	Content,
+	Trigger,
+	Separator,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Input as SelectInput,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Value as SelectValue,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator
+};
diff --git a/src/lib/components/ui/select/select-content.svelte b/src/lib/components/ui/select/select-content.svelte
new file mode 100644
index 0000000..e527bdc
--- /dev/null
+++ b/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils";
+	import { scale } from "svelte/transition";
+
+	type $$Props = SelectPrimitive.ContentProps;
+	type $$Events = SelectPrimitive.ContentEvents;
+	export let inTransition: $$Props["inTransition"] = flyAndScale;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
+	export let outTransition: $$Props["outTransition"] = scale;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
+		start: 0.95,
+		opacity: 0,
+		duration: 50
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Content
+	{inTransition}
+	{inTransitionConfig}
+	{outTransition}
+	{outTransitionConfig}
+	class={cn(
+		"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<div class="w-full p-1">
+		<slot />
+	</div>
+</SelectPrimitive.Content>
diff --git a/src/lib/components/ui/select/select-item.svelte b/src/lib/components/ui/select/select-item.svelte
new file mode 100644
index 0000000..e78a9e7
--- /dev/null
+++ b/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { Check } from "lucide-svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.ItemProps;
+	type $$Events = SelectPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export let label: $$Props["label"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Item
+	{value}
+	{disabled}
+	{label}
+	class={cn(
+		"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<SelectPrimitive.ItemIndicator>
+			<Check class="h-4 w-4" />
+		</SelectPrimitive.ItemIndicator>
+	</span>
+	<slot />
+</SelectPrimitive.Item>
diff --git a/src/lib/components/ui/select/select-label.svelte b/src/lib/components/ui/select/select-label.svelte
new file mode 100644
index 0000000..2fd2be4
--- /dev/null
+++ b/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.LabelProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Label
+	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+	{...$$restProps}
+>
+	<slot />
+</SelectPrimitive.Label>
diff --git a/src/lib/components/ui/select/select-separator.svelte b/src/lib/components/ui/select/select-separator.svelte
new file mode 100644
index 0000000..aa028c4
--- /dev/null
+++ b/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Separator
+	class={cn("-mx-1 my-1 h-px bg-muted", className)}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/select/select-trigger.svelte b/src/lib/components/ui/select/select-trigger.svelte
new file mode 100644
index 0000000..b514996
--- /dev/null
+++ b/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { ChevronDown } from "lucide-svelte";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SelectPrimitive.TriggerProps;
+	type $$Events = SelectPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Trigger
+	class={cn(
+		"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+	on:click
+	on:keydown
+>
+	<slot {builder} />
+	<div>
+		<ChevronDown class="h-4 w-4 opacity-50" />
+	</div>
+</SelectPrimitive.Trigger>
diff --git a/src/lib/components/ui/select/select.svelte b/src/lib/components/ui/select/select.svelte
new file mode 100644
index 0000000..7f42396
--- /dev/null
+++ b/src/lib/components/ui/select/select.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	type $$Props = SelectPrimitive.Props;
+
+	export let selected: $$Props["selected"] = undefined;
+	export let open: $$Props["open"] = undefined;
+</script>
+
+<SelectPrimitive.Root bind:selected bind:open {...$$restProps}>
+	<slot />
+</SelectPrimitive.Root>
diff --git a/src/lib/components/ui/sheet/SheetOverlay.svelte b/src/lib/components/ui/sheet/SheetOverlay.svelte
deleted file mode 100644
index c261da0..0000000
--- a/src/lib/components/ui/sheet/SheetOverlay.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-	import { Dialog as SheetPrimitive } from "radix-svelte";
-	import { cn } from "$lib/utils";
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
-</script>
-
-<SheetPrimitive.Overlay
-	class={cn(
-		"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
-		className
-	)}
-	{...$$restProps}
-/>
diff --git a/src/lib/components/ui/sheet/SheetPortal.svelte b/src/lib/components/ui/sheet/SheetPortal.svelte
deleted file mode 100644
index fc3e79d..0000000
--- a/src/lib/components/ui/sheet/SheetPortal.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-	import type { VariantProps } from "class-variance-authority";
-	import { cva } from "class-variance-authority";
-	import { Dialog as SheetPrimitive } from "radix-svelte";
-	import { cn } from "$lib/utils";
-
-	const portalVariants = cva("fixed inset-0 z-50 flex", {
-		variants: {
-			position: {
-				top: "items-start",
-				bottom: "items-end",
-				left: "justify-start",
-				right: "justify-end"
-			}
-		},
-		defaultVariants: { position: "right" }
-	});
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
-	export let position: VariantProps<typeof portalVariants>["position"] =
-		"right";
-</script>
-
-<SheetPrimitive.Portal class={cn(className)} {...$$restProps}>
-	<div class={portalVariants({ position })}>
-		<slot />
-	</div>
-</SheetPrimitive.Portal>
diff --git a/src/lib/components/ui/sheet/index.ts b/src/lib/components/ui/sheet/index.ts
index 73ff250..ffa8f20 100644
--- a/src/lib/components/ui/sheet/index.ts
+++ b/src/lib/components/ui/sheet/index.ts
@@ -1,102 +1,55 @@
-import { cva } from "class-variance-authority";
-import { Dialog as SheetPrimitive } from "radix-svelte";
+import { Dialog as SheetPrimitive } from "bits-ui";
+import { tv, type VariantProps } from "tailwind-variants";
 
-export { default as SheetContent } from "./SheetContent.svelte";
-export { default as SheetDescription } from "./SheetDescription.svelte";
-export { default as SheetFooter } from "./SheetFooter.svelte";
-export { default as SheetHeader } from "./SheetHeader.svelte";
-export { default as SheetOverlay } from "./SheetOverlay.svelte";
-export { default as SheetPortal } from "./SheetPortal.svelte";
-export { default as SheetTitle } from "./SheetTitle.svelte";
+import Portal from "./sheet-portal.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
 
-export const Sheet = SheetPrimitive.Root;
-export const SheetTrigger = SheetPrimitive.Trigger;
-export const SheetClose = SheetPrimitive.Close;
+const Root = SheetPrimitive.Root;
+const Close = SheetPrimitive.Close;
+const Trigger = SheetPrimitive.Trigger;
 
-export const sheetVariants = cva(
-	"fixed z-50 scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border",
-	{
-		variants: {
-			position: {
-				top: "animate-in slide-in-from-top w-full duration-300",
-				bottom: "animate-in slide-in-from-bottom w-full duration-300",
-				left: "animate-in slide-in-from-left h-full duration-300",
-				right: "animate-in slide-in-from-right h-full duration-300"
-			},
-			size: {
-				content: "",
-				default: "",
-				sm: "",
-				lg: "",
-				xl: "",
-				full: ""
-			}
-		},
-		compoundVariants: [
-			{
-				position: ["top", "bottom"],
-				size: "content",
-				class: "max-h-screen"
-			},
-			{
-				position: ["top", "bottom"],
-				size: "default",
-				class: "h-1/3"
-			},
-			{
-				position: ["top", "bottom"],
-				size: "sm",
-				class: "h-1/4"
-			},
-			{
-				position: ["top", "bottom"],
-				size: "lg",
-				class: "h-1/2"
-			},
-			{
-				position: ["top", "bottom"],
-				size: "xl",
-				class: "h-5/6"
-			},
-			{
-				position: ["top", "bottom"],
-				size: "full",
-				class: "h-screen"
-			},
-			{
-				position: ["right", "left"],
-				size: "content",
-				class: "max-w-screen"
-			},
-			{
-				position: ["right", "left"],
-				size: "default",
-				class: "w-1/3"
-			},
-			{
-				position: ["right", "left"],
-				size: "sm",
-				class: "w-1/4"
-			},
-			{
-				position: ["right", "left"],
-				size: "lg",
-				class: "w-1/2"
-			},
-			{
-				position: ["right", "left"],
-				size: "xl",
-				class: "w-5/6"
-			},
-			{
-				position: ["right", "left"],
-				size: "full",
-				class: "w-screen"
-			}
-		],
-		defaultVariants: {
-			position: "right",
-			size: "default"
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription
+};
+
+export const sheetVariants = tv({
+	base: "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+	variants: {
+		side: {
+			top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+			bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+			left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+			right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
 		}
+	},
+	defaultVariants: {
+		side: "right"
 	}
-);
+});
+
+export type Side = VariantProps<typeof sheetVariants>["side"];
diff --git a/src/lib/components/ui/sheet/SheetContent.svelte b/src/lib/components/ui/sheet/sheet-content.svelte
similarity index 52%
rename from src/lib/components/ui/sheet/SheetContent.svelte
rename to src/lib/components/ui/sheet/sheet-content.svelte
index 5aca907..88643a8 100644
--- a/src/lib/components/ui/sheet/SheetContent.svelte
+++ b/src/lib/components/ui/sheet/sheet-content.svelte
@@ -1,23 +1,22 @@
 <script lang="ts">
-	import type { VariantProps } from "class-variance-authority";
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { SheetOverlay, SheetPortal, sheetVariants, type Side } from ".";
 	import { X } from "lucide-svelte";
-	import { Dialog as SheetPrimitive } from "radix-svelte";
 	import { cn } from "$lib/utils";
-	import { sheetVariants } from ".";
-	import SheetOverlay from "./SheetOverlay.svelte";
-	import SheetPortal from "./SheetPortal.svelte";
 
-	let className: string | undefined | null = undefined;
+	type $$Props = SheetPrimitive.ContentProps & {
+		side?: Side;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let side: $$Props["side"] = "right";
 	export { className as class };
-	export let position: VariantProps<typeof sheetVariants>["position"] =
-		"right";
-	export let size: VariantProps<typeof sheetVariants>["size"] = "default";
 </script>
 
-<SheetPortal {position}>
+<SheetPortal>
 	<SheetOverlay />
 	<SheetPrimitive.Content
-		class={cn(sheetVariants({ position, size }), className)}
+		class={cn(sheetVariants({ side }), className)}
 		{...$$restProps}
 	>
 		<slot />
diff --git a/src/lib/components/ui/sheet/SheetDescription.svelte b/src/lib/components/ui/sheet/sheet-description.svelte
similarity index 61%
rename from src/lib/components/ui/sheet/SheetDescription.svelte
rename to src/lib/components/ui/sheet/sheet-description.svelte
index fdd2585..1e1a23a 100644
--- a/src/lib/components/ui/sheet/SheetDescription.svelte
+++ b/src/lib/components/ui/sheet/sheet-description.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "radix-svelte";
+	import { Dialog as SheetPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils";
 
-	let className: string | undefined | null = undefined;
+	type $$Props = SheetPrimitive.DescriptionProps;
+
+	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 
diff --git a/src/lib/components/ui/sheet/SheetFooter.svelte b/src/lib/components/ui/sheet/sheet-footer.svelte
similarity index 60%
rename from src/lib/components/ui/sheet/SheetFooter.svelte
rename to src/lib/components/ui/sheet/sheet-footer.svelte
index 1207c02..36c0cca 100644
--- a/src/lib/components/ui/sheet/SheetFooter.svelte
+++ b/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
 	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
 
-	let className: string | undefined | null = undefined;
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 
diff --git a/src/lib/components/ui/sheet/SheetHeader.svelte b/src/lib/components/ui/sheet/sheet-header.svelte
similarity index 58%
rename from src/lib/components/ui/sheet/SheetHeader.svelte
rename to src/lib/components/ui/sheet/sheet-header.svelte
index 7f644ff..b2d63db 100644
--- a/src/lib/components/ui/sheet/SheetHeader.svelte
+++ b/src/lib/components/ui/sheet/sheet-header.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
 	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
 
-	let className: string | undefined | null = undefined;
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 
diff --git a/src/lib/components/ui/sheet/sheet-overlay.svelte b/src/lib/components/ui/sheet/sheet-overlay.svelte
new file mode 100644
index 0000000..c03b51b
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SheetPrimitive.OverlayProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Overlay
+	class={cn(
+		"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+		className
+	)}
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/sheet/sheet-portal.svelte b/src/lib/components/ui/sheet/sheet-portal.svelte
new file mode 100644
index 0000000..df9e1b9
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-portal.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SheetPrimitive.PortalProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SheetPrimitive.Portal class={cn(className)} {...$$restProps}>
+	<slot />
+</SheetPrimitive.Portal>
diff --git a/src/lib/components/ui/sheet/SheetTitle.svelte b/src/lib/components/ui/sheet/sheet-title.svelte
similarity index 62%
rename from src/lib/components/ui/sheet/SheetTitle.svelte
rename to src/lib/components/ui/sheet/sheet-title.svelte
index 0e56b51..b50ea5f 100644
--- a/src/lib/components/ui/sheet/SheetTitle.svelte
+++ b/src/lib/components/ui/sheet/sheet-title.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { Dialog as SheetPrimitive } from "radix-svelte";
+	import { Dialog as SheetPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils";
 
-	let className: string | undefined | null = undefined;
+	type $$Props = SheetPrimitive.TitleProps;
+
+	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 
diff --git a/src/lib/components/ui/switch/index.ts b/src/lib/components/ui/switch/index.ts
new file mode 100644
index 0000000..f0e5fb7
--- /dev/null
+++ b/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch
+};
diff --git a/src/lib/components/ui/switch/switch.svelte b/src/lib/components/ui/switch/switch.svelte
new file mode 100644
index 0000000..abc2842
--- /dev/null
+++ b/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = SwitchPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = undefined;
+	export { className as class };
+</script>
+
+<SwitchPrimitive.Root
+	bind:checked
+	class={cn(
+		"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+		className
+	)}
+	{...$$restProps}
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>
diff --git a/src/lib/components/ui/textarea/index.ts b/src/lib/components/ui/textarea/index.ts
new file mode 100644
index 0000000..eb0f7be
--- /dev/null
+++ b/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,28 @@
+import Root from "./textarea.svelte";
+
+type FormTextareaEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLTextAreaElement;
+};
+
+type TextareaEvents = {
+	blur: FormTextareaEvent<FocusEvent>;
+	change: FormTextareaEvent<Event>;
+	click: FormTextareaEvent<MouseEvent>;
+	focus: FormTextareaEvent<FocusEvent>;
+	keydown: FormTextareaEvent<KeyboardEvent>;
+	keypress: FormTextareaEvent<KeyboardEvent>;
+	keyup: FormTextareaEvent<KeyboardEvent>;
+	mouseover: FormTextareaEvent<MouseEvent>;
+	mouseenter: FormTextareaEvent<MouseEvent>;
+	mouseleave: FormTextareaEvent<MouseEvent>;
+	paste: FormTextareaEvent<ClipboardEvent>;
+	input: FormTextareaEvent<InputEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Textarea,
+	type TextareaEvents,
+	type FormTextareaEvent
+};
diff --git a/src/lib/components/ui/textarea/textarea.svelte b/src/lib/components/ui/textarea/textarea.svelte
new file mode 100644
index 0000000..d8523ff
--- /dev/null
+++ b/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+
+	type $$Props = HTMLTextareaAttributes;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+</script>
+
+<textarea
+	class={cn(
+		"flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+	{...$$restProps}
+/>
diff --git a/src/lib/components/ui/toggle/index.ts b/src/lib/components/ui/toggle/index.ts
new file mode 100644
index 0000000..5567d08
--- /dev/null
+++ b/src/lib/components/ui/toggle/index.ts
@@ -0,0 +1,31 @@
+import Root from "./toggle.svelte";
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const toggleVariants = tv({
+	base: "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background hover:bg-muted hover:text-muted-foreground",
+	variants: {
+		variant: {
+			default: "bg-transparent",
+			outline:
+				"bg-transparent border border-input hover:bg-accent hover:text-accent-foreground"
+		},
+		size: {
+			default: "h-10 px-3",
+			sm: "h-9 px-2.5",
+			lg: "h-11 px-5"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+
+export type Variant = VariantProps<typeof toggleVariants>["variant"];
+export type Size = VariantProps<typeof toggleVariants>["size"];
+
+export {
+	Root,
+	//
+	Root as Toggle
+};
diff --git a/src/lib/components/ui/toggle/toggle.svelte b/src/lib/components/ui/toggle/toggle.svelte
new file mode 100644
index 0000000..0ff497a
--- /dev/null
+++ b/src/lib/components/ui/toggle/toggle.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from "bits-ui";
+	import { toggleVariants, type Variant, type Size } from ".";
+	import { cn } from "$lib/utils";
+
+	type $$Props = TogglePrimitive.Props & {
+		variant?: Variant;
+		size?: Size;
+	};
+	type $$Events = TogglePrimitive.Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let pressed: $$Props["pressed"] = undefined;
+	export { className as class };
+</script>
+
+<TogglePrimitive.Root
+	bind:pressed
+	class={cn(toggleVariants({ variant, size, className }))}
+	{...$$restProps}
+	on:m-click
+>
+	<slot />
+</TogglePrimitive.Root>
diff --git a/src/lib/config/zod-schemas.ts b/src/lib/config/zod-schemas.ts
index 637a781..301b518 100644
--- a/src/lib/config/zod-schemas.ts
+++ b/src/lib/config/zod-schemas.ts
@@ -69,6 +69,11 @@ export const signUpSchema = userSchema
 		}
 	});
 
+export const signInSchema = userSchema.pick({
+	username: true,
+	password: true
+});
+
 export const updateUserPasswordSchema = userSchema
 	.pick({ password: true, confirm_password: true })
 	.superRefine(({ confirm_password, password }, ctx) => {
diff --git a/src/routes/auth/signin/+page.server.ts b/src/routes/(auth)/login/+page.server.ts
similarity index 97%
rename from src/routes/auth/signin/+page.server.ts
rename to src/routes/(auth)/login/+page.server.ts
index dcdd9a8..cdad34c 100644
--- a/src/routes/auth/signin/+page.server.ts
+++ b/src/routes/(auth)/login/+page.server.ts
@@ -11,7 +11,7 @@ const signInSchema = userSchema.pick({
 });
 
 export const load = async (event) => {
-	console.log('sign in load event', event);
+	console.log('login load event', event);
 	const session = await event.locals.auth.validate();
 	if (session) {
 		const message = { type: 'info', message: 'You are already signed in' };
diff --git a/src/routes/auth/signin/+page.svelte b/src/routes/(auth)/login/+page.svelte
similarity index 73%
rename from src/routes/auth/signin/+page.svelte
rename to src/routes/(auth)/login/+page.svelte
index 207ec33..eb9e50f 100644
--- a/src/routes/auth/signin/+page.svelte
+++ b/src/routes/(auth)/login/+page.svelte
@@ -4,11 +4,11 @@
 	import * as flashModule from 'sveltekit-flash-message/client';
 	import toast from 'svelte-french-toast';
 	import { AlertCircle } from "lucide-svelte";
-	import { userSchema } from '$lib/config/zod-schemas.js';
-	import Label from '$components/ui/label/Label.svelte';
-	import Input from '$components/ui/input/Input.svelte';
-	import Button from '$components/ui/button/Button.svelte';
-  import { Alert, AlertDescription, AlertTitle } from "$components/ui/alert";
+	import { signInSchema } from '$lib/config/zod-schemas.js';
+	import { Label } from '$components/ui/label';
+	import { Input } from '$components/ui/input';
+	import { Button } from '$components/ui/button';
+  import * as Alert from "$components/ui/alert";
 
 	export let data;
 	const { form, errors, enhance, delayed } = superForm(data.form, {
@@ -24,6 +24,7 @@
 		},
 		syncFlashMessage: false,
 		taintedMessage: null,
+		validators: signInSchema,
 		validationMethod: 'oninput',
 		delayMs: 0,
 	});
@@ -39,34 +40,38 @@
 	}
 </script>
 
-<div class="signin">
+<svelte:head>
+	<title>Bored Game | Login</title>
+</svelte:head>
+
+<div class="login">
 	<form method="POST" use:enhance>
 		<div class="grid w-full max-w-sm items-center gap-2">
 			<h2
 				class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
 			>
-				Sign into your account
+				Log into your account
 			</h2>
 			<Label for="username">Username</Label>
-			<Input type="text" id="username" name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
+			<Input type="text" id="username" name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} required />
 			<Label for="password">Password</Label>
-			<Input type="password" id="password" name="password" placeholder="Password" autocomplete="password" data-invalid={$errors.password} bind:value={$form.password} />
+			<Input type="password" id="password" name="password" placeholder="Password" autocomplete="password" data-invalid={$errors.password} bind:value={$form.password} required />
 			<Button type="submit">Sign In</Button>
 		</div>
 	</form>
 	{#if $errors._errors}
-		<Alert variant="destructive">
+		<Alert.Root variant="destructive">
 			<AlertCircle class="h-4 w-4" />
-			<AlertTitle>Error</AlertTitle>
-			<AlertDescription>
+			<Alert.Title>Error</Alert.Title>
+			<Alert.Description>
 				{$errors._errors}
-			</AlertDescription>
-		</Alert>
+			</Alert.Description>
+		</Alert.Root>
 	{/if}
 </div>
 
 <style lang="postcss">
-	.signin {
+	.login {
 		display: grid;
 		gap: 2rem;
 	}
diff --git a/src/routes/auth/signout/+page.server.ts b/src/routes/(auth)/logout/+page.server.ts
similarity index 82%
rename from src/routes/auth/signout/+page.server.ts
rename to src/routes/(auth)/logout/+page.server.ts
index 0a0d104..4d1ef09 100644
--- a/src/routes/auth/signout/+page.server.ts
+++ b/src/routes/(auth)/logout/+page.server.ts
@@ -6,10 +6,10 @@ export const actions = {
 		console.log('Signing out user');
 		const session = await locals.auth.validate();
 		if (!session) {
-			throw redirect(302, '/auth/signin');
+			throw redirect(302, '/login');
 		}
 		await auth.invalidateSession(session.sessionId); // invalidate session
 		locals.auth.setSession(null); // remove cookie
-		throw redirect(302, '/auth/signin');
+		throw redirect(302, '/login');
 	}
 };
diff --git a/src/routes/auth/password/reset/+page.server.ts b/src/routes/(auth)/password/reset/+page.server.ts
similarity index 100%
rename from src/routes/auth/password/reset/+page.server.ts
rename to src/routes/(auth)/password/reset/+page.server.ts
diff --git a/src/routes/admin/+page.svelte b/src/routes/(auth)/password/reset/+page.svelte
similarity index 100%
rename from src/routes/admin/+page.svelte
rename to src/routes/(auth)/password/reset/+page.svelte
diff --git a/src/routes/auth/signup/+page.server.ts b/src/routes/(auth)/sign-up/+page.server.ts
similarity index 96%
rename from src/routes/auth/signup/+page.server.ts
rename to src/routes/(auth)/sign-up/+page.server.ts
index 6c171a2..ca584ee 100644
--- a/src/routes/auth/signup/+page.server.ts
+++ b/src/routes/(auth)/sign-up/+page.server.ts
@@ -40,9 +40,8 @@ export const load = async (event) => {
 	if (session) {
 		throw redirect(302, '/');
 	}
-	const form = await superValidate<typeof signUpSchema, Message>(event, signUpSchema);
 	return {
-		form
+		form: await superValidate<typeof signUpSchema, Message>(event, signUpSchema)
 	};
 };
 
diff --git a/src/routes/auth/signup/+page.svelte b/src/routes/(auth)/sign-up/+page.svelte
similarity index 71%
rename from src/routes/auth/signup/+page.svelte
rename to src/routes/(auth)/sign-up/+page.svelte
index a5c176b..0dc6874 100644
--- a/src/routes/auth/signup/+page.svelte
+++ b/src/routes/(auth)/sign-up/+page.svelte
@@ -4,21 +4,16 @@
 	import * as flashModule from 'sveltekit-flash-message/client';
 	import toast from 'svelte-french-toast';
 	import { ChevronsUpDown } from "lucide-svelte";
-	import Button from '$components/ui/button/Button.svelte';
-  import Input from '$components/ui/input/Input.svelte';
+	import { Button } from '$components/ui/button';
+  import { Input } from '$components/ui/input';
 	import Label from '$components/ui/label/Label.svelte';
 	import { signUpSchema } from '$lib/config/zod-schemas.js';
-	import {
-    Collapsible,
-    CollapsibleContent,
-    CollapsibleTrigger
-  } from "$components/ui/collapsible";
-	import Alert from '$components/ui/alert/Alert.svelte';
-	import AlertTitle from '$components/ui/alert/AlertTitle.svelte';
-	import AlertDescription from '$components/ui/alert/AlertDescription.svelte';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	import * as Alert from '$lib/components/ui/alert';
+	import { slide } from 'svelte/transition';
+	import { quintIn } from 'svelte/easing';
 
 	export let data;
-	let isOpen = false;
 
   const { form, errors, constraints, enhance, delayed } = superForm(data.form, {
 		flashMessage: {
@@ -44,72 +39,82 @@
 	}
 </script>
 
+<svelte:head>
+	<title>Bored Game | Sign Up</title>
+</svelte:head>
+
 <div class="page">
-	<form method="POST" action="/auth/signup" use:enhance>
+	<form method="POST" action="/sign-up" use:enhance>
 		<div class="grid w-full max-w-sm items-center gap-2.5">
 			<h2
 				class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
 			>
 				Signup for an account
 			</h2>
-			<Label for="username">Username <small class="text-destructive">(Required)</small></Label>
+			<Label for="username">Username</Label>
 			<Input type="text" id="username" class={$errors.username && "outline outline-destructive"} name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
 			{#if $errors.username}
 				<p class="text-sm text-destructive">{$errors.username}</p>
 			{/if}
-			<Label for="password">Password <small class="text-destructive">(Required)</small></Label>
+			<Label for="password">Password</Label>
 			<Input type="password" id="password" class={$errors.password && "outline outline-destructive"} name="password" placeholder="Password" autocomplete="new-password" data-invalid={$errors.password} bind:value={$form.password} />
 			{#if $errors.password}
 				<p class="text-sm text-destructive">{$errors.password}</p>
 			{/if}
-			<Label for="confirm_password">Confirm Password <small class="text-destructive">(Required)</small></Label>
+			<Label for="confirm_password">Confirm Password</Label>
 			<Input type="password" id="confirm_password" class={$errors.confirm_password && "outline outline-destructive"} name="confirm_password" placeholder="Confirm Password" autocomplete="new-password" data-invalid={$errors.confirm_password} bind:value={$form.confirm_password} />
 			{#if $errors.confirm_password}
 				<p class="text-sm text-destructive">{$errors.confirm_password}</p>
 			{/if}
-			<Collapsible open={isOpen} class="grid w-full max-w-sm items-center gap-2.5">
+			<Collapsible.Root class="grid w-full max-w-sm items-center gap-2.5">
 				<div>
 					Optional Fields:
-					<CollapsibleTrigger>
-						<Button variant="ghost" size="sm" type="button" class="w-9 p-0">
+					<Collapsible.Trigger asChild let:builder>
+						<Button builders={[builder]} variant="ghost" size="sm" type="button" class="w-9 p-0">
 							<ChevronsUpDown class="h-4 w-4" />
 							<span class="sr-only">Toggle</span>
 						</Button>
-					</CollapsibleTrigger>
+					</Collapsible.Trigger>
 				</div>
-				<CollapsibleContent>
+				<Collapsible.Content>
+					<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
 					<Label for="email">Email</Label>
 					<Input type="email" id="email" class={$errors.email && "outline outline-destructive"} name="email" placeholder="Email" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
 					{#if $errors.email}
 						<p class="text-sm text-destructive">{$errors.email}</p>
 					{/if}
-				</CollapsibleContent>
-				<CollapsibleContent>
+					</div>
+				</Collapsible.Content>
+				<Collapsible.Content>
+					<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
 					<Label for="firstName">First Name</Label>
 					<Input type="text" id="firstName" class={$errors.firstName && "outline outline-destructive"} name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
 					{#if $errors.firstName}
 						<p class="text-sm text-destructive">{$errors.firstName}</p>
 					{/if}
-				</CollapsibleContent>
-				<CollapsibleContent>
+					</div>
+				</Collapsible.Content>
+				<Collapsible.Content>
+					<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
 					<Label for="firstName">Last Name</Label>
 					<Input type="text" id="lastName" class={$errors.firstName && "outline outline-destructive"} name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
 					{#if $errors.lastName}
 						<p class="text-sm text-destructive">{$errors.lastName}</p>
 					{/if}
-				</CollapsibleContent>
-			</Collapsible>
+					</div>
+				</Collapsible.Content>
+			</Collapsible.Root>
 			<div class="grid grid-cols-2">
 				<Button type="submit">Signup</Button>
-				<Button variant="link" href="/">or Cancel</Button>
+				<Button variant="link" class="text-secondary-foreground" href="/">or Cancel</Button>
 			</div>
 			{#if !$form.email}
-				<Alert>
-					<AlertTitle>Heads up!</AlertTitle>
-					<AlertDescription>
+				<Alert.Root>
+					<Alert.Title level="h3">Heads up!</Alert.Title>
+					<Alert.Description>
 						Without an email address, you won't be able to reset your password. Submit only if you are sure. You can always add this later.
-					</AlertDescription>
-				</Alert>
+					</Alert.Description>
+				</Alert.Root>
 			{/if}
 		</div>
   </form>
diff --git a/src/routes/admin/+layout.server.ts b/src/routes/(protected)/admin/+layout.server.ts
similarity index 100%
rename from src/routes/admin/+layout.server.ts
rename to src/routes/(protected)/admin/+layout.server.ts
diff --git a/src/routes/admin/+layout.svelte b/src/routes/(protected)/admin/+layout.svelte
similarity index 100%
rename from src/routes/admin/+layout.svelte
rename to src/routes/(protected)/admin/+layout.svelte
diff --git a/src/routes/auth/password/reset/+page.svelte b/src/routes/(protected)/admin/+page.svelte
similarity index 100%
rename from src/routes/auth/password/reset/+page.svelte
rename to src/routes/(protected)/admin/+page.svelte
diff --git a/src/routes/(protected)/collection/+page.server.ts b/src/routes/(protected)/collection/+page.server.ts
index 686fa19..cd0d789 100644
--- a/src/routes/(protected)/collection/+page.server.ts
+++ b/src/routes/(protected)/collection/+page.server.ts
@@ -9,7 +9,7 @@ import { search_schema } from '$lib/zodValidation.js';
 export const load: PageServerLoad = async ({ fetch, url, locals }) => {
 	const session = await locals.auth.validate();
 	if (!session) {
-		throw redirect(302, '/auth/signin');
+		throw redirect(302, '/login');
 	}
 
 	// console.log('locals load', locals);
@@ -107,7 +107,7 @@ export const actions = {
 		try {
 			const session = await locals.auth.validate();
 			if (!session) {
-				throw redirect(302, '/auth/signin');
+				throw redirect(302, '/login');
 			}
 
 			let game = await prisma.game.findUnique({
@@ -159,7 +159,7 @@ export const actions = {
 	create: async ({ params, locals, request }) => {
 		const session = await locals.auth.validate();
 		if (!session) {
-			throw redirect(302, '/auth/signin');
+			throw redirect(302, '/login');
 		}
 		return error(405, 'Method not allowed');
 	},
@@ -167,7 +167,7 @@ export const actions = {
 	delete: async ({ params, locals, request }) => {
 		const session = await locals.auth.validate();
 		if (!session) {
-			throw redirect(302, '/auth/signin');
+			throw redirect(302, '/login');
 		}
 		return error(405, 'Method not allowed');
 	},
@@ -179,7 +179,7 @@ export const actions = {
 		try {
 			const session = await locals.auth.validate();
 			if (!session) {
-				throw redirect(302, '/auth/signin');
+				throw redirect(302, '/login');
 			}
 
 			let game = await prisma.game.findUnique({
diff --git a/src/routes/(protected)/list/+layout.server.ts b/src/routes/(protected)/list/+layout.server.ts
index bb08847..4186bb7 100644
--- a/src/routes/(protected)/list/+layout.server.ts
+++ b/src/routes/(protected)/list/+layout.server.ts
@@ -4,7 +4,7 @@ import { redirect } from '@sveltejs/kit';
 export async function load({ params, locals }) {
 	const session = await locals.auth.validate();
 	if (!session) {
-		throw redirect(302, '/auth/signin');
+		throw redirect(302, '/login');
 	}
 
 	try {
diff --git a/src/routes/(protected)/list/[id]/+page.server.ts b/src/routes/(protected)/list/[id]/+page.server.ts
index 6c8b491..6ed96db 100644
--- a/src/routes/(protected)/list/[id]/+page.server.ts
+++ b/src/routes/(protected)/list/[id]/+page.server.ts
@@ -6,7 +6,7 @@ import { list_game_request_schema } from '$lib/zodValidation';
 export async function load({ params, locals }) {
 	const session = await locals.auth.validate();
 	if (!session) {
-		throw redirect(302, '/auth/signin');
+		throw redirect(302, '/login');
 	}
 
 	try {
@@ -49,7 +49,7 @@ export const actions = {
 
 		const session = await locals.auth.validate();
 		if (!session) {
-			throw redirect(302, '/auth/signin');
+			throw redirect(302, '/login');
 		}
 
 		let game = await prisma.game.findUnique({
@@ -106,21 +106,21 @@ export const actions = {
 	create: async ({ params, locals, request }) => {
 		const session = await locals.auth.validate();
 		if (!session) {
-			throw redirect(302, '/auth/signin');
+			throw redirect(302, '/login');
 		}
 	},
 	// Delete a wishlist
 	delete: async ({ params, locals, request }) => {
 		const session = await locals.auth.validate();
 		if (!session) {
-			throw redirect(302, '/auth/signin');
+			throw redirect(302, '/login');
 		}
 	},
 	// Remove game from a wishlist
 	remove: async ({ params, locals, request }) => {
 		const session = await locals.auth.validate();
 		if (!session) {
-			throw redirect(302, '/auth/signin');
+			throw redirect(302, '/login');
 		}
 	}
 };
diff --git a/src/routes/(protected)/profile/+page.server.ts b/src/routes/(protected)/profile/+page.server.ts
index 098ca15..ee83e21 100644
--- a/src/routes/(protected)/profile/+page.server.ts
+++ b/src/routes/(protected)/profile/+page.server.ts
@@ -17,7 +17,7 @@ export const load = async (event) => {
 	const session = await event.locals.auth.validate();
 
 	if (!session) {
-		throw redirect(302, '/auth/signin');
+		throw redirect(302, '/login');
 	}
 
 	const { user } = session;
@@ -48,7 +48,7 @@ export const actions = {
 			const session = await event.locals.auth.validate();
 
 			if (!session) {
-				throw redirect(302, '/auth/signin');
+				throw redirect(302, '/login');
 			}
 
 			const user = session.user;
diff --git a/src/routes/(protected)/profile/+page.svelte b/src/routes/(protected)/profile/+page.svelte
index e1aa396..c6ffc48 100644
--- a/src/routes/(protected)/profile/+page.svelte
+++ b/src/routes/(protected)/profile/+page.svelte
@@ -5,7 +5,7 @@
 	import { AlertTriangle } from 'lucide-svelte';
 	import Label from '$components/ui/label/Label.svelte';
 	import Input from '$components/ui/input/Input.svelte';
-	import Button from '$components/ui/button/Button.svelte';
+	import { Button } from '$components/ui/button';
 	export let data;
 
 	const profileSchema = userSchema.pick({
@@ -63,8 +63,8 @@
 		{/if}
 	</div>
 	<div class="mt-6">
-		<Button variant="link" href="/auth/password/reset">Change Password</Button>
-		<!-- <a href="/auth/password/reset">Change Password</a> -->
+		<Button variant="link" href="/password/reset">Change Password</Button>
+		<!-- <a href="/password/reset">Change Password</a> -->
 	</div>
 
 	<div class="mt-6">
diff --git a/src/routes/(protected)/wishlist/+page.server.ts b/src/routes/(protected)/wishlist/+page.server.ts
index 18befff..0d0ba86 100644
--- a/src/routes/(protected)/wishlist/+page.server.ts
+++ b/src/routes/(protected)/wishlist/+page.server.ts
@@ -7,7 +7,7 @@ import { modifyListGameSchema } from '$lib/config/zod-schemas.js';
 export async function load({ params, locals }) {
 	const session = await locals.auth.validate();
 	if (!session) {
-		throw redirect(302, '/auth/signin');
+		throw redirect(302, '/login');
 	}
 
 	console.log('Wishlist load User id', session.user);
@@ -56,7 +56,7 @@ export const actions = {
 		try {
 			const session = await locals.auth.validate();
 			if (!session) {
-				throw redirect(302, '/auth/signin');
+				throw redirect(302, '/login');
 			}
 
 			let game = await prisma.game.findUnique({
@@ -107,7 +107,7 @@ export const actions = {
 	create: async ({ params, locals, request }) => {
 		const session = await locals.auth.validate();
 		if (!session) {
-			throw redirect(302, '/auth/signin');
+			throw redirect(302, '/login');
 		}
 		return error(405, 'Method not allowed');
 	},
@@ -115,7 +115,7 @@ export const actions = {
 	delete: async ({ params, locals, request }) => {
 		const session = await locals.auth.validate();
 		if (!session) {
-			throw redirect(302, '/auth/signin');
+			throw redirect(302, '/login');
 		}
 		return error(405, 'Method not allowed');
 	},
@@ -127,7 +127,7 @@ export const actions = {
 		try {
 			const session = await locals.auth.validate();
 			if (!session) {
-				throw redirect(302, '/auth/signin');
+				throw redirect(302, '/login');
 			}
 
 			let game = await prisma.game.findUnique({
diff --git a/src/routes/game/[id]/+page.svelte b/src/routes/game/[id]/+page.svelte
index f1fe7c7..07d1ea6 100644
--- a/src/routes/game/[id]/+page.svelte
+++ b/src/routes/game/[id]/+page.svelte
@@ -66,7 +66,7 @@
 			<AddToList {in_collection} {in_wishlist} game_id={game.id} {wishlist} {collection} />
 		{:else}
 			<span>
-				<Button href="/auth/signup">Sign Up</Button> or <Button href="/auth/signin">Sign In</Button> to add to a list.
+				<Button href="/sign-up">Sign Up</Button> or <Button href="/login">Sign In</Button> to add to a list.
 			</span>
 		{/if}
 	</div>
diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
index 68a8be0..814a3ea 100644
--- a/src/routes/search/+page.svelte
+++ b/src/routes/search/+page.svelte
@@ -5,11 +5,6 @@
 
 	export let data;
 	console.log("search page data", data);
-
-	// $: if (data?.searchData?.games) {
-	// 	gameStore.removeAll();
-	// 	gameStore.addAll(data?.searchData?.games);
-	// }
 </script>
 
 <div class="game-search">